/* ════════════════════════════════════════════════════════════
   APP · Layout, componentes y utilidades
   Construido sobre tokens.css. Componentes adaptados de la hoja
   de estilos del proyecto a una app real de dos superficies.
   ════════════════════════════════════════════════════════════ */

/* ── App shell (superficie WEB) ──
   Desktop: dos columnas. Laptop: sidebar algo más estrecho.
   Tablet/móvil: sidebar off-canvas (ver más abajo). */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
@media (max-width:1180px){ .app { grid-template-columns:220px 1fr; } }
@media (max-width:960px){  .app { grid-template-columns:1fr; } }

/* ── SIDEBAR ── */
.sidebar { background:var(--s2); border-right:1px solid var(--bdr); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); position:sticky; top:0; height:100vh; overflow-y:auto; z-index:60; }

/* botón hamburguesa: solo visible cuando el sidebar es off-canvas */
.nav-toggle { display:none; width:38px; height:38px; flex-shrink:0; align-items:center; justify-content:center; border:1px solid var(--bdr2); background:var(--s1); border-radius:var(--r-md); color:var(--tx2); cursor:pointer; box-shadow:var(--sh-1); }
.nav-toggle:hover { color:var(--tx); border-color:var(--est-bdr); }
.nav-toggle svg { width:20px; height:20px; }
.nav-backdrop { display:none; position:fixed; inset:0; background:rgba(10,12,18,.45); z-index:55; opacity:0; transition:opacity .2s; }

/* Tablet / móvil: el sidebar se desliza desde la izquierda */
@media (max-width:960px){
  .nav-toggle { display:inline-flex; }
  .sidebar {
    position:fixed; top:0; left:0; width:min(280px,82vw); height:100vh;
    transform:translateX(-100%); transition:transform .26s var(--ease);
    box-shadow:var(--sh-3); border-right:1px solid var(--bdr);
  }
  .app.nav-open .sidebar { transform:translateX(0); }
  .app.nav-open .nav-backdrop { display:block; opacity:1; }
}
.nav-logo { font-family:var(--display); font-weight:600; font-size:15px; padding:var(--sp-2) var(--sp-3) var(--sp-4); display:flex; align-items:center; gap:10px; }
.nav-logo-mark { width:26px; height:26px; border-radius:7px; background:var(--est); display:flex; align-items:center; justify-content:center; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.02em; flex-shrink:0; }
.nav-logo-mark.tac { background:var(--tac); } .nav-logo-mark.ope { background:var(--ope); }
.nav-group { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx3); padding:var(--sp-4) var(--sp-3) var(--sp-2); }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-md); font-size:13px; color:var(--tx2); cursor:pointer; transition:background .15s,color .15s; margin-bottom:2px; text-decoration:none; user-select:none; }
.nav-item:hover { background:var(--s3); color:var(--tx); }
.nav-item.active { background:var(--est-bg); color:var(--est-tx); font-weight:500; }
.app[data-level="tactica"] .nav-item.active { background:var(--tac-bg); color:var(--tac-tx); }
.app[data-level="operacion"] .nav-item.active { background:var(--ope-bg); color:var(--ope-tx); }
.nav-ico { width:17px; height:17px; flex-shrink:0; opacity:.85; }
.nav-badge { margin-left:auto; font-family:var(--mono); font-size:9px; background:var(--crit-bg); color:var(--crit-tx); padding:2px 7px; border-radius:10px; }
.sidebar-foot { margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--bdr); }

/* ── TOPBAR ── */
.main { min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) clamp(16px,3vw,32px); border-bottom:1px solid var(--bdr); background:var(--s1); position:sticky; top:0; z-index:30; flex-wrap:wrap; }
.topbar-left { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--tx3); flex-wrap:wrap; }
.crumbs .sep { opacity:.5; }
.crumbs .now { color:var(--tx); font-weight:500; }
.topbar-right { display:flex; gap:var(--sp-3); align-items:center; }
.mini-btn { display:inline-flex; align-items:center; gap:var(--sp-2); padding:7px 14px; border-radius:24px; border:1px solid var(--bdr2); background:var(--s1); cursor:pointer; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); box-shadow:var(--sh-1); transition:border-color .2s,color .2s; user-select:none; }
.mini-btn:hover { border-color:var(--est-bdr); color:var(--est); }
.tt-track { width:28px; height:16px; border-radius:8px; background:var(--s3); border:1px solid var(--bdr2); position:relative; transition:background .2s; flex-shrink:0; }
html.dark .tt-track { background:var(--est-bg); border-color:var(--est-bdr); }
.tt-thumb { width:10px; height:10px; border-radius:50%; background:var(--tx3); position:absolute; top:2px; left:2px; transition:transform .2s,background .2s; }
html.dark .tt-thumb { transform:translateX(12px); background:var(--est); }

/* campana de notificaciones — vive en la topbar, junto al usuario */
.notif-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--bdr2); background:var(--s1); color:var(--tx3); box-shadow:var(--sh-1); transition:border-color .2s,color .2s; flex-shrink:0; }
.notif-btn:hover { border-color:var(--est-bdr); color:var(--est); }
.notif-dot { position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:9px; font-weight:600; background:var(--crit-bg); color:var(--crit-tx); border:1px solid var(--s1); border-radius:9px; }

