@import url('fonts/fuentes.css');

/* =============================================================================
   GlobalSAP Soporte — sistema de diseño
   Marca: azul marino #1F2D5C, celeste #2397D4, gris #6D6E70.
   Sin bordes ni líneas divisorias: la jerarquía se marca con sombras, fondos y espacio.
   Móvil primero: 375 px → 768 px (tableta) → 1100 px (computadora).
   ============================================================================= */
:root {
  --campo:#E2E8F2; --campo-foco:#D8E1EE; --campo-sombra:inset 0 1px 3px rgba(27,36,69,.16), inset 0 -1px 0 rgba(27,36,69,.10);
  --bg:#F1F4F9; --surface:#FFFFFF; --surface-2:#EDF1F7; --surface-3:#E3E9F2; --zebra:#F7F9FC;
  --ink:#1B2445; --muted:#5F6878; --navy:#1F2D5C; --navy-2:#2A3F7E;
  --sky:#1E86BF; --sky-brand:#2397D4; --sky-soft:#E3F1FA;
  --primary:#1F2D5C; --primary-ink:#FFFFFF; --soft-btn:#E3F1FA; --soft-btn-ink:#1F2D5C;
  --nav-bg:#1F2D5C; --nav-ink:#C6D0EA; --nav-hover:rgba(255,255,255,.08); --nav-active:#2397D4; --nav-active-ink:#FFFFFF;
  --s1:#2397D4; --s2:#34479E; --grid:#E4E9F1;
  --ok:#1C7A50; --ok-soft:#DFF2E8; --warn:#9A6100; --warn-soft:#FBF0D8; --crit:#B3362A; --crit-soft:#FBE4E0;
  --shadow-sm:0 1px 2px rgba(31,45,92,.06);
  --shadow:0 1px 2px rgba(31,45,92,.05),0 6px 20px rgba(31,45,92,.07);
  --shadow-hover:0 2px 4px rgba(31,45,92,.06),0 12px 28px rgba(31,45,92,.12);
  --shadow-lg:0 24px 60px rgba(12,22,60,.28);
  --r:14px; --r-sm:10px;
  --t-rapida:150ms; --t:220ms; --curva:cubic-bezier(.2,.7,.2,1);
  --lateral:252px; --rail:88px; --inferior:64px;
  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --campo:#27335A; --campo-foco:#2E3B66; --campo-sombra:inset 0 1px 3px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.06);
    --bg:#0B101E; --surface:#141B2E; --surface-2:#1C2540; --surface-3:#243050; --zebra:#172038;
    --ink:#E6EBF6; --muted:#9CA6BC; --navy:#AFC0F0; --navy-2:#2A3F7E;
    --sky:#52B4EA; --sky-soft:#12304A;
    --primary:#2F9FDA; --primary-ink:#06182A; --soft-btn:#1C2E4C; --soft-btn-ink:#CFE6F7;
    --nav-bg:#0A0F1C; --nav-ink:#AAB5CF; --nav-active:#2F9FDA; --nav-active-ink:#06182A;
    --s1:#339ED6; --s2:#5A5ECF; --grid:#243050;
    --ok:#5CC592; --ok-soft:#133226; --warn:#E3AE4C; --warn-soft:#382A10; --crit:#F08070; --crit-soft:#3C1C18;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --shadow-hover:0 2px 4px rgba(0,0,0,.35),0 12px 28px rgba(0,0,0,.4); --shadow-lg:0 24px 60px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3,.kpi .v { font-family:var(--display); color:var(--ink); }
a { color:var(--sky); }
img { max-width:100%; }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--sky-brand) !important; border-radius:6px; }
.muted { color:var(--muted); } .small { font-size:13.5px; }
.mono, .tid { font-family:var(--mono); }
.ico { flex:none; vertical-align:middle; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

/* ---- Estructura de la aplicación ---- */
.ambiente { background:var(--warn); color:#fff; text-align:center; font:600 12.5px var(--display); letter-spacing:.04em; padding:5px 16px; padding-top:calc(5px + env(safe-area-inset-top)); position:relative; z-index:40; }
.app { min-height:100%; }
.lateral { position:fixed; inset:0 auto 0 0; width:var(--lateral); background:var(--nav-bg); display:flex; flex-direction:column; padding:18px 14px; padding-top:calc(18px + env(safe-area-inset-top)); z-index:30; }
.marca { background:#fff; border-radius:12px; padding:8px 12px; display:flex; justify-content:center; margin-bottom:18px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.marca img { height:44px; width:auto; }
.menu { display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.navlabel { font:600 11px var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--nav-ink); opacity:.65; padding:14px 12px 6px; }
.navlabel:first-child { padding-top:0; }
.menu a { display:flex; align-items:center; gap:12px; color:var(--nav-ink); text-decoration:none; font-size:15px; font-weight:500; padding:0 12px; min-height:44px; border-radius:10px; transition:background var(--t-rapida), color var(--t-rapida); }
.menu a:hover { background:var(--nav-hover); color:#fff; }
.menu a.active { background:var(--nav-active); color:var(--nav-active-ink); font-weight:600; box-shadow:0 6px 16px rgba(35,151,212,.35); }
.lateral-pie { display:flex; flex-direction:column; gap:4px; padding:10px 0 0; margin-top:10px; background:rgba(0,0,0,.12); border-radius:12px; padding:8px; }
.usuario-lateral { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:#fff; text-decoration:none; }
.usuario-lateral:hover { background:var(--nav-hover); }
.usuario-texto { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.usuario-texto b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usuario-texto small { color:var(--nav-ink); font-size:12px; }
.salir { margin:0; }
.salir button { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0 12px; border:0; background:transparent; color:var(--nav-ink); font:500 14.5px var(--sans); border-radius:10px; cursor:pointer; transition:background var(--t-rapida); }
.salir button:hover { background:var(--nav-hover); color:#fff; }
.lateral .av { background:rgba(255,255,255,.14); color:#fff; }

.area { margin-left:var(--lateral); min-width:0; }
.barra { display:none; }
main.contenido { padding:28px 32px 64px; max-width:1320px; width:100%; margin:0 auto; }
.inferior { display:none; }

/* Tableta: barra compacta de íconos */
@media (max-width: 1099px) and (min-width: 768px) {
  .lateral { width:var(--rail); padding:14px 10px; padding-top:calc(14px + env(safe-area-inset-top)); align-items:center; }
  .marca { padding:6px; margin-bottom:14px; } .marca img { height:30px; }
  .navlabel, .menu a span, .usuario-texto, .salir span { display:none; }
  .menu { align-items:center; gap:6px; }
  .menu a { width:52px; min-height:48px; justify-content:center; padding:0; }
  .lateral-pie { padding:6px; }
  .usuario-lateral, .salir button { justify-content:center; padding:8px; }
  .area { margin-left:var(--rail); }
  main.contenido { padding:24px 24px 56px; }
}

/* Móvil: barra superior y barra inferior de 5 accesos */
@media (max-width: 767px) {
  .lateral { display:none; }
  .area { margin-left:0; }
  .barra { display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20; background:var(--surface); box-shadow:var(--shadow-sm); padding:8px 16px; padding-top:calc(8px + env(safe-area-inset-top)); }
  .marca-movil { background:#fff; border-radius:8px; padding:2px 6px; display:flex; }
  .marca-movil img { height:34px; width:auto; }
  .espacio { flex:1; }
  .av-movil { display:grid; place-items:center; min-width:44px; min-height:44px; text-decoration:none; }
  main.contenido { padding:18px 16px calc(var(--inferior) + 28px + env(safe-area-inset-bottom)); }
  .inferior { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; inset:auto 0 0 0; z-index:25; background:var(--surface); box-shadow:0 -6px 24px rgba(31,45,92,.12); padding-bottom:env(safe-area-inset-bottom); }
  .inferior a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:var(--inferior); color:var(--muted); text-decoration:none; font:600 11px var(--display); letter-spacing:.02em; transition:color var(--t-rapida); }
  .inferior a.active { color:var(--sky); }
  .inferior a:active { background:var(--surface-2); }
}

/* ---- Encabezados y bloques ---- */
h1 { font-size:clamp(21px, 2.4vw, 26px); font-weight:700; margin:0; letter-spacing:-.015em; text-wrap:balance; }
.sub { color:var(--muted); margin:4px 0 0; max-width:72ch; }
.phead { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.kpis.k3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kpi { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.kpi .l { font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px; }
.kpi .l .ico { color:var(--sky); }
.kpi .v { font-size:clamp(22px, 2.2vw, 28px); font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; overflow-wrap:anywhere; margin-top:4px; }
.kpi .h { font-size:13px; color:var(--muted); }
.kpi .v.warn { color:var(--warn); } .kpi .v.crit { color:var(--crit); } .kpi .v.ok { color:var(--ok); }
.kpi.destacado { background:linear-gradient(135deg, #1F2D5C 0%, #2A3F7E 70%, #2F6FB3 100%); }
.kpi.destacado .l, .kpi.destacado .h { color:#C9D6F2; } .kpi.destacado .v { color:#fff; } .kpi.destacado .l .ico { color:#8FD0F2; }
.tendencia { font-weight:700; } .tendencia.sube { color:var(--ok); } .tendencia.baja { color:var(--crit); }
.kpi.destacado .tendencia.sube { color:#7FE0AE; } .kpi.destacado .tendencia.baja { color:#FFB2A6; }
.grid2 { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start; }
.grid2e { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.stack { display:flex; flex-direction:column; gap:18px; }
.gap { margin-top:18px; }
.panel { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); padding:20px 22px; min-width:0; }
.panel h2 { font-size:15.5px; font-weight:700; margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.titulo-ico { display:inline-flex; align-items:center; gap:8px; }
.titulo-ico .ico { color:var(--sky); }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.card { border:0; background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); padding:18px 20px; display:flex; flex-direction:column; gap:10px; min-width:0; color:inherit; text-decoration:none; transition:box-shadow var(--t), transform var(--t) var(--curva); }
a.card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.card h3 { font-size:16px; margin:0; font-weight:700; }
.between { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.fila { display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap; }

.pill { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:99px; background:var(--surface-2); color:var(--muted); white-space:nowrap; line-height:1.5; }
.pill.ok { background:var(--ok-soft); color:var(--ok); } .pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.crit { background:var(--crit-soft); color:var(--crit); } .pill.acc { background:var(--sky-soft); color:var(--sky); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--muted); flex:none; margin-top:7px; }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.crit { background:var(--crit); } .dot.acc { background:var(--sky); }

/* ---- Tablas: en móvil se convierten en tarjetas ---- */
.tbl { overflow-x:auto; background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); }
.tbl table { min-width:760px; }
table { width:100%; border-collapse:collapse; }
th { font:600 11px var(--display); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); text-align:left; padding:12px 14px; white-space:nowrap; background:var(--surface-2); }
td { padding:12px 14px; vertical-align:top; }
tbody tr:nth-child(even) td { background:var(--zebra); }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tid { font-size:12.5px; color:var(--muted); white-space:nowrap; }
td a { color:var(--ink); text-decoration:none; font-weight:600; }
td a:hover { color:var(--sky); }
@media (max-width: 767px) {
  .tbl:has(table.resp) { background:transparent; box-shadow:none; overflow:visible; border-radius:0; }
  table.resp { min-width:0 !important; }
  table.resp thead { display:none; }
  table.resp, table.resp tbody, table.resp tr, table.resp td { display:block; width:100%; }
  table.resp tr { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); padding:12px 14px; margin-bottom:12px; }
  table.resp td { padding:5px 0; background:transparent !important; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right; }
  table.resp td::before { content:attr(data-label); font:600 11px var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left; flex:none; }
  table.resp td.principal { display:block; text-align:left; font-size:15px; padding-bottom:8px; }
  table.resp td.principal::before { content:none; }
  table.resp td:empty { display:none; }
}

.meter { height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.meter > i { display:block; height:100%; background:var(--s1); border-radius:99px; }
.meter.warn > i { background:var(--warn); } .meter.crit > i { background:var(--crit); }
.mrow { display:flex; flex-direction:column; gap:6px; padding:9px 0; }
.list { display:flex; flex-direction:column; gap:4px; }
.li { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none; min-height:44px; transition:background var(--t-rapida); }
a.li:hover { background:var(--surface-2); }
.li .grow { flex:1; min-width:0; }
.vacio { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:26px 12px; color:var(--muted); }
.vacio .ico { color:var(--sky); opacity:.8; }

/* ---- Botones y controles ---- */
.btn, .btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; background:var(--primary); color:var(--primary-ink); font:600 14.5px var(--sans); padding:10px 18px; min-height:44px; border-radius:11px; cursor:pointer; white-space:nowrap; text-decoration:none; box-shadow:0 6px 16px rgba(31,45,92,.18); transition:filter var(--t-rapida), box-shadow var(--t-rapida); }
.btn:hover, .btn-primary:hover { filter:brightness(1.12); color:var(--primary-ink); background:var(--primary); box-shadow:0 8px 22px rgba(31,45,92,.26); }
.btn:active { filter:brightness(.95); }
.btn[disabled], .btn[aria-busy="true"] { opacity:.7; cursor:progress; }
.btn.soft { background:var(--soft-btn); color:var(--soft-btn-ink); box-shadow:none; }
.btn.soft:hover { filter:none; background:var(--surface-3); color:var(--soft-btn-ink); }
.btn.sm { padding:6px 12px; font-size:13.5px; min-height:36px; }
.btn.link { background:transparent; color:var(--muted); padding:6px 8px; box-shadow:none; }
.btn.peligro { background:var(--crit-soft); color:var(--crit); box-shadow:none; }
.btn.peligro:hover { background:var(--crit); color:#fff; filter:none; }
.btn.grande { min-height:50px; font-size:15.5px; border-radius:12px; }
@media (pointer: coarse) { .btn.sm { min-height:44px; } }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.chip { background:var(--surface); box-shadow:var(--shadow-sm); color:var(--ink); padding:0 14px; min-height:38px; display:inline-flex; align-items:center; border-radius:99px; font-size:14px; font-weight:500; text-decoration:none; transition:background var(--t-rapida); }
.chip:hover { background:var(--surface-2); }
.chip.on { background:var(--primary); color:var(--primary-ink); }
@media (pointer: coarse) { .chip { min-height:44px; } }
.av { width:32px; height:32px; border-radius:50%; background:var(--sky-soft); color:var(--sky); display:inline-grid; place-items:center; font:700 11.5px var(--display); flex:none; }
.who { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }

input, select, textarea, .form-control { font:inherit; font-size:16px; color:var(--ink); background:var(--campo); box-shadow:var(--campo-sombra); border:0; border-radius:10px; padding:11px 13px; width:100%; min-width:0; min-height:46px; transition:background var(--t-rapida), box-shadow var(--t-rapida); }
input:focus, select:focus, textarea:focus, .form-control:focus { background:var(--campo-foco); color:var(--ink); outline:none; box-shadow:var(--campo-sombra), 0 0 0 3px rgba(35,151,212,.45); }
input[type=checkbox], input[type=radio] { box-shadow:none; }
input[type=checkbox], input[type=radio] { width:20px; height:20px; min-height:0; accent-color:var(--sky-brand); }
input[type=file] { padding:9px; }
textarea { min-height:96px; resize:vertical; }
label, .form-label { font-size:13.5px; font-weight:600; color:var(--muted); }
.campo { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.check { display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink); font-weight:500; min-height:44px; }
.check input { width:20px; }
.text-danger, .validation-message { color:var(--crit); font-size:13.5px; }
.alert { border:0; padding:12px 16px; border-radius:12px; background:var(--warn-soft); color:var(--warn); margin-bottom:16px; }
.alert-danger { background:var(--crit-soft); color:var(--crit); }
.alert-success { background:var(--ok-soft); color:var(--ok); }
.subnav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.subnav a { padding:0 14px; min-height:40px; display:inline-flex; align-items:center; border-radius:99px; text-decoration:none; color:var(--ink); background:var(--surface); box-shadow:var(--shadow-sm); font-size:14px; }
.subnav a.active { background:var(--primary); color:var(--primary-ink); }
.fgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.fgrid.cuatro { grid-template-columns:repeat(4,minmax(0,1fr)); }
.checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.clave { position:relative; }
.clave input { padding-right:52px; }
.ver-clave { position:absolute; right:2px; top:50%; transform:translateY(-50%); width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:var(--muted); border-radius:10px; cursor:pointer; }
.ver-clave:hover { color:var(--ink); }
.ver-clave .no, .ver-clave[aria-pressed="true"] .si { display:none; }
.ver-clave[aria-pressed="true"] .no { display:block; }
.separador { text-align:center; color:var(--muted); font-size:13px; margin:4px 0; }
.mensaje { background:var(--surface-2); border-radius:12px; padding:12px 14px; }
.mensaje.equipo { background:var(--sky-soft); }
.mensaje.interno { background:var(--warn-soft); }
.qr { background:#fff; border-radius:12px; padding:10px; width:200px; max-width:100%; }
.qr svg { display:block; width:100%; height:auto; }
.codigos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; font-family:var(--mono); background:var(--surface-2); border-radius:12px; padding:14px; }
.pasos { padding-left:20px; display:flex; flex-direction:column; gap:16px; }
kbd { background:var(--surface-2); color:var(--ink); padding:2px 6px; border-radius:6px; }
.menu-lista { display:flex; flex-direction:column; gap:2px; }
.menu-lista a { display:flex; align-items:center; gap:14px; min-height:54px; padding:0 8px; color:var(--ink); text-decoration:none; font-weight:600; border-radius:10px; }
.menu-lista a .ico:first-child { color:var(--sky); }
.menu-lista a span { flex:1; }
.menu-lista a .flecha { color:var(--muted); }
.menu-lista a:active, .menu-lista a:hover { background:var(--surface-2); }

/* ---- Gráficas (SVG generadas en el servidor) ---- */
.grafica { width:100%; height:auto; display:block; overflow:visible; }
.grafica .gl { stroke:var(--grid); stroke-width:1; }
.grafica .ax { fill:var(--muted); font:13px var(--sans); }
.grafica .s1 { fill:var(--s1); } .grafica .s2 { fill:var(--s2); }
.grafica .ref { stroke:var(--ink); stroke-width:1.5; stroke-dasharray:4 4; opacity:.5; }
.grafica .reft { fill:var(--muted); font:600 12.5px var(--sans); }
.grafica .zona { fill:transparent; }
.grafica .zona:hover { fill:var(--ink); fill-opacity:.05; }
.grafica .valor { fill:var(--ink); font:600 12.5px var(--sans); }
.leyenda { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:8px; }
.leyenda span { display:inline-flex; align-items:center; gap:6px; }
.muestra { width:11px; height:11px; border-radius:3px; display:inline-block; }
.muestra.s1 { background:var(--s1); } .muestra.s2 { background:var(--s2); }
.hbarras { display:flex; flex-direction:column; gap:10px; }
.hbarra { display:grid; grid-template-columns:minmax(90px,150px) minmax(0,1fr) auto; gap:12px; align-items:center; font-size:14px; }
.hbarra .pista { height:14px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.hbarra .pista i { display:block; height:100%; background:var(--s1); border-radius:0 4px 4px 0; }
.hbarra .val { text-align:right; font-variant-numeric:tabular-nums; min-width:56px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- Agenda ---- */
.semana { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.7fr)); gap:10px; }
.dia { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px; min-height:170px; min-width:0; }
.dia.hoy { background:var(--sky-soft); }
.dia .dn { font:700 12px var(--display); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.dia.hoy .dn { color:var(--sky); }
.ev { background:var(--surface-2); border-radius:9px; padding:9px 10px; font-size:13.5px; display:flex; flex-direction:column; gap:2px; color:inherit; text-decoration:none; overflow-wrap:anywhere; transition:filter var(--t-rapida); }
a.ev:hover { filter:brightness(.97); }
.dia.hoy .ev { background:var(--surface); }
.ev b { font-weight:600; font-size:14px; }
.ev.presencial .mono { color:var(--warn); }
.ev.remota .mono, .ev.llamada .mono { color:var(--sky); }
.ev.hecha { opacity:.75; }
.ev.ausencia { background:var(--warn-soft); color:var(--warn); }
.ev.recordatorio { background:var(--zebra); color:var(--muted); }
@media (max-width: 1250px) { .semana { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 767px) { .semana { grid-template-columns:minmax(0,1fr); } .dia { min-height:0; } .dia.finde { display:none; } }

/* ---- Informe mensual ---- */
.informe { background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r); max-width:980px; margin:0 auto; overflow:hidden; }
.informe-cab { background:linear-gradient(135deg, #1F2D5C 0%, #2A3F7E 75%, #2F6FB3 100%); color:#fff; padding:26px 34px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; }
.informe-cab .logo-blanco { background:#fff; border-radius:10px; padding:6px 10px; display:inline-flex; }
.informe-cab img { height:46px; width:auto; }
.informe-cab .t { font:700 22px var(--display); letter-spacing:-.01em; color:#fff; }
.informe-cab .d { color:#C9D6F2; }
.informe-cuerpo { padding:28px 34px 34px; display:flex; flex-direction:column; gap:26px; }
.resumen { background:var(--sky-soft); border-radius:12px; padding:16px 18px; }
.resumen .lab { font:700 11px var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--sky); margin-bottom:4px; }
.h4 { font:600 11px var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.barra-acciones { display:flex; gap:10px; flex-wrap:wrap; align-items:center; max-width:980px; margin:0 auto 16px; }
@media (max-width: 767px) { .informe-cab { padding:20px 18px; } .informe-cuerpo { padding:20px 16px 24px; gap:20px; } }
@media print {
  @page { margin:12mm; }
  body { background:#fff; font-size:12.5px; }
  .lateral, .barra, .inferior, .ambiente, .barra-acciones, .no-imprimir, #blazor-error-ui { display:none !important; }
  .area { margin:0 !important; } main.contenido { padding:0 !important; max-width:none; }
  .informe { box-shadow:none; max-width:none; border-radius:0; }
  .kpi, .panel, .tbl { box-shadow:none !important; }
  .kpi { background:#F4F7FB !important; }
  .informe-cab, .kpi.destacado, .resumen, .pill, .meter, .meter > i, .muestra, .hbarra .pista, .hbarra .pista i, .grafica rect, .grafica path { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .kpis { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .grid2e { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  a { color:inherit; text-decoration:none; }
}

/* ---- Acceso (inicio de sesión, activación, doble factor) ---- */
.acceso { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); background:
    radial-gradient(900px 600px at 12% 8%, rgba(35,151,212,.35), transparent 60%),
    radial-gradient(700px 500px at 90% 95%, rgba(35,151,212,.22), transparent 60%),
    linear-gradient(155deg, #16214A 0%, #1F2D5C 45%, #26397A 100%); }
.acceso-marca { color:#fff; padding:56px clamp(32px, 6vw, 88px); display:flex; flex-direction:column; justify-content:center; gap:20px; }
.acceso-logo { background:#fff; border-radius:16px; padding:12px 18px; align-self:flex-start; box-shadow:0 14px 34px rgba(0,0,0,.25); }
.acceso-logo img { height:64px; width:auto; display:block; }
.acceso-marca h2 { font:700 clamp(28px, 3.2vw, 40px)/1.15 var(--display); color:#fff; margin:18px 0 0; letter-spacing:-.02em; max-width:16ch; text-wrap:balance; }
.acceso-marca p { color:#C9D6F2; font-size:17px; margin:0; max-width:44ch; }
.acceso-marca ul { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:14px; }
.acceso-marca li { display:flex; align-items:center; gap:14px; color:#E4EBFA; font-size:15.5px; }
.acceso-ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#8FD0F2; flex:none; }
.acceso-marca small { color:#9FB0D6; margin-top:auto; padding-top:28px; }
.acceso-panel { display:grid; place-items:center; padding:32px 24px; }
.acceso .caja { width:min(430px,100%); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-radius:22px; padding:34px 32px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:18px; color:#1B2445; animation:aparecer .35s var(--curva) both; }
@keyframes aparecer { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.acceso .caja h1 { font-size:24px; color:#1B2445; }
.acceso .caja .logo { display:none; }
.acceso-titulo p { margin:4px 0 0; color:#5F6878; }
.acceso .caja input, .acceso .caja select { background:#E2E8F2; color:#1B2445; box-shadow:inset 0 1px 3px rgba(27,36,69,.16), inset 0 -1px 0 rgba(27,36,69,.10); }
.acceso .caja input:focus { background:#D8E1EE; box-shadow:inset 0 1px 3px rgba(27,36,69,.16), 0 0 0 3px rgba(35,151,212,.45); }
.acceso .caja input::placeholder { color:#6B7486; }
.acceso .caja input[type=checkbox] { box-shadow:none; }
.acceso .caja label { color:#5F6878; }
.acceso .caja .check { color:#1B2445; }
.acceso .caja .btn:not(.soft) { background:#1F2D5C; color:#fff; }
.acceso .caja .btn.soft { background:#E3F1FA; color:#1F2D5C; }
.acceso .caja a { color:#1E86BF; }
.acceso .pie { font-size:13px; color:#5F6878; text-align:center; margin:0; }
@media (prefers-color-scheme: dark) {
  .acceso .caja { background:rgba(20,27,46,.92); color:#E6EBF6; }
  .acceso .caja h1, .acceso .caja .check { color:#E6EBF6; }
  .acceso .caja input { background:#27335A; color:#E6EBF6; box-shadow:inset 0 1px 3px rgba(0,0,0,.45); }
  .acceso .caja label, .acceso-titulo p, .acceso .pie { color:#9CA6BC; }
  .acceso .caja .btn:not(.soft) { background:#2F9FDA; color:#06182A; }
  .acceso .caja .btn.soft { background:#1C2E4C; color:#CFE6F7; }
  .acceso .caja a { color:#52B4EA; }
}
@media (max-width: 959px) {
  .acceso { grid-template-columns:minmax(0,1fr); }
  .acceso-marca { display:none; }
  .acceso-panel { padding:24px 16px; padding-top:calc(24px + env(safe-area-inset-top)); align-content:center; min-height:100vh; }
  .acceso .caja { padding:28px 22px; }
  .acceso .caja .logo { display:flex; justify-content:center; background:#fff; border-radius:12px; padding:8px; }
  .acceso .caja .logo img { height:56px; width:auto; }
}

#blazor-error-ui { background:var(--warn-soft); color:var(--warn); bottom:0; box-shadow:var(--shadow); display:none; left:0; padding:.6rem 1.25rem .7rem; position:fixed; width:100%; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }

/* ---- Ajustes responsivos generales ---- */
@media (max-width: 1099px) {
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid2 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 767px) {
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kpi { padding:14px; }
  .grid2e, .fgrid, .checks { grid-template-columns:minmax(0,1fr); }
  .fgrid.cuatro { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { padding:16px; }
  .phead { margin-bottom:16px; }
  .phead > .btn, .phead > a.btn { width:100%; }
  .cards { grid-template-columns:minmax(0,1fr); }
  .hbarra { grid-template-columns:minmax(80px,110px) minmax(0,1fr) auto; gap:8px; font-size:13.5px; }
}
@media (max-width: 767px) {
  .kpis.k3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .kpis.k3 .kpi { padding:12px 10px; }
  .kpis.k3 .kpi .l { font-size:12px; } .kpis.k3 .kpi .l .ico { display:none; } .kpis.k3 .kpi .h { font-size:11.5px; }
  /* Filtros en una sola franja que se desliza de lado (sin mover la página). */
  .chips { flex-wrap:nowrap; overflow-x:auto; margin-left:-16px; margin-right:-16px; padding:2px 16px 6px; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:none; }
}
@media (max-width: 374px) { .kpis { grid-template-columns:minmax(0,1fr); } }

/* ---- Cotizaciones y gastos ---- */
.conceptos { display:flex; flex-direction:column; gap:8px; }
.concepto { display:grid; grid-template-columns:minmax(0,3fr) minmax(70px,.8fr) minmax(90px,.9fr) minmax(100px,1fr); gap:8px; align-items:center; }
.concepto.cab span { font:600 11px var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pago { display:grid; grid-template-columns:minmax(0,1fr) 90px auto; gap:8px; align-items:center; margin-bottom:8px; }
.totales { display:flex; flex-direction:column; gap:6px; margin-left:auto; min-width:min(320px,100%); }
.totales > div { display:flex; justify-content:space-between; gap:16px; font-variant-numeric:tabular-nums; }
.totales .total { font:700 18px var(--display); padding-top:8px; }
[data-suma-pagos].mal { color:var(--crit); }
@media (max-width: 767px) {
  .concepto { grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--zebra); border-radius:10px; padding:8px; }
  .concepto > input:first-child { grid-column:1 / -1; }
  .concepto.cab { display:none; }
}

/* ---- Expediente del cliente ---- */
.nota { background:var(--zebra); border-radius:12px; padding:12px 14px; }
.nota.fijada { background:var(--sky-soft); }
.nota p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.nota .pill { margin-left:6px; }
.acciones { display:flex; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.btn.link.sm { min-height:36px; padding:6px 8px; }
.li.doc { align-items:center; }
.li.doc .pill { margin-left:6px; }
@media (max-width: 767px) {
  .li.doc { flex-wrap:wrap; }
  .li.doc .acciones { width:100%; justify-content:flex-start; }
}

/* Secciones plegables (por ejemplo, cambiar las copias de un ticket) */
.plegable { margin-top:14px; }
.plegable > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--sky); font-weight:600; list-style:none; }
.plegable > summary::-webkit-details-marker { display:none; }
.plegable > summary::before { content:"▸"; margin-right:8px; transition:transform var(--t-rapida); }
.plegable[open] > summary::before { transform:rotate(90deg); }