/* =====================================================================
   SISTEMA CONCEJAL - Hoja de estilos principal
   Paleta dominante ROJA, botones grandes para uso tactil, responsive.
   ===================================================================== */

:root{
  --rojo:        #c8102e;
  --rojo-osc:    #8e0b20;
  --rojo-cla:    #fdeaed;
  --rojo-suave:  #fff5f6;

  --tinta:       #16181d;
  --tinta-2:     #3d434e;
  --gris:        #6b7280;
  --gris-cla:    #9aa1ad;
  --linea:       #e4e6ea;
  --fondo:       #f4f5f7;
  --blanco:      #ffffff;

  --ok:          #12805c;
  --ok-cla:      #e6f6f0;
  --aviso:       #b25e09;
  --aviso-cla:   #fdf3e4;
  --err:         #d92d20;
  --err-cla:     #fef3f2;
  --info:        #1b64d9;
  --info-cla:    #eaf1fe;

  --radio:       14px;
  --radio-sm:    10px;
  --sombra:      0 2px 12px rgba(16,18,22,.07);
  --sombra-alta: 0 12px 40px rgba(16,18,22,.18);
  --topbar-h:    64px;
  --nav-w:       248px;
  --tactil:      54px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.5;
  font-size: 15.5px;
  padding-top: var(--topbar-h);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a{ color: var(--rojo); text-decoration: none; }
h1,h2,h3,h4{ margin:0; line-height:1.25; font-weight:700; }

.ico{ flex:none; }

/* ---------------------------------------------------------------- TOPBAR */
.topbar{
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h);
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-osc) 100%);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px; gap:12px; z-index: 60;
  box-shadow: 0 3px 14px rgba(140,11,32,.28);
  padding-top: env(safe-area-inset-top);
}
.marca{ display:flex; align-items:center; gap:11px; color:#fff; min-width:0; }
.marca-logo{
  width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center; flex:none;
}
.marca-texto{ display:flex; flex-direction:column; min-width:0; }
.marca-texto strong{ font-size:1rem; letter-spacing:.2px; white-space:nowrap; }
.marca-texto small{ font-size:.7rem; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.topbar-der{ display:flex; align-items:center; gap:10px; }
.vivo{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600;
  background: rgba(255,255,255,.16); padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.vivo i{ width:7px;height:7px;border-radius:50%;background:#7dfcb2; display:inline-block; animation: latido 2s infinite; }
.vivo.pausa i{ background:#ffd166; animation:none; }
.vivo.error i{ background:#ff9a9a; animation:none; }
@keyframes latido{ 0%,100%{opacity:1} 50%{opacity:.28} }

.chip-usuario{ display:flex; align-items:center; gap:9px; }
.avatar{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem; flex:none;
}
.chip-datos{ display:flex; flex-direction:column; line-height:1.2; }
.chip-datos strong{ font-size:.82rem; }
.chip-datos small{ font-size:.68rem; opacity:.85; }

.btn-icono{
  width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.15);color:#fff;
  display:flex;align-items:center;justify-content:center; flex:none;
}
.btn-icono:hover{ background:rgba(255,255,255,.3); }

/* -------------------------------------------------------------- NAVEGACION */
.nav{
  position: fixed; top: var(--topbar-h); bottom:0; left:0; width: var(--nav-w);
  background: var(--blanco); border-right:1px solid var(--linea);
  padding: 14px 12px; overflow-y:auto; z-index:50;
}
.nav-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px;
  color: var(--tinta-2); font-weight:600; font-size:.92rem; margin-bottom:4px;
}
.nav-item:hover{ background: var(--rojo-suave); color: var(--rojo); }
.nav-item.activo{ background: var(--rojo); color:#fff; box-shadow: 0 6px 16px rgba(200,16,46,.25); }

/* --------------------------------------------------------------- CONTENIDO */
.contenido{ margin-left: var(--nav-w); padding: 22px; min-height: calc(100vh - var(--topbar-h) - 44px); }

.pie{
  margin-left: var(--nav-w); padding: 14px 22px 26px; color: var(--gris-cla);
  font-size:.76rem; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}

.encabezado{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.encabezado h1{ font-size:1.4rem; }
.encabezado p{ margin:4px 0 0; color: var(--gris); font-size:.88rem; }
.acciones{ display:flex; gap:9px; flex-wrap:wrap; }

/* ----------------------------------------------------------------- TARJETAS */
.card{
  background: var(--blanco); border:1px solid var(--linea); border-radius: var(--radio);
  padding: 18px; box-shadow: var(--sombra); margin-bottom:16px;
}
.card > h2{ font-size:1.02rem; display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.card > h2 .ico{ color: var(--rojo); }
.card-sub{ color: var(--gris); font-size:.83rem; margin:-8px 0 14px; }

.rejilla{ display:grid; gap:14px; }
.rejilla-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.rejilla-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.rejilla-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media(max-width:1150px){ .rejilla-4{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:900px){  .rejilla-3{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){  .rejilla-2,.rejilla-3,.rejilla-4{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- METRICAS */
.metrica{
  background: var(--blanco); border:1px solid var(--linea); border-radius: var(--radio);
  padding: 16px; box-shadow: var(--sombra); position:relative; overflow:hidden;
  border-top: 4px solid var(--rojo);
}
.metrica-cab{ display:flex; align-items:center; gap:8px; color: var(--gris); font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.metrica-cab .ico{ color: var(--rojo); }
.metrica-valor{ font-size:1.85rem; font-weight:800; margin:8px 0 2px; letter-spacing:-.5px; }
.metrica-sub{ font-size:.79rem; color: var(--gris); }
.metrica.tono-ok{ border-top-color: var(--ok); } .metrica.tono-ok .ico{ color: var(--ok); }
.metrica.tono-aviso{ border-top-color: var(--aviso); } .metrica.tono-aviso .ico{ color: var(--aviso); }
.metrica.tono-err{ border-top-color: var(--err); } .metrica.tono-err .ico{ color: var(--err); }
.metrica.tono-info{ border-top-color: var(--info); } .metrica.tono-info .ico{ color: var(--info); }

/* ----------------------------------------------------------------- BOTONES */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding: 12px 20px; border-radius: 12px; border:1.5px solid transparent;
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; white-space:nowrap;
  background: var(--blanco); color: var(--tinta); border-color: var(--linea);
  transition: transform .06s ease, background .15s ease;
  -webkit-user-select:none; user-select:none;
}
.btn:active{ transform: scale(.975); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primario{ background: var(--rojo); color:#fff; border-color: var(--rojo); box-shadow: 0 6px 16px rgba(200,16,46,.24); }
.btn-primario:hover{ background: var(--rojo-osc); border-color: var(--rojo-osc); }
.btn-ok{ background: var(--ok); color:#fff; border-color: var(--ok); }
.btn-ok:hover{ filter: brightness(.93); }
.btn-peligro{ background: var(--err); color:#fff; border-color: var(--err); }
.btn-peligro:hover{ filter: brightness(.93); }
.btn-claro{ background: var(--rojo-cla); color: var(--rojo); border-color: transparent; }
.btn-claro:hover{ background: #fbd9de; }
.btn-borde{ background:#fff; color: var(--rojo); border-color: var(--rojo); }
.btn-borde:hover{ background: var(--rojo-suave); }
.btn-neutro{ background:#fff; color: var(--tinta-2); }
.btn-neutro:hover{ background:#f2f3f5; }
.btn-grande{ min-height: var(--tactil); font-size:1.02rem; padding: 14px 24px; width:100%; }
.btn-mini{ min-height:36px; padding:7px 12px; font-size:.82rem; border-radius:9px; }
.btn-bloque{ width:100%; }

/* --------------------------------------------------------------- FORMULARIOS */
label{ display:block; font-weight:600; font-size:.84rem; margin: 14px 0 6px; color: var(--tinta-2); }
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%; padding: 13px 14px; border:1.5px solid var(--linea); border-radius: 12px;
  font-family:inherit; font-size:1rem; background:#fbfbfc; color: var(--tinta);
}
input:focus,select:focus,textarea:focus{ outline:none; border-color: var(--rojo); background:#fff; box-shadow: 0 0 0 3px rgba(200,16,46,.1); }
select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:40px; }
textarea{ min-height:88px; resize:vertical; }
.campo-fila{ display:flex; gap:10px; }
.campo-fila > *{ flex:1; }
.campo-fila .btn{ flex:none; }

/* ------------------------------------------------------------- TABLAS/DATOS */
.tabla-envoltura{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius: var(--radio-sm); }
table.tabla{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:520px; }
table.tabla th{
  text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px;
  color: var(--gris); padding: 10px 12px; border-bottom:2px solid var(--linea); white-space:nowrap;
}
table.tabla td{ padding: 12px; border-bottom:1px solid var(--linea); vertical-align:middle; }
table.tabla tbody tr:hover{ background: var(--rojo-suave); }
table.tabla tbody tr:last-child td{ border-bottom:0; }
/* Listado completo del padron (18 campos): se desplaza en horizontal
   en pantallas chicas en vez de aplastar las columnas. */
table.tabla.tabla-ancha{ min-width:1500px; }
table.tabla.tabla-ancha thead th{ position:sticky; top:0; background:var(--blanco); z-index:2; }
.num{ text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
.fuerte{ font-weight:700; }
.mono{ font-family: ui-monospace, Consolas, "Courier New", monospace; font-size:.86rem; }

.vacio{ text-align:center; color: var(--gris-cla); padding: 30px 14px; font-size:.9rem; }

/* ------------------------------------------------------------------- PILLS */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.pill-por_buscar{ background:#eef0f3; color:#4a5160; }
.pill-en_camino{ background: var(--aviso-cla); color: var(--aviso); }
.pill-en_local{ background: var(--info-cla); color: var(--info); }
.pill-retirado{ background: var(--ok-cla); color: var(--ok); }
.pill-activo{ background: var(--ok-cla); color: var(--ok); }
.pill-anulado{ background: var(--err-cla); color: var(--err); }
.pill-gris{ background:#eef0f3; color:#4a5160; }
.pill-rojo{ background: var(--rojo-cla); color: var(--rojo); }

.badge{ display:inline-block; padding:3px 9px; border-radius:7px; font-size:.72rem; font-weight:700; background:#eef0f3; color:#4a5160; }

/* --------------------------------------------------------------- FLASH/TOAST */
.flash-zona{ margin-bottom:16px; display:flex; flex-direction:column; gap:9px; }
.flash{
  display:flex; align-items:center; gap:10px; padding: 13px 16px; border-radius: 12px;
  font-size:.9rem; font-weight:600; border-left:4px solid var(--gris);
  background: var(--blanco); box-shadow: var(--sombra);
}
.flash-ok{ background: var(--ok-cla); border-left-color: var(--ok); color:#0a5a41; }
.flash-error{ background: var(--err-cla); border-left-color: var(--err); color:#7a271a; }
.flash-aviso{ background: var(--aviso-cla); border-left-color: var(--aviso); color:#7a4209; }
.flash-info{ background: var(--info-cla); border-left-color: var(--info); color:#153f8f; }

.toast-zona{ position: fixed; left:50%; transform:translateX(-50%); bottom: 84px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
@media(min-width:901px){ .toast-zona{ bottom: 26px; left:auto; right:26px; transform:none; align-items:flex-end; } }
.toast{
  background:#16181d; color:#fff; padding: 12px 18px; border-radius: 12px; font-size:.88rem;
  font-weight:600; box-shadow: var(--sombra-alta); animation: subir .22s ease; max-width:90vw;
}
.toast.ok{ background: var(--ok); } .toast.err{ background: var(--err); } .toast.aviso{ background: var(--aviso); }
@keyframes subir{ from{opacity:0; transform: translateY(12px);} to{opacity:1; transform:none;} }

/* -------------------------------------------------------------------- MODAL */
.modal-zona{ position: fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:18px; background: rgba(16,18,22,.55); }
.modal-zona[hidden]{ display:none; }
.modal{
  background:#fff; border-radius:18px; max-width:520px; width:100%; max-height:88vh; overflow:auto;
  box-shadow: var(--sombra-alta); animation: subir .18s ease;
}
.modal-cab{ padding: 20px 22px 0; display:flex; align-items:flex-start; gap:12px; }
.modal-cab .modal-ico{ width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none; background: var(--rojo-cla); color: var(--rojo); }
.modal-cab.peligro .modal-ico{ background: var(--err-cla); color: var(--err); }
.modal-cab.aviso .modal-ico{ background: var(--aviso-cla); color: var(--aviso); }
.modal-cab.ok .modal-ico{ background: var(--ok-cla); color: var(--ok); }
.modal-titulo{ font-size:1.12rem; font-weight:800; }
.modal-cuerpo{ padding: 12px 22px 4px; font-size:.92rem; color: var(--tinta-2); }
.modal-pie{ padding: 16px 22px 20px; display:flex; gap:10px; flex-direction:column; }
@media(min-width:520px){ .modal-pie{ flex-direction:row; justify-content:flex-end; } }

/* --------------------------------------------------- ALERTA BLOQUEANTE (CI) */
.alerta-bloqueo{
  border-radius:18px; background: linear-gradient(135deg,#d92d20,#a11208); color:#fff;
  padding: 26px 22px; text-align:center; box-shadow: var(--sombra-alta);
}
.alerta-bloqueo .simbolo{ width:66px;height:66px;margin:0 auto 14px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center; }
.alerta-bloqueo h3{ font-size:1.35rem; margin-bottom:8px; }
.alerta-bloqueo .datos{ background: rgba(0,0,0,.18); border-radius:14px; padding:14px; margin:14px 0; text-align:left; font-size:.92rem; }
.alerta-bloqueo .datos div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.alerta-bloqueo .datos div:last-child{ border:0; }
.alerta-bloqueo .datos span:first-child{ opacity:.85; }
.alerta-bloqueo .datos span:last-child{ font-weight:800; text-align:right; }

/* ------------------------------------------------------- FICHA DE LA PERSONA */
.ficha{ border:1.5px solid var(--linea); border-radius: var(--radio); padding:16px; background:#fbfbfc; }
.ficha-nombre{ font-size:1.22rem; font-weight:800; margin-bottom:4px; }
.ficha-ci{ font-family: ui-monospace,Consolas,monospace; color: var(--rojo); font-weight:700; font-size:.95rem; }
.ficha-datos{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px; }
.ficha-dato{ background:#fff; border:1px solid var(--linea); border-radius:10px; padding:10px 12px; }
.ficha-dato small{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color: var(--gris); font-weight:700; }
.ficha-dato strong{ font-size:.92rem; }

/* ----------------------------------------------------- BOTONES DE MONTO */
.montos{ display:grid; grid-template-columns: repeat(3, 1fr); gap:11px; margin:6px 0 4px; }
@media(max-width:520px){ .montos{ grid-template-columns: repeat(2,1fr); } }
.btn-monto{
  min-height: 84px; border-radius:16px; border:2px solid var(--linea); background:#fff;
  font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  /* clamp: el Super Admin puede configurar cifras largas (1.500.000) y no deben desbordar */
  font-size: clamp(1.05rem, 3.6vw, 1.5rem); font-weight:800; color: var(--tinta); transition: all .12s ease;
  padding: 8px; line-height:1.15; text-align:center; overflow-wrap: break-word;
}
.btn-monto small{ font-size:.72rem; font-weight:600; color: var(--gris); }
.btn-monto:hover{ border-color: var(--rojo); background: var(--rojo-suave); }
.btn-monto.sel{ border-color: var(--rojo); background: var(--rojo); color:#fff; box-shadow: 0 8px 20px rgba(200,16,46,.28); }
.btn-monto.sel small{ color: rgba(255,255,255,.85); }

/* ------------------------------------------------------- BOTONES DE ESTADO */
.estados-ciclo{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
@media(max-width:620px){ .estados-ciclo{ grid-template-columns:1fr; } }
.btn-estado{
  min-height:56px; border-radius:13px; border:1.5px solid var(--linea); background:#fff;
  font-family:inherit; font-size:.9rem; font-weight:700; color: var(--tinta-2); cursor:pointer;
  display:flex; align-items:center; gap:10px; padding: 12px 14px; text-align:left;
}
.btn-estado:hover{ border-color: var(--rojo); color: var(--rojo); }
.btn-estado.actual{ background: var(--rojo); border-color: var(--rojo); color:#fff; }
.btn-estado.actual::after{ content:"actual"; margin-left:auto; font-size:.68rem; background:rgba(255,255,255,.25); padding:3px 8px; border-radius:999px; }
.btn-estado .punto{ width:11px;height:11px;border-radius:50%; flex:none; }
.punto-por_buscar{ background:#9aa1ad; } .punto-en_camino{ background: var(--aviso); }
.punto-en_local{ background: var(--info); } .punto-retirado{ background: var(--ok); }

/* --------------------------------------------------------------- TARJETAS DE ELECTORY */
.tarjeta-elector{
  border:1px solid var(--linea); border-radius: var(--radio); background:#fff; padding:14px;
  box-shadow: var(--sombra); display:flex; flex-direction:column; gap:10px;
}
.tarjeta-elector .te-cab{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.tarjeta-elector .te-nombre{ font-weight:700; font-size:.98rem; }
.tarjeta-elector .te-ci{ font-family: ui-monospace,Consolas,monospace; font-size:.8rem; color: var(--gris); }
.tarjeta-elector .te-meta{ font-size:.79rem; color: var(--gris); display:flex; flex-direction:column; gap:3px; }
.tarjeta-elector .te-acciones{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- LISTAS */
.lista{ display:flex; flex-direction:column; gap:9px; }
.lista-fila{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 14px; border:1px solid var(--linea); border-radius: 12px; background:#fff;
}
.lista-fila .lf-principal{ min-width:0; }
.lista-fila .lf-titulo{ font-weight:700; font-size:.92rem; }
.lista-fila .lf-sub{ font-size:.78rem; color: var(--gris); }

/* ---------------------------------------------- MOVIMIENTO POR CONCEJAL */
.movc{
  border:1px solid var(--linea); border-radius:12px; background:#fff; padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
/* La tarjeta se tine con el color de la meta (borde + fondo, por estilo en
   linea que manda la API). La meta es 0 = rojo ... cumplida = verde. */
.movc.movc-obj{ border-width:2px; }
.movc-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.movc-nombre{ font-weight:800; font-size:.97rem; line-height:1.25; }
.movc-sub{ font-size:.78rem; color: var(--gris); margin-top:3px; }
.movc-nums{ display:grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap:8px; }
.movc-num{ text-align:center; }
.movc-num b{ display:block; font-size:1.25rem; font-weight:800; letter-spacing:-.4px; line-height:1.15; }
.movc-num.n-total b{ font-size:1.6rem; }
.movc-num span{ font-size:.67rem; color: var(--gris); text-transform:uppercase; letter-spacing:.2px; }
.movc-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.8rem; }
/* Linea de la meta: "META 500 · faltan 488" + el porcentaje */
.movc-obj-linea{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:.8rem; }
.movc-obj-linea .obj-titulo{ text-transform:uppercase; letter-spacing:.3px; font-size:.7rem; color: var(--gris); }
.movc-obj-linea .obj-num{ font-weight:800; font-size:1rem; }
/* Linea del dia D: cuantos electores se cargaron en la nomina ese dia. */
.movc-dia{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  border-top:1px dashed var(--linea); padding-top:9px; font-size:.8rem;
}
.movc-dia .dia-etiqueta{ text-transform:uppercase; letter-spacing:.3px; font-size:.7rem; color: var(--gris); font-weight:700; }
.movc-dia .dia-num{ font-weight:800; font-size:.95rem; }
/* La tarjeta entera es un enlace al detalle del concejal. */
a.movc-link{ text-decoration:none; color:inherit; transition: box-shadow .18s ease, transform .18s ease; }
a.movc-link:hover, a.movc-link:focus-visible{ box-shadow: 0 8px 22px rgba(0,0,0,.10); transform: translateY(-2px); }
.movc-ver{ font-size:.75rem; font-weight:700; color: var(--rojo); text-align:right; }

/* ------------------------------------------------------------------ LOGIN */
.cuerpo-login{
  padding-top:0; display:flex; align-items:center; justify-content:center;
  min-height:100vh; background: linear-gradient(150deg, #8e0b20 0%, #c8102e 48%, #e0324c 100%);
  padding: 22px;
}
.login-caja{ width:100%; max-width: 430px; background:#fff; border-radius: 22px; padding: 32px 28px 26px; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.login-marca{ text-align:center; margin-bottom: 22px; }
.login-logo{ width:66px;height:66px;border-radius:20px;background: var(--rojo); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow: 0 10px 26px rgba(200,16,46,.3); }
.login-marca h1{ font-size:1.42rem; }
.login-marca p{ color: var(--gris); font-size:.85rem; margin:6px 0 0; }
.login-form{ display:flex; flex-direction:column; }
.login-pie{ text-align:center; color: var(--gris-cla); font-size:.76rem; margin: 20px 0 0; }

/* ------------------------------------------------------------ UTILIDADES */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.texto-gris{ color: var(--gris); } .texto-ok{ color: var(--ok); } .texto-err{ color: var(--err); }
.texto-rojo{ color: var(--rojo); } .texto-centro{ text-align:center; }
.chico{ font-size:.8rem; } .mediano{ font-size:.9rem; }
.oculto{ display:none !important; }
.fila-flex{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.espaciado{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
.separador{ height:1px; background: var(--linea); margin: 16px 0; border:0; }
.barra{ height:10px; border-radius:999px; background:#eceef1; overflow:hidden; }
.barra > i{ display:block; height:100%; background: linear-gradient(90deg, var(--rojo), #e0324c); border-radius:999px; transition: width .5s ease; }
.cargando{ display:inline-block; width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: girar .7s linear infinite; }
@keyframes girar{ to{ transform: rotate(360deg);} }
.pulso{ animation: pulso 1.1s ease; }
@keyframes pulso{ 0%{ background:#fff6c2; } 100%{ background:transparent; } }

/* ------------------------------------------------------- MOVIL (<=900px) */
@media (max-width:900px){
  :root{ --topbar-h: 60px; }
  body{ padding-bottom: 78px; }
  .nav{
    top:auto; bottom:0; left:0; right:0; width:auto; height: 68px;
    display:flex; align-items:center; gap:4px; padding: 6px 8px;
    border-right:0; border-top:1px solid var(--linea);
    overflow-x:auto; overflow-y:hidden; box-shadow: 0 -3px 16px rgba(16,18,22,.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-item{
    flex: 1 0 auto; min-width:72px; flex-direction:column; gap:3px; padding: 7px 8px;
    margin-bottom:0; font-size:.66rem; border-radius:11px; justify-content:center;
  }
  .nav-item.activo{ box-shadow:none; }
  .contenido{ margin-left:0; padding: 15px; min-height:auto; }
  .pie{ margin-left:0; padding: 10px 15px 20px; font-size:.7rem; }
  .encabezado h1{ font-size:1.2rem; }
  .metrica-valor{ font-size:1.6rem; }
  .chip-datos{ display:none; }
  .marca-texto small{ display:none; }
  .card{ padding:15px; border-radius:12px; }
  .btn{ min-height:48px; }
}

@media (max-width:420px){
  .marca-texto strong{ font-size:.9rem; }
  .vivo span{ display:none; }
  .metrica-valor{ font-size:1.45rem; }
}

/* --------------------------------------------------- IMPRESION (comprobantes) */
@media print{
  .topbar,.nav,.pie,.acciones,.toast-zona,.modal-pie{ display:none !important; }
  body{ padding:0; background:#fff; }
  .contenido{ margin:0; padding:0; }
  .card{ box-shadow:none; border:1px solid #ccc; }
}