/* selector de rol/usuario (solo para la maqueta) */
.role-switch { display:flex; align-items:center; gap:8px; padding:5px 8px 5px 12px; border:1px solid var(--bdr2); border-radius:24px; background:var(--s1); cursor:pointer; box-shadow:var(--sh-1); color:var(--tx); }
.role-switch:hover { border-color:var(--bdr2); }
.avatar { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; flex-shrink:0; }
.avatar.est { background:var(--est); } .avatar.tac { background:var(--tac); } .avatar.ope { background:var(--ope); }
.role-meta { display:flex; flex-direction:column; align-items:flex-start; text-align:left; line-height:1.15; gap:3px; }
.role-name { font-size:12px; font-weight:500; }
.role-lvl { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); }

/* ── CONTENIDO ── */
.content { padding:clamp(16px,3vw,32px) clamp(16px,3vw,32px) 80px; max-width:1180px; width:100%; margin:0 auto; }
.page-head { margin-bottom:var(--sp-6); }
.page-eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx3); margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-3); }
.page-title { font-family:var(--display); font-size:clamp(22px,3.5vw,30px); font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:var(--sp-3); }
.page-sub { font-size:13.5px; color:var(--tx2); font-weight:300; max-width:70ch; margin-top:var(--sp-2); line-height:1.65; }

/* ── TABS ── */
.tabs { display:flex; gap:var(--sp-1); border-bottom:1px solid var(--bdr); margin-bottom:var(--sp-6); flex-wrap:wrap; }
.tab { padding:9px 14px; font-size:13px; color:var(--tx2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; user-select:none; }
.tab:hover { color:var(--tx); }
.tab.active { color:var(--est-tx); border-bottom-color:var(--est); font-weight:500; }

/* ── BOTONES ── */
.btn { font-family:var(--body); font-size:13px; font-weight:500; padding:8px 16px; border-radius:var(--r-md); cursor:pointer; border:1px solid transparent; transition:filter .15s,background .15s,transform .1s; display:inline-flex; align-items:center; gap:8px; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--est); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:transparent; color:var(--tx2); border-color:var(--bdr2); }
.btn-ghost:hover { background:var(--s2); color:var(--tx); }
.btn-danger { background:transparent; color:var(--crit-tx); border-color:var(--crit-bg); }
.btn-danger:hover { background:var(--crit-bg); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn svg { width:15px; height:15px; }

/* botones de acción inline (editar / eliminar registros) */
.act-row { display:inline-flex; gap:6px; align-items:center; }
.act-btn { width:28px; height:28px; border-radius:8px; border:1px solid var(--bdr2); background:var(--s1); color:var(--tx3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .12s,border-color .12s,background .12s; flex-shrink:0; }
.act-btn svg { width:15px; height:15px; }
.act-btn:hover { color:var(--est-tx); border-color:var(--est-bdr); background:var(--est-bg); }
.act-btn.danger:hover { color:var(--crit-tx); border-color:var(--crit-bg); background:var(--crit-bg); }

/* ── CAMPOS ── */
.field { width:100%; margin-bottom:var(--sp-4); }
.field-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx3); margin-bottom:6px; display:block; }
.field-input, .field-input select, select.field-input, textarea.field-input { width:100%; font-family:var(--body); font-size:13px; padding:9px 12px; border-radius:var(--r-md); border:1px solid var(--bdr2); background:var(--bg); color:var(--tx); transition:border-color .15s,box-shadow .15s; }
.field-input:focus { outline:none; border-color:var(--est); box-shadow:0 0 0 3px var(--est-bg); }
.field-input::placeholder { color:var(--tx3); }
textarea.field-input { resize:vertical; min-height:72px; line-height:1.5; }

/* ── SIGLAS / PÍLDORAS ── */
.sigla { font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.06em; padding:4px 10px; border-radius:var(--r-sm); border:1px solid; white-space:nowrap; }
.sg-est{ background:var(--est-bg); color:var(--est-tx); border-color:var(--est-bdr); }
.sg-tac{ background:var(--tac-bg); color:var(--tac-tx); border-color:var(--tac-bdr); }
.sg-ope{ background:var(--ope-bg); color:var(--ope-tx); border-color:var(--ope-bdr); }
.sg-neutral{ background:var(--idle-bg); color:var(--idle-tx); border-color:var(--bdr2); }

/* ── ESTADOS ── */
.state { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; padding:5px 13px; border-radius:20px; white-space:nowrap; }
.state::before { content:''; width:7px; height:7px; border-radius:50%; }
.st-info{ background:var(--info-bg); color:var(--info-tx); } .st-info::before{ background:var(--info); }
.st-ok{ background:var(--ok-bg); color:var(--ok-tx); } .st-ok::before{ background:var(--ok); }
.st-warn{ background:var(--warn-bg); color:var(--warn-tx); } .st-warn::before{ background:var(--warn); }
.st-crit{ background:var(--crit-bg); color:var(--crit-tx); } .st-crit::before{ background:var(--crit); }
.st-idle{ background:var(--idle-bg); color:var(--idle-tx); } .st-idle::before{ background:var(--idle); }

/* semáforo */
.sem-light { width:11px; height:11px; border-radius:50%; display:inline-block; box-shadow:0 0 0 3px var(--s1),0 0 0 4px currentColor; }
.sl-v{ background:var(--ok); color:var(--ok-bg); } .sl-a{ background:var(--warn); color:var(--warn-bg); } .sl-r{ background:var(--crit); color:var(--crit-bg); }

