/* ============================================================================
   siscol.css · complementos de proyecto sobre el sistema Normandia.
   Solo usa tokens del tema (nada de color literal). Carga DESPUÉS de
   normandia-base.css.
   ============================================================================ */

/* ---- App a PANTALLA COMPLETA -------------------------------------------------
   El kit trae `.app` como un panel flotante centrado (max-width 1340px, bordes
   redondeados, sombra) — se ve como tarjeta de demo. En una app real debe
   llenar el viewport. Aquí lo hacemos full-bleed y de altura completa. */
/* ── Scroll independiente: sidebar y cabecera FIJOS a la altura del viewport;
   solo #contenido hace scroll (antes toda la página scrolleaba junta). ── */
body:not(.sin-aura){height:100vh;height:100dvh;overflow:hidden}
.app{
  max-width:none;margin:0;border:none;border-radius:0;box-shadow:none;
  backdrop-filter:none;background:var(--bg);
  height:100vh;height:100dvh;
}
.lateral{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden}
.contenedor{height:100vh;height:100dvh;min-height:0}
.cabecera{flex:0 0 auto;position:relative;z-index:50}
.imp-banner{flex:0 0 auto}
#contenido{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* el contenido puede respirar a lo ancho, con un tope amplio para monitores 4K */
main{width:100%}
.vista,.metricas,.reparto{max-width:1760px}

/* ---- Íconos a LINE-ART -------------------------------------------------------
   El sprite se rinde con <use>, y las <symbol> NO heredan el fill="none" del
   <svg> raíz del sprite → por default SVG rellena de negro. Forzamos line-art
   en el <svg> consumidor. Las partes de acento (fill explícito) conservan su
   color de acento (--ico-ac). */
.ico{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Sidebar: íconos en color de MARCA y line-art puro (sin rellenos) */
.nav-i .ico{color:var(--brand);--ico-ac:var(--brand)}
.nav-i .ico [fill]:not([fill="none"]){fill:none;stroke:var(--brand)}
.nav-i.activo .ico{color:var(--brand-2);--ico-ac:var(--brand-2)}
.nav-i.activo .ico [fill]:not([fill="none"]){stroke:var(--brand-2)}

/* ---- controles de formulario ---- */
.entrada{
  width:100%;background:var(--glass);border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:10px 13px;color:var(--tx);font-size:.86rem;transition:var(--t-base) var(--e);
}
.entrada:focus{outline:none;border-color:var(--ia);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 14%,transparent)}
.entrada::placeholder{color:var(--tx-3)}
select.entrada{cursor:pointer}
textarea.entrada{resize:vertical;min-height:76px}

/* formularios renderizados por Django (widgets sin clase del kit) */
.forma input:not([type=checkbox]):not([type=radio]),
.forma select,.forma textarea{
  width:100%;background:var(--glass);border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:10px 13px;color:var(--tx);font-size:.86rem}
.forma input:focus,.forma select:focus,.forma textarea:focus{outline:none;border-color:var(--ia);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 14%,transparent)}
.forma textarea{resize:vertical;min-height:76px}
.forma label{display:block;font-size:.74rem;font-weight:600;color:var(--tx-2);margin-bottom:5px}
.forma .campo-f{margin-bottom:16px}
label.campo-l{display:block;font-size:.74rem;font-weight:600;color:var(--tx-2);margin-bottom:5px}

/* ---- barra de filtros ---- */
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:4px}
.filtros .entrada{width:auto}
.filtros .crece{flex:1 1 260px}

/* ---- cabecera de vista con acción a la derecha ---- */
.vista-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vista-h .der{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---- utilidades pequeñas ---- */
.pareja{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.dato .k{font-size:.7rem;color:var(--tx-3);margin-bottom:3px}
.dato .v{font-size:.86rem;color:var(--tx)}
.vinculo{color:var(--brand-2);font-weight:600}
.vinculo:hover{text-decoration:underline}
.barra-mini{width:96px;height:8px;border-radius:var(--pill);background:var(--linea);overflow:hidden;display:inline-block;vertical-align:middle}
.barra-mini>i{display:block;height:100%;border-radius:var(--pill);background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:.78rem;color:var(--tx-3)}
.celda-sub{display:block;font-size:.72rem;color:var(--tx-3)}
.tabla-scroll{overflow-x:auto}

/* ---- badge IA (supervisión humana visible) ---- */
.badge.ia-sugiere{color:var(--warn);background:color-mix(in srgb,var(--warn) 18%,transparent)}
.badge.ia-verificado{color:var(--ok);background:color-mix(in srgb,var(--ok) 17%,transparent)}

/* ============================================================================
   ATMÓSFERA DARK-TECH · orbes + retícula + glass + glows ("tech notorio, limpio")
   ============================================================================ */
.app{position:relative;z-index:1;background:transparent!important;backdrop-filter:none!important;box-shadow:none!important}
[data-theme="dark"] body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(1200px 700px at 82% -8%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 60%),
  radial-gradient(900px 600px at 4% 6%, color-mix(in srgb,var(--ia) 13%,transparent), transparent 55%),
  radial-gradient(700px 500px at 60% 106%, color-mix(in srgb,var(--acento) 8%,transparent), transparent 60%)}
[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 35%,#000 42%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 35%,#000 42%,transparent 100%)}
.orbe{position:fixed;border-radius:50%;filter:blur(74px);opacity:.5;z-index:0;pointer-events:none;animation:orbita 20s ease-in-out infinite}
.orbe.a{width:420px;height:420px;background:color-mix(in srgb,var(--brand) 16%,transparent);top:-90px;right:-70px}
.orbe.b{width:400px;height:400px;background:color-mix(in srgb,var(--ia) 26%,transparent);bottom:-120px;left:-90px;animation-delay:-7s}
.orbe.c{width:320px;height:320px;background:color-mix(in srgb,var(--acento) 16%,transparent);top:42%;left:56%;animation-delay:-13s}
@keyframes orbita{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(42px,-32px) scale(1.08)}66%{transform:translate(-30px,26px) scale(.95)}}

/* ---- atmósfera CLARA (off-white + orbes pastel + glass blanco) ---- */
[data-theme="light"] body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(1100px 640px at 84% -8%, color-mix(in srgb,var(--brand) 9%,transparent), transparent 60%),
  radial-gradient(880px 560px at 3% 4%, color-mix(in srgb,var(--ia) 8%,transparent), transparent 55%),
  radial-gradient(680px 480px at 62% 106%, color-mix(in srgb,var(--acento) 6%,transparent), transparent 60%)}
