/* SIGECCI - PWA de consultas (esqueleto). Paleta oficial de tema_sigecci.py */
:root{
  --banda:#0c2742;        /* banda superior marino oscuro */
  --banda-texto:#c9d8e7;
  --marino:#1b2a4a;       /* botones / selectores / solapas */
  --marino-activo:#2c4677;/* solapa elegida / apretado */
  --marino-texto:#dfe6f2;
  --marino-apagado:#8a96ab;
  --dorado:#d9b25f;       /* linea de la solapa elegida */
  --bg:#f3f5f8;           /* fondo de pantalla */
  --card:#ffffff;
  --borde:#dfe3ea;
  --campo-borde:#a7b4c8;
  --texto:#172033;
  --apagado:#667085;
  --exito:#16803c;        /* sin registro */
  --exito-bg:#e7f3ec;
  --peligro:#b42318;      /* positiva */
  --peligro-bg:#fbeceb;
  --peligro-borde:#e8b4ae;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--marino);color:var(--texto);
  overscroll-behavior:none;
}
#app{max-width:480px;margin:0 auto;background:var(--bg);min-height:100%;position:relative}

.pantalla{display:flex;flex-direction:column;min-height:100vh}

/* Banda superior */
.banda{
  background:var(--banda);border-bottom:3px solid var(--dorado);
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:0;z-index:5;
}
.banda-sub{align-items:center}
.banda-titulo{min-width:0}
.marca{color:#fff;font-size:18px;font-weight:600;letter-spacing:1px}
.marca.chico{font-size:16px;letter-spacing:.3px;font-weight:600}
.subtitulo{color:var(--banda-texto);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.candado{color:var(--dorado);font-size:20px;font-style:normal}
.volver{background:transparent;border:0;color:var(--marino-texto);font-size:22px;line-height:1;padding:4px 8px 4px 0;cursor:pointer}

/* Cuerpo con scroll */
.cuerpo{flex:1;padding:14px 16px 18px;overflow-y:auto}

.etiqueta{display:block;font-size:11px;color:var(--apagado);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 4px}
.cuerpo > .etiqueta:first-child{margin-top:0}

/* Selector / dropdown */
.selector{
  background:var(--card);border:1px solid var(--campo-borde);border-radius:8px;
  padding:0 12px;min-height:44px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;
}
.selector select{
  appearance:none;border:0;background:transparent;font:inherit;color:var(--texto);
  width:100%;height:44px;outline:none;cursor:pointer;
}
.chevron{color:var(--marino);font-size:14px}

/* Barra de dia */
.barra-dia{
  margin-top:14px;background:var(--marino);border-radius:8px;
  display:flex;align-items:center;justify-content:space-between;padding:6px 6px;
}
.flecha{background:transparent;border:0;color:var(--marino-texto);font-size:26px;line-height:1;width:48px;height:40px;cursor:pointer;border-radius:6px}
.flecha:active{background:var(--marino-activo)}
.dia-texto{text-align:center;color:#fff;background:transparent;border:0;cursor:pointer;padding:2px 10px;border-radius:6px;font:inherit}
.dia-texto:active{background:var(--marino-activo)}
.fecha-oculta{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dia-largo{font-size:14px;font-weight:500}
.dia-nota{font-size:11px;color:var(--banda-texto);min-height:14px}

/* Totales */
.totales{margin-top:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.totales .tarjeta{grid-column:span 2}
.totales .tarjeta.ancha{grid-column:span 3}
.tarjeta{background:var(--card);border:1px solid var(--borde);border-radius:9px;padding:6px 9px;text-align:left;width:100%;font:inherit;cursor:pointer}
.tarjeta:active{background:var(--marino-activo-suave, #eef1f6);border-color:var(--marino)}
.tarjeta .rotulo{font-size:10px;color:var(--apagado)}
.tarjeta .numero{font-size:19px;font-weight:600;color:var(--marino);margin-top:1px}
.tarjeta .numero.rojo{color:var(--peligro)}
.tarjeta .numero .pos-cat{color:var(--peligro);font-size:0.72em;font-weight:600}

/* Detalle */
.detalle-cab{margin-top:16px;display:flex;align-items:center;justify-content:space-between}
.detalle-titulo{font-size:12px;color:var(--marino);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.detalle-cuenta{font-size:11px;color:var(--apagado)}

.filtros-activos{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.filtro-pill{font-size:11px;background:var(--marino-activo);color:#fff;padding:3px 9px;border-radius:14px;display:inline-flex;align-items:center;gap:6px}
.filtro-pill button{background:transparent;border:0;color:#cfe0ff;font-size:13px;cursor:pointer;padding:0;line-height:1}

.lista{margin-top:8px;background:var(--card);border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.fila{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #eef1f6;font:inherit;cursor:pointer;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fila:last-child{border-bottom:0}
.fila:active{background:var(--marino-activo-suave, #eef1f6)}
.fila .dato{font-size:14px;color:var(--texto);font-weight:500}
.fila .meta{font-size:11px;color:var(--apagado);margin-top:2px}
.fila-dia{color:var(--marino);font-weight:600}   /* 0.9.72: el día de la consulta en el detalle */
.estado{font-size:11px;padding:3px 9px;border-radius:7px;white-space:nowrap}
.estado.sin{color:var(--exito);background:var(--exito-bg)}
.estado.positiva{color:var(--peligro);background:var(--peligro-bg)}
.vacio{padding:22px 12px;text-align:center;color:var(--apagado);font-size:13px}

/* 0.9.75: detalle con columnas Resultado · INTERPOL · SIFCOP */
.tarjeta .numero.verde{color:var(--exito)}
.lista-cab{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1.5px solid var(--borde);
  font-size:10px;color:var(--apagado);text-transform:uppercase;letter-spacing:.3px;background:var(--bg)}
.lc-datos{flex:1}
.lc-res{width:70px;text-align:center;flex:0 0 auto}
.lc-col{width:34px;text-align:center;flex:0 0 auto}
.fila .datos{flex:1;min-width:0}
.col-res{width:70px;flex:0 0 auto;display:flex;justify-content:center}
.col-marca{width:34px;flex:0 0 auto;text-align:center;font-size:15px;font-weight:700}
.col-marca.si{color:#1d6fe0}
.col-marca.no{color:var(--marino-apagado)}
.cp-tabla .cp-int{color:#1d6fe0;font-weight:600}
/* 0.9.75: Acerca de */
.acerca-marca{text-align:center;padding:14px 16px 6px}
.acerca-sig{font-size:22px;font-weight:700;color:var(--marino);letter-spacing:2px}
.acerca-sub{font-size:12px;color:var(--apagado);margin-top:2px}
.acerca-pie{text-align:center;font-size:11px;color:var(--apagado);padding:14px 20px 18px;line-height:1.5}
body.tema-oscuro .col-marca.si{color:#7ab0ff}
body.tema-oscuro .cp-tabla .cp-int{color:#7ab0ff}
body.tema-oscuro .acerca-sig{color:var(--texto)}
/* 0.9.75: botón dorado y pantalla Estado de los Centros */
.boton-comparar.estado-centros{border-color:var(--dorado);color:var(--banda);background:#fbf6ea}
.boton-comparar.estado-centros:active{background:var(--dorado);color:#fff}
body.tema-oscuro .boton-comparar.estado-centros{background:rgba(217,178,95,.12);color:var(--texto)}
.ec-sep{font-size:11px;color:var(--apagado);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 4px;font-weight:600}
.ec-sep:first-child{margin-top:2px}
.ec-sep.rojo{color:var(--peligro)}
.ec-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);
  border:1px solid var(--borde);border-radius:10px;padding:11px 13px;margin-top:8px}
.ec-item.sin{border-color:var(--peligro-borde);background:var(--peligro-bg)}
.ec-nombre{font-size:14px;font-weight:600;color:var(--texto)}
.ec-sub{font-size:11px;color:var(--apagado);margin-top:2px}
.ec-item.sin .ec-sub{color:var(--peligro)}
.ec-num{font-size:18px;font-weight:700;color:var(--marino)}
.ec-num.cero{color:var(--peligro)}

/* 0.9.75: Novedades (tarjeta en Inicio + pantalla por prioridad) */
.novedades-card{width:100%;margin-top:14px;background:var(--card);border:1px solid var(--borde);border-radius:9px;
  padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;cursor:pointer}
.novedades-card:active{background:var(--marino-activo-suave, #eef1f6)}
.nov-left{display:flex;align-items:center;gap:10px;text-align:left}
.nov-ico{font-size:20px}
.nov-t{display:block;font-size:14px;font-weight:600;color:var(--texto)}
.nov-s{display:block;font-size:11px;color:var(--apagado);margin-top:1px}
.nov-badge{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--peligro);color:#fff;
  font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.nov-sep{font-size:11px;color:var(--apagado);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 4px;font-weight:600}
.nov-sep:first-child{margin-top:2px}
.nov-sep.rojo{color:var(--peligro)}
.nov-item{width:100%;text-align:left;font:inherit;display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--borde);border-left:4px solid var(--marino);border-radius:10px;padding:11px 13px;margin-top:8px;cursor:pointer}
.nov-item.alta{border-left-color:var(--peligro)}
.nov-item.media{border-left-color:var(--dorado)}
.nov-item .ic{font-size:18px;flex:0 0 auto}
.nov-item .tx{flex:1;min-width:0}
.nov-item .ti{display:block;font-size:14px;font-weight:600;color:var(--texto)}
.nov-item .su{display:block;font-size:11px;color:var(--apagado);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nov-item.alta .su{color:var(--peligro)}
.nov-item .cuenta{font-size:16px;font-weight:700;color:var(--peligro);flex:0 0 auto}
.nov-item .chev{color:var(--marino-apagado);font-size:18px;flex:0 0 auto}
.sv-barra{height:8px;border-radius:5px;background:#e6e9ef;overflow:hidden;width:120px;margin-top:5px}
.sv-barra > span{display:block;height:100%;background:var(--marino)}
body.tema-oscuro .sv-barra{background:#243551}
.sv-sub{padding:14px 16px 4px;font-size:11px;color:var(--apagado);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* Barra inferior */
.barra-inferior{
  position:sticky;bottom:0;display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--borde);
}
.boton{flex:1;border-radius:8px;min-height:46px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.boton-pri{background:var(--marino);border:1px solid var(--marino);color:#fff}
.boton-pri:active{background:var(--marino-activo)}
.boton-sec{background:var(--card);border:1px solid var(--marino);color:var(--marino)}
.boton-ter{background:var(--card);border:1px solid var(--marino-apagado);color:var(--apagado);flex:1}
.boton.ancho{flex:2}

/* Chips de filtro */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:13px;background:var(--card);border:1px solid var(--campo-borde);color:var(--marino);padding:7px 13px;border-radius:16px;cursor:pointer}
.chip.activo{background:var(--marino-activo);border-color:var(--marino-activo);color:#fff}
.chip.chip-rojo.activo{background:var(--peligro);border-color:var(--peligro)}

/* Campo de busqueda */
.campo-busqueda{background:var(--card);border:1px solid var(--campo-borde);border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;min-height:44px}
.campo-busqueda .lupa{color:var(--apagado);font-size:15px}
.campo-busqueda input{border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--texto);width:100%}

/* Rango de fechas / horas (buscador) */
.rango{display:flex;gap:8px}
.rango-campo{flex:1;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--campo-borde);border-radius:8px;padding:5px 10px;min-height:44px;justify-content:center}
.rango-rot{font-size:10px;color:var(--apagado);text-transform:uppercase;letter-spacing:.4px}
.rango-campo input{border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--texto);width:100%}
/* 0.9.77: la fecha un poco más ancha que la hora, y el renglón «Se busca» con el período real */
.rango-campo.rango-fecha{flex:1.5}
.se-busca{margin-top:8px;font-size:12px;line-height:1.4;color:var(--texto);background:var(--card);border-left:3px solid var(--acento,#2563eb);border-radius:6px;padding:6px 10px}
.se-busca:empty{display:none}
.se-busca b{font-weight:600;letter-spacing:.4px;font-size:10px;color:var(--apagado);margin-right:6px}

/* Botones de período rápido (pantalla principal) */
.periodos{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.periodo-chip{flex:1 1 28%;min-width:72px;font-size:12px;background:var(--card);border:1px solid var(--campo-borde);color:var(--marino);padding:9px 6px;border-radius:8px;cursor:pointer;font-weight:500}
.periodo-chip:active{background:var(--marino-activo);color:#fff}
.periodo-chip.activo{background:var(--marino);color:#fff;border-color:var(--marino)}

/* Recuadro Armas a lo ancho */
.tarjeta.ancho{grid-column:1/-1}

/* Botón Comparar Centros */
.boton-comparar{width:100%;margin-top:12px;background:var(--card);border:1px solid var(--marino);color:var(--marino);border-radius:8px;min-height:44px;font-size:13px;font-weight:600;cursor:pointer}
.boton-comparar:active{background:var(--marino-activo);color:#fff}

/* Correo en la hoja Enviar */
.hoja-mail{margin:2px 2px 4px}
.hoja-mail input{text-transform:none}
.hoja-mail-nota{font-size:11px;color:var(--apagado);margin:0 4px 6px;line-height:1.4}
.hoja-mail-row{display:flex;gap:8px;align-items:center;margin:6px 2px 4px}
.hoja-mail-row .hoja-mail{flex:1;margin:0}
.boton-primario{background:var(--marino);color:#fff;border:0;border-radius:9px;padding:11px 16px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.boton-primario:active{opacity:.85}

/* Comparativa de Centros */
.comparar-exp{background:var(--marino-activo);border:0;color:#fff;font-size:12px;font-weight:600;padding:8px 12px;border-radius:7px;cursor:pointer;white-space:nowrap;margin-left:6px}
.comparar-exp:active{opacity:.85}
.cp-scroll{overflow-x:auto;margin-top:6px;border:1px solid var(--borde);border-radius:10px;background:var(--card)}
.cp-tabla{border-collapse:collapse;font-size:11px;white-space:nowrap;min-width:100%}
.cp-tabla th{color:var(--apagado);text-transform:uppercase;letter-spacing:.2px;font-weight:500;padding:7px 6px;text-align:right;border-bottom:1.5px solid var(--borde)}
.cp-tabla td{padding:9px 6px;text-align:right;border-bottom:0.5px solid var(--borde);color:#444}
.cp-tabla .cp-nombre{position:sticky;left:0;background:var(--card);text-align:left;min-width:92px;font-size:10px;color:var(--marino);z-index:1}
.cp-tabla .cp-cons{color:var(--marino);font-weight:500}
.cp-tabla .cp-pos{color:var(--peligro);font-weight:500}
.cp-tabla .cp-neg{color:var(--exito)}
.cp-tabla .cp-cero{color:var(--marino-apagado)}
.cp-tabla .cp-sub{color:var(--apagado);font-size:10px}
.cp-tabla .cp-vtot{color:var(--marino);font-weight:600}
.cp-tabla .cp-veh1{border-left:1px solid var(--borde)}
.cp-tabla .cp-vgrupo{text-align:center;color:var(--marino);border-left:1px solid var(--borde);font-weight:500}
.cp-tabla tbody tr:active .cp-nombre{background:var(--marino-activo);color:#fff}
.cp-tabla .cp-total td{font-weight:600;color:var(--marino);border-top:1.5px solid var(--borde);border-bottom:0}
.cp-tabla .cp-total .cp-nombre{font-size:11px}

.acciones{display:flex;gap:8px;margin-top:20px}

/* Hojas (bottom sheets) */
.hoja-fondo{position:fixed;inset:0;background:rgba(10,20,35,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.hoja{width:100%;max-width:480px;background:var(--card);border-radius:16px 16px 0 0;max-height:80vh;overflow-y:auto;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.hoja-cab{font-size:15px;font-weight:600;color:var(--marino);padding:16px 16px 10px;border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--card)}
.hoja-lista{padding:6px 0}
.hoja-opcion,.hoja-centro-item{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #f0f2f6;padding:13px 16px;font:inherit;font-size:15px;color:var(--texto);cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.hoja-opcion small{color:var(--apagado);font-size:12px}
.hoja-opcion.proximo span:first-child{color:var(--apagado)}
.hoja-opcion.proximo small{color:var(--marino-apagado);font-style:italic}
.hoja-centro-item.activo{color:var(--marino);font-weight:600}
.hoja-sep{padding:12px 16px 4px;font-size:11px;color:var(--apagado);text-transform:uppercase;letter-spacing:.5px}
.ex-rango{display:flex;gap:8px;padding:6px 16px}            /* 0.9.72: filtro de fechas/horas en las hojas y en Comparativa */
/* 0.9.72: ver una consulta completa */
.cq-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid #f0f2f6;font-size:14px}
.cq-fila:last-child{border-bottom:0}
.cq-rot{color:var(--apagado);font-size:12px}
.cq-val{color:var(--texto);font-weight:500;text-align:right}
.consulta-acciones{padding:12px 16px 16px}
.consulta-acciones .boton-primario{width:100%}
body.tema-oscuro .cq-fila{border-bottom-color:#243551}
/* 0.9.72: aprobar teléfonos */
.tel-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #f0f2f6}
.tel-item:last-child{border-bottom:0}
.tel-nombre{font-size:14px;font-weight:500;color:var(--texto)}
.tel-sub{font-size:11px;color:var(--apagado);margin-top:2px}
.tel-acciones{display:flex;gap:6px;flex:0 0 auto}
.tel-aprobar{background:var(--exito);color:#fff;border:0;border-radius:7px;padding:8px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tel-rechazar{background:transparent;color:var(--peligro);border:1px solid var(--peligro);border-radius:7px;padding:8px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tel-aprobar[disabled]{opacity:.45;cursor:default}
.cuenta-nota{font-size:11px;color:var(--apagado);font-style:italic}
body.tema-oscuro .tel-item{border-bottom-color:#243551}
/* 0.9.74: detalle del aparato, alerta "ya tiene aprobado", ver teléfonos de la persona, bloquear/desbloquear */
.tel-bloque{border-bottom:1px solid #eef1f5}
.tel-bloque:last-child{border-bottom:0}
.tel-bloque .tel-item{border-bottom:0}
.tel-alerta{font-size:11px;color:var(--peligro);background:#fef2f2;border:1px solid #f3c6c6;border-radius:8px;padding:7px 10px;margin:0 16px 8px;line-height:1.35}
.tel-ver{display:block;width:calc(100% - 32px);margin:0 16px 12px;background:transparent;border:1px solid var(--marino);color:var(--marino);border-radius:7px;padding:9px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tel-volver{background:transparent;border:0;color:var(--marino);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:12px 16px 2px;text-align:left;display:block}
.tel-cab{font-size:14px;font-weight:600;color:var(--texto);padding:4px 16px 8px;border-bottom:1px solid var(--borde);margin-bottom:2px}
.tel-chip{font-size:10px;font-weight:700;border-radius:10px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.tel-chip.tel-activo{background:#e7f6ec;color:#1b7a3d}
.tel-chip.tel-pendiente{background:#fff4e5;color:#a65b00}
.tel-chip.tel-bloqueado{background:#fdecec;color:#b91c1c}
body.tema-oscuro .tel-bloque{border-bottom-color:#243551}
body.tema-oscuro .tel-alerta{background:#3a1d1d;border-color:#6b2b2b;color:#ffb4b4}
body.tema-oscuro .tel-chip.tel-activo{background:#15321f;color:#7fd8a0}
body.tema-oscuro .tel-chip.tel-pendiente{background:#3a2a12;color:#ffcf8f}
body.tema-oscuro .tel-chip.tel-bloqueado{background:#3a1d1d;color:#ffb4b4}
/* 0.9.74: versión visible en login e inicio (como los programas de escritorio) */
.app-version{text-align:center;font-size:11px;letter-spacing:.3px;padding:12px 0 2px}
#login-version{color:rgba(255,255,255,.55)}
#inicio-version{color:var(--apagado)}
body.tema-oscuro #inicio-version{color:rgba(255,255,255,.4)}
.hoja-opcion.hoja-destacada{background:#fbf6ea}                 /* 0.9.72: "Selección actual" resaltada */
.hoja-opcion.hoja-destacada span:first-child{font-weight:600}
.hoja-sep + .hoja-opcion.hoja-destacada{border-top:0}
.formato-switch{display:flex;align-items:center;gap:8px;padding:8px 16px 10px}
.formato-rotulo{font-size:12px;color:var(--apagado);margin-right:auto}
.formato-switch .chip{padding:5px 14px}
.hoja-aviso{padding:10px 16px 14px;font-size:12px;color:var(--apagado)}

/* Ingreso */
.cuerpo-login{display:flex;flex-direction:column;justify-content:flex-start;padding-top:24px}
.cuerpo-login .boton{flex:0 0 auto}
.login-texto{font-size:14px;color:var(--apagado);margin:0 0 18px}
.ojo{background:transparent;border:0;color:var(--apagado);font-size:16px;cursor:pointer;padding:4px}
.login-error{background:var(--peligro-bg);border:1px solid var(--peligro-borde);color:var(--peligro);
  font-size:13px;border-radius:8px;padding:10px 12px;margin:14px 0 0}
#btn-ingresar{margin-top:20px}
.login-demo{background:transparent;border:0;color:var(--marino);font-size:13px;text-decoration:underline;
  cursor:pointer;margin:16px auto 0;padding:8px}
.login-links{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;flex-wrap:wrap}
.login-link{background:transparent;border:0;color:var(--marino);font-size:13px;text-decoration:underline;cursor:pointer;padding:6px}
.login-sep{color:var(--apagado)}

/* 0.9.72: login con el mapa de la Provincia y el escudo girando (todo en azul oscuro) */
.pantalla-login{background:#0c2742;min-height:100vh}
.login-mapa{background:radial-gradient(120% 70% at 50% 25%, #12314f 0%, #0c2742 60%, #081626 100%);
  padding:calc(18px + env(safe-area-inset-top)) 16px 6px;text-align:center}
/* Pantalla de carga (splash): evita el destello del login al abrir la app */
.splash{position:fixed;inset:0;background:radial-gradient(120% 70% at 50% 35%, #12314f 0%, #0c2742 60%, #081626 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:60;perspective:700px}
.splash-escudo{width:92px;height:92px;animation:girar-splash 9s linear infinite}
@keyframes girar-splash{to{transform:rotateY(360deg)}}
.splash-marca{color:#f0c061;font-size:22px;font-weight:700;letter-spacing:2px}
@media (prefers-reduced-motion: reduce){.splash-escudo{animation:none}}

.mapa-wrap{position:relative;display:inline-block;perspective:700px}
.mapa-svg{width:auto;height:230px;max-height:40vh;display:block;margin:0 auto;overflow:visible}
.mapa-centro{fill:#ffd778;animation:latir-centro 3.4s ease-in-out infinite}
@keyframes latir-centro{0%,100%{opacity:.3}50%{opacity:1}}
/* el escudo gira sobre su eje (vertical), en 3D, posicionado sobre el centro de la Provincia */
.login-escudo{position:absolute;left:45.8%;top:40.1%;width:19.8%;transform:translate(-50%,-50%);animation:girar-escudo 9s linear infinite}
@keyframes girar-escudo{from{transform:translate(-50%,-50%) rotateY(0)}to{transform:translate(-50%,-50%) rotateY(360deg)}}
@media (prefers-reduced-motion: reduce){.mapa-centro,.login-escudo{animation:none}}
.login-marca{text-align:center;padding:4px 16px 2px}
.login-sigecci{color:#f0c061;font-size:24px;font-weight:700;letter-spacing:2px}
.login-super{color:#9fb4cc;font-size:11px;margin-top:2px}
.login-cuerpo{padding:14px 22px calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.campo-login{background:#0f2a46;border:1px solid #2c4677;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;min-height:46px}
.campo-login .ic{color:#7f95b0;font-size:15px;font-style:normal}
.campo-login input{border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:#eaf1fb;width:100%}
.campo-login input::placeholder{color:#7f95b0}
.campo-login .ojo{color:#7f95b0}
.boton-login{background:#2c4677;border:1px solid #2c4677;color:#fff;border-radius:8px;min-height:48px;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:4px}
.boton-login:active{background:#355394}
#pantalla-login .login-error{background:rgba(180,35,24,.18);border:1px solid #8c3a33;color:#ffc9c2;margin:0}
#pantalla-login .login-links{margin:6px 0 0}
#pantalla-login .login-link{color:#9fb4cc;text-decoration:none}
#pantalla-login .login-sep{color:#44618c}
#pantalla-login .login-demo{color:#7f95b0;text-decoration:none;margin:4px auto 0}
/* Botones de ancho completo en las pantallas de crear cuenta / recuperar / código */
#btn-crear, #btn-pedir-codigo, #btn-activar{width:100%;margin-top:20px}
.salir{background:transparent;border:1px solid var(--dorado);color:var(--dorado);font-size:13px;line-height:1;
  cursor:pointer;padding:7px 12px;border-radius:7px}
.aviso-demo{background:#fff6e5;border:1px solid var(--dorado);color:#7a5a16;font-size:12px;
  border-radius:8px;padding:7px 10px;margin-bottom:12px;text-align:center}

/* Brindis (toast) */
.brindis{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:var(--banda);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;max-width:88%;text-align:center;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* 0.9.72: Configuración */
.cfg-tarjeta{background:var(--card);border:1px solid var(--borde);border-radius:10px;padding:14px;margin-top:4px}
.cfg-nombre{font-size:16px;font-weight:600;color:var(--texto)}
.cfg-datos{font-size:12px;color:var(--apagado);margin-top:3px}
.boton-cfg-salir{margin-top:12px;width:100%;background:var(--card);border:1px solid var(--peligro);color:var(--peligro);border-radius:8px;min-height:42px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cfg-fila{width:100%;text-align:left;background:var(--card);border:1px solid var(--borde);border-radius:10px;padding:12px 14px;margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;cursor:pointer}
.cfg-fila .cfg-t{display:block;font-size:14px;font-weight:500;color:var(--texto)}
.cfg-fila .cfg-s{display:block;font-size:12px;color:var(--apagado);margin-top:2px}
.cfg-chev{color:var(--marino-apagado);font-size:20px}
.cfg-fila.cfg-destacada{border-color:var(--dorado)}
.cfg-badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--peligro);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cfg-switch{width:44px;height:26px;border-radius:13px;background:var(--campo-borde);position:relative;transition:background .15s;flex:0 0 auto}
.cfg-perilla{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cfg-fila[aria-pressed="true"] .cfg-switch{background:var(--marino)}
.cfg-fila[aria-pressed="true"] .cfg-perilla{left:21px}
.ayuda-cuerpo{padding:12px 16px 18px;font-size:13px;color:var(--texto);line-height:1.5}
.ayuda-cuerpo p{margin:0 0 12px}
.guardada-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid #f0f2f6}
.guardada-item .g-nombre{font-size:14px;color:var(--texto);font-weight:500}
.guardada-item .g-sub{font-size:11px;color:var(--apagado);margin-top:2px}
.guardada-item .g-borrar{background:transparent;border:0;color:var(--apagado);font-size:18px;cursor:pointer;padding:4px 6px}

/* 0.9.72: Modo oscuro (para el turno noche). Se activa con body.tema-oscuro. */
body.tema-oscuro{
  --bg:#0f1a2b; --card:#17273f; --borde:#283a56; --campo-borde:#3a4e6e;
  --texto:#e7eef7; --apagado:#9fb0ca;
  --marino:#4f7cc4; --marino-activo:#6a93d6; --marino-apagado:#7f8fa8;
  --exito:#5fd38a; --exito-bg:rgba(22,128,60,.22);
  --peligro:#ff8075; --peligro-bg:rgba(180,35,24,.24); --peligro-borde:#7d3b34;
}
body.tema-oscuro .aviso-demo{background:rgba(217,178,95,.14);border-color:rgba(217,178,95,.4);color:#e7d6a8}
body.tema-oscuro .hoja-opcion.hoja-destacada{background:rgba(217,178,95,.12)}
body.tema-oscuro .fila{border-bottom-color:#243551}
body.tema-oscuro .fila:last-child{border-bottom:0}
body.tema-oscuro .lista .fila{border-bottom-color:#243551}
body.tema-oscuro .guardada-item{border-bottom-color:#243551}
body.tema-oscuro .hoja-opcion,body.tema-oscuro .hoja-centro-item{border-bottom-color:#243551}
body.tema-oscuro .cpp-fila{border-bottom-color:#243551}

/* 0.9.72: Comparativa (3 modos: Centros / Períodos / Dependencias) */
.comp-tabs{display:flex;gap:6px;margin-bottom:10px}
.comp-tab{flex:1;text-align:center;font-size:13px;background:var(--card);border:1px solid var(--campo-borde);color:var(--marino);padding:9px 4px;border-radius:16px;cursor:pointer;font:inherit}
.comp-tab.activo{background:var(--marino);color:#fff;border-color:var(--marino)}
.comp-periodos{margin-top:0;margin-bottom:10px}
.cpp-cab,.cpp-fila{display:flex;align-items:center;gap:6px}
.cpp-cab{padding:0 12px 6px;font-size:11px}
.cpp-cab small{font-weight:400;color:var(--apagado)}
.cpp-tabla{background:var(--card);border:1px solid var(--borde);border-radius:10px;overflow:hidden}
.cpp-fila{padding:11px 12px;border-bottom:1px solid #eef1f6;font-size:13px}
.cpp-fila:last-child{border-bottom:0}
.cpp-rot{flex:1.2;color:var(--apagado)}
.cpp-a{flex:1;text-align:right;font-weight:600;color:var(--marino)}
.cpp-b{flex:1;text-align:right;color:var(--apagado)}
.cpp-d{flex:0.95;text-align:right;font-weight:600}
.cpp-sube{color:var(--exito)}
.cpp-baja{color:var(--peligro)}
.cpp-igual{color:var(--apagado)}

/* 0.9.75: Comparativas — tarjeta de resumen arriba */
.comp-head{background:var(--marino);color:#fff;border-radius:12px;padding:16px;margin-bottom:14px;text-align:center}
.comp-head-rot{font-size:12px;color:var(--banda-texto);text-transform:uppercase;letter-spacing:.5px}
.comp-head-num{font-size:36px;font-weight:700;line-height:1.05;margin-top:4px}
.comp-head-sub{font-size:12px;color:var(--banda-texto);margin-top:1px}
.comp-head-var{font-size:14px;font-weight:600;margin-top:10px;display:inline-block;padding:4px 14px;border-radius:14px;background:rgba(255,255,255,.12)}
.comp-head-var.cpp-sube{color:#8ee6ab}
.comp-head-var.cpp-baja{color:#ffb4ac}
.comp-head-var.cpp-igual{color:#eaf1fb}
.cpp-cab .cpp-d{text-align:right}

/* 0.9.77: Mi seguridad — códigos de emergencia del segundo factor */
#seguridad-cuerpo{padding:12px 16px 4px}
#seguridad-cuerpo > .hoja-opcion{margin:0 -16px;width:calc(100% + 32px)}   /* las opciones del menú, de borde a borde */
.seg-texto{color:var(--texto);font-size:14px;line-height:1.45;margin:0 0 12px}
.seg-estado{background:var(--card);border:1px solid var(--borde);border-radius:10px;padding:10px 12px;margin-bottom:14px;color:var(--texto)}
.seg-campo{display:block;margin-bottom:12px}
.seg-campo span{display:block;font-size:13px;color:var(--apagado);margin-bottom:6px}
.seg-campo input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--campo-borde);border-radius:10px;background:var(--card);color:var(--texto);font-size:16px}
.seg-aviso-rojo{color:var(--peligro);background:var(--peligro-bg);border:1px solid var(--peligro-borde);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.seg-ok{color:var(--exito);background:var(--exito-bg);border-radius:10px;padding:10px 12px;font-weight:600;margin-bottom:12px}
.seg-codigos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.seg-codigo{font-family:"Courier New",monospace;font-size:18px;letter-spacing:2px;text-align:center;background:var(--card);border:1px dashed var(--campo-borde);border-radius:8px;padding:10px 4px;color:var(--texto);user-select:all}
#seg-generar,#seg-copiar,#clave-definir,#clave-quitar{width:100%;margin-top:4px}
.seg-barra{display:flex;align-items:center;gap:8px;margin:-4px 0 12px}
.seg-volver{background:none;border:none;color:var(--marino);font-size:26px;line-height:1;cursor:pointer;padding:0 6px 0 0}
.seg-titulo{font-weight:700;font-size:16px;color:var(--texto)}
.seg-estado-ok{border-left:3px solid var(--exito)}
.boton-secundario{background:transparent;color:var(--marino);border:1.5px solid var(--marino);border-radius:9px;padding:11px 16px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.boton-secundario:active{opacity:.85}
.boton-secundario:disabled{opacity:.6}
.seg-quitar{color:var(--peligro);border-color:var(--peligro);margin-top:8px}

/* Ingreso con huella */
.boton-huella{width:100%;margin-top:10px;padding:0 16px;min-height:48px;border-radius:8px;border:1.5px solid rgba(255,215,120,.7);
  background:transparent;color:#ffd778;font:inherit;font-weight:700;font-size:16px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:8px}
.boton-huella:active{opacity:.85}
.boton-huella:disabled{opacity:.6}
.huella-ic{flex:0 0 auto}
.hoja-huella-cuerpo{padding:12px 16px 6px}
#huella-activar{width:100%;margin-top:4px}