/* Estilo de i-C@C 360 -- concepto azul Telcel (pedido del usuario 2026-10-10: mismo --navy/--accent que ya
   comparten TelcelPantallasCarga y ReporteD21Sitio), sobre el mismo esqueleto de paginas que RDASeguimiento. */
:root{
  color-scheme:light;
  --bg:#f1f4f6; --surface:#ffffff; --ink:#0e1a24; --ink2:#465564; --muted:#75838f;
  --grid:#e3e8ec; --line:rgba(14,26,36,.11); --wash:#f6f8fa;
  --navy:#0a2557; --navy-2:#071b40;
  --accent:#1d4fd8; --accent-hi:#1740b0; --accent-wash:rgba(29,79,216,.10); --on-accent:#ffffff;
  --good-ink:#1a8a5f; --warn-ink:#c07f1a; --crit-ink:#c53d3d;
  --shadow:0 1px 2px rgba(14,26,36,.06),0 4px 14px rgba(14,26,36,.05);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0c1318; --surface:#141d24; --ink:#eef3f6; --ink2:#b3bfca; --muted:#8593a0;
    --grid:#222d36; --line:rgba(255,255,255,.11); --wash:#18232b;
    --accent:#5b8def; --accent-hi:#7ea4f2; --accent-wash:rgba(91,141,239,.16); --on-accent:#062544;
    --good-ink:#4cc94c; --warn-ink:#e0b050; --crit-ink:#ff8080; --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c1318; --surface:#141d24; --ink:#eef3f6; --ink2:#b3bfca; --muted:#8593a0;
  --grid:#222d36; --line:rgba(255,255,255,.11); --wash:#18232b;
  --accent:#5b8def; --accent-hi:#7ea4f2; --accent-wash:rgba(91,141,239,.16); --on-accent:#062544;
  --good-ink:#4cc94c; --warn-ink:#e0b050; --crit-ink:#ff8080; --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
.tema-flot{position:fixed;top:14px;right:14px;z-index:10;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);font-size:17px;line-height:1;cursor:pointer}
.tema-flot:hover{background:var(--wash)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.4;
  padding:clamp(12px,2.4vw,20px) clamp(10px,2.4vw,16px) 48px}
/* ancho fluido (pedido del usuario 2026-10-11: "muy fijo... muy verticales, poco adaptativas") -- antes
   topaba siempre en 1100px aunque el monitor fuera mucho mas ancho, forzando todo a una sola columna angosta;
   ahora crece con la pantalla hasta un techo razonable para no volverse una linea de texto interminable. */
.app{max-width:min(1180px,96vw);margin-inline:auto;display:flex;flex-direction:column;gap:16px}
h1,h2,p{margin:0}
a{color:var(--accent-hi)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* grid de 2 columnas que se adapta al espacio real (pedido del usuario: "poco adaptativas") en vez de un
   binario fijo 2-col/1-col -- si el contenedor es angosto cae solo a 1 columna, nunca se encima ni se corta. */
.ic-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px}

.hero-band{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(120deg,rgba(10,37,87,.88),rgba(7,27,64,.93)),
    url('/static/img/telcel-portada.jpg') center 32%/cover no-repeat}
.hero-band .top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:18px 20px}
.eyebrow{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#bfd3e3}
.hero-band h1{color:#fff;font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-.015em}
.hero-band .meta{color:#dcedfb;margin-top:2px}
.hdr-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hdr-actions .who{color:#eaf4ff;font-size:13px;margin-right:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:9px;color:var(--ink);white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--wash)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-hi)}
.btn.danger{color:var(--crit-ink)}
.hero-band .btn{background:rgba(255,255,255,.94);border-color:transparent;color:#0b2338}
.hero-band .btn:hover{background:#fff}
/* ESTÁNDAR Excel (2026-10-12, muestra del usuario = ícono de Excel): única fuente de verdad del color para
   TODAS las descargas de Excel del sitio. Usar la variable --excel; aplicar la clase .excel (sobre .btn o
   .vc-btn) o .btn-excel. Verde del ícono: oscuro #1C6322, medio #25752A/#2B7E2F. */
:root{--excel:#217a3a;--excel-dark:#1c6322;--excel-darker:#17521c}
.btn.excel{background:var(--excel);border-color:var(--excel-dark);color:#fff;font-weight:600}
.btn.excel:hover{background:var(--excel-dark);border-color:var(--excel-darker)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:box-shadow .15s}
.card>h2{font-size:14.5px;font-weight:650;margin-bottom:12px}
.sub{color:var(--muted);font-size:12.5px}

/* login / registro */
.auth{max-width:420px;margin:6vh auto 0;display:flex;flex-direction:column;gap:14px}
.auth .hero-band .top{padding:22px 22px 18px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12.5px;color:var(--ink2);font-weight:600}
.field input,.field select,select.inline{height:36px;border:1px solid var(--line);border-radius:8px;background:var(--wash);padding:0 10px}
.msg{border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.msg.error{background:rgba(197,61,61,.10);color:var(--crit-ink)}
.msg.ok{background:rgba(26,138,95,.10);color:var(--good-ink)}
.links{font-size:13px;color:var(--ink2);text-align:center;margin-top:4px}

/* tablas de administracion */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--grid);vertical-align:middle}
th{background:var(--wash);color:var(--ink2);font-weight:600;white-space:nowrap}
td form{display:flex;gap:6px;align-items:center;margin:0}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:var(--accent-wash);color:var(--ink2)}
.badge.admin{background:var(--accent);color:var(--on-accent)}
.badge.inactivo{background:rgba(197,61,61,.12);color:var(--crit-ink)}
.vacio{color:var(--muted)}

/* alarma de Prioritarios (pedido 2026-10-10: simbolo muy visible) */
.ic-alarma{display:inline-block;filter:drop-shadow(0 0 2px rgba(197,61,61,.5))}

@media (max-width:640px){
  .hero-band .top{padding:14px 16px}
  .card{padding:13px 14px;border-radius:12px}
  .hero-band{border-radius:13px}
}
@media (max-width:420px){
  .btn{padding:0 9px;font-size:13px}
}