/* ── CHIPS / FILTROS ── */
.filter-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-4); }
.chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:6px 12px; border-radius:20px; border:1px solid var(--bdr2); background:var(--s1); color:var(--tx2); cursor:pointer; transition:all .15s; user-select:none; }
.chip:hover { color:var(--tx); }
.chip.on { background:var(--est-bg); border-color:var(--est-bdr); color:var(--est-tx); font-weight:500; }

/* ── GRID / TARJETAS ── */
.grid { display:grid; gap:var(--sp-3); }
.grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:880px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

.card { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-1); }
.card-pad-sm { padding:var(--sp-4); }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.card-title { font-family:var(--display); font-size:15px; font-weight:600; }

/* tarjeta de dominio (con borde superior por nivel) */
.dcard { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--sh-1); border-top:3px solid var(--bdr2); transition:transform .15s,box-shadow .15s; cursor:pointer; }
.dcard:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.dc-est{ border-top-color:var(--est); } .dc-tac{ border-top-color:var(--tac); } .dc-ope{ border-top-color:var(--ope); }
.dc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); gap:var(--sp-2); }
.dc-kind { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); }
.dc-title { font-family:var(--display); font-size:15px; font-weight:600; line-height:1.25; margin-bottom:var(--sp-2); }
.dc-meta { font-size:11.5px; color:var(--tx2); font-weight:300; margin-bottom:var(--sp-3); line-height:1.55; }
.dc-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--bdr); }

/* barra de progreso */
.prog { flex:1; height:6px; border-radius:3px; background:var(--s2); overflow:hidden; }
.prog > span { display:block; height:100%; border-radius:3px; background:var(--est); transition:width 1s var(--ease); }
.prog.ope > span{ background:var(--ope); } .prog.tac > span{ background:var(--tac); }
.pct { font-family:var(--mono); font-size:11px; font-weight:500; }

/* ── TABLERO POR SUBGERENCIA ── */
/* tarjeta de área: neutra; la salud se lee solo en la píldora de estado */
.area-card { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--sh-1); }
.area-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-2); }
.area-name { font-family:var(--display); font-size:14px; font-weight:600; line-height:1.3; }
/* salud como punto sutil junto a la sigla, sin saturar */
.area-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.area-dot.s-rojo{ background:var(--crit); } .area-dot.s-amarillo{ background:var(--warn); } .area-dot.s-verde{ background:var(--ok); }

/* bloques desplegables por tipo: Metas / Procesos, cada uno por separado */
.area-det { border-top:1px solid var(--bdr); }
.area-det > summary { list-style:none; cursor:pointer; padding:14px 0 12px; }
.area-det > summary::-webkit-details-marker { display:none; }
.area-det > summary:hover .kpi-lbl { color:var(--tx2); }
.area-alert { font-size:11px; font-weight:400; color:var(--warn-tx); text-transform:none; letter-spacing:0; }
.area-chev { display:inline-flex; color:var(--tx3); transition:transform .15s var(--ease); }
.area-det[open] > summary .area-chev { transform:rotate(90deg); }
.area-list { padding:6px 2px 12px; }
/* fila de meta enganchada a una línea del marco (drill estrategia → actividad) */
.marco-meta { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:5px 9px 5px 26px; margin:2px 0; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:background .12s,border-color .12s; }
.marco-meta:hover { background:var(--s2); border-color:var(--bdr); }
.marco-meta .cell-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.area-row { padding:9px 0; border-top:1px solid var(--bdr); }
.area-row:first-child { border-top:0; }

/* ── Carga / skeleton (splash de arranque) ── */
.load-card { max-width:420px; margin:18px auto 0; }
.eto-spinner { width:34px; height:34px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--bdr2); border-top-color:var(--est); animation:eto-spin .8s linear infinite; }
@keyframes eto-spin { to { transform:rotate(360deg); } }
.eto-pulse { animation:eto-pulse 1.3s ease-in-out infinite; }
@keyframes eto-pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.skel-list { display:flex; flex-direction:column; gap:10px; }
.skel { background:linear-gradient(90deg, var(--s2) 25%, var(--s3) 37%, var(--s2) 63%);
  background-size:400% 100%; border-radius:8px; animation:eto-shimmer 1.4s ease infinite; }
.skel-line { height:14px; }
.skel-line.short { width:60%; }
.skel-block { height:80px; }
@keyframes eto-shimmer { 0% { background-position:100% 0 } 100% { background-position:0 0 } }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── KPI ── */
.kpi-card { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--sh-1); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2); gap:8px; }
.kpi-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); }
.kpi-delta { font-size:10px; font-weight:500; padding:2px 7px; border-radius:10px; }
.kd-up{ background:var(--ok-bg); color:var(--ok-tx); } .kd-down{ background:var(--crit-bg); color:var(--crit-tx); }
.kpi-num { font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.kpi-unit { font-size:14px; color:var(--tx3); font-weight:400; margin-left:4px; }

/* ── TABLA ── */
.table-shell { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); }
.dtable { width:100%; border-collapse:collapse; }
.dtable th { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); text-align:left; padding:11px 16px; border-bottom:1px solid var(--bdr); background:var(--s2); white-space:nowrap; }
.dtable td { padding:13px 16px; border-bottom:1px solid var(--bdr); font-size:13px; color:var(--tx); vertical-align:middle; }
.dtable tr:last-child td { border-bottom:none; }
.dtable tbody tr { transition:background .12s; }
.dtable tbody tr:hover { background:var(--s2); }
.cell-name { font-weight:500; }
.cell-sub { font-size:11px; color:var(--tx3); margin-top:1px; }