[data-theme="light"] body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(11,30,46,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(11,30,46,.03) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 35%,#000 42%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 35%,#000 42%,transparent 100%)}
[data-theme="light"] .orbe{opacity:.3;filter:blur(80px)}
[data-theme="light"] .orbe.a{background:color-mix(in srgb,var(--brand) 20%,transparent)}
[data-theme="light"] .orbe.b{background:color-mix(in srgb,var(--ia) 18%,transparent)}
[data-theme="light"] .orbe.c{background:color-mix(in srgb,var(--acento) 13%,transparent)}
/* ── HÍBRIDO: rail de navegación en PETRÓLEO oscuro sobre lienzo claro.
   El sidebar es su propia "zona oscura": redefine sus tokens y sus hijos
   (marca, nav, íconos, conteos) los heredan automáticamente. ── */
[data-theme="light"] .lateral{
  background:linear-gradient(180deg,#103c41,#0b2d32);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:1px 0 0 rgba(0,0,0,.04),8px 0 24px -20px rgba(11,45,50,.6);
  color:#eef6f6;   /* texto sin color explícito (p.ej. el wordmark) hereda claro */
  --superficie:#103c41; --card:#0b2d32;
  --tx:#eef6f6; --tx-2:#a7c7c9; --tx-3:#7ba0a3;
  --linea:rgba(255,255,255,.10); --linea-2:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.06);
  --brand:#5fc9c3; --brand-2:#93e2db;
}
[data-theme="light"] .lateral .nav-i:hover{background:rgba(255,255,255,.07)}
[data-theme="light"] .lateral .nav-i.activo{background:rgba(255,255,255,.10);box-shadow:inset 3px 0 0 var(--brand-2)}
[data-theme="light"] .lateral .marca .glifo{box-shadow:0 8px 22px -10px rgba(0,0,0,.55)}
/* topbar: claro (glass) para mantenerse pegado al contenido legible */
[data-theme="light"] .cabecera{background:color-mix(in srgb,#ffffff 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}

/* banner de impersonación (súper admin viendo el sistema como otro usuario) */
.imp-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 24px;background:linear-gradient(90deg,#fbbf24,#f59e0b);color:#3a2400;
  font-size:.85rem;font-weight:600}
.imp-banner .ico{color:#3a2400}
.imp-banner b{font-weight:800}
.imp-banner .btn{background:rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.22);color:#2a1a00;font-weight:700}
.imp-banner .btn:hover{background:rgba(0,0,0,.26);color:#000;transform:translateY(-1px)}
[data-theme="light"] .tarjeta,[data-theme="light"] .metrica,[data-theme="light"] .pkpi,[data-theme="light"] .gcard{
  background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--linea);
  box-shadow:0 18px 40px -30px rgba(21,92,98,.35),0 2px 8px rgba(11,30,46,.05)}
[data-theme="light"] .tarjeta:hover,[data-theme="light"] .metrica:hover,[data-theme="light"] .pkpi:hover{
  border-color:var(--linea-2);box-shadow:0 24px 48px -26px rgba(21,92,98,.4)}
[data-theme="light"] .ai-sum{box-shadow:0 20px 50px -30px rgba(239,91,69,.28)}

/* glass en las superficies (dark) */
[data-theme="dark"] .lateral{background:color-mix(in srgb,#0a1220 60%,transparent);backdrop-filter:blur(16px)}
[data-theme="dark"] .cabecera{background:color-mix(in srgb,#0a1220 52%,transparent);backdrop-filter:blur(14px)}
[data-theme="dark"] .tarjeta,[data-theme="dark"] .metrica{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--linea);box-shadow:0 18px 40px -26px rgba(0,0,0,.6)}
[data-theme="dark"] .tarjeta:hover,[data-theme="dark"] .metrica:hover{border-color:var(--linea-2)}
.metrica:hover{box-shadow:0 22px 46px -24px rgba(0,0,0,.7), var(--glow-brand)}

/* glows de la IA (Tino = salmón) */
.glifo-ia{box-shadow:var(--glow-ia)}
.resumen-ia{box-shadow:var(--glow-ia);--ico-ac:var(--ia)}
.cajon,.paleta{--ico-ac:var(--ia)}
.comando{border-color:color-mix(in srgb,var(--ia) 42%,transparent)}
svg.traza .pulso{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ia) 55%,transparent))}

/* cursor de escritura de IA */
.cursor-ia{display:inline-block;width:8px;height:1.02em;background:var(--ia);margin-left:2px;vertical-align:-2px;
  box-shadow:var(--glow-ia);animation:blink-ia 1s steps(1) infinite}
@keyframes blink-ia{50%{opacity:0}}

/* ============================================================================
   PROPAGACIÓN DEL LOOK TECH A TODAS LAS PANTALLAS
   Eleva los componentes compartidos del kit (tablas, tarjetas, filas, botones,
   formularios) para que TODO el sistema herede el estilo del panel, en ambos temas.
   ============================================================================ */
.tarjeta,.tabla-marco{border-radius:18px}
/* contenedores de tabla como glass, igual que las tarjetas */
[data-theme="dark"] .tabla-marco{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--linea);box-shadow:0 18px 40px -26px rgba(0,0,0,.55)}
[data-theme="light"] .tabla-marco{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--linea);box-shadow:0 18px 40px -30px rgba(21,92,98,.35),0 2px 8px rgba(11,30,46,.05)}
/* filas y tablas: hover con tinte de marca (petróleo) */
.fila:hover{background:color-mix(in srgb,var(--brand) 9%,transparent)}
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 8%,transparent)}
/* botón de marca con sombra suave de petróleo */
.btn-marca{box-shadow:0 12px 26px -14px color-mix(in srgb,var(--brand) 55%,transparent)}
/* entradas y formularios como glass */
.entrada,.forma input:not([type=checkbox]):not([type=radio]),.forma select,.forma textarea{
  background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* compat de una clase heredada */
.text-marca{color:var(--brand-2)}
/* aparición suave de las superficies al entrar a cada vista */
.vista .tarjeta,.vista .tabla-marco,.vista>form{animation:rise .5s both}
/* el stepper y la traza usan el degradado marca→IA (verde→coral) automáticamente */

/* ============================================================================
   GESTOR DE CATÁLOGOS (apps.catalogos) — reemplaza el admin de Django
   ============================================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cat-card{display:flex;align-items:center;gap:14px;padding:18px;text-decoration:none;color:var(--tx);transition:transform .15s,border-color .15s,box-shadow .15s}
.cat-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 45%,var(--linea))}
.cat-card .cat-ico{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand-2)}
.cat-card .cat-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cat-card .cat-tt b{font-size:.98rem}
.cat-card .cat-tt small{color:var(--tx-2);font-size:.78rem;line-height:1.35}
.cat-card .cat-num{color:var(--tx-3);font-size:.72rem;font-family:var(--f-mono,monospace);margin-top:2px}
.cat-card>svg:last-child{color:var(--tx-3);flex:0 0 auto}

.cat-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cat-buscar{display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--linea);border-radius:12px;padding:9px 13px;min-width:min(380px,62vw)}
.cat-buscar svg{color:var(--tx-3);flex:0 0 auto}
.cat-buscar input{background:none;border:0;outline:none;color:var(--tx);width:100%;font-size:.9rem}
.cat-buscar input::placeholder{color:var(--tx-3)}

.cat-tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.cat-tabla th{text-align:left;padding:12px 14px;color:var(--tx-3);font-weight:600;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--linea);white-space:nowrap}
.cat-tabla td{padding:11px 14px;border-bottom:1px solid var(--linea);color:var(--tx-2);vertical-align:top;max-width:360px}
.cat-tabla tbody tr:last-child td{border-bottom:0}
.cat-tabla tbody tr:hover td{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.cat-tabla td:first-child{color:var(--tx);font-weight:500;white-space:nowrap}

.cat-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:600;line-height:1.5}
.cat-pill.si{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
.cat-pill.no{background:color-mix(in srgb,var(--tx-3) 18%,transparent);color:var(--tx-3)}

.cat-acc{white-space:nowrap;text-align:right}
.cat-acc a{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--tx-2);transition:background .15s,color .15s}
.cat-acc a:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand-2)}
.cat-acc a.cat-del:hover{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.cat-vacio{text-align:center;color:var(--tx-3);padding:36px!important}

.cat-pag{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;color:var(--tx-2);font-size:.85rem}
.cat-pag a{color:var(--brand-2);text-decoration:none;font-weight:600}
.cat-pag a:hover{text-decoration:underline}

.cat-form{max-width:760px}
.cat-form .campo{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.cat-form .campo-check{flex-direction:row;align-items:center;gap:10px}
.cat-form label{font-size:.82rem;color:var(--tx-2);font-weight:600}
.cat-form .campo-check input{width:18px;height:18px;accent-color:var(--brand);flex:0 0 auto}
.cat-form .ayuda{font-size:.74rem;color:var(--tx-3)}
.cat-form .err{font-size:.76rem;color:var(--bad)}
.cat-acciones{display:flex;gap:10px;margin-top:8px}

/* ============================================================================
   BANDEJA DE DETECCIÓN — barra de filtros + tabla limpia (2026-09-29)
   ========================================================================== */

/* --- barra de filtros --- */
.barra-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.buscador{flex:1 1 320px;display:flex;align-items:center;gap:10px;background:var(--glass);
  border:1px solid var(--linea);border-radius:var(--pill);padding:0 16px;transition:var(--t-base) var(--e)}
.buscador:focus-within{border-color:var(--ia);box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 13%,transparent)}
.buscador .ico{color:var(--tx-3);flex:none}
.buscador input{flex:1;border:none;background:none;outline:none;padding:12px 0;color:var(--tx);font-size:.88rem}
.buscador input::placeholder{color:var(--tx-3)}
.buscador input::-webkit-search-cancel-button{cursor:pointer}

/* segmentado (vigencia) */
.segmento{display:inline-flex;background:var(--glass);border:1px solid var(--linea);
  border-radius:var(--pill);padding:3px}
.segmento label{position:relative;cursor:pointer}
.segmento input{position:absolute;opacity:0;pointer-events:none}
.segmento span{display:inline-block;padding:8px 16px;border-radius:var(--pill);font-size:.78rem;
  font-weight:600;color:var(--tx-2);white-space:nowrap;transition:var(--t-rapido) var(--e)}
.segmento label:hover span{color:var(--tx)}
.segmento input:checked+span{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--brand) 70%,transparent)}
.segmento input:focus-visible+span{outline:2px solid var(--ia);outline-offset:2px}

