/* =====================================================================
   Helpdesk Supermercado — Sistema de diseño
   Identidad: "consola de operaciones" — limpia, legible, táctil.
   Sin fuentes externas (funciona offline por VPN). Tipografía de sistema.
   ===================================================================== */

:root{
  --ink:        #0f172a;   /* barra lateral / superficies oscuras */
  --ink-2:      #1e293b;
  --ink-3:      #334155;
  --bg:         #eef2f6;   /* fondo de contenido */
  --surface:    #ffffff;
  --line:       #e2e8f0;
  --text:       #1f2a3d;
  --muted:      #64748b;
  --brand:      #4f46e5;   /* acción principal (índigo) */
  --brand-600:  #4338ca;
  --brand-50:   #eef2ff;
  --ok:         #10b981;
  --warn:       #f59e0b;
  --bad:        #ef4444;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --rail:       264px;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* ---------- Marca ---------- */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.2px}
.brand .mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#7c73ff);color:#fff;font-size:1.05rem;
  box-shadow:0 4px 12px rgba(79,70,229,.45);
}
.brand .name{font-size:1.02rem;line-height:1.1}
.brand .name small{display:block;font-weight:500;font-size:.7rem;color:#94a3b8;letter-spacing:.6px;text-transform:uppercase}

/* ---------- Estructura ---------- */
.app{display:flex;min-height:100vh}
.rail{
  width:var(--rail);flex:0 0 var(--rail);background:var(--ink);color:#cbd5e1;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.rail .rail-head{padding:1.1rem 1.1rem .4rem}
.rail .rail-nav{padding:.5rem .6rem;overflow-y:auto;flex:1}
.rail .rail-foot{padding:.8rem 1rem;border-top:1px solid rgba(255,255,255,.07);font-size:.78rem;color:#64748b}

.nav-group{margin:.9rem 0 .25rem;padding:0 .6rem;font-size:.68rem;letter-spacing:.9px;
  text-transform:uppercase;color:#5b6b85;font-weight:700}
.nav-item{
  display:flex;align-items:center;gap:.7rem;min-height:42px;padding:.45rem .7rem;margin:.12rem 0;
  border-radius:10px;color:#cbd5e1;text-decoration:none;font-weight:500;font-size:.92rem;
  transition:background .15s,color .15s;
}
.nav-item i{font-size:1.1rem;width:1.3rem;text-align:center;color:#94a3b8}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.4)}
.nav-item.active i{color:#fff}
.nav-item.disabled{opacity:.55;cursor:default}
.nav-item.disabled:hover{background:transparent;color:#cbd5e1}
.nav-item .soon{margin-left:auto;font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;
  background:rgba(148,163,184,.18);color:#94a3b8;padding:.12rem .4rem;border-radius:6px}

/* ---------- Contenido ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:62px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:1rem;padding:0 1.2rem;position:sticky;top:0;z-index:20;
}
.topbar .page-title{font-weight:600;font-size:1.05rem;color:var(--ink-2)}
.topbar .spacer{flex:1}
.icon-btn{
  width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-2);font-size:1.15rem;cursor:pointer;position:relative;
}
.icon-btn:hover{background:var(--bg)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
.hamburger{display:none}

.usermenu .avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  background:var(--brand-50);color:var(--brand-600);
}

.content{padding:1.4rem;max-width:1180px;width:100%}

/* ---------- Tarjetas ---------- */
.card2{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card2 .card2-head{padding:1rem 1.2rem;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;gap:.5rem}
.card2 .card2-body{padding:1.2rem}

.stat{display:flex;flex-direction:column;gap:.15rem}
.stat .num{font-size:1.8rem;font-weight:700;color:var(--ink-2);line-height:1}
.stat .lbl{color:var(--muted);font-size:.82rem}

/* ---------- Píldoras / etiquetas ---------- */
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .6rem;border-radius:999px;
  font-size:.78rem;font-weight:600;border:1px solid transparent}
.pill.ok{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.pill.no{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.pill.role{background:var(--brand-50);color:var(--brand-600);border-color:#c7d2fe}
.pill.scope{background:#f1f5f9;color:#334155;border-color:#e2e8f0}

/* matriz de permisos */
.perm{display:flex;align-items:center;gap:.55rem;padding:.4rem .2rem;border-bottom:1px dashed var(--line);font-size:.9rem}
.perm:last-child{border-bottom:0}
.perm .badge-ck{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:.85rem;flex:0 0 22px}
.perm .badge-ck.y{background:#ecfdf5;color:#059669}
.perm .badge-ck.n{background:#f8fafc;color:#cbd5e1}
.perm.off{color:var(--muted)}
.mod-title{font-size:.72rem;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:.2rem 0 .4rem}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1.2rem;
  background:radial-gradient(1200px 600px at 100% -10%,#1e293b, #0f172a)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border-radius:18px;
  box-shadow:0 24px 60px rgba(2,6,23,.45);overflow:hidden}
.auth-card .auth-head{padding:1.6rem 1.6rem .4rem}
.auth-card .auth-body{padding:1rem 1.6rem 1.7rem}
.auth-card .field{margin-bottom:.9rem}
.auth-card label{font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:.3rem;display:block}

/* ---------- Formularios / botones (encima de Bootstrap) ---------- */
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn-brand:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
:focus-visible{outline:3px solid rgba(79,70,229,.4);outline-offset:2px}

/* ---------- Responsivo ---------- */
@media (max-width: 900px){
  .rail{position:fixed;left:0;top:0;z-index:1045;transform:translateX(-100%);transition:transform .25s}
  .rail.open{transform:translateX(0)}
  .hamburger{display:grid}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:1040}
  .backdrop.show{display:block}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ===================== Tickets (Fase 4a) ===================== */
.badge-dot{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; color:var(--text);
  padding:.15rem .55rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); white-space:nowrap;
}
.badge-dot::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--c, var(--muted)); flex:0 0 9px;
}

.comment{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.65rem .8rem; background:var(--surface);
}
.comment-internal{
  background:#fff8e1; border-color:#f3e1a6;
}

.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{
  content:""; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:var(--line);
}
.timeline li{ position:relative; padding:0 0 .9rem 1.4rem; }
.timeline li::before{
  content:""; position:absolute; left:0; top:4px; width:14px; height:14px;
  border-radius:50%; background:#fff; border:3px solid var(--brand);
}
.timeline li:last-child{ padding-bottom:0; }

dl.kv{ display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:0; }
dl.kv dt{ color:var(--muted); font-weight:500; font-size:.82rem; }
dl.kv dd{ margin:0; font-size:.86rem; text-align:right; }

/* ===================== Tickets 4b (SLA/adjuntos/CSAT) ===================== */
.adj-chip{
  display:inline-flex; align-items:center; gap:.4rem; max-width:240px;
  border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem;
  background:var(--surface); text-decoration:none; color:var(--text); font-size:.8rem;
}
.adj-chip:hover{ border-color:var(--brand); }
.adj-chip .adj-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }

.stars i{ color:#f5b301; }
.stars-input{ display:flex; gap:.25rem; font-size:1.4rem; cursor:pointer; }
.stars-input label{ color:#f5b301; line-height:1; }
.stars-input label i{ pointer-events:none; }

/* ===================== Dashboard / Notificaciones (Fase 5) ===================== */
.kpi .card2-body{ position:relative; padding:1rem 1.1rem; }
.kpi .kpi-ico{ position:absolute; top:.8rem; right:.9rem; font-size:1.1rem; color:var(--muted); opacity:.5; }
.kpi .kpi-num{ font-size:1.9rem; font-weight:700; line-height:1; color:var(--ink); }
.kpi .kpi-lbl{ font-size:.78rem; color:var(--muted); margin-top:.25rem; }
.kpi.kpi-bad .kpi-num{ color:var(--bad); }
.kpi.kpi-ok  .kpi-num{ color:var(--ok); }

.notif-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--bad); color:#fff; border-radius:999px; font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.notif-menu{ width:320px; max-height:420px; overflow:auto; }
.notif-unread{ background:rgba(79,70,229,.06); }

/* ===================== Logo (Fase 6) ===================== */
.logo-preview{
  width:120px; height:64px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; background:var(--surface); overflow:hidden;
}
.logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ===================== Logo en marca (mejorado) ===================== */
.brand-logo-box{
  background:transparent; padding:0; box-shadow:none;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.brand-logo{ height:34px; max-width:150px; width:auto; object-fit:contain; display:block; }

/* Cuando hay logo: columna centrada, logo grande y el texto debajo */
.brand-haslogo{ flex-direction:column; align-items:center; text-align:center; gap:.6rem; width:100%; }
.brand-haslogo .brand-logo-box{ padding:0; }
.brand-haslogo .brand-logo{ height:58px; max-width:190px; }
.brand-haslogo .name{ text-align:center; }

.topbar-logo-box{ display:inline-flex; align-items:center; margin-left:.25rem; }
.topbar-logo{ height:30px; max-width:140px; object-fit:contain; display:block; }
.topbar-brand{ font-weight:700; color:var(--ink); margin-left:.25rem; }

/* Logo en el login */
.auth-head .brand-logo-box{ margin:0 auto; padding:0; }
.auth-head .brand-logo{ height:54px; max-width:220px; }

/* Enlace del pie de la barra lateral */
.rail-foot-link{ color:#cbd5e1; text-decoration:none; }
.rail-foot-link:hover{ color:#fff; text-decoration:underline; }

/* ===================== Heatmap día/hora (dashboard) ===================== */
.heatmap{ overflow-x:auto; }
.hm-grid{ display:grid; grid-template-columns:38px repeat(24, minmax(14px,1fr)); gap:2px; min-width:560px; }
.hm-corner{ }
.hm-h{ font-size:.6rem; color:var(--muted); text-align:center; line-height:1; }
.hm-d{ font-size:.72rem; color:var(--muted); display:flex; align-items:center; }
.hm-cell{ height:16px; border-radius:3px; background-color:rgba(79,70,229, var(--i,0)); border:1px solid #eef2f7; }
.heatmap-leyenda{ display:flex; align-items:center; gap:2px; }
.heatmap-leyenda .hm-cell{ display:inline-block; width:14px; height:14px; }