/* ── Evidencias · celda «Asociado a» (categoría → nombre → estado) ── */
.ev-asoc { display:flex; flex-direction:column; gap:4px; max-width:420px; }
.ev-asoc + .ev-asoc { margin-top:8px; padding-top:8px; border-top:1px dashed var(--bdr2); }
.ev-kicker { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.ev-kicker.k-proceso   { color:var(--tac-tx); }
.ev-kicker.k-hito      { color:var(--est-tx); }
.ev-kicker.k-tarea     { color:var(--ope-tx); }
.ev-kicker.k-indicador { color:var(--tx3); }
.ev-kicker.k-ejecucion { color:var(--tac-tx); }
.ev-kicker.k-medicion  { color:var(--est-tx); }
.ev-name { font-weight:500; font-size:13px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--tx3); }
.ev-meta .state { font-size:11px; padding:3px 9px; }
.ev-meta .state::before { width:6px; height:6px; }
.ev-none { color:var(--tx3); font-style:italic; font-size:12px; }
@media (max-width:680px){ .ev-asoc { max-width:none; align-items:flex-end; text-align:right; } }

/* ── Evidencias · fila clicable + visor en drawer ── */
.ev-row { cursor:pointer; }
.ev-link { text-decoration:underline; text-decoration-color:var(--bdr2); text-underline-offset:3px; }
.ev-row:hover .ev-link { text-decoration-color:var(--tx2); }
.ev-preview { border:1px solid var(--bdr); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-4); }
.ev-canvas { aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--tx3); padding:var(--sp-6); text-align:center; }
.ev-canvas.is-img { background:radial-gradient(120% 120% at 50% 0%, var(--s2), var(--s1)); }
.ev-canvas.is-doc { background:repeating-linear-gradient(135deg, var(--s2), var(--s2) 14px, var(--s1) 14px, var(--s1) 28px); }
.ev-canvas .ico { opacity:.65; }
.ev-canvas-tipo { font-family:var(--mono); font-size:10px; letter-spacing:.12em; font-weight:600; color:var(--tx2); }
.ev-canvas-name { font-size:12.5px; color:var(--tx2); word-break:break-word; max-width:90%; }
.ev-canvas-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:9px 12px; border-top:1px solid var(--bdr); background:var(--s1); }
.ev-fields { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-6); }
.ev-field-v { font-size:13px; margin-top:2px; word-break:break-word; }

/* Conteo de archivos en la columna «Archivos» */
.ev-counts { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ev-count { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--tx2);
  background:var(--s2); border:1px solid var(--bdr2); border-radius:20px; padding:3px 10px; white-space:nowrap; }
.ev-count .ico { opacity:.7; }

/* Galería de archivos en el visor */
.ev-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:var(--sp-3); }
.ev-file { border:1px solid var(--bdr); border-radius:var(--r-md); overflow:hidden; background:var(--s1); }
.ev-file .ev-canvas { aspect-ratio:4/3; gap:6px; padding:var(--sp-4); }
.ev-file-foot { display:flex; align-items:center; gap:6px; padding:7px 9px; border-top:1px solid var(--bdr); }
.ev-file-name { flex:1; min-width:0; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-canvas.is-photo { padding:0; }
.ev-thumb { width:100%; height:100%; object-fit:cover; display:block; }

/* Subida múltiple: dropzone + lista de archivos elegidos */
.ev-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:var(--sp-6); border:1.5px dashed var(--bdr2); border-radius:var(--r-md); background:var(--s2);
  color:var(--tx2); font-size:12.5px; cursor:pointer; transition:border-color .15s, color .15s; }
.ev-drop:hover { border-color:var(--est); color:var(--tx); }
.ev-drop .ico { opacity:.7; }
.ev-pick { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--bdr); border-radius:var(--r-sm); margin-bottom:6px; }
.ev-pick-name { flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:680px){ .dtable thead{ display:none; } .dtable,.dtable tbody,.dtable tr,.dtable td{ display:block; width:100%; } .dtable tr{ border-bottom:1px solid var(--bdr); padding:var(--sp-2) 0; } .dtable td{ border:none; padding:5px 16px; display:flex; justify-content:space-between; gap:var(--sp-4); } .dtable td::before{ content:attr(data-l); font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); } }

