/* ═══════════════════════════════════════════════════════════
   estilo.css — Sistema de diseño de Gestión Ciudadana
   Mismo lenguaje visual que TATOVEGA361: paleta vino/borgoña,
   tipografía Segoe UI, login dividido, header + sidebar oscuro.
   ═══════════════════════════════════════════════════════════ */
:root{
  --brand-primary:#5b0f20; --brand-secondary:#8f2032; --brand-soft:#d9a2a7;
  --bg:#f7f2f3; --card:#ffffff; --ink:#231f20; --muted:#6f5f63; --line:#eadde0;
  --vino-pale:#f9f0f2; --vino-dark:#3d0a16;
  --verde:#2d7a4f; --verde-p:#e8f5ee;
  --amber:#b8760a; --amber-p:#fef3dc;
  --azul:#1a5276; --azul-p:#e8f0f8;
  --rojo:#c0392b; --rojo-p:#fde8e6;
  --gris-bg:#f5f3f4; --gris-soft:#9a8a8e;
  --sw:230px; --hh:62px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;height:100vh}
svg{display:block}
.ico{display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.ico svg{width:1em;height:1em}

/* ── LOGIN ── */
#login{position:fixed;inset:0;z-index:1000;background:linear-gradient(135deg,#2a0810 0%,#5b0f20 45%,#3d0a16 100%);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:20px}
.lg-wrap{width:100%;max-width:920px;background:var(--card);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 80px rgba(0,0,0,.5);min-height:500px}
.lg-left{position:relative;overflow:hidden;background:linear-gradient(160deg,#3d0a16,#5b0f20 60%,#8f2032)}
.lg-left-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px 30px;gap:6px}
.lg-left-brand{font-size:26px;font-weight:800;color:#fff;letter-spacing:.5px;line-height:1.15}
.lg-left-tag{font-size:13px;color:rgba(255,255,255,.85);font-weight:500;font-style:italic}
.lg-left-feats{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.lg-left-feat{display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(255,255,255,.92);font-weight:500}
.lg-left-feat .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);flex-shrink:0}
.lg-right{padding:42px 40px;display:flex;flex-direction:column;justify-content:center}
.lg-logo-row{display:flex;align-items:center;gap:11px;margin-bottom:28px}
.lg-logo-mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:800;flex-shrink:0}
.lg-logo-txt{line-height:1.15}
.lg-logo-name{font-size:18px;font-weight:800;color:var(--brand-primary)}
.lg-logo-tag{font-size:10px;color:var(--muted);font-style:italic}
.lg-welcome{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:4px}
.lg-sub{font-size:13px;color:var(--muted);margin-bottom:26px}
.lg-field{margin-bottom:18px}
.lg-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gris-soft);margin-bottom:8px;display:block}
.lg-input{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;font-family:inherit;color:var(--ink);transition:all .18s}
.lg-input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--vino-pale)}
.lg-error{background:var(--rojo-p);border-left:3px solid var(--rojo);color:var(--rojo);font-size:12px;font-weight:600;padding:10px 12px;border-radius:8px;margin-bottom:16px;display:none}
.lg-error.show{display:block}
.lg-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;margin-top:8px}
.lg-btn:hover{opacity:.93;transform:translateY(-1px);box-shadow:0 8px 20px rgba(91,15,32,.3)}
.lg-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.lg-foot{text-align:center;font-size:11px;color:var(--gris-soft);margin-top:20px;line-height:1.6}
.lg-foot strong{color:var(--brand-primary);font-weight:700}
@media(max-width:760px){.lg-wrap{grid-template-columns:1fr;max-width:420px}.lg-left{height:150px}.lg-right{padding:32px 28px}}