/* selects con ícono */
.grupo-selects{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.selector{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--glass);
  border:1px solid var(--linea);border-radius:var(--pill);padding:0 12px;transition:var(--t-base) var(--e)}
.selector:focus-within{border-color:var(--ia);box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 12%,transparent)}
.selector .ico{color:var(--tx-3);flex:none}
.selector select{border:none;background:none;outline:none;padding:9px 4px 9px 0;color:var(--tx);
  font-size:.8rem;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none}
.selector.orden{border-style:dashed}

/* --- cabecera de resultados --- */
.tabla-cab{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.tabla-cab .cuenta{font-size:.74rem;color:var(--tx-3);font-weight:600}
.limpiar{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;
  color:var(--tx-3);cursor:pointer;transition:var(--t-rapido) var(--e)}
.limpiar:hover{color:var(--bad)}
.limpiar .ico{color:currentColor}

/* --- tabla --- */
.t-bandeja td{vertical-align:middle;padding:14px 16px}
.t-bandeja th{padding:13px 16px;font-size:.66rem}
.t-bandeja tbody tr{border-bottom:1px solid var(--linea)}
.t-bandeja .c-score{width:70px;text-align:center}
.t-bandeja .c-fecha{width:120px;white-space:nowrap}
.t-bandeja .c-acc{width:1%;white-space:nowrap}
.t-bandeja .c-inst{max-width:260px;color:var(--tx-2);font-size:.82rem;line-height:1.35}

/* círculo de relevancia */
.score{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-family:var(--f-dato);font-weight:700;font-size:.82rem;border:2px solid;font-variant-numeric:tabular-nums}
.score.alta{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.score.media{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
.score.baja{color:var(--tx-3);border-color:var(--linea-2);background:var(--glass)}
.score.nula{color:var(--tx-3);border-color:var(--linea);border-style:dashed;font-size:1rem}

/* título + subdatos */
.t-bandeja .tit{display:inline-block;color:var(--tx);font-weight:600;font-size:.9rem;line-height:1.35}
.t-bandeja .tit:hover{color:var(--brand-2)}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 2px}
.etiquetas:empty{display:none}
.etiqueta-fecha{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;font-weight:700;
  padding:3px 9px;border-radius:var(--pill);letter-spacing:.01em;white-space:nowrap}
.etiqueta-fecha::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.etiqueta-fecha.roja{color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent)}
.etiqueta-fecha.ambar{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.t-bandeja .cod{font-size:.68rem;color:var(--tx-3)}
.fuente-dof{color:var(--brand-2);font-weight:700}
.c-fecha.vencida b{color:var(--bad)}

/* botones de acción — solo ícono + tooltip nativo */
.acciones{display:inline-flex;gap:7px;align-items:center;justify-content:flex-end}
.acciones form{display:inline-flex;margin:0}
.btn-ico{width:36px;height:36px;padding:0;border-radius:11px;display:inline-grid;place-items:center;
  border:1px solid var(--linea);background:var(--glass);color:var(--tx-2);cursor:pointer;
  transition:var(--t-rapido) var(--e)}
.btn-ico .ico{color:currentColor}
.btn-ico:hover{border-color:var(--brand);color:var(--tx);transform:translateY(-2px)}
.btn-ico.crear{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff}
.btn-ico.crear:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn-ico.descartar:hover{border-color:var(--bad);color:var(--bad)}
.ico.flip{transform:rotate(180deg)}

@media (max-width:820px){
  .barra-filtros{gap:10px}
  .buscador{flex:1 1 100%}
  .segmento,.grupo-selects{flex:1 1 100%}
  .t-bandeja .c-inst{display:none}
}

/* selector con input (institución / unidad compradora, con datalist) */
.selector input{border:none;background:none;outline:none;padding:9px 4px 9px 0;color:var(--tx);
  font-size:.8rem;font-weight:600;min-width:0}
.selector input::placeholder{color:var(--tx-3);font-weight:500}
.selector.ancho{flex:1 1 210px;min-width:160px}
.selector.ancho input{width:100%}

/* ============================================================================
   CREAR LICITACIÓN — previsualización con edición por lápiz (2026-09-29)
   ========================================================================== */
.pv-lista{display:flex;flex-direction:column}
.pv-fila{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--linea)}
.pv-fila:last-child{border-bottom:none}
.pv-k{font-size:.76rem;font-weight:600;color:var(--tx-3);padding-top:6px}
.pv-shown{display:flex;align-items:center;gap:10px}
.pv-txt{font-size:.9rem;color:var(--tx);font-weight:500;line-height:1.4}
.pencil{width:28px;height:28px;flex:none;border-radius:8px;display:inline-grid;place-items:center;
  border:1px solid var(--linea);background:var(--glass);color:var(--tx-3);cursor:pointer;
  transition:var(--t-rapido) var(--e)}
.pencil:hover{border-color:var(--brand);color:var(--brand-2);transform:translateY(-1px)}
.pencil .ico{color:currentColor}
.pv-edit input,.pv-edit select,.pv-edit textarea{width:100%;background:var(--glass);
  border:1px solid var(--linea);border-radius:var(--r-sm);padding:10px 13px;color:var(--tx);font-size:.86rem}
.pv-edit input:focus,.pv-edit select:focus{outline:none;border-color:var(--ia);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 13%,transparent)}
.pv-sep{height:1px;background:var(--linea);margin:18px 0}

/* invitar al equipo — casillas */
.equipo-lista ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.equipo-lista li{margin:0}
.equipo-lista label{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--linea);
  border-radius:var(--r-sm);background:var(--glass);font-size:.84rem;color:var(--tx);cursor:pointer;
  transition:var(--t-rapido) var(--e)}
.equipo-lista label:hover{border-color:var(--brand)}
.equipo-lista input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;flex:none}
.campo-f label .ico{vertical-align:-2px;margin-right:4px;color:var(--tx-3)}

@media (max-width:560px){ .pv-fila{grid-template-columns:1fr;gap:6px} .pv-k{padding-top:0} }

/* lista de equipo con scroll cuando hay muchas personas */
.equipo-scroll{max-height:300px;overflow:auto;padding-right:4px}
.equipo-scroll ul{grid-template-columns:1fr}
.acciones-crear{position:sticky;bottom:16px}
@media (max-width:1100px){ .acciones-crear{position:static} }

/* ============================================================================
   SELECTOR DE PERSONAS — buscador + avatares circulares (2026-09-29)
   ========================================================================== */
.avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  font-size:.72rem;font-weight:700;color:#fff;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));
  box-shadow:0 4px 10px -4px color-mix(in srgb,var(--c) 70%,transparent)}
.avatar.sm{width:24px;height:24px;font-size:.62rem}

.selp{position:relative}
.selp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;min-height:6px}
.selp-nada{font-size:.78rem;color:var(--tx-3);padding:2px 0}
.selp-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 5px 3px 3px;border-radius:var(--pill);
  background:var(--glass);border:1px solid var(--linea);font-size:.78rem;color:var(--tx);font-weight:600;
  animation:chip-in .2s var(--e)}
@keyframes chip-in{from{opacity:0;transform:scale(.8)}}
.selp-chip.fijo{border-color:color-mix(in srgb,var(--brand) 40%,transparent);
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
.selp-chip-n{padding-right:4px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.selp-x{border:none;background:none;color:var(--tx-3);font-size:1.05rem;line-height:1;cursor:pointer;
  padding:0 4px;border-radius:50%;transition:var(--t-rapido) var(--e)}
.selp-x:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}

.selp-caja{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--linea);
  border-radius:var(--r-sm);padding:0 12px;cursor:text;transition:var(--t-base) var(--e)}
.selp.abierto .selp-caja,.selp-caja:focus-within{border-color:var(--ia);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 13%,transparent)}
.selp-lupa{color:var(--tx-3);flex:none;display:inline-flex}
.selp-input{flex:1;border:none;background:none;outline:none;padding:11px 0;color:var(--tx);font-size:.86rem}
.selp-input::placeholder{color:var(--tx-3)}
.selp-flecha{color:var(--tx-3);transition:transform var(--t-base) var(--e)}
.selp.abierto .selp-flecha{transform:rotate(90deg)}

.selp-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;max-height:300px;overflow-y:auto;
  background:var(--superficie);border:1px solid var(--linea-2);border-radius:14px;box-shadow:var(--sh-lg);padding:6px}
.selp-opt{width:100%;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;border:none;
  background:none;cursor:pointer;text-align:left;transition:var(--t-rapido) var(--e)}