/* ── ALERTAS ── */
.alert { display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-md); border:1px solid; margin-bottom:var(--sp-3); }
.alert-ico { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.alert-title { font-weight:600; margin-bottom:2px; font-size:13px; }
.alert-body { font-size:12.5px; line-height:1.5; }
.al-info{ background:var(--info-bg); border-color:var(--info-bg); color:var(--info-tx); }
.al-ok{ background:var(--ok-bg); border-color:var(--ok-bg); color:var(--ok-tx); }
.al-warn{ background:var(--warn-bg); border-color:var(--warn-bg); color:var(--warn-tx); }
.al-crit{ background:var(--crit-bg); border-color:var(--crit-bg); color:var(--crit-tx); }

/* ── ESTADO VACÍO ── */
.empty { text-align:center; padding:var(--sp-12) var(--sp-6); background:var(--s1); border:1px dashed var(--bdr2); border-radius:var(--r-lg); }
.empty-ico { width:42px; height:42px; margin:0 auto var(--sp-4); color:var(--tx3); }
.empty-title { font-family:var(--display); font-size:16px; font-weight:600; margin-bottom:var(--sp-2); }
.empty-sub { font-size:12.5px; color:var(--tx2); font-weight:300; max-width:46ch; margin:0 auto; line-height:1.6; }

/* ── CAPA DE CONTEXTO (¿por qué esto?) ── */
.ctx-ico { width:19px; height:19px; border-radius:50%; border:1px solid var(--bdr2); display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--tx3); cursor:help; flex-shrink:0; transition:all .15s; background:var(--s1); }
.ctx-ico:hover { border-color:var(--est); color:var(--est); }
.ctx-pop { position:fixed; z-index:200; width:300px; background:var(--s1); border:1px solid var(--bdr2); border-radius:var(--r-md); box-shadow:var(--sh-3); padding:var(--sp-4); font-weight:400; }
.ctx-pop .ctx-level { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-3); display:inline-flex; align-items:center; gap:6px; }
.ctx-pop .ctx-level::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--tx3); }
.ctx-field { margin-bottom:var(--sp-3); }
.ctx-q { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin-bottom:3px; }
.ctx-a { font-size:12.5px; color:var(--tx); line-height:1.5; }
.ctx-firstcard { background:var(--est-bg); border:1px solid var(--est-bdr); border-radius:var(--r-md); padding:var(--sp-4); margin-bottom:var(--sp-4); display:flex; gap:var(--sp-3); }

/* ── DRAWER / MODAL ── */
.overlay { position:fixed; inset:0; background:rgba(10,12,18,.45); z-index:100; display:flex; justify-content:flex-end; opacity:0; animation:fade .2s forwards; }
@keyframes fade { to { opacity:1; } }
.drawer { width:min(560px,94vw); background:var(--bg); height:100%; overflow-y:auto; box-shadow:var(--sh-3); transform:translateX(20px); animation:slidein .25s var(--ease) forwards; }
@keyframes slidein { to { transform:translateX(0); } }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--bdr); position:sticky; top:0; background:var(--s1); z-index:2; }
.drawer-title { font-family:var(--display); font-size:15px; font-weight:600; line-height:1.35; min-width:0; }
.drawer-body { padding:var(--sp-6); overflow-wrap:break-word; }
/* Encabezado destacado dentro del cuerpo: el título "real" (definición / nombre largo). */
.drawer-lead { font-family:var(--display); font-size:19px; font-weight:600; line-height:1.4; letter-spacing:-.01em; margin-bottom:var(--sp-4); }
/* La vinculación estratégica lleva frases largas: deben envolver, no desbordar. */
.ruta-est { align-items:flex-start; }
.ruta-est .sigla { white-space:normal; word-break:break-word; text-align:left; line-height:1.45; }
/* Bloque de fórmula / código: envuelve en vez de generar scroll horizontal. */
.code-block { display:block; white-space:pre-wrap; word-break:break-word; background:var(--s2); padding:10px; border-radius:8px; font-size:12px; }
.x-btn { width:32px; height:32px; flex-shrink:0; border-radius:8px; border:1px solid var(--bdr2); background:var(--s1); cursor:pointer; color:var(--tx2); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; }
.x-btn:hover { color:var(--tx); border-color:var(--bdr2); }

/* tree del marco estratégico */
.tree-node { border-left:2px solid var(--bdr); margin-left:var(--sp-3); padding-left:var(--sp-4); }
.tree-row { display:flex; align-items:center; gap:var(--sp-3); padding:8px 0; }
.tree-dot { width:9px; height:9px; border-radius:50%; margin-left:-21px; flex-shrink:0; border:2px solid var(--bg); }

/* misc */
.row { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.between { justify-content:space-between; }
.muted { color:var(--tx2); font-weight:300; }
.tx3 { color:var(--tx3); }
.mono { font-family:var(--mono); }
.mb-2 { margin-bottom:var(--sp-2); } .mb-3 { margin-bottom:var(--sp-3); } .mb-4 { margin-bottom:var(--sp-4); } .mb-6 { margin-bottom:var(--sp-6); }
.mt-2 { margin-top:var(--sp-2); } .mt-4 { margin-top:var(--sp-4); } .mt-6 { margin-top:var(--sp-6); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--tx); color:var(--bg); padding:11px 20px; border-radius:24px; font-size:13px; font-weight:500; box-shadow:var(--sh-3); z-index:300; opacity:0; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }

/* línea de chart simple */
.spark { width:100%; height:40px; }
.bars { display:flex; align-items:flex-end; gap:var(--sp-3); height:160px; padding-top:var(--sp-2); }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar { width:100%; max-width:38px; border-radius:5px 5px 0 0; align-self:center; transition:height .7s var(--ease); }
.bar-lbl { font-family:var(--mono); font-size:9px; color:var(--tx3); }
.bar-val { font-family:var(--mono); font-size:10px; color:var(--tx2); }

/* ── TOPBAR RESPONSIVA ──
   En pantallas chicas la barra se compacta: se ocultan textos
   secundarios para dejar espacio a la navegación. */