/* ── APP SHELL ── */
#app{display:none;height:100vh;flex-direction:column}
#app.on{display:flex}
.hdr{height:var(--hh);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0;box-shadow:0 2px 10px rgba(91,15,32,.06);z-index:50}
.hdr-logo{display:flex;align-items:center;gap:9px}
.hdr-logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;flex-shrink:0}
.hdr-logo-txt{display:flex;flex-direction:column;line-height:1.1}
.hdr-logo-name{font-size:15px;font-weight:800;color:var(--brand-primary)}
.hdr-logo-tag{font-size:9px;color:var(--muted);font-style:italic}
.hdr-mod{font-size:13px;font-weight:600;color:var(--muted);padding-left:14px;border-left:1px solid var(--line);margin-left:4px}
.hdr-sp{flex:1}
.hdr-conn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--verde);background:var(--verde-p);padding:4px 10px;border-radius:20px}
.hdr-conn .dot{width:7px;height:7px;border-radius:50%;background:var(--verde)}
.hdr-conn.off{color:var(--rojo);background:var(--rojo-p)}
.hdr-conn.off .dot{background:var(--rojo)}
.hdr-user{display:flex;align-items:center;gap:10px}
.hdr-av{width:36px;height:36px;border-radius:50%;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.hdr-uinfo{line-height:1.2}
.hdr-uname{font-size:12px;font-weight:700;color:var(--ink)}
.hdr-urole{font-size:10px;color:var(--muted)}
.hdr-out{padding:6px 12px;border:1px solid var(--line);border-radius:8px;font-size:11px;cursor:pointer;background:#fff;color:var(--muted);font-family:inherit;display:flex;align-items:center;gap:5px;transition:all .2s}
.hdr-out:hover{border-color:var(--brand-primary);color:var(--brand-primary)}

.shell{display:flex;flex:1;overflow:hidden}
.side{width:var(--sw);background:linear-gradient(180deg,var(--brand-primary) 0%,var(--vino-dark) 100%);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;padding-top:14px}
.side-div{height:1px;background:rgba(255,255,255,.12);margin:8px 12px}
.side-sec{padding:0 0 4px;margin-top:10px}
#side-nav{padding:0 12px}
.side-lbl{font-size:9px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;padding:0 8px}
.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;transition:all .18s;color:rgba(255,255,255,.7);font-size:12.5px;font-weight:500;margin-bottom:2px}
.nav:hover{background:rgba(255,255,255,.1);color:#fff}
.nav.on{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.nav-ic{font-size:15px;width:20px;display:flex;justify-content:center;flex-shrink:0}
.nav-bdg{margin-left:auto;background:rgba(255,255,255,.22);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px}
.nav-bdg.alert{background:var(--rojo)}

.main{flex:1;overflow-y:auto;padding:22px}
.page{display:none}
.page.on{display:block}
.ptit{font-size:17px;font-weight:800;color:var(--brand-primary);margin-bottom:2px}
.psub{font-size:11px;color:var(--muted);margin-bottom:12px}

/* ── HOME ── */
.home-hero{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));border-radius:18px;padding:28px 32px;margin-bottom:24px;color:#fff;position:relative;overflow:hidden}
.home-hero::after{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07)}
.home-hero h1{font-size:24px;font-weight:800;margin-bottom:6px;position:relative}
.home-hero p{font-size:13px;opacity:.85;font-style:italic;position:relative}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.mod-card{background:var(--card);border-radius:16px;padding:22px;cursor:pointer;transition:all .2s;border:1px solid var(--line);position:relative;overflow:hidden}
.home-sec-lbl{grid-column:1/-1;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--gris-soft);margin:28px 0 14px}
.home-sec-lbl:first-child{margin-top:0}
.home-grid-fila{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.home-atras-bar{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-bottom:6px}
.mod-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(91,15,32,.13);border-color:var(--brand-soft)}
.mod-card-ic{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;margin-bottom:14px}
.mod-card-ic svg{width:24px!important;height:24px!important}
.mod-card h3{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:5px}
.mod-card p{font-size:11.5px;color:var(--muted);line-height:1.5}

/* ── KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border-radius:14px;padding:16px;border-top:4px solid var(--brand-primary);box-shadow:0 2px 10px rgba(91,15,32,.05)}
.kpi.cv{border-top-color:var(--verde)} .kpi.ca{border-top-color:var(--azul)}
.kpi.co{border-top-color:var(--amber)} .kpi.cr{border-top-color:var(--rojo)}
.kpi-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-soft);margin-bottom:6px}
.kpi-v{font-size:27px;font-weight:900;color:var(--ink)}
.kpi-s{font-size:10px;color:var(--muted);margin-top:3px}

/* ── CARDS / FORM / TABLA / BOTONES ── */
.card{background:var(--card);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(91,15,32,.05)}
.card-t{font-size:13px;font-weight:800;color:var(--brand-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.field{margin-bottom:14px}
.field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-soft);margin-bottom:6px;display:block}
.field input,.field select,.field textarea{width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--vino-pale)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tbl-card{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(91,15,32,.05)}
.tbl-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.tbl-t{font-size:12px;font-weight:800;color:var(--brand-primary)}
.tbl-w{overflow-x:auto;max-height:60vh;overflow-y:auto}
table{width:100%;border-collapse:collapse}
th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--gris-soft);padding:8px 11px;text-align:left;border-bottom:2px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
td{padding:8px 11px;border-bottom:1px solid var(--line);font-size:12px}
tr:hover td{background:var(--gris-bg)}
.pill{padding:2px 9px;border-radius:11px;font-size:10px;font-weight:700;display:inline-block}
.pill.pendiente{background:var(--amber-p);color:var(--amber)}
.pill.atencion{background:var(--azul-p);color:var(--azul)}
.pill.resuelta{background:var(--verde-p);color:var(--verde)}
.pill.cancelada{background:var(--rojo-p);color:var(--rojo)}
.btn{padding:9px 16px;border-radius:10px;border:none;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.btn-pri{background:var(--brand-primary);color:#fff}
.btn-pri:hover{background:var(--vino-dark)}
.btn-out{background:#fff;border:1.5px solid var(--line);color:var(--muted)}
.btn-out:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.filt{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fb{padding:5px 13px;border-radius:20px;border:1.5px solid var(--line);font-size:11px;font-weight:700;cursor:pointer;background:#fff;color:var(--muted);font-family:inherit;transition:all .15s}
.fb.on,.fb:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
.alert-row{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;margin-bottom:9px;font-size:12px}
.alert-warn{background:var(--amber-p);border-left:3px solid var(--amber);color:#6d4c00}
.alert-crit{background:var(--rojo-p);border-left:3px solid var(--rojo);color:var(--rojo)}
.alert-ok{background:var(--verde-p);border-left:3px solid var(--verde);color:var(--verde)}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ico{font-size:32px;margin-bottom:10px;opacity:.5}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;z-index:9999;background:var(--brand-primary);color:#fff;padding:12px 18px;border-radius:10px;font-size:12px;font-weight:600;box-shadow:0 6px 22px rgba(91,15,32,.35);transform:translateY(60px);opacity:0;transition:all .3s;display:flex;align-items:center;gap:8px;max-width:340px}
.toast.show{transform:translateY(0);opacity:1}
.toast.err{background:var(--rojo)}

.search-input{padding:8px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:12px;font-family:inherit;color:var(--ink);min-width:220px}
.search-input:focus{outline:none;border-color:var(--brand-primary)}
.tbl-bar-controles{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.date-mini{padding:7px 10px;border:1.5px solid var(--line);border-radius:9px;font-size:12px;font-family:inherit;color:var(--ink)}
.date-mini:focus{outline:none;border-color:var(--brand-primary)}
.fecha-rango-lbl{font-size:11px;color:var(--muted);white-space:nowrap}

/* ── Autocompletar de ciudadano (búsqueda dinámica) ── */
.autocomplete-resultados{max-height:220px;overflow-y:auto;border:1.5px solid var(--line);border-radius:10px;margin-top:6px;background:#fff}
.autocomplete-item{padding:10px 12px;cursor:pointer;font-size:12.5px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line)}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover{background:var(--vino-pale)}
.autocomplete-item span{font-size:11px;color:var(--muted)}
.autocomplete-item.autocomplete-vacio{cursor:default;color:var(--muted);text-align:center}
.autocomplete-item.autocomplete-vacio:hover{background:none}
.autocomplete-elegido{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border:1.5px solid var(--brand-primary);border-radius:10px;background:var(--vino-pale);font-size:12.5px;font-weight:700;color:var(--brand-primary)}

/* ── Gráficas del Dashboard (Chart.js) ── */
.chart-wrap{position:relative;height:260px;margin-top:6px}
.chart-wrap-sm{height:220px}
.mapa-controles{display:flex;gap:18px;flex-wrap:wrap;padding:10px 4px 2px;font-size:12px;color:var(--ink)}
.mapa-controles label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.mapa-controles input[type=checkbox]{cursor:pointer;accent-color:var(--brand-primary)}
.mapa-controles i{width:10px;height:10px;border-radius:50%;display:inline-block}
.btn-sm{padding:5px 11px;font-size:10.5px;border-radius:8px}
.link-row{color:var(--brand-primary);cursor:pointer;font-weight:700;text-decoration:none;font-size:11.5px}
.link-row:hover{text-decoration:underline}
.detalle-card{border:1.5px solid var(--brand-soft);background:var(--vino-pale)}
.detalle-close{float:right;cursor:pointer;color:var(--muted);font-weight:800}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.foto-thumb{width:82px;height:82px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--gris-bg)}
.foto-thumb-wrap{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.loc-btn{font-size:11px;color:var(--azul);cursor:pointer;font-weight:700;background:var(--azul-p);padding:6px 12px;border-radius:8px;display:inline-block;border:none;font-family:inherit}
.loc-status{font-size:11px;color:var(--muted);margin-left:8px}

.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tab-btn{padding:10px 18px;border:none;background:none;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit}
.tab-btn.on{color:var(--brand-primary);border-bottom-color:var(--brand-primary)}
.tab-panel{display:none}
.tab-panel.on{display:block}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(20,4,8,.55);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal-box{background:#fff;border-radius:18px;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.modal-header{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:#fff;padding:16px 20px;border-radius:18px 18px 0 0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0}
.modal-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-close:hover{background:rgba(255,255,255,.32)}
.modal-body{padding:20px;overflow-y:auto}
.modal-footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}

/* ── SELECTOR VISUAL DE TIPO (grid de opciones tipo tarjeta) ── */
.tipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.tipo-opcion{display:flex;align-items:center;gap:8px;padding:11px 10px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink);transition:all .15s;text-align:left}
.tipo-opcion:hover{border-color:var(--brand-soft)}
.tipo-opcion.on{border-color:var(--brand-primary);background:var(--vino-pale);color:var(--brand-primary)}
.tipo-opcion .ico-emoji{flex-shrink:0;display:flex;color:var(--brand-primary)}
.tipo-opcion.on .ico-emoji{color:var(--brand-primary)}

/* ── BOTÓN DE UBICACIÓN PROMINENTE ── */
.gps-btn-grande{width:100%;padding:13px;background:var(--azul);color:#fff;border:none;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s}
.gps-btn-grande:hover{opacity:.9}
.gps-estado{margin-top:8px;display:inline-block}

/* ── BOTÓN FLOTANTE (acceso rápido a Reportar siniestro) ── */
.fab-siniestro{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:var(--rojo);color:#fff;border:none;box-shadow:0 8px 22px rgba(192,57,43,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:80;transition:transform .15s}
.fab-siniestro:hover{transform:scale(1.06)}

/* ── SELECTOR DE MODO DE CAPTURA (Foto+OCR vs Manual) ── */
.modo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.modo-opcion{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;transition:all .15s;text-align:left}
.modo-opcion:hover{border-color:var(--brand-soft);transform:translateY(-2px);box-shadow:0 8px 20px rgba(91,15,32,.1)}
.modo-opcion.on{border-color:var(--brand-primary);background:var(--vino-pale)}
.modo-ic{width:38px;height:38px;border-radius:10px;background:var(--vino-pale);display:flex;align-items:center;justify-content:center;margin-bottom:10px;color:var(--brand-primary)}
.modo-opcion.on .modo-ic{background:var(--brand-primary);color:#fff}
.modo-opcion h4{font-size:13px;font-weight:800;margin-bottom:3px;color:var(--ink)}
.modo-opcion p{font-size:11px;color:var(--muted)}

/* ── ASISTENTE DE PASOS (1-2-3) ── */
.paso-indicador{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.paso-item{flex:1;min-width:140px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--gris-bg);cursor:pointer;font-size:11px;font-weight:700;color:var(--muted);transition:all .15s}
.paso-item:hover{background:var(--vino-pale)}
.paso-num{width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.paso-item.on{background:var(--brand-primary);color:#fff}
.paso-item.on .paso-num{background:#fff;color:var(--brand-primary);border-color:#fff}
.paso-panel{display:none}
.paso-panel.on{display:block}

/* ── LAYOUT DE CAPTURA (contenido + panel lateral "Corte del día") ── */
.captura-layout{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.ultimas-capturas-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.ultimas-capturas-item:last-child{border-bottom:none}
.ultimas-capturas-av{width:28px;height:28px;border-radius:50%;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}

/* ── CHIPS SELECCIONABLES (tipo de liderazgo, procedencia, partido, etc.) ── */
.chip-selector{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip-opcion{padding:6px 14px;border-radius:20px;border:1.5px solid var(--line);background:#fff;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--muted);transition:all .15s;font-family:inherit}
.chip-opcion:hover{border-color:var(--brand-soft)}
.chip-opcion.on{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}

/* ── DICTADO POR VOZ ── */
.field-con-mic{display:flex;gap:6px;align-items:flex-end}
.field-con-mic .field{flex:1}
.mic-btn{width:32px;height:32px;border-radius:50%;border:none;background:var(--gris-bg);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.mic-btn:hover{background:var(--vino-pale);color:var(--brand-primary)}
.mic-btn.escuchando{background:var(--rojo);color:#fff;animation:pulso-mic 1s infinite}
@keyframes pulso-mic{0%,100%{opacity:1}50%{opacity:.55}}

/* ── CONTADOR TÁCTIL (+/-) PARA MÓVIL, EN VEZ DE TECLADO NUMÉRICO ── */
.stepper{display:flex;align-items:center;gap:8px;margin-top:6px}
.stepper-btn{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:18px;font-weight:800;cursor:pointer;color:var(--brand-primary);flex-shrink:0;font-family:inherit}
.stepper-btn:hover{background:var(--vino-pale)}
.stepper-valor{width:54px;text-align:center;border:1.5px solid var(--line);border-radius:9px;padding:9px 4px;font-size:14px;font-weight:700;font-family:inherit}

/* ── ACCIONES RÁPIDAS EN TABLA (ver/aceptar/cancelar/reabrir) ── */
.acciones-rapidas{display:flex;gap:5px}
.accion-rapida-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.accion-rapida-btn:hover{border-color:var(--brand-soft);background:var(--vino-pale)}
.accion-rapida-btn.aceptar{color:var(--verde);border-color:var(--verde)}
.accion-rapida-btn.aceptar:hover{background:var(--verde);color:#fff}
.accion-rapida-btn.cancelar{color:var(--rojo);border-color:var(--rojo)}
.accion-rapida-btn.cancelar:hover{background:var(--rojo);color:#fff}

/* ── GRID DE INFORMACIÓN (modal de revisión rápida) ── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:16px 0}
.info-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris-soft);margin-bottom:2px}
.info-valor{font-size:13px;color:var(--ink);font-weight:600}

/* ── HISTORIAL / CADENA DE CAMBIOS ── */
.historial-item{padding:8px 0;border-bottom:1px solid var(--line);font-size:11.5px;display:flex;justify-content:space-between;gap:10px}
.historial-item:last-child{border-bottom:none}
.historial-accion{font-weight:700;color:var(--ink)}
.historial-meta{color:var(--muted);flex-shrink:0}

@media(max-width:900px){
  .captura-layout{grid-template-columns:1fr}
  .modo-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  .side{width:62px}:root{--sw:62px}
  .nav span:not(.nav-ic):not(.nav-bdg){display:none}
  .side-lbl{display:none}
  .mod-grid{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
  .hdr-logo-txt,.hdr-uinfo{display:none}
  .tbl-bar{flex-direction:column;align-items:stretch}
  .tbl-bar-controles{width:100%}
  .search-input{min-width:0;width:100%}
  .date-mini{flex:1 1 42%}
  .tbl-bar-controles .btn{width:100%}
}

@media(max-width:480px){
  .tipo-grid{grid-template-columns:repeat(2,1fr)}
  .autocomplete-elegido{flex-direction:column;align-items:flex-start}
}