.selp-opt:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.selp-opt[hidden]{display:none}
.selp-nom{display:flex;flex-direction:column;line-height:1.2;color:var(--tx);font-size:.85rem;font-weight:600}
.selp-nom small{font-size:.7rem;color:var(--tx-3);font-weight:500}
.selp-check{margin-left:auto;color:var(--brand-2);opacity:0;transition:var(--t-rapido) var(--e)}
.selp-opt.elegido{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.selp-opt.elegido .selp-check{opacity:1}
.selp-vacio{padding:14px;text-align:center;color:var(--tx-3);font-size:.8rem}

.tarjeta.selp-sobre{position:relative;z-index:60}

/* ============================================================================
   SOPORTE — hilo de ticket + propuesta del asistente (2026-09-29)
   ========================================================================== */
.hilo{display:flex;flex-direction:column;gap:12px}
.msj-t{border:1px solid var(--linea);border-radius:14px;padding:12px 14px;background:var(--glass)}
.msj-t.BOT{border-color:color-mix(in srgb,var(--ia) 30%,transparent);
  background:color-mix(in srgb,var(--ia) 7%,transparent)}
.msj-t.SOP{border-color:color-mix(in srgb,var(--brand) 34%,transparent);
  background:color-mix(in srgb,var(--brand) 8%,transparent)}
.msj-t.interno{border-style:dashed;opacity:.92}
.msj-t-h{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:.82rem}
.msj-t-h .nota{margin-left:auto;font-size:.72rem}
.msj-t p{font-size:.88rem;line-height:1.6;color:var(--tx)}

.sop-propuesta{margin-top:11px;border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  border-radius:12px;padding:11px 12px;background:color-mix(in srgb,var(--brand) 9%,transparent)}
.sop-prop-h{font-size:.72rem;font-weight:700;color:var(--brand-2);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.sop-prop-t{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:.86rem;color:var(--tx)}
.sop-rapidas{display:flex;flex-wrap:wrap;gap:8px}

/* glifo del asistente de soporte (reusa el estilo del glifo IA) */
.cajon .sugerencias a{text-decoration:none}

/* accesos adicionales por usuario (Configuración) */
.grants-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.grant{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:var(--r-sm);background:var(--glass);cursor:pointer;font-size:.86rem;color:var(--tx)}
.grant:hover{border-color:var(--brand)}
.grant input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;flex:none}
.grant small{color:var(--tx-3);font-weight:400}

/* matriz de equipo × etapas */
.matriz-eq{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-sm)}
.matriz-eq table{width:100%;border-collapse:collapse;min-width:520px}
.matriz-eq th{background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--tx-2);
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:9px 8px;text-align:center;white-space:nowrap}
.matriz-eq th:first-child{text-align:left}
.matriz-eq td{padding:8px;border-top:1px solid var(--linea);text-align:center;vertical-align:middle}
.mx-persona{display:flex;align-items:center;gap:8px;text-align:left;white-space:nowrap}
.mx-nom{display:flex;flex-direction:column;line-height:1.15;font-size:.82rem;color:var(--tx);font-weight:600}
.mx-nom small{font-size:.66rem;color:var(--tx-3);font-weight:400}
.mx-check input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.mx-check input:disabled{accent-color:var(--tx-3);cursor:not-allowed;opacity:.7}

/* ============================================================================
   FEED por licitación (estilo Slack/Teams) — 2026-09-29
   ========================================================================== */
.feed-nuevo{margin-bottom:16px}
.feed-lista{display:flex;flex-direction:column;gap:14px}
.feed-pub{border:1px solid var(--linea);border-radius:14px;padding:14px 16px;background:var(--glass)}
.feed-h{display:flex;align-items:center;gap:9px;font-size:.86rem;margin-bottom:8px}
.feed-h .nota{margin-left:auto;font-size:.72rem}
.feed-cuerpo{font-size:.9rem;line-height:1.6;color:var(--tx)}
.feed-coment{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.feed-c{display:flex;gap:9px;align-items:flex-start;font-size:.84rem}
.feed-c p{margin-top:2px;color:var(--tx);line-height:1.5}
.feed-c-form{display:flex;gap:8px;align-items:center;margin-top:4px}
.feed-c-form .entrada{flex:1}

/* ============================================================================
   FICHA CON PESTAÑAS + CHECKLIST DE ETAPAS + FUENTES (2026-09-29)
   ========================================================================== */
/* stepper de etapas */
.pasos-etapa{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.pasos-etapa .paso{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--pill);
  border:1px solid var(--linea);background:var(--glass);font-size:.76rem;font-weight:600;color:var(--tx-3)}
.pasos-etapa .paso .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:.68rem;background:var(--linea);color:var(--tx-2)}
.pasos-etapa .paso.hecha{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pasos-etapa .paso.hecha .n{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.pasos-etapa .paso.actual{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent}
.pasos-etapa .paso.actual .n{background:rgba(255,255,255,.25);color:#fff}

/* pestañas */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin:6px 0 18px;flex-wrap:wrap}
.pestanas button{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border:none;background:none;
  color:var(--tx-3);font-size:.86rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;
  transition:var(--t-rapido) var(--e)}
.pestanas button:hover{color:var(--tx)}
.pestanas button.activa{color:var(--brand-2);border-bottom-color:var(--brand-2);background:none}
.pestanas button .ico{color:currentColor}

/* checklist */
.chk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.chk-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--linea);
  border-radius:12px;background:var(--glass)}
.chk-item.ok{border-color:color-mix(in srgb,var(--ok) 34%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.chk-mark{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--tx-3);background:var(--linea)}
.chk-item.ok .chk-mark{color:#fff;background:var(--ok)}
.chk-txt{flex:1;display:flex;flex-direction:column;line-height:1.35}
.chk-txt b{font-size:.88rem;color:var(--tx);font-weight:600}
.chk-txt .nota{font-size:.75rem}
.chk-item form{margin:0}

/* tarjeta de etapa (Flujo) */
.borde-marca{border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.etapa-card.pendiente{opacity:.72}
.paso-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.76rem;
  font-weight:700;background:var(--linea);color:var(--tx-2)}
.paso-num.hecha{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.paso-num.actual{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}

/* fuentes */
.fuente-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.fuente-form .entrada{width:auto;flex:1 1 180px}
.fuentes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fuente-item{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--glass);position:relative}
.fuente-item img{width:100%;height:130px;object-fit:cover;display:block}
.fuente-doc{height:130px;display:grid;place-items:center;color:var(--tx-3);background:color-mix(in srgb,var(--brand) 6%,transparent)}
.fuente-meta{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.fuente-meta b{font-size:.82rem}
.fuente-item form{position:absolute;top:6px;right:6px}

/* ============================================================================
   FEED por licitación — rediseño estilo red social (2026-09-29)
   ========================================================================== */
.feed{display:flex;flex-direction:column;gap:14px}
.feed-composer{display:flex;gap:12px;align-items:flex-start;padding:16px}
.feed-composer .avatar{margin-top:2px}
.feed-form{flex:1;display:flex;flex-direction:column;gap:10px}
.feed-input{width:100%;background:var(--glass);border:1px solid var(--linea);border-radius:16px;
  padding:12px 15px;color:var(--tx);font-size:.9rem;resize:none;min-height:44px;font-family:inherit}
.feed-input:focus{outline:none;border-color:var(--ia);box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 13%,transparent)}
.feed-form-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feed-tipo{background:var(--glass);border:1px solid var(--linea);border-radius:var(--pill);
  padding:7px 12px;color:var(--tx);font-size:.78rem;font-weight:600;cursor:pointer}
.feed-img{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--linea);background:var(--glass);color:var(--tx-3);transition:var(--t-rapido) var(--e)}
.feed-img:hover{border-color:var(--brand);color:var(--brand-2)}
.feed-img-nombre{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tabs por tipo */
.feed-tabs{display:flex;gap:4px;background:var(--glass);border:1px solid var(--linea);
  border-radius:var(--pill);padding:4px;align-self:flex-start}
.feed-tabs button{padding:8px 18px;border:none;background:none;border-radius:var(--pill);
  color:var(--tx-2);font-size:.8rem;font-weight:600;cursor:pointer;transition:var(--t-rapido) var(--e)}
.feed-tabs button.activa{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}

/* publicaciones */
.feed-pub{padding:16px 18px}
.feed-h{display:flex;align-items:center;gap:11px}
.feed-autor{display:flex;flex-direction:column;line-height:1.25}
.feed-autor b{font-size:.9rem;color:var(--tx)}
.feed-autor .nota{font-size:.72rem}
.feed-h .badge{margin-left:6px}
.feed-menu{margin-left:auto;position:relative}
.feed-menu summary{list-style:none;cursor:pointer;color:var(--tx-3);width:30px;height:30px;
  display:grid;place-items:center;border-radius:8px}
.feed-menu summary::-webkit-details-marker{display:none}
.feed-menu summary:hover{background:var(--glass);color:var(--tx)}
.feed-menu-pop{position:absolute;right:0;top:34px;z-index:20;background:var(--superficie);
  border:1px solid var(--linea-2);border-radius:10px;box-shadow:var(--sh-lg);padding:6px}
.feed-del{border:none;background:none;color:var(--bad);font-size:.82rem;font-weight:600;cursor:pointer;padding:7px 14px;border-radius:7px;width:100%;text-align:left}
.feed-del:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.feed-cuerpo{font-size:.92rem;line-height:1.6;color:var(--tx);margin-top:10px}
.feed-foto{max-width:100%;border-radius:12px;margin-top:10px;display:block;max-height:340px;object-fit:cover}

.feed-acciones{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}
.feed-reax{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--linea);background:var(--glass);
  border-radius:var(--pill);padding:5px 12px;font-size:.85rem;cursor:pointer;color:var(--tx-2);transition:var(--t-rapido) var(--e)}
.feed-reax:hover{border-color:var(--brand)}
.feed-reax.mia{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand-2)}
.feed-reax b{font-family:var(--f-dato);font-size:.76rem}
.feed-comentar{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--tx-2);
  font-size:.82rem;font-weight:600;cursor:pointer;margin-left:auto;padding:6px 10px;border-radius:8px}
