/* Servicio al Cliente — Pepe Abad. Mismos tokens e identidad que el IT Help Desk. */
:root {
  color-scheme: light;
  --plane:#f9f9f7; --surface-1:#fcfcfb; --surface-2:#f2f2ee;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#6f6d68;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10); --border-strong:rgba(11,11,11,.18);
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --good:#0ca30c; --good-text:#006300; --warning:#fab219; --serious:#ec835a; --critical:#b3252b;
  --marca:#eb1c24; --marca-btn:#d6151c;
  --seq-250:#86b6ef; --seq-450:#2a78d6; --seq-600:#184f95;
  --radius:10px; --shadow:0 1px 2px rgba(11,11,11,.05), 0 4px 14px rgba(11,11,11,.05);
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --lateral:236px; --pad-x:clamp(1rem,.35rem + 1.9vw,2.25rem); --pad-y:clamp(1.1rem,.8rem + .9vw,1.75rem);
  --barra-inf:60px; --barra-sup:52px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:#0d0d0d; --surface-1:#1a1a19; --surface-2:#232322; --text-primary:#fff; --text-secondary:#c3c2b7; --text-muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
    --good-text:#0ca30c; --critical:#e05a5f; --marca:#f04046; --seq-250:#184f95; --seq-450:#3987e5; --seq-600:#86b6ef;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0d0d0d; --surface-1:#1a1a19; --surface-2:#232322; --text-primary:#fff; --text-secondary:#c3c2b7; --text-muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
  --good-text:#0ca30c; --critical:#e05a5f; --marca:#f04046; --seq-250:#184f95; --seq-450:#3987e5; --seq-600:#86b6ef;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; font-family:var(--sans); background:var(--plane); color:var(--text-primary); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; overflow-wrap:break-word; }
a { color: var(--marca-btn); }
h1,h2,h3 { margin:0 0 .5rem; line-height:1.25; font-weight:620; letter-spacing:-.01em; }
h1 { font-size:clamp(1.28rem,1.12rem + .5vw,1.5rem); } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
p { margin:0 0 .75rem; }
:focus-visible { outline:2px solid var(--marca); outline-offset:2px; border-radius:4px; }
.oculto { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- armazón ---------- */
.app { display:grid; grid-template-columns:var(--lateral) minmax(0,1fr); min-height:100vh; }
.barra-lateral { background:var(--surface-1); border-right:1px solid var(--border); display:flex; flex-direction:column;
  padding:1rem .75rem; gap:.2rem; position:sticky; top:0; height:100vh; overflow-y:auto; }
.marca { display:flex; align-items:center; gap:.6rem; padding:.25rem .5rem 1rem; }
.marca-logo { height:26px; width:auto; }
.marca-icono { width:30px; height:30px; border-radius:8px; background:var(--marca); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none; }
.marca-txt { font-weight:650; font-size:.95rem; letter-spacing:-.015em; }
.marca-sub { font-size:.72rem; color:var(--text-muted); }
.nav-item { display:flex; align-items:center; gap:.6rem; padding:.48rem .6rem; border-radius:8px; color:var(--text-secondary);
  text-decoration:none; font-size:.9rem; font-weight:500; border:0; background:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.nav-item:hover { background:var(--surface-2); color:var(--text-primary); }
.nav-item.activo { background:var(--surface-2); color:var(--text-primary); font-weight:600; box-shadow:inset 2px 0 0 var(--marca); }
.ico { width:1em; height:1em; flex:none; vertical-align:-.12em; }
.nav-item .ico { width:17px; height:17px; opacity:.85; }
.nav-item .cuenta { margin-left:auto; font-size:.72rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.nav-grupo { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:1rem .6rem .3rem; font-weight:600; }
.pie-lateral { margin-top:auto; border-top:1px solid var(--border); padding-top:.6rem; }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--surface-2); color:var(--text-secondary); display:grid; place-items:center;
  font-size:.72rem; font-weight:650; flex:none; border:1px solid var(--border); }
.pie-lateral .nom { font-size:.82rem; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pie-lateral .rol { font-size:.7rem; color:var(--text-muted); }
.contenido { padding:var(--pad-y) var(--pad-x) 3rem; max-width:1320px; width:100%; margin-inline:auto; min-width:0; }
.encabezado { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.encabezado .crece { flex:1 1 320px; }
.sub { color:var(--text-secondary); font-size:.88rem; margin:0; }

/* ---------- componentes ---------- */
.tarjeta { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.pad { padding:1.1rem 1.2rem; }
.rejilla { display:grid; gap:1rem; }
.r4 { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
.r2 { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.mb { margin-bottom:1rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.5rem .9rem; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text-primary); font:inherit; font-size:.88rem;
  font-weight:550; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--surface-2); }
.btn-primario { background:var(--marca-btn); border-color:var(--marca-btn); color:#fff; }
.btn-primario:hover { background:var(--marca-btn); filter:brightness(1.1); }
.btn-peligro { color:var(--critical); border-color:var(--critical); }
.btn-sm { padding:.3rem .6rem; font-size:.8rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

label { display:block; font-size:.82rem; font-weight:600; color:var(--text-secondary); margin-bottom:.3rem; }
input, select, textarea { width:100%; padding:.5rem .65rem; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface-1); color:var(--text-primary); font:inherit; font-size:.9rem; }
textarea { min-height:96px; resize:vertical; }
input[type=checkbox], input[type=radio] { width:auto; }
.campo { margin-bottom:.9rem; }
.fila { display:flex; gap:.75rem; flex-wrap:wrap; }
.fila > * { flex:1 1 180px; }
.ayuda { font-size:.76rem; color:var(--text-muted); margin-top:.25rem; }
.chk { display:flex; align-items:center; gap:.5rem; font-weight:500; color:var(--text-primary); }
.req::after { content:" *"; color:var(--marca-btn); }

.alerta { padding:.6rem .8rem; border-radius:8px; font-size:.86rem; margin-bottom:.9rem; border:1px solid; display:flex; gap:.5rem; }
.alerta-error { color:var(--critical); border-color:var(--critical); background:color-mix(in srgb,var(--critical) 8%,transparent); }
.alerta-ok { color:var(--good-text); border-color:var(--good); background:color-mix(in srgb,var(--good) 10%,transparent); }

.etq { display:inline-flex; align-items:center; gap:.32rem; padding:.12rem .5rem; border-radius:999px; font-size:.74rem; font-weight:600;
  border:1px solid var(--border-strong); color:var(--text-secondary); white-space:nowrap; background:var(--surface-1); }
.etq .punto { width:7px; height:7px; border-radius:50%; background:currentColor; }
.etq-abierto { color:var(--series-1); border-color:color-mix(in srgb,var(--series-1) 45%,transparent); }
.etq-en_proceso { color:var(--series-4); border-color:color-mix(in srgb,var(--series-4) 55%,transparent); }
.etq-en_espera, .etq-cerrado, .etq-baja { color:var(--text-muted); }
.etq-resuelto, .etq-sla-cumplido { color:var(--good-text); border-color:color-mix(in srgb,var(--good) 45%,transparent); }
.etq-critica, .etq-sla-vencido, .etq-sla-incumplido { color:var(--critical); border-color:color-mix(in srgb,var(--critical) 50%,transparent); }
.etq-alta, .etq-sla-por_vencer { color:var(--serious); border-color:color-mix(in srgb,var(--serious) 60%,transparent); }
.etq-sla-ok, .etq-sla-sin_sla { color:var(--text-muted); }

.tabla-env { overflow-x:auto; max-width:100%; }
table.tabla { width:100%; border-collapse:collapse; font-size:.87rem; }
table.tabla th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);
  font-weight:650; padding:.55rem .7rem; border-bottom:1px solid var(--border); white-space:nowrap; }
table.tabla td { padding:.6rem .7rem; border-bottom:1px solid var(--grid); vertical-align:middle; }
table.tabla tr:last-child td { border-bottom:0; }
table.tabla tbody tr.clic { cursor:pointer; }
table.tabla tbody tr.clic:hover { background:var(--surface-2); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.cod { font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.tit { font-weight:560; }
.meta { font-size:.76rem; color:var(--text-muted); }
.vacio { text-align:center; padding:2.2rem 1rem; color:var(--text-muted); font-size:.9rem; }

.filtros { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1rem; }
.filtros .campo { margin:0; min-width:140px; flex:1 1 140px; }
.filtros .ancho { flex:2 1 240px; }

.tile { padding:1rem 1.1rem; }
.tile .k { font-size:.78rem; color:var(--text-secondary); font-weight:600; }
.tile .v { font-size:1.65rem; font-weight:660; letter-spacing:-.03em; margin-top:.3rem; line-height:1.1; }
.tile .n { font-size:.76rem; color:var(--text-muted); margin-top:.35rem; }
.v.malo { color:var(--critical); } .v.bueno { color:var(--good-text); }

/* barra dentro de una celda: volumen relativo */
.barra-celda { display:flex; align-items:center; gap:.5rem; min-width:150px; }
.barra-celda .pista { flex:1; height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.barra-celda i { display:block; height:100%; border-radius:999px; background:var(--seq-450); }
.punto-color { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:.4rem; vertical-align:0; }

/* ---------- caso ---------- */
.detalle { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.25rem; align-items:start; }
.lateral-caso { display:grid; gap:1rem; position:sticky; top:1rem; }
.dato { display:flex; justify-content:space-between; gap:.75rem; padding:.4rem 0; border-bottom:1px solid var(--grid); font-size:.84rem; }
.dato:last-child { border-bottom:0; }
.dato .k { color:var(--text-muted); } .dato .v { font-weight:560; text-align:right; }
.linea { position:relative; margin:0; padding:0 0 0 1.4rem; list-style:none; }
.linea::before { content:""; position:absolute; left:.42rem; top:.4rem; bottom:.4rem; width:2px; background:var(--grid); }
.linea li { position:relative; margin-bottom:.9rem; }
.linea li::before { content:""; position:absolute; left:-1.18rem; top:.45rem; width:10px; height:10px; border-radius:50%;
  background:var(--surface-1); border:2px solid var(--axis); }
.linea li.contacto::before { border-color:var(--good); background:var(--good); }
.linea li.nota::before { border-color:var(--series-1); }
.linea li.cambio::before { width:8px; height:8px; left:-1.1rem; top:.5rem; }
.linea li.resolucion::before { border-color:var(--good); background:var(--surface-1); width:12px; height:12px; left:-1.25rem; }
.burbuja { border:1px solid var(--border); border-radius:var(--radius); padding:.7rem .85rem; background:var(--surface-1); }
.burbuja.contacto { border-color:color-mix(in srgb,var(--good) 45%,transparent); background:color-mix(in srgb,var(--good) 5%,var(--surface-1)); }
.cab { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.8rem; color:var(--text-muted); margin-bottom:.3rem; }
.cab .autor { font-weight:650; color:var(--text-primary); font-size:.85rem; }
.cuerpo { white-space:pre-wrap; font-size:.9rem; }
.cambio-txt { font-size:.82rem; color:var(--text-secondary); }
.tipo-toggle { display:inline-flex; background:var(--surface-2); border-radius:9px; padding:.2rem; gap:.2rem; margin-bottom:.7rem; flex-wrap:wrap; }
.tipo-toggle label { margin:0; padding:.35rem .7rem; border-radius:7px; cursor:pointer; font-size:.84rem; font-weight:560; color:var(--text-secondary); }
.tipo-toggle input { position:absolute; opacity:0; width:0; height:0; }
.tipo-toggle label:has(input:checked) { background:var(--surface-1); color:var(--text-primary); box-shadow:var(--shadow); }
.tipo-toggle label:has(input:focus-visible) { outline:2px solid var(--marca); }
.resuelta { border-left:3px solid var(--good); }
.pendiente-res { border-left:3px solid var(--warning); }
.adjuntos a { display:inline-flex; gap:.35rem; align-items:center; padding:.25rem .5rem; border:1px solid var(--border-strong);
  border-radius:8px; font-size:.8rem; text-decoration:none; color:var(--text-primary); margin:.4rem .3rem 0 0; }
.adjuntos img { width:96px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--border); margin:.4rem .3rem 0 0; }

/* buscador de clientes */
.resultados { border:1px solid var(--border); border-radius:8px; margin-top:.4rem; max-height:280px; overflow-y:auto; }
.resultados:empty { display:none; }
.res-item { display:flex; justify-content:space-between; gap:.6rem; align-items:center; padding:.55rem .7rem; border:0;
  border-bottom:1px solid var(--grid); width:100%; background:var(--surface-1); text-align:left; cursor:pointer; font:inherit; color:inherit; }
.res-item:last-child { border-bottom:0; }
.res-item:hover, .res-item:focus-visible { background:var(--surface-2); }
.cliente-elegido { display:flex; gap:.8rem; align-items:center; padding:.7rem .85rem; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface-2); }
.cliente-elegido .crece { flex:1; min-width:0; }
.seccion { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:650; margin:1.2rem 0 .6rem; }
.seccion:first-child { margin-top:0; }

/* estrellas */
.estrellas { border:0; padding:0; margin:0; display:flex; align-items:center; gap:.1rem; flex-wrap:wrap; }
.estrella { cursor:pointer; margin:0; font-size:1.9rem; line-height:1; color:var(--border-strong); padding:.05rem; }
.estrella input { position:absolute; opacity:0; width:0; height:0; }
.estrella.llena { color:var(--warning); }
.estrella:has(input:focus-visible) { outline:2px solid var(--marca); border-radius:6px; }
.fijas { color:var(--warning); letter-spacing:.04em; white-space:nowrap; }

/* gráficas */
.gr-tit { font-size:.95rem; font-weight:620; margin-bottom:.15rem; }
.gr-sub { font-size:.78rem; color:var(--text-muted); margin-bottom:.6rem; }
.leyenda { display:flex; gap:.9rem; flex-wrap:wrap; margin:.1rem 0 .5rem; font-size:.78rem; color:var(--text-secondary); }
.leyenda i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:.35rem; vertical-align:-1px; }
svg.grafica { display:block; width:100%; height:auto; overflow:visible; }
.barras-v { display:flex; align-items:flex-end; gap:3px; height:130px; padding-top:.5rem; }
.barras-v div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.barras-v b { display:block; width:100%; background:var(--seq-450); border-radius:3px 3px 0 0; min-height:1px; }
.barras-v span { font-size:.66rem; color:var(--text-muted); margin-top:.25rem; white-space:nowrap; }
.tooltip { position:fixed; z-index:90; pointer-events:none; background:var(--surface-1); border:1px solid var(--border-strong);
  border-radius:8px; padding:.4rem .6rem; font-size:.78rem; box-shadow:var(--shadow); opacity:0; transition:opacity .1s; }

/* modal */
.modal-capa { position:fixed; inset:0; z-index:90; background:rgba(8,8,8,.55); display:grid; place-items:center; padding:1rem; }
.modal { background:var(--surface-1); border:1px solid var(--border-strong); border-radius:12px; padding:1.1rem 1.2rem; width:100%; max-width:30rem; }
.modal-botones { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.9rem; flex-wrap:wrap; }

/* acceso */
.acceso { min-height:100vh; display:grid; place-items:center; padding:1.5rem; position:relative; overflow:hidden;
  background:radial-gradient(60vmax 60vmax at 10% -10%, color-mix(in srgb,var(--marca) 16%,transparent), transparent 60%),
             radial-gradient(50vmax 50vmax at 110% 110%, color-mix(in srgb,#ff8a5c 14%,transparent), transparent 62%), var(--plane); }
.acceso-caja { width:100%; max-width:400px; }
.btn-ms { width:100%; padding:.65rem .9rem; font-size:.92rem; font-weight:600; }
.separador { display:flex; align-items:center; gap:.7rem; margin:1.1rem 0 .9rem; color:var(--text-muted); font-size:.74rem; }
.separador::before, .separador::after { content:""; flex:1; height:1px; background:var(--grid); }
.auto { display:inline-flex; font-size:.72rem; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:0 .45rem; margin-left:.4rem; vertical-align:middle; }

@media (max-width:980px) { .detalle { grid-template-columns:minmax(0,1fr); } .lateral-caso { position:static; } }

/* celular: marca arriba, navegación abajo, tabla de casos como tarjetas */
@media (max-width:700px) {
  .app { display:block; padding-top:var(--barra-sup); padding-bottom:calc(var(--barra-inf) + env(safe-area-inset-bottom,0px)); }
  .barra-lateral { position:fixed; left:0; right:0; bottom:0; top:auto; height:auto; z-index:50; flex-direction:row; gap:0;
    padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom,0px)); border:0; border-top:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .barra-lateral .marca { position:fixed; top:0; left:0; right:0; height:var(--barra-sup); padding:0 var(--pad-x); margin:0;
    background:var(--surface-1); border-bottom:1px solid var(--border); z-index:45; }
  .nav-grupo { display:none; }
  .nav-item { flex-direction:column; gap:.15rem; width:auto; flex:0 0 auto; min-width:62px; padding:.35rem .5rem; font-size:.64rem;
    font-weight:600; text-align:center; white-space:nowrap; }
  .nav-item .ico { width:21px; height:21px; }
  .nav-item .cuenta { display:none; }
  .nav-item.activo { background:none; box-shadow:none; color:var(--marca); }
  .pie-lateral { display:contents; }
  .pie-lateral .nav-item > span:not(.avatar) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .contenido { padding:1rem var(--pad-x) 1.5rem; }
  .encabezado > .btn-primario { flex:1 1 100%; }
  .fila > * { flex:1 1 100%; }
  .filtros .campo { flex:1 1 45%; min-width:0; }
  .filtros .ancho { flex:1 1 100%; }
  table.casos thead { display:none; }
  table.casos, table.casos tbody { display:block; }
  table.casos tbody tr { display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; border:1px solid var(--border);
    border-radius:var(--radius); padding:.75rem .85rem; margin-bottom:.5rem; background:var(--surface-1); }
  table.casos td { display:block; border:0; padding:0; }
  td.c-asunto, td.c-cliente { flex:1 1 100%; }
  td.c-creado { margin-left:auto; }
  .tarjeta:has(table.casos) { background:none; border:0; box-shadow:none; }
}
@media (max-width:980px), (pointer:coarse) {
  input, select, textarea { font-size:16px; }
  input:not([type=checkbox]):not([type=radio]), select, .btn { min-height:44px; }
  .nav-item { min-height:44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media print { .barra-lateral, .filtros, .btn { display:none !important; } .app { display:block; } }