@media (max-width:680px){
  .topbar { padding:var(--sp-2) var(--sp-3); flex-wrap:nowrap; }
  .topbar-right { gap:var(--sp-1); }
  #reset-btn { display:none; }                 /* acción de maqueta, no esencial en móvil */
  #theme-lbl { display:none; }                 /* el switch ya comunica el estado */
  .mini-btn { padding:8px; }
  .role-switch { padding:4px; gap:0; }
  .role-meta { display:none; }                 /* basta el avatar; el nombre va en el menú */
  .role-switch > span:last-child { display:none; }
}
@media (max-width:380px){
  .crumbs { display:none; }                    /* prioriza menú + acciones */
}

/* superficie móvil (Operación) — fluida en escritorio, columna única en móvil */
.mobile-frame { width:100%; }
.mobile-frame.compact { max-width:560px; margin:0 auto; }
@media (max-width:560px){ .mobile-frame { max-width:430px; margin:0 auto; } }
.op-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--sp-3); align-items:start; }
.op-grid .op-task { margin-bottom:0; }
.op-task { background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--sh-1); margin-bottom:var(--sp-3); border-left:4px solid var(--ope); }
.op-task.crit { border-left-color:var(--crit); }
.op-task.warn { border-left-color:var(--warn); }
.op-task-title { font-weight:600; font-size:15px; margin-bottom:6px; }
/* Vista de equipo en líneas: misma información que la tarjeta, en una fila compacta. */
.op-lines { display:flex; flex-direction:column; gap:6px; }
.op-line { display:flex; align-items:center; gap:14px; background:var(--s1); border:1px solid var(--bdr);
  border-radius:var(--r-md); border-left:4px solid var(--ope); padding:9px 14px; box-shadow:var(--sh-1); }
.op-line.crit { border-left-color:var(--crit); }
.op-line.warn { border-left-color:var(--warn); }
.op-line-main { min-width:0; flex:1; display:flex; align-items:center; gap:10px; }
.op-line-title { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.op-line-meta { display:flex; align-items:center; gap:14px; flex:none; }
.op-line-meta .prog { width:90px; flex:none; }
.op-line-meta .pct { width:38px; text-align:right; }
@media (max-width:760px){ .op-line-date { display:none; } .op-line-meta .prog { width:60px; } }
.op-big-btn { width:100%; padding:14px; font-size:15px; font-weight:600; border-radius:var(--r-md); border:none; background:var(--ope); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
.op-big-btn:active { transform:translateY(1px); }
.op-ghost-btn { width:100%; padding:12px; font-size:14px; border-radius:var(--r-md); border:1px solid var(--bdr2); background:transparent; color:var(--tx2); cursor:pointer; margin-top:8px; }

/* ── Módulo 12 · Histórico (línea de tiempo + galería de evidencia) ── */
.hist-legend { padding:var(--sp-4); }
.hist-legend-que { font-size:12.5px; color:var(--tx); line-height:1.5; margin-bottom:6px; }
.hist-month { margin-bottom:var(--sp-3); }
.hist-month-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  width:100%; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx2); background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-md);
  padding:12px 16px; cursor:pointer; user-select:none; transition:background .12s; }
.hist-month-head:hover { background:var(--s2); color:var(--tx); }
.hist-month.open .hist-month-head { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.hist-month-name { color:var(--tx); }
.hist-chevron { display:inline-flex; color:var(--tx3); transition:transform .2s var(--ease); }
.hist-month.open .hist-chevron { transform:rotate(90deg); }
.hist-track { display:none; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-3); border:1px solid var(--bdr); border-top:none;
  border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md); }
.hist-month.open .hist-track { display:flex; }

/* Cinta del ciclo anual */
.ciclo-strip { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; }
.ciclo-cell { text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; padding:11px 0; border-radius:var(--r-sm); background:var(--s2);
  color:var(--tx3); border:1px solid var(--bdr); }
.ciclo-cell.on { background:var(--ope-bg); color:var(--ope-tx); border-color:var(--ope-bdr); font-weight:600; }
.ciclo-cell.fut { opacity:.5; }
.ciclo-cell.now { outline:2px solid var(--est); outline-offset:1px; color:var(--tx); }
@media (max-width:560px){ .ciclo-strip { grid-template-columns:repeat(6,1fr); } }
.ciclo-leyenda { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-3); font-size:11px; }
.ciclo-leyenda span { display:inline-flex; align-items:center; gap:6px; }
.ciclo-dot { width:10px; height:10px; border-radius:3px; display:inline-block; background:var(--s3); border:1px solid var(--bdr); }
.ciclo-dot.on { background:var(--ope-bg); border-color:var(--ope-bdr); }
.ciclo-dot.now { background:var(--s2); outline:2px solid var(--est); outline-offset:0; }
.ciclo-dot.fut { background:var(--s3); opacity:.5; }
.hist-card { position:relative; display:flex; gap:var(--sp-4); background:var(--s1); border:1px solid var(--bdr);
  border-radius:var(--r-lg); padding:var(--sp-4); box-shadow:var(--sh-1); }