.feed-comentar:hover{background:var(--glass);color:var(--tx)}
.feed-coment{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.feed-c{display:flex;gap:9px;align-items:flex-start;font-size:.84rem}
.feed-c p{margin-top:2px;color:var(--tx);line-height:1.5}
.feed-c-form{display:flex;gap:8px;align-items:center}
.feed-c-form .entrada{flex:1}

/* copiloto por licitación (chat embebido) */
.cop-chat{display:flex;flex-direction:column;gap:12px;max-height:440px;overflow-y:auto;
  padding:6px 2px 12px;margin-bottom:12px}
.cop-form{display:flex;gap:10px;align-items:center}
.cop-form .entrada{flex:1}

/* área de codificación embebida en la ficha */
.fila-boton{width:100%;text-align:left;border:none;background:none;cursor:pointer;font:inherit}
.cod-ws{margin-top:12px}
.cod-ws:empty{display:none}
.cod-ws .vista>div:first-child{display:none}  /* oculta el "← Licitaciones" del editor embebido */

/* stepper clicable + evidencia por etapa */
.pasos-etapa .paso{border:1px solid var(--linea);cursor:pointer;font:inherit}
.pasos-etapa .paso.js-ir-etapa:hover{transform:translateY(-1px);border-color:var(--brand)}
.etapa-card.resaltar{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent);
  transition:box-shadow .3s var(--e)}
.evid{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}
.evid-t{display:block;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--tx-3);margin-bottom:7px}
.evid-fila{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--tx);padding:3px 0}
.evid-fila .ico{color:var(--tx-3);flex:none}

/* visor de documentos (modal grande con iframe) */
.modal-visor{width:min(920px,96vw)}
.modal-visor .modal-b{padding:0}

/* botón de retroceso global */
.btn-atras{flex:none}
.cabecera{gap:12px}

/* nav fija de la ficha (stepper de etapas + pestañas) */
.lic-nav{position:sticky;top:0;z-index:26;margin:0 0 14px;padding:10px 0 4px;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lic-nav-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pasos-etapa .paso.activa{box-shadow:0 0 0 2px var(--brand-2);border-color:var(--brand-2)}

/* ============================================================================
   AUDITORÍA RESPONSIVA (2026-09-29)
   ========================================================================== */
/* nav de la ficha: fondo sólido (no dejar traslucir el contenido al hacer scroll) */
.lic-nav{background:var(--bg-2)}
[data-theme="dark"] .lic-nav{background:var(--bg)}

/* Tablet y menor: soltar el modelo de scroll fijo al viewport.
   En desktop la barra lateral y el contenido miden 100vh cada uno; en una sola
   columna eso hacía 200vh y encimaba todo. Aquí la página vuelve a scroll normal. */
@media (max-width:1100px){
  body:not(.sin-aura){height:auto;min-height:100dvh;overflow:auto}
  .app{height:auto;min-height:100dvh}
  .lateral{height:auto;overflow:visible}
  .contenedor{height:auto;min-height:0}
  #contenido{overflow:visible}
  .lic-nav{top:0}
}

/* Pantallas chicas: el stepper y las pestañas se deslizan en horizontal
   (mejor que encimarse al envolver). */
@media (max-width:720px){
  .pasos-etapa,.pestanas{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;padding-bottom:6px}
  .pasos-etapa::-webkit-scrollbar,.pestanas::-webkit-scrollbar{height:5px}
  .pasos-etapa .paso,.pestanas button{flex:0 0 auto}
  .lic-nav-top{flex-wrap:wrap}
  .reparto{grid-template-columns:1fr}
  .metricas{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cabecera{padding:12px 14px;gap:10px}
  .cabecera h1{font-size:1.1rem}
}

/* Móvil angosto: aún más compacto */
@media (max-width:480px){
  .pasos-etapa .paso{padding:6px 10px;font-size:.72rem}
  .pasos-etapa .paso .et{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pestanas button{padding:9px 12px;font-size:.8rem}
  .metricas{grid-template-columns:1fr!important}
  .modal,.modal-visor,.paleta{width:96vw!important}
  .cabecera .comando{display:none}
}

/* ============================================================================
   CABECERA COMPACTA — título grande ocupaba hasta 4 líneas en iPad (2026-09-29)
   ========================================================================== */
/* el bloque título+subtítulo puede encogerse y recortar con elipsis en 2 líneas */
.cabecera>div{min-width:0;flex:1 1 auto}
.cabecera h1{line-height:1.18;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cabecera h1{font-size:clamp(1.05rem,1.8vw,1.5rem)}
.cabecera>div>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tablet (iPad): cabecera más baja y título más chico para despejar el contenido */
@media (max-width:1200px){
  .cabecera{padding:11px 20px}
  .cabecera h1{font-size:clamp(1rem,2.2vw,1.2rem);-webkit-line-clamp:2}
  .cabecera>div>span{font-size:.72rem}
}


/* ============================================================================
   FASE 0 · MENÚ LATERAL COLAPSABLE (2026-09-29)
   ========================================================================== */
/* botón hamburguesa: en escritorio alterna riel; en móvil abre el cajón */
.btn-menu{flex:none}
/* transiciones suaves del ancho del riel y del deslizamiento del cajón */
.app{transition:grid-template-columns .26s var(--e)}
.lateral{transition:transform .28s var(--e),padding .2s var(--e)}
.nav-i .rotulo,.marca>div{transition:opacity .16s var(--e)}

/* ---- ESCRITORIO: modo RIEL (solo íconos ~74px) ------------------------- */
@media (min-width:1101px){
  body.menu-rail .app{grid-template-columns:74px minmax(0,1fr)}
  body.menu-rail .lateral{padding-left:10px;padding-right:10px}
  body.menu-rail .marca{justify-content:center;padding:0 0 14px;gap:0}
  body.menu-rail .marca>div{display:none}
  body.menu-rail .nav-grupo{height:1px;margin:10px 8px;padding:0;overflow:hidden;
    color:transparent;background:var(--linea);border:0}
  body.menu-rail .nav-i{position:relative;justify-content:center;gap:0;padding:11px 0}
  body.menu-rail .nav-i .rotulo{display:none}
  body.menu-rail .nav-i .conteo{position:absolute;top:5px;right:11px;min-width:9px;height:9px;
    padding:0;font-size:0;line-height:0;border-radius:50%}
  body.menu-rail .nav-i.activo{border-left-color:transparent;box-shadow:inset 0 0 0 1px var(--brand-2)}
}

/* ---- MÓVIL / TABLET (≤1100px): el menú es un CAJÓN deslizable ----------- */
@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  body.menu-rail .app{grid-template-columns:1fr}
  .lateral{position:fixed;top:0;left:0;bottom:0;width:min(82vw,290px);z-index:70;
    transform:translateX(-100%);flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    gap:5px;padding:20px 16px;overflow-y:auto;overflow-x:hidden;
    box-shadow:14px 0 48px rgba(0,0,0,.4)}
  .marca{border-bottom:1px solid var(--linea);padding:0 8px 16px;margin-bottom:10px}
  .nav-i{width:100%}
  .nav-espacio{display:block;flex:1}
  body.menu-abierto .lateral{transform:translateX(0)}
  /* velo visual (los clics pasan y el JS cierra el cajón) */
  body.menu-abierto::after{content:"";position:fixed;inset:0;z-index:65;pointer-events:none;
    background:rgba(4,10,20,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
}


/* ============================================================================
   FASE 1 · ORIENTACIÓN — miga de sección en la cabecera (2026-09-29)
   ========================================================================== */
.cabecera .miga{display:block;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-2);line-height:1;margin-bottom:3px}
.cabecera .sub-cab{font-size:.78rem;color:var(--tx-2)}
@media (max-width:1200px){ .cabecera .miga{font-size:.58rem;margin-bottom:2px} }


/* ============================================================================
   FASE 2+3 · ELEVACIÓN DE DISEÑO Y MICROINTERACCIONES (2026-09-29)
   Evolución sobre el kit actual: estados táctiles, foco accesible, animaciones.
   ========================================================================== */
html{scroll-behavior:smooth}

/* --- Foco accesible y consistente en todo lo interactivo --- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--brand-2);outline-offset:2px;border-radius:var(--r-sm)}

/* --- Estados "press" (retroalimentación táctil) --- */
.btn{will-change:transform}
.btn:active{transform:translateY(0) scale(.975)}
.btn-cab:active{transform:translateY(0) scale(.92)}
.nav-i:active{transform:scale(.99)}
.metrica:active,.tarjeta:active{transform:translateY(-2px)}

/* --- Botones primarios: brillo sutil de marca al hover --- */
.btn-marca:hover{box-shadow:0 12px 28px -12px color-mix(in srgb,var(--brand) 75%,transparent)}
.btn-ia:hover{box-shadow:0 12px 28px -12px color-mix(in srgb,var(--ia) 65%,transparent)}
.btn-urgente:hover{box-shadow:0 12px 28px -12px color-mix(in srgb,var(--acento) 65%,transparent)}

/* --- Tarjetas: elevación más viva y suave --- */
.tarjeta{transition:transform var(--t-base) var(--e),box-shadow var(--t-base) var(--e),border-color var(--t-base) var(--e)}
.tarjeta:hover{transform:translateY(-3px)}

/* --- Navegación: el ícono se desliza un pelín al pasar el cursor --- */
.nav-i .ico{transition:transform .2s var(--e)}
.nav-i:hover .ico{transform:translateX(2px)}

/* --- Pestañas: subrayado animado en la activa --- */
.pestanas button{position:relative}
.pestanas button.activa::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform-origin:left;animation:subrayar .3s var(--e)}
@keyframes subrayar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- Esqueletos de carga (reemplazan spinners) --- */
.esqueleto{position:relative;overflow:hidden;background:var(--glass);border-radius:var(--r-sm);min-height:14px}
.esqueleto::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tx) 10%,transparent),transparent);
  animation:brillo 1.4s infinite}