.hist-dot { position:absolute; left:-1px; top:var(--sp-4); bottom:var(--sp-4); width:4px; border-radius:4px; background:var(--ope); }
.hist-dot.sg-tac { background:var(--tac); } .hist-dot.sg-ope { background:var(--ope); } .hist-dot.sg-neutral { background:var(--idle); }
.hist-body { flex:1; min-width:0; padding-left:var(--sp-3); }
.hist-title { font-weight:600; font-size:14.5px; line-height:1.4; margin-bottom:6px; }
.hist-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; margin-top:var(--sp-3); }
.hist-thumb { aspect-ratio:4/3; border-radius:var(--r-md); border:1px solid var(--bdr2); background-size:cover;
  background-position:center; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.hist-thumb:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.hist-docs { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-3); }
.hist-doc { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:20px;
  border:1px solid var(--bdr2); background:var(--s1); color:var(--tx2); cursor:pointer; transition:all .15s; max-width:100%; }
.hist-doc:hover { color:var(--tx); background:var(--s2); }
.hist-doc-name { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
@media (max-width:560px){ .hist-doc-name { max-width:150px; } }

/* ── Barra de ciclo · acordeón del periodo de planificación ── */
.cycle-acc { width:100%; border-bottom:1px solid var(--bdr); }
.cycle-bar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; width:100%;
  padding:8px clamp(16px,3vw,32px); background:var(--s2); border:none;
  font-family:var(--body); text-align:left; cursor:pointer; transition:background .12s; }
.cycle-bar:hover { background:var(--s3); }
.cyc-lead { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tx2); white-space:nowrap; }
.cyc-crumbs { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cyc-crumb { font-size:12.5px; color:var(--tx2); }
.cyc-crumb.now { color:var(--tx); font-weight:600; }
.cyc-sep { color:var(--tx3); }
.cyc-prog { flex:0 1 140px; min-width:60px; height:6px; border-radius:3px; background:var(--s1); overflow:hidden; }
.cyc-prog > span { display:block; height:100%; border-radius:3px; background:var(--est); }
.cyc-range { font-size:11px; color:var(--tx3); white-space:nowrap; margin-left:auto; }
/* Chevron al inicio: indica desplegar; gira hacia abajo al abrir. */
.cyc-cta { display:inline-flex; align-items:center; color:var(--tx3); }
.cyc-cta svg { transition:transform .22s var(--ease); }
.cycle-acc.open .cyc-cta svg { transform:rotate(90deg); }
.cycle-acc.open .cycle-bar { background:var(--s3); }
@media (max-width:680px){ .cyc-range, .cyc-prog { display:none; } }

/* Panel del acordeón: se extiende en línea (sin flotar), empujando el
   contenido. Anima con grid-template-rows (0fr → 1fr). */
.cyc-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s var(--ease); }
.cycle-acc.open .cyc-panel { grid-template-rows:1fr; }
.cyc-panel-in { overflow:hidden; }
.cyc-pop { background:var(--s1); border-top:1px solid var(--bdr);
  padding:var(--sp-3) clamp(16px,3vw,32px); display:flex; flex-direction:column; gap:7px; }
/* Etiqueta de nivel a la izquierda, alineada arriba para que las celdas
   manden el alto de la fila. */
.cyc-prow { display:grid; grid-template-columns:64px 1fr; align-items:start; gap:var(--sp-3); }
.cyc-prow-k { font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx3); padding-top:7px; }
.cyc-cells { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
/* Año crece sin romper: chips compactos que envuelven. Mes en una sola
   fila de 12; ambos comparten un ancho de celda regular. */
.cyc-years .cyc-cell { min-width:54px; }
.cyc-months { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); width:100%; }
.cyc-div { width:1px; align-self:stretch; min-height:20px; background:var(--bdr2); margin:0 3px; }
.cyc-cell { display:inline-flex; align-items:center; justify-content:center; min-height:28px;
  font-family:var(--mono); font-size:11.5px; line-height:1; padding:5px 9px; border-radius:var(--r-sm);
  border:1px solid var(--bdr2); background:var(--s1); color:var(--tx2); cursor:pointer; transition:all .12s;
  text-align:center; min-width:0; }
.cyc-cell:hover { background:var(--s2); color:var(--tx); }
.cyc-cell.on { background:var(--est-bg); border-color:var(--est-bdr); color:var(--est-tx); font-weight:600; }
.cyc-pop-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  margin-top:2px; padding-top:7px; border-top:1px solid var(--bdr); font-size:11px; flex-wrap:wrap; }

/* Tablet: la etiqueta del nivel pasa arriba para dar ancho a las celdas,
   y los meses bajan a 6 columnas (2 filas). */
@media (max-width:760px){
  .cyc-prow { grid-template-columns:1fr; gap:4px; }
  .cyc-prow-k { padding-top:0; }
  .cyc-months { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
/* Móvil: celdas más altas para tocar; meses en 4 columnas. */
@media (max-width:560px){
  .cyc-cell { min-height:36px; padding:9px 10px; font-size:13px; }
  .cyc-months { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ── Control de periodo · tarjeta con selector ── */
.per-top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.per-grans { display:flex; gap:6px; flex-wrap:wrap; }
.per-grans .chip { padding:5px 12px; font-size:12px; }
.per-selrow { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--bdr); }
.per-nav { display:flex; align-items:center; gap:var(--sp-3); }
.per-arrow { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:var(--r-md); border:1px solid var(--bdr2); background:var(--s1); color:var(--tx2); cursor:pointer; transition:all .12s; }
.per-arrow:hover:not([disabled]) { background:var(--s2); color:var(--tx); }
.per-arrow[disabled] { opacity:.35; cursor:not-allowed; }
.per-arrow svg { transform:rotate(180deg); } .per-arrow.per-next svg { transform:none; }
.per-now { font-family:var(--display); font-weight:600; font-size:16px; min-width:120px; text-align:center; }
.per-estado { font-size:11px; }
.per-selrow .btn { margin-left:auto; }
.per-bigrow { display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.per-bigmeta { flex:1; min-width:180px; }
.per-empty { font-size:13px; padding:var(--sp-2) 0; }
.per-list { margin-top:var(--sp-4); }
.per-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--bdr); }
.per-item:first-of-type { border-top:none; }
.per-item-dot { width:8px; height:8px; border-radius:50%; background:var(--ope); flex-shrink:0; }
.per-item-dot.crit { background:var(--crit); }
.per-item-tit { flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.per-item-fec { font-size:11px; flex-shrink:0; }

/* ════════════ LOGIN / ACCESO ════════════
   Pantalla previa a la app (componentes/login.js). Centrada, sobria,
   reutiliza los tokens del sistema. */
.auth-wrap { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-4); padding:var(--sp-6); background:
  radial-gradient(1200px 600px at 50% -10%, var(--est-bg), transparent 70%), var(--bg); }
.auth-card { width:100%; max-width:420px; background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:var(--sp-8) var(--sp-8) var(--sp-6); }

/* Cabecera de marca — fuera de la tarjeta, centrada sobre el fondo. */
.auth-head { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:var(--sp-2); }
.auth-mark { width:64px; height:64px; border-radius:18px; background:linear-gradient(145deg, var(--est), #1b3fae); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:700; letter-spacing:.06em; font-family:var(--display); box-shadow:0 8px 22px -6px var(--est); margin-bottom:14px; }
.auth-title { font-family:var(--display); font-size:23px; font-weight:700; letter-spacing:-.015em; line-height:1.15; }
.auth-sub { font-size:13px; color:var(--tx3); margin-top:7px; line-height:1.5; max-width:300px; }

.auth-intro { text-align:center; margin-bottom:var(--sp-6); }
.auth-h { font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.01em; margin-bottom:5px; }
.auth-lead { font-size:13px; color:var(--tx2); line-height:1.5; max-width:300px; margin:0 auto; }

.auth-google { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 16px; border-radius:var(--r-md); border:1px solid var(--bdr2); background:var(--s1); color:var(--tx); font-family:var(--body); font-size:14px; font-weight:500; cursor:pointer; transition:background .15s,border-color .15s; }
.auth-google:hover:not(:disabled) { background:var(--s2); border-color:var(--bdr2); }
.auth-google:disabled { opacity:.6; cursor:default; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:var(--sp-6) 0; color:var(--tx3); font-size:11px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--bdr); }

.auth-field { display:block; position:relative; margin-bottom:var(--sp-4); }
.auth-field[hidden] { display:none; }   /* el atributo hidden debe ganar a display:block */
.auth-label { display:block; font-size:12px; font-weight:500; color:var(--tx2); margin-bottom:6px; }
.auth-input-ico { position:absolute; left:11px; top:33px; color:var(--tx3); pointer-events:none; display:flex; }
.field-input.has-ico { padding-left:36px; }
.auth-eye { position:absolute; right:8px; top:27px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--tx3); cursor:pointer; border-radius:6px; }
.auth-eye:hover { color:var(--tx); background:var(--s2); }

.auth-link { background:none; border:none; color:var(--est); font-family:var(--body); font-size:12.5px; font-weight:500; cursor:pointer; padding:0; }
.auth-link:hover { text-decoration:underline; }
form .auth-link#btn-reset { display:inline-block; margin:-4px 0 var(--sp-4); }

.auth-msg { font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:var(--r-md); margin-bottom:var(--sp-4); }
.auth-msg.is-error { color:var(--crit-tx); background:var(--crit-bg); border:1px solid var(--crit-bdr, var(--crit-bg)); }
.auth-msg.is-ok { color:var(--ok-tx); background:var(--ok-bg); }

.auth-submit { width:100%; justify-content:center; padding:11px 16px; font-size:14px; }
.auth-submit:disabled { opacity:.7; cursor:default; }

.auth-switch { text-align:center; font-size:13px; color:var(--tx2); margin-top:var(--sp-6); }
.auth-foot { font-size:12px; color:var(--tx3); }

@media (max-width:480px) { .auth-card { padding:var(--sp-6); } }

/* ── Aviso de «ver como otra persona» ─────────────────────────
   Barra fija, imposible de pasar por alto: alguien que olvide que está
   mirando con los ojos de otro leería el tablero de un área ajena
   creyendo que es el suyo. */
#ver-como-aviso {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 18px;
  background: var(--tac, #b5641a);
  color: #fff;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
}

#ver-como-aviso span { display: inline-flex; align-items: center; gap: 7px; }
#ver-como-aviso svg { flex: none; }
#ver-como-aviso strong { font-weight: 650; }

#ver-como-aviso .ver-como-ro {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#ver-como-aviso button {
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
}

#ver-como-aviso button:hover { background: rgba(255, 255, 255, .16); }

/* Deja sitio para que la barra no tape el final del contenido. */
body.viendo-como .content { padding-bottom: 72px; }