@keyframes brillo{to{transform:translateX(100%)}}

/* --- Indicador de carga HTMX (barra superior sutil) --- */
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* --- Barra de herramientas homologada (filtros/acciones sobre listas) --- */
.barra-herramientas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.barra-herramientas .crece{flex:1 1 auto;min-width:0}

/* --- Scrollbars finos y a tono --- */
#contenido,.lateral{scrollbar-width:thin;scrollbar-color:var(--linea-2) transparent}
#contenido::-webkit-scrollbar,.lateral::-webkit-scrollbar{width:10px;height:10px}
#contenido::-webkit-scrollbar-thumb,.lateral::-webkit-scrollbar-thumb{
  background:var(--linea-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
#contenido::-webkit-scrollbar-thumb:hover{background:var(--brand-2);background-clip:content-box}

/* --- Entrada escalonada para más elementos (extiende .aparece a 10) --- */
.aparece:nth-child(7){animation-delay:.39s}.aparece:nth-child(8){animation-delay:.45s}
.aparece:nth-child(9){animation-delay:.51s}.aparece:nth-child(10){animation-delay:.57s}

/* --- Glifo de marca del menú: leve latido tecnológico --- */
@media (prefers-reduced-motion:no-preference){
  .marca .glifo{animation:latido 4.5s var(--e) infinite}
  @keyframes latido{0%,100%{box-shadow:0 10px 22px -8px color-mix(in srgb,var(--brand) 65%,transparent)}
    50%{box-shadow:0 10px 30px -6px color-mix(in srgb,var(--brand-2) 80%,transparent)}}
}


/* ============================================================================
   FASE 4 · ACCESIBILIDAD — tamaño de letra + alto contraste (2026-09-29)
   ========================================================================== */
.a11y-fuente{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.a11y-nivel{font-family:var(--f-dato);font-weight:600;min-width:56px;text-align:center;font-size:1rem}
.btn.a11y-A{font-weight:800;font-size:1rem;min-width:52px;padding:10px 14px}
.campo-l{display:block;font-weight:600;font-size:.82rem;color:var(--tx-2);margin-bottom:8px}

/* blancos táctiles cómodos (WCAG 2.2): botones de cabecera y nav */
.btn-cab{width:42px;height:42px}

/* --- Alto contraste (tema claro) --- */
[data-theme="light"][data-contraste="alto"]{
  --tx:#04121f; --tx-2:#132434; --tx-3:#30465b;
  --linea:#8698ad; --linea-2:#63788e;
  --glass:rgba(255,255,255,.94); --glass-b:#63788e;
}
/* --- Alto contraste (tema oscuro) --- */
[data-theme="dark"][data-contraste="alto"]{
  --tx:#ffffff; --tx-2:#e6eef7; --tx-3:#bccadb;
  --linea:rgba(255,255,255,.32); --linea-2:rgba(255,255,255,.5);
}
[data-contraste="alto"] .btn-suave{border-color:var(--tx-3)}
[data-contraste="alto"] .tarjeta,[data-contraste="alto"] .metrica{border-color:var(--linea-2)}
[data-contraste="alto"] .nav-i.activo{box-shadow:inset 3px 0 0 var(--brand-2),inset 0 0 0 1px var(--linea-2)}


/* ============================================================================
   FICHA · menú + estado/etapa en UNA sola fila (2026-09-30)
   ========================================================================== */
.lic-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:8px}
.lic-nav .pestanas{flex:1 1 auto;margin:0;min-width:0}
.lic-estado{display:flex;align-items:center;gap:9px;margin-left:auto;white-space:nowrap}
.lic-estado .nota{font-size:.72rem;color:var(--tx-3)}
.lic-estado .badge{font-size:.62rem;padding:3px 10px;font-weight:700}
@media(max-width:720px){
  .lic-nav .pestanas{order:2}
  .lic-estado{order:1;margin-left:0}
}

/* La barra fija: fondo sólido sin blur (el blur dejaba "colarse" el contenido),
   sombra de separación y por encima del contenido. En pantallas medianas/chicas
   el scroll es de página completa y la barra deja de fijarse para no encimarse. */
.lic-nav{z-index:40;padding:10px 0 9px;border-bottom:1px solid var(--linea);
  box-shadow:0 10px 18px -12px rgba(15,27,45,.28);
  backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="dark"] .lic-nav{box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
@media(max-width:1100px){
  .lic-nav{position:static;box-shadow:none;border-bottom:1px solid var(--linea)}
}

/* Full-bleed: la barra cubre el relleno de la página (arriba y a los lados) para
   que NADA se vea pasar por detrás/alrededor al hacer scroll. */
.lic-nav{
  margin-top:-22px;padding-top:22px;
  margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;
}
@media(max-width:720px){
  .lic-nav{margin-top:-16px;padding-top:16px;
    margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}


/* ============================================================================
   FICHA · (bloque v39 retirado 2026-10-01) — el scroll de la ficha se define
   UNA sola vez más abajo ("scroll NORMAL de la página"). Tener dos definiciones
   creaba un contenedor de scroll interno en .lic-cuerpo y la rueda solo respondía
   sobre la barra/los bordes. Aquí queda solo el ajuste móvil.
   ========================================================================== */
/* móvil/tablet: scroll de página normal; el menú se va con el contenido (sin encimar) */
@media(max-width:1100px){
  .ficha-scroll .lic-nav{position:static;margin:0;padding:10px 0 10px;box-shadow:none}
  .ficha-scroll .lic-cuerpo{padding:0 16px 24px}
}


/* ============================================================================
   TAREAS · tablero tipo kanban por licitación (2026-09-30)
   ========================================================================== */
.tablero{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.col-tablero{flex:0 0 288px;width:288px;background:var(--glass);border:1px solid var(--linea);
  border-radius:var(--r-sm);display:flex;flex-direction:column}
.col-h{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--linea)}
.col-titulo{font-weight:700;font-size:.82rem}
.col-cuenta{margin-left:auto;font-family:var(--f-dato);font-size:.68rem;color:var(--tx-3);
  background:var(--glass);border:1px solid var(--linea);border-radius:var(--pill);padding:1px 8px}
.col-body{display:flex;flex-direction:column;gap:9px;padding:11px;min-height:46px}
.col-body.sobre{background:color-mix(in srgb,var(--brand) 8%,transparent);
  outline:2px dashed color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:-6px;border-radius:var(--r-sm)}
.col-nueva{margin:0 11px 11px;padding:8px;border:1px dashed var(--linea-2);background:none;color:var(--tx-2);
  border-radius:var(--r-sm);font-size:.78rem;font-weight:600;cursor:pointer;display:flex;align-items:center;
  gap:7px;justify-content:center;transition:var(--t-rapido) var(--e)}
.col-nueva:hover{border-color:var(--brand);color:var(--tx)}

.tarea-card{background:var(--card);border:1px solid var(--linea);border-radius:11px;padding:11px 12px;
  cursor:grab;display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--linea-2);
  box-shadow:0 2px 6px -4px rgba(0,0,0,.2);
  transition:transform .12s var(--e),box-shadow .12s var(--e),border-color .12s var(--e)}
.tarea-card:hover{box-shadow:0 8px 18px -10px rgba(0,0,0,.28);transform:translateY(-1px)}
.tarea-card:active{cursor:grabbing}
.tarea-card.arrastrando{opacity:.4}
.tarea-card.hecha .tarea-titulo{text-decoration:line-through;color:var(--tx-3)}
.tarea-card.prio-alta{border-left-color:var(--bad)}
.tarea-card.prio-media{border-left-color:var(--acento)}
.tarea-card.prio-baja{border-left-color:var(--ok)}
.tarea-top{display:flex;align-items:center;gap:8px}
.tarea-prio{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:var(--pill)}
.tarea-prio.prio-alta{color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,transparent)}
.tarea-prio.prio-media{color:var(--acento);background:color-mix(in srgb,var(--acento) 16%,transparent)}
.tarea-prio.prio-baja{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.tarea-vence{margin-left:auto;font-size:.66rem;color:var(--tx-3);display:inline-flex;align-items:center;gap:4px}
.tarea-vence.vencida{color:var(--bad);font-weight:700}
.tarea-titulo{font-size:.86rem;font-weight:600;line-height:1.3}
.tarea-pie{display:flex;align-items:center;gap:10px;font-size:.7rem;color:var(--tx-2)}
.tarea-asig{display:inline-flex;align-items:center;gap:5px}
.tarea-asig.sin{color:var(--tx-3);font-style:italic}
.tarea-coms{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--tx-3)}

/* detalle de tarea (modal) */
.modal-tarea{width:min(640px,96vw)}
.tarea-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.tarea-coments{display:flex;flex-direction:column;gap:9px}
.tarea-com{background:var(--glass);border:1px solid var(--linea);border-radius:10px;padding:8px 11px}
.tarea-com-h{display:flex;align-items:baseline;gap:8px;font-size:.76rem;margin-bottom:3px}
.tarea-com-h .nota{margin-left:auto;font-size:.66rem}
.tarea-com-b{font-size:.82rem;color:var(--tx)}
@media(max-width:620px){
  .tarea-campos{grid-template-columns:1fr}
  .col-tablero{flex-basis:84vw;width:84vw}
}


/* ============================================================================
   DASHBOARD DE INICIO (por licitación) — anillo, dona, barras (2026-09-30)
   ========================================================================== */
.dash-kpis{margin-bottom:16px}
.metrica.centro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dash-ring{position:relative;width:92px;height:92px;margin-bottom:4px}
.dash-ring .ring{width:92px;height:92px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--linea);stroke-width:10}
.ring-fg{fill:none;stroke:url(#gAnillo);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s var(--e)}
.ring-val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-dato);font-weight:600;font-size:1.32rem}

/* barras de estado por etapa */
.etapas-barras{display:flex;flex-direction:column;gap:7px}
.etapa-barra{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;
  border:0;cursor:pointer;padding:7px;border-radius:var(--r-sm);transition:background .15s var(--e)}
.etapa-barra:hover{background:var(--glass)}
.eb-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;
  font-weight:700;flex:none;background:var(--glass);color:var(--tx-3);border:1px solid var(--linea)}
.eb-num.hecha{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok);border-color:transparent}
.eb-num.actual{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.eb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.eb-top{display:flex;align-items:center;gap:8px}
.eb-label{font-size:.82rem;font-weight:600}
.eb-badge{margin-left:auto;font-size:.56rem;padding:2px 8px}
.eb-bar{height:6px;border-radius:3px;background:var(--linea);overflow:hidden}
.eb-fill{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .8s var(--e)}
.etapa-barra.hecha .eb-fill{background:var(--ok)}

/* dona de tareas */
.dash-tareas{display:flex;align-items:center;gap:16px}
.donut{position:relative;width:104px;height:104px;flex:none}
.donut svg{width:104px;height:104px}
.donut-bg{fill:none;stroke:var(--linea);stroke-width:14}
.donut-seg{fill:none;stroke-width:14;transform:rotate(-90deg);transform-origin:60px 60px;
  transition:stroke-dashoffset .8s var(--e)}
.donut-val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-dato);
  font-weight:600;font-size:1.2rem}
.donut-val small{font-size:.68rem;color:var(--tx-3)}
.donut-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.78rem;flex:1}
.donut-leyenda li{display:flex;align-items:center;gap:8px}
.donut-leyenda i{width:10px;height:10px;border-radius:3px;flex:none}
.donut-leyenda b{margin-left:auto;font-family:var(--f-dato)}

/* actividad reciente */
.dash-activi{display:flex;flex-direction:column;margin-bottom:8px}
.act-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea)}
.act-item:last-child{border-bottom:0}
.act-punto{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;background:var(--brand-2)}
.act-punto.tipo-estado,.act-punto.tipo-etapa{background:var(--brand)}
.act-punto.tipo-validacion{background:var(--ia)}
.act-punto.tipo-tarea{background:var(--acento)}
.act-txt{font-size:.82rem;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.act-meta{font-size:.68rem;color:var(--tx-3)}
@media(max-width:620px){ .dash-tareas{flex-direction:column;align-items:flex-start} }


/* ============================================================================
   FEED · más reacciones (selector) + adjuntos en comentarios (2026-09-30)
   ========================================================================== */
.reax-picker{position:relative}
.reax-picker>summary{list-style:none;cursor:pointer;display:inline-flex}
.reax-picker>summary::-webkit-details-marker{display:none}
.feed-reax-add{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--pill);
  border:1px solid var(--linea);background:var(--glass);color:var(--tx-2);font-size:.78rem;font-weight:600;
  transition:var(--t-rapido) var(--e)}
.feed-reax-add:hover{border-color:var(--brand);color:var(--tx)}
.reax-cara{font-size:1rem;line-height:1}
.reax-pop{position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;display:flex;gap:2px;padding:6px;
  background:var(--bg-2);border:1px solid var(--linea);border-radius:var(--pill);box-shadow:var(--sh-lg)}
[data-theme="dark"] .reax-pop{background:var(--card)}
.reax-op{font-size:1.15rem;line-height:1;padding:5px 7px;border:0;background:none;border-radius:9px;
  cursor:pointer;transition:transform .1s var(--e),background .1s var(--e)}
.reax-op:hover{transform:scale(1.25)}
.reax-op.mia{background:color-mix(in srgb,var(--brand) 20%,transparent)}

.feed-c-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-c-b p{margin:2px 0}
.feed-c-foto{max-width:220px;max-height:200px;border-radius:10px;margin-top:6px;display:block;border:1px solid var(--linea)}
.feed-c-arch{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;margin-top:4px}
.feed-c-adj{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--pill);
  border:1px solid var(--linea);background:var(--glass);color:var(--tx-2);cursor:pointer;flex:none;
  transition:var(--t-rapido) var(--e)}
.feed-c-adj:hover{border-color:var(--brand);color:var(--tx)}
.feed-c-adj-nom{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ============================================================================
   FUENTES · thumbnail clicable + acciones (previsualizar/descargar) 2026-09-30
   ========================================================================== */
.fuente-thumb{border:0;padding:0;margin:0;background:none;cursor:pointer;display:block;width:100%}
.fuente-thumb img{width:100%;height:130px;object-fit:cover;display:block}
button.fuente-doc{border:0;width:100%;cursor:pointer}
.fuente-thumb:hover img,button.fuente-doc:hover{filter:brightness(.95)}
.fuente-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fuente-acc .btn.sm{padding:5px 10px;font-size:.72rem}


/* ============================================================================
   FLUJO · etapas pendientes bloqueadas/agrisadas (2026-09-30)
   ========================================================================== */
.etapa-card.bloqueada{opacity:.72}
.etapa-card.bloqueada .tarjeta-h h3{color:var(--tx-2)}
.etapa-card.bloqueada .chk{filter:grayscale(.6);opacity:.8}
.etapa-badge-lock{display:inline-flex;align-items:center;gap:4px}
.etapa-bloqueada-msj{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.8rem;
  color:var(--tx-3);background:var(--glass);border:1px dashed var(--linea-2);
  border-radius:var(--r-sm);padding:9px 12px}
.etapa-lock-banner{display:flex;align-items:center;gap:12px;color:var(--tx-2);margin-bottom:14px;
  border-color:color-mix(in srgb,var(--acento) 40%,transparent);
  background:color-mix(in srgb,var(--acento) 8%,transparent)}
.etapa-lock-banner .ico{color:var(--acento)}
.etapa-lock-banner>div{display:flex;flex-direction:column}
.bloqueada-cont{opacity:.5;pointer-events:none;filter:grayscale(.4);user-select:none}


/* ============================================================================
   AUDITORÍA Fase C · fluidez: quitar "saltos" de tarjeta y afordancias falsas
   ========================================================================== */
/* El lift al :hover/:active de .tarjeta hacía "saltar" tarjetas con inputs/botones.
   Se reserva el lift solo a tarjetas realmente clicables. */
.tarjeta:hover,.tarjeta:active{transform:none}
a.tarjeta:hover,.metrica:hover,.cat-card:hover,.fuente-item:hover{transform:translateY(-3px)}
/* Filas/renglones no clicables: sin cursor de mano ni desplazamiento engañoso. */
.fila:not(a):not([onclick]){cursor:default}
tbody tr:not([onclick]):not(.clicable):not(.fila){cursor:default}


/* ============================================================================
   AUDITORÍA Fase D · accesibilidad (baja visión): tamaños táctiles y etiquetas
   ========================================================================== */
.btn-ico{width:40px;height:40px}          /* default 36→40 (los inline 28px de tablas densas se respetan) */
.feed-menu summary{min-width:40px;min-height:40px;display:inline-grid;place-items:center}
.pencil{width:40px;height:40px}
.reax-op{padding:8px 10px}
/* pisos de tamaño en etiquetas muy pequeñas */
.eb-badge{font-size:.66rem}
.tarea-prio{font-size:.64rem}
/* foco visible dentro de contenedores recortados (tablas) */
.tabla-marco :focus-visible{outline-offset:-2px}


/* ============================================================================
   AVATAR con foto de perfil (2026-10-01)
   ========================================================================== */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar.xl{width:64px;height:64px;font-size:1.15rem}
.perfil-foto{display:flex;align-items:center;gap:16px;margin-bottom:18px}


/* ============================================================================
   ETIQUETA DE PUESTO (junto al nombre en interacciones) 2026-10-01
   ========================================================================== */
.et-puesto{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:var(--pill);margin-left:6px;vertical-align:middle;white-space:nowrap;
  background:color-mix(in srgb,var(--brand) 13%,transparent);color:var(--brand-2)}


/* ============================================================================
   ADJUNTO (archivo no-imagen) en feed: chip con ícono + Ver/Descargar (2026-10-01)
   ========================================================================== */
.adjunto{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;
  padding:8px 12px;border:1px solid var(--linea);border-radius:var(--r-sm);background:var(--glass)}
.adj-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--brand) 10%,transparent);color:var(--brand-2)}
.adj-ico.pdf{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.adj-nom{font-size:.8rem;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ============================================================================
   JUNTA DE ACLARACIONES · acordeón de actas en la ficha (2026-10-01)
   ========================================================================== */
.acta-det{border:1px solid var(--linea);border-radius:var(--r-sm);padding:12px 15px;background:var(--glass)}
.acta-det[open]{background:var(--card)}
.acta-det>summary{list-style:none;cursor:pointer}
.acta-det>summary::-webkit-details-marker{display:none}
.acta-sum{display:flex;align-items:center;gap:8px;width:100%;font-size:.92rem}

/* Junta: lista de impacto */
.impacto-lista{margin:0;padding-left:18px}
.impacto-lista li{margin:7px 0;line-height:1.5}


/* ============================================================================
   CARGADOR a pantalla completa con % animado (2026-10-01)
   ========================================================================== */
.cargador{position:fixed;inset:0;z-index:9998;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;text-align:center;padding:24px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cargador .anillo{width:66px;height:66px;border-radius:50%;border:5px solid var(--linea);
  border-top-color:var(--brand-2);animation:cargador-girar .9s linear infinite}
@keyframes cargador-girar{to{transform:rotate(360deg)}}
.cargador .cmsg{font-weight:700;font-size:1.02rem;color:var(--tx);max-width:460px}
.cargador .cbar{width:min(320px,74vw);height:9px;border-radius:99px;background:var(--linea);overflow:hidden}
.cargador .cbar{overflow:hidden;position:relative}
.cargador .cbar i{position:absolute;top:0;left:0;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));animation:cargador-barra 1.05s linear infinite}
@keyframes cargador-barra{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.cargador .cpct{font-family:var(--f-dato);font-weight:600;color:var(--tx-2)}
.cargador .csub{font-size:.8rem;color:var(--tx-3)}


/* ============================================================================
   CONFIRMACIÓN tras operación larga (toast completado/fallo) 2026-10-01
   ========================================================================== */
.conf-toast{position:fixed;top:18px;left:50%;transform:translate(-50%,-24px);z-index:10000;
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--pill);
  background:var(--bg-2);border:1px solid var(--linea);box-shadow:var(--sh-lg);
  font-weight:700;font-size:.9rem;color:var(--tx);opacity:0;max-width:90vw;
  transition:transform .3s var(--e),opacity .3s var(--e)}
.conf-toast.ver{transform:translate(-50%,0);opacity:1}
.conf-toast .ci{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex:none}
.conf-toast.ok .ci{background:var(--ok)}
.conf-toast.err .ci{background:var(--bad)}
.conf-toast.err{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
[data-theme="dark"] .conf-toast{background:var(--card)}


/* ============================================================================
   FICHA · scroll NORMAL de la página (la rueda del ratón funciona en todo) +
   menú sticky simple. Reemplaza el scroll interno de .lic-cuerpo, que hacía que
   la rueda solo respondiera sobre la barra. (2026-10-01)
   ========================================================================== */
@media(min-width:1101px){
  #contenido:has(.ficha-scroll){overflow-y:auto;display:block;padding:0}
  .ficha-scroll{display:block;max-width:none}
  .ficha-scroll .lic-cuerpo{overflow:visible;min-height:0;padding:0 24px 28px}
  .ficha-scroll .lic-nav{position:sticky;top:0;z-index:30;margin:0 0 14px;
    padding:14px 24px 10px;background:var(--bg-2);border-bottom:1px solid var(--linea);
    box-shadow:0 8px 16px -12px rgba(15,27,45,.22)}
  [data-theme="dark"] .ficha-scroll .lic-nav{background:var(--bg)}
}


/* ============================================================================
   LISTA DE LICITACIONES · chips de estatus (filtros rápidos del dashboard)
   ========================================================================== */
.chip-estatus{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:var(--pill);
  border:1px solid var(--linea);background:var(--glass);color:var(--tx-2);font-size:.78rem;font-weight:500;
  text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.chip-estatus:hover{border-color:var(--linea-2);color:var(--tx)}
.chip-estatus b{font-family:var(--f-dato);font-weight:700;color:var(--tx)}
.chip-estatus.activo{background:color-mix(in srgb,var(--brand) 14%,transparent);
  border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--brand)}
.chip-estatus.activo b{color:var(--brand)}


/* Dashboard de la lista de Licitaciones · tarjetas compactas */
.dash-compacto{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.dash-compacto .metrica{padding:13px 15px}
.dash-compacto .metrica .valor{font-size:1.5rem}
.dash-compacto .metrica .etiqueta{font-size:.74rem;margin-top:1px}
.dash-compacto .metrica .delta{font-size:.74rem;margin-top:4px}
.dash-compacto .metrica .btn.sm{margin-top:8px!important;padding:5px 11px;font-size:.72rem}
.dash-compacto .metrica:hover{transform:translateY(-2px)}