/* ==========================================================================
   PLATAFORMA INVESTIGACIÓN — Ver 1.0 (DEMO) — Hoja de estilos
   ========================================================================== */

:root{
  --color-primario: #0d2154;
  --color-primario-oscuro: #081638;
  --color-acento: #2f7bf6;
  --color-exito: #1e8e5a;
  --color-aviso: #c9891a;
  --color-peligro: #c0392b;

  --cat-investigacion: #e0791a;
  --cat-productividad: #2fa84f;
  --cat-formacion: #b23a8f;

  --bg-app: #f2f4f9;
  --bg-card: #ffffff;
  --texto-oscuro: #182036;
  --texto-medio: #4b5468;
  --texto-suave: #8891a5;
  --borde: #e3e7f0;
  --sombra: 0 2px 10px rgba(15, 23, 55, 0.06);
  --sombra-flot: 0 12px 32px rgba(8, 15, 40, 0.18);
  --radio: 12px;
  --radio-sm: 8px;
  --fuente-titulos: 'Poppins', 'Segoe UI', sans-serif;
  --fuente-texto: 'Inter', 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--fuente-texto);
  background: var(--bg-app);
  color: var(--texto-oscuro);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5{ font-family: var(--fuente-titulos); margin: 0 0 6px; color: var(--texto-oscuro); }
p{ margin: 0 0 10px; color: var(--texto-medio); line-height: 1.55; }
a{ color: var(--color-acento); text-decoration: none; }
button{ font-family: var(--fuente-texto); cursor: pointer; }
input, select, textarea{ font-family: var(--fuente-texto); }
.oculto{ display: none !important; }
::-webkit-scrollbar{ width: 9px; height: 9px; }
::-webkit-scrollbar-thumb{ background: #c7cee0; border-radius: 10px; }
::-webkit-scrollbar-track{ background: transparent; }

.icon{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm{ width: 14px; height: 14px; }
.icon-lg{ width: 26px; height: 26px; }

/* ==========================================================================
   PANTALLA DE LOGIN
   ========================================================================== */
.login-screen{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(47,123,246,0.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(192,57,43,0.18), transparent 40%),
    linear-gradient(135deg, var(--color-primario-oscuro), var(--color-primario) 65%);
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.login-screen::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.login-marca{
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 380px;
  padding: 20px 36px;
}
.login-marca .login-lema{ color: #aebbe0; font-size: 13px; letter-spacing: .4px; }
.login-marca h1{ color: #fff; font-size: 34px; line-height: 1.15; margin: 14px 0 6px; }
.login-marca .login-ver{ color: #7d8fc2; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.login-marca .login-desc{ margin-top: 18px; color: #c4cde8; font-size: 14.5px; }
.login-badges{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.login-badges span{ font-size: 11.5px; padding: 5px 10px; border-radius: 20px; background: rgba(255,255,255,0.08); color: #d7deef; border: 1px solid rgba(255,255,255,0.14); }

.login-card{
  position: relative;
  z-index: 2;
  background: rgba(10,20,50,0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 34px 32px;
  width: 360px;
  box-shadow: var(--sombra-flot);
}
.login-card .login-logo-box{ display:flex; align-items:center; gap: 10px; margin-bottom: 18px; }
.login-card .logo-badge{ width: 42px; height: 42px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-family: var(--fuente-titulos); font-weight:700; color:#fff; background: var(--color-acento); font-size: 15px; overflow: hidden;}
.login-card .logo-badge img{ width: 100%; height: 100%; object-fit: cover; }
.login-card .login-logo-box strong{ color:#fff; font-size: 15px; display:block; }
.login-card .login-logo-box span{ color:#93a1cc; font-size: 11.5px; }
.login-card label{ display:block; color:#c7d0ec; font-size: 12.5px; margin: 14px 0 6px; }
.login-card input{
  width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07); color: #fff; font-size: 14px; outline: none;
}
.login-card input::placeholder{ color: #7c88ad; }
.login-card input:focus{ border-color: var(--color-acento); background: rgba(255,255,255,0.1); }
.btn-login{
  margin-top: 20px; width: 100%; padding: 12px; border: none; border-radius: 9px;
  background: var(--color-acento); color: #fff; font-weight: 600; font-size: 14.5px;
  transition: filter .15s;
}
.btn-login:hover{ filter: brightness(1.08); }
.login-hint{ margin-top: 14px; color: #8b97bd; font-size: 11.5px; text-align: center; line-height:1.5; }
.login-error{ margin-top: 14px; background: rgba(192,57,43,0.16); border: 1px solid rgba(192,57,43,0.4); color: #ffcdc7; font-size: 12.5px; padding: 10px 12px; border-radius: 9px; text-align: center; }
.login-footer{ position:absolute; bottom: 18px; left: 0; right: 0; text-align:center; color:#5c689b; font-size: 11.5px; z-index:2; }

@media (max-width: 820px){
  .login-marca{ display:none; }
}

/* ==========================================================================
   ESTRUCTURA APP (topbar + sidebar + contenido)
   ========================================================================== */
.app-shell{ display: flex; min-height: 100vh; }

.sidebar{
  width: 250px;
  flex-shrink: 0;
  background: var(--color-primario);
  color: #cfd7ee;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-marca{ display:flex; align-items:center; gap:10px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-marca .logo-badge{ width: 36px; height:36px; border-radius: 9px; background: var(--color-acento); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family: var(--fuente-titulos); font-size:13px; overflow:hidden; flex-shrink:0;}
.sidebar-marca .logo-badge img{ width:100%; height:100%; object-fit:cover; }
.sidebar-marca strong{ display:block; color:#fff; font-size: 13.5px; line-height:1.25; }
.sidebar-marca span{ font-size: 10.5px; color: #93a1cc; }

.nav-scroll{ flex: 1; padding: 10px 10px 14px; }
.nav-grupo{ margin-bottom: 4px; }
.nav-titulo-grupo{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: #6d7ab2; padding: 14px 12px 6px; }
.nav-item{
  display:flex; align-items:center; gap: 10px; width: 100%; text-align:left;
  padding: 10px 12px; border-radius: 9px; border: none; background: transparent;
  color: #c4cdea; font-size: 13.5px; margin-bottom: 2px; transition: background .12s, color .12s;
}
.nav-item .icon{ width:17px; height:17px; opacity: .85; }
.nav-item:hover{ background: rgba(255,255,255,0.07); color: #fff; }
.nav-item.activo{ background: var(--color-acento); color: #fff; }
.nav-item.activo .icon{ opacity:1; }
.nav-item .contador{ margin-left:auto; font-size: 10.5px; background: rgba(255,255,255,0.14); padding: 1px 7px; border-radius: 20px; }
.nav-item.activo .contador{ background: rgba(255,255,255,0.28); }

.nav-sub{ padding-left: 10px; margin: 2px 0 8px 12px; border-left: 1px solid rgba(255,255,255,0.1); display:none; }
.nav-sub.abierto{ display:block; }
.nav-sub .nav-item{ font-size: 12.8px; padding: 8px 10px; }
.nav-toggle-caret{ margin-left:auto; transition: transform .15s; }
.nav-toggle-caret.girado{ transform: rotate(90deg); }

.sidebar-footer{ padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); }

.topbar{
  position: sticky; top:0; z-index: 20;
  height: 62px; background: #fff; border-bottom: 1px solid var(--borde);
  display:flex; align-items:center; gap: 16px; padding: 0 22px;
}
.topbar-buscar{ flex:1; max-width: 420px; position:relative; }
.topbar-buscar input{
  width:100%; padding: 9px 14px 9px 36px; border-radius: 9px; border: 1px solid var(--borde);
  background: var(--bg-app); font-size: 13.5px; outline:none;
}
.topbar-buscar input:focus{ border-color: var(--color-acento); background:#fff; }
.topbar-buscar .icon{ position:absolute; left: 11px; top: 50%; transform:translateY(-50%); color: var(--texto-suave); }
.resultados-busqueda{ position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--borde); border-radius:10px; box-shadow: var(--sombra-flot); max-height:340px; overflow-y:auto; z-index:30; }
.resultado-busqueda-item{ padding:10px 14px; font-size:13px; border-bottom:1px solid var(--borde); cursor:pointer; }
.resultado-busqueda-item:last-child{ border-bottom:none; }
.resultado-busqueda-item:hover{ background: var(--bg-app); }
.resultado-busqueda-item small{ display:block; color: var(--texto-suave); font-size:11px; margin-top:2px; }
.resultado-busqueda-tipo{ font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color: var(--color-acento); font-weight:700; }
.topbar-migas{ font-size: 12.5px; color: var(--texto-suave); }
.topbar-migas b{ color: var(--texto-oscuro); font-weight:600; }
.topbar-derecha{ margin-left:auto; display:flex; align-items:center; gap: 16px; }
.topbar-icon-btn{ position:relative; background:none; border:none; color: var(--texto-medio); padding:6px; border-radius:8px; }
.topbar-icon-btn:hover{ background: var(--bg-app); }
.topbar-icon-btn .punto{ position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background: var(--color-peligro); border: 1.5px solid #fff; }
.topbar-usuario{ display:flex; align-items:center; gap:9px; position:relative; }
.topbar-usuario > button{ display:flex; align-items:center; gap:9px; background:none; border:none; }
.avatar{ width:34px; height:34px; border-radius:50%; background: var(--color-acento); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12.5px; font-family: var(--fuente-titulos); flex-shrink:0; }
.topbar-usuario .datos{ text-align:left; }
.topbar-usuario .datos strong{ display:block; font-size:12.8px; color: var(--texto-oscuro); }
.topbar-usuario .datos span{ font-size:11px; color: var(--texto-suave); }
.menu-usuario{
  position:absolute; top: 46px; right:0; background:#fff; border:1px solid var(--borde); border-radius: 10px;
  box-shadow: var(--sombra-flot); width: 210px; padding: 8px; display:none; z-index: 40;
}
.menu-usuario.abierto{ display:block; }
.menu-usuario button{ width:100%; display:flex; align-items:center; gap:9px; text-align:left; padding: 9px 10px; border:none; background:none; border-radius:7px; font-size:13px; color: var(--texto-oscuro); }
.menu-usuario button:hover{ background: var(--bg-app); }
.menu-usuario hr{ border:none; border-top:1px solid var(--borde); margin: 6px 0; }

.content{ flex:1; min-width:0; padding: 22px 26px 60px; }
.vista{ animation: aparecer .18s ease; }
@keyframes aparecer{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

.encabezado-vista{ display:flex; align-items: flex-end; justify-content:space-between; gap: 16px; margin-bottom: 18px; flex-wrap:wrap; }
.encabezado-vista h2{ font-size: 21px; }
.encabezado-vista .subt{ color: var(--texto-suave); font-size: 13px; }
.acciones-vista{ display:flex; gap:10px; flex-wrap:wrap; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; gap:7px; padding: 9px 16px; border-radius: 9px; border:1px solid transparent; font-size:13.3px; font-weight:600; transition: filter .12s, background .12s; }
.btn-primario{ background: var(--color-acento); color:#fff; }
.btn-primario:hover{ filter: brightness(1.08); }
.btn-secundario{ background:#fff; color: var(--texto-oscuro); border-color: var(--borde); }
.btn-secundario:hover{ background: var(--bg-app); }
.btn-peligro{ background: var(--color-peligro); color:#fff; }
.btn-fantasma{ background:transparent; color: var(--texto-medio); border-color: transparent; }
.btn-fantasma:hover{ background: var(--bg-app); }
.btn-sm{ padding: 6px 11px; font-size:12.3px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ==========================================================================
   TARJETAS / KPIs / DASHBOARD
   ========================================================================== */
.grid-kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; margin-bottom: 20px; }
.tarjeta-kpi{ background: var(--bg-card); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.tarjeta-kpi .valor{ font-family: var(--fuente-titulos); font-size: 26px; font-weight:600; }
.tarjeta-kpi .etiqueta{ font-size: 12px; color: var(--texto-suave); margin-top:2px; }
.tarjeta-kpi .delta{ font-size:11.5px; margin-top:6px; display:inline-block; padding:2px 8px; border-radius:20px; }
.delta.positivo{ background:#e5f6ee; color: var(--color-exito); }
.delta.negativo{ background:#fbe9e7; color: var(--color-peligro); }

.grid-casos-dashboard{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 14px; margin-bottom: 22px; }
.tarjeta-caso{ border-radius: var(--radio); overflow:hidden; box-shadow: var(--sombra); background:#fff; border:1px solid var(--borde); cursor:pointer; transition: transform .12s, box-shadow .12s; }
.tarjeta-caso:hover{ transform: translateY(-2px); box-shadow: var(--sombra-flot); }
.tarjeta-caso .cabecera{ height:64px; padding: 12px 14px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; }
.tarjeta-caso .cabecera small{ opacity:.85; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; }
.tarjeta-caso .cabecera strong{ font-family: var(--fuente-titulos); font-size:15px; }
.tarjeta-caso .cuerpo{ padding: 12px 14px 14px; }
.tarjeta-caso .cuerpo .tipo{ font-size:12px; color: var(--texto-medio); margin-bottom:8px; min-height:32px; }
.tarjeta-caso .barra-avance{ height:6px; background:#eef1f8; border-radius:6px; overflow:hidden; margin-top:6px; }
.tarjeta-caso .barra-avance > div{ height:100%; background: var(--color-acento); }
.tarjeta-caso .pie-tarjeta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:11px; color: var(--texto-suave); }

.panel-graficos{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 22px; }
.tarjeta{ background: var(--bg-card); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); border:1px solid var(--borde); }
.tarjeta h3{ font-size: 15px; margin-bottom: 4px; }
.tarjeta .subt{ font-size:12px; color: var(--texto-suave); margin-bottom:14px; }
@media (max-width: 980px){ .panel-graficos{ grid-template-columns: 1fr; } }

/* ==========================================================================
   BADGES DE ESTADO / PRIORIDAD
   ========================================================================== */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding: 3px 9px; border-radius: 20px; white-space:nowrap; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-abierto{ background:#e5f6ee; color: var(--color-exito); }
.badge-cerrado{ background:#eceff5; color:#5a6479; }
.badge-suspendido{ background:#fdf1e0; color: var(--color-aviso); }
.badge-alta{ background:#fdece9; color: var(--color-peligro); }
.badge-media{ background:#fdf1e0; color: var(--color-aviso); }
.badge-baja{ background:#eaf1fc; color: var(--color-acento); }
.badge-critica{ background:#2b0f0f; color:#ff8a80; }
.badge-neutro{ background:#eef1f8; color: var(--texto-medio); }

/* ==========================================================================
   TABLAS / LISTADOS
   ========================================================================== */
.barra-filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px; align-items:center; }
.barra-filtros input, .barra-filtros select{ padding: 9px 12px; border-radius: 8px; border: 1px solid var(--borde); font-size: 13px; background:#fff; }
.barra-filtros input[type="search"]{ min-width: 220px; }

.tabla-envoltorio{ background:#fff; border-radius: var(--radio); box-shadow: var(--sombra); border:1px solid var(--borde); overflow-x:auto; }
table.tabla-datos{ width:100%; border-collapse:collapse; font-size:13.3px; min-width: 560px; }
table.tabla-datos th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color: var(--texto-suave); padding: 12px 16px; border-bottom:1px solid var(--borde); white-space:nowrap; }
table.tabla-datos td{ padding: 11px 16px; border-bottom:1px solid var(--borde); color: var(--texto-oscuro); vertical-align:middle; }
table.tabla-datos tbody tr{ transition: background .1s; cursor:pointer; }
table.tabla-datos tbody tr:hover{ background: #f7f9fd; }
table.tabla-datos tbody tr:last-child td{ border-bottom:none; }
.celda-principal{ font-weight:600; }
.celda-muted{ color: var(--texto-suave); }
.fila-vacia{ text-align:center; padding: 40px 20px; color: var(--texto-suave); }
.mini-avatar{ width:26px; height:26px; border-radius:50%; background: var(--color-primario); color:#fff; font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; margin-right:8px; vertical-align:middle; }
.celda-acciones{ width:64px; text-align:right !important; white-space:nowrap; }
.btn-fila-eliminar, .btn-fila-editar{ background:none; border:none; padding:6px; margin:0; cursor:pointer; color: var(--texto-suave); border-radius:7px; display:inline-flex; align-items:center; justify-content:center; }
.btn-fila-eliminar:hover{ background: rgba(192,57,43,0.12); color: var(--color-peligro); }
.btn-fila-editar:hover{ background: rgba(47,123,246,0.12); color: var(--color-acento); }

/* ==========================================================================
   FICHA DE CASO
   ========================================================================== */
.ficha-cabecera{ background: linear-gradient(120deg, var(--color-primario), var(--color-primario-oscuro)); border-radius: var(--radio); padding: 22px 24px; color:#fff; margin-bottom: 18px; }
.ficha-cabecera .volver{ background:rgba(255,255,255,0.12); border:none; color:#dbe3f8; font-size:12px; padding:6px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; margin-bottom:14px; }
.ficha-cabecera .volver:hover{ background:rgba(255,255,255,0.2); }
.ficha-cabecera .fila-top{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.ficha-cabecera h2{ color:#fff; font-size: 23px; margin-bottom:6px; }
.ficha-cabecera .meta{ color:#b9c5ea; font-size:12.8px; }
.ficha-cabecera .desc{ color:#dbe3f8; font-size:13.5px; margin-top:10px; max-width:640px; }
.ficha-cabecera .badges-fila{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ficha-cabecera .avance-caja{ text-align:right; min-width:150px; }
.ficha-cabecera .avance-caja .pct{ font-family: var(--fuente-titulos); font-size:28px; }
.ficha-cabecera .barra-avance{ height:7px; background:rgba(255,255,255,0.18); border-radius:6px; overflow:hidden; margin-top:6px; width:150px; }
.ficha-cabecera .barra-avance>div{ height:100%; background:#fff; }

.tabs{ display:flex; gap:4px; border-bottom: 1px solid var(--borde); margin-bottom:18px; overflow-x:auto; }
.tab-btn{ background:none; border:none; padding: 10px 16px; font-size:13.3px; color: var(--texto-suave); border-bottom: 2.5px solid transparent; white-space:nowrap; font-weight:600; }
.tab-btn:hover{ color: var(--texto-oscuro); }
.tab-btn.activo{ color: var(--color-acento); border-bottom-color: var(--color-acento); }
.tab-panel{ display:none; }
.tab-panel.activo{ display:block; animation: aparecer .15s ease; }

.subseccion-titulo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.subseccion-titulo h4{ font-size:14.5px; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline{ position:relative; padding-left: 26px; }
.timeline::before{ content:""; position:absolute; left: 7px; top:6px; bottom:6px; width:2px; background: var(--borde); }
.timeline-item{ position:relative; padding-bottom: 22px; }
.timeline-item::before{ content:""; position:absolute; left:-26px; top:3px; width:14px; height:14px; border-radius:50%; background: var(--color-acento); border:3px solid #fff; box-shadow: 0 0 0 1px var(--borde); }
.timeline-item.tipo-Detención::before{ background: var(--color-peligro); }
.timeline-item.tipo-Registro::before{ background: var(--color-aviso); }
.timeline-item.tipo-Análisis::before{ background: var(--color-exito); }
.timeline-item .fecha-tl{ font-size:11.5px; color: var(--texto-suave); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.timeline-item .titulo-tl{ font-size:14.3px; font-weight:600; margin: 3px 0 3px; }
.timeline-item .desc-tl{ font-size:13px; color: var(--texto-medio); }
.timeline-item .meta-tl{ font-size:11.5px; color: var(--texto-suave); margin-top:4px; }
.timeline-item .tag-tipo{ display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:20px; background:#eaf1fc; color: var(--color-acento); margin-bottom:5px; font-weight:600; }

/* ==========================================================================
   FORMULARIOS / MODAL
   ========================================================================== */
.campo{ margin-bottom: 14px; }
.campo label{ display:block; font-size: 12.5px; font-weight:600; color: var(--texto-medio); margin-bottom:5px; }
.campo input, .campo select, .campo textarea{
  width:100%; padding: 10px 12px; border-radius:8px; border:1px solid var(--borde); font-size:13.5px; background:#fff; outline:none; color: var(--texto-oscuro);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color: var(--color-acento); }
.campo textarea{ resize:vertical; min-height:70px; }
.fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fila-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:600px){ .fila-2, .fila-3{ grid-template-columns:1fr; } }

.modal-overlay{
  position:fixed; inset:0; background: rgba(8,15,40,0.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; z-index: 100; padding:20px;
}
.modal-caja{ background:#fff; border-radius: 14px; width:100%; max-width: 560px; max-height:88vh; overflow-y:auto; box-shadow: var(--sombra-flot); }
.modal-cabecera{ display:flex; justify-content:space-between; align-items:center; padding: 18px 22px; border-bottom:1px solid var(--borde); position:sticky; top:0; background:#fff; }
.modal-cabecera h3{ font-size:16px; }
.modal-cerrar{ background:none; border:none; color: var(--texto-suave); padding:4px; border-radius:6px; }
.modal-cerrar:hover{ background: var(--bg-app); color: var(--texto-oscuro); }
.modal-cuerpo{ padding: 20px 22px; }
.modal-pie{ padding: 16px 22px; border-top:1px solid var(--borde); display:flex; justify-content:flex-end; gap:10px; }

/* ==========================================================================
   HERRAMIENTAS (investigación) — tarjetas de acceso + paneles
   ========================================================================== */
.grid-herramientas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; }
.tarjeta-herramienta{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); padding: 18px; text-align:left; box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s; }
.tarjeta-herramienta:hover{ transform: translateY(-2px); box-shadow: var(--sombra-flot); }
.tarjeta-herramienta .icono-caja{ width:42px; height:42px; border-radius:10px; background: var(--color-primario); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.tarjeta-herramienta strong{ display:block; font-size:14px; margin-bottom:4px; }
.tarjeta-herramienta span{ font-size:12px; color: var(--texto-suave); }
.tarjeta-herramienta.oculto{ display:none; }

.filtro-herramientas{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.filtro-herramientas button{ display:flex; align-items:center; gap:7px; padding:8px 15px; border-radius:20px; border:1px solid var(--borde); background:#fff; color: var(--texto-medio); font-size:12.8px; font-weight:600; transition: background .12s, color .12s, border-color .12s; }
.filtro-herramientas button:hover{ border-color: var(--color-acento); }
.filtro-herramientas button.activo{ background: var(--color-primario); border-color: var(--color-primario); color:#fff; }
.punto-cat{ width:8px; height:8px; border-radius:50%; display:inline-block; background: var(--texto-suave); }
.punto-cat.cat-investigacion{ background: var(--cat-investigacion); }
.punto-cat.cat-productividad{ background: var(--cat-productividad); }
.punto-cat.cat-formacion{ background: var(--cat-formacion); }
.tarjeta-herramienta .etiqueta-cat{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; margin-top:10px; padding:3px 9px; border-radius:20px; }
.tarjeta-herramienta .etiqueta-cat::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.tarjeta-herramienta .etiqueta-cat.cat-investigacion{ background:#fdf0e2; color: var(--cat-investigacion); }
.tarjeta-herramienta .etiqueta-cat.cat-productividad{ background:#e5f6ec; color: var(--cat-productividad); }
.tarjeta-herramienta .etiqueta-cat.cat-formacion{ background:#f8e9f3; color: var(--cat-formacion); }

.panel-herramienta{ background:#fff; border-radius: var(--radio); border:1px solid var(--borde); box-shadow: var(--sombra); padding: 22px; }
.panel-herramienta .volver-herramientas{ background:none; border:none; color: var(--color-acento); font-size:12.5px; display:flex; align-items:center; gap:5px; margin-bottom:14px; padding:0; }
.aviso-demo{ display:flex; gap:10px; align-items:flex-start; background:#fff7e6; border:1px solid #f4dfa8; color:#8a6416; padding:10px 14px; border-radius:9px; font-size:12.3px; margin-bottom:16px; }
.aviso-demo .icon{ flex-shrink:0; margin-top:1px; color:#c9891a; }
.resultado-caja{ background: var(--bg-app); border:1px solid var(--borde); border-radius:10px; padding:16px; margin-top:16px; }
.resultado-caja .fila-r{ display:flex; justify-content:space-between; padding: 7px 0; border-bottom:1px dashed var(--borde); font-size:13px; }
.resultado-caja .fila-r:last-child{ border-bottom:none; }
.resultado-caja .fila-r span:first-child{ color: var(--texto-suave); }
.resultado-caja .fila-r span:last-child{ font-weight:600; text-align:right; }

.chat-ia{ display:flex; flex-direction:column; height: 420px; border:1px solid var(--borde); border-radius:10px; overflow:hidden; }
.chat-ia .mensajes{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background: var(--bg-app); }
.msj{ max-width:78%; padding:10px 13px; border-radius:12px; font-size:13.3px; line-height:1.5; }
.msj-usuario{ align-self:flex-end; background: var(--color-acento); color:#fff; border-bottom-right-radius:3px; }
.msj-ia{ align-self:flex-start; background:#fff; border:1px solid var(--borde); border-bottom-left-radius:3px; }
.chat-ia .entrada{ display:flex; gap:8px; padding: 10px; border-top:1px solid var(--borde); background:#fff; }
.chat-ia .entrada input{ flex:1; border:1px solid var(--borde); border-radius:20px; padding:9px 15px; font-size:13.3px; outline:none; }
.chat-ia .entrada button{ background: var(--color-acento); color:#fff; border:none; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.comparador-rostros{ display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; margin: 10px 0 20px; }
.marco-rostro{ width:150px; height:150px; border-radius:12px; background: var(--bg-app); border:2px dashed var(--borde); display:flex; align-items:center; justify-content:center; color: var(--texto-suave); text-align:center; font-size:11.5px; padding:10px; }
.medidor-coincidencia{ text-align:center; }
.medidor-coincidencia .pct-grande{ font-family: var(--fuente-titulos); font-size:34px; color: var(--color-exito); }

/* ==========================================================================
   PRODUCTIVIDAD
   ========================================================================== */
.mapa-caja{ height: 460px; border-radius: var(--radio); overflow:hidden; border:1px solid var(--borde); }
.leyenda-mapa{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12px; color: var(--texto-medio); }
.leyenda-mapa span{ display:inline-flex; align-items:center; gap:6px; }
.punto-leyenda{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.lienzo-caja{ position:relative; height: 480px; background: repeating-linear-gradient(0deg, #fbfcfe, #fbfcfe 24px, #f1f4fa 25px), repeating-linear-gradient(90deg, transparent, transparent 24px, #f1f4fa 25px); border:1px solid var(--borde); border-radius: var(--radio); overflow:hidden; }
.nodo-diagrama{ position:absolute; min-width:130px; padding:10px 14px; background:#fff; border:2px solid var(--color-acento); border-radius:9px; box-shadow: var(--sombra); font-size:12.5px; font-weight:600; text-align:center; cursor:grab; user-select:none; }
.nodo-diagrama.nodo-inicio{ border-color: var(--color-exito); }
.nodo-diagrama.nodo-fin{ border-color: var(--color-peligro); }
.nodo-diagrama:active{ cursor:grabbing; }
.barra-herramientas-mini{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }

.dibujo-toolbar{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:12px; background:#fff; border:1px solid var(--borde); border-radius:10px; padding:10px 14px; }
.dibujo-toolbar label{ font-size:12px; color: var(--texto-suave); margin-right:6px; }
.paleta-colores{ display:flex; gap:6px; }
.color-swatch{ width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow: 0 0 0 1px var(--borde); cursor:pointer; }
.color-swatch.activo{ box-shadow: 0 0 0 2px var(--color-acento); }
#canvas-dibujar{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); cursor:crosshair; touch-action:none; width:100%; height:440px; }

.kanban{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width:900px){ .kanban{ grid-template-columns:1fr; } }
.kanban-col{ background:#eef1f8; border-radius: var(--radio); padding: 12px; min-height: 220px; }
.kanban-col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; color: var(--texto-medio); display:flex; justify-content:space-between; padding: 4px 6px 10px; }
.kanban-tarjeta{ background:#fff; border-radius:9px; padding: 12px 13px; margin-bottom:10px; box-shadow: var(--sombra); cursor:grab; border-left: 3px solid var(--color-acento); font-size:13px; }
.kanban-tarjeta.prioridad-Alta{ border-left-color: var(--color-peligro); }
.kanban-tarjeta.prioridad-Media{ border-left-color: var(--color-aviso); }
.kanban-tarjeta.prioridad-Baja{ border-left-color: var(--color-exito); }
.kanban-tarjeta strong{ display:block; font-size:13.2px; margin-bottom:5px; }
.kanban-tarjeta .meta-tarea{ font-size:11px; color: var(--texto-suave); display:flex; justify-content:space-between; margin-top:6px; }
.kanban-col.sobre-arrastre{ background:#dfe8fb; }

.tablero-ideas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.idea-nota{ background:#fff8dc; border:1px solid #f0e3a3; border-radius:8px; padding:14px; font-size:13px; box-shadow: var(--sombra); position:relative; min-height:110px; display:flex; flex-direction:column; justify-content:space-between; }
.idea-nota .caso-tag{ font-size:10.5px; color: var(--texto-suave); margin-top:8px; }
.idea-nota button{ position:absolute; top:8px; right:8px; background:none; border:none; color:#a99a4d; }
.idea-nota button:hover{ color: var(--color-peligro); }
.nueva-idea-caja{ border:2px dashed var(--borde); border-radius:8px; display:flex; align-items:center; justify-content:center; min-height:110px; }

.informe-preview{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); padding: 28px; font-size:13.5px; line-height:1.65; max-width:760px; }
.informe-preview h2{ font-size:19px; border-bottom:2px solid var(--color-primario); padding-bottom:10px; margin-bottom:16px; }
.informe-preview h4{ font-size:13px; margin-top:18px; color: var(--color-primario); text-transform:uppercase; letter-spacing:.4px; }
.informe-preview table{ width:100%; border-collapse:collapse; margin-top:8px; }
.informe-preview table td{ padding:5px 0; font-size:13px; border-bottom:1px dashed var(--borde); }

.plano-toolbar{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.plano-stamp-btn{ padding:8px 14px; border-radius:8px; border:1px solid var(--borde); background:#fff; font-size:12.8px; font-weight:600; color: var(--texto-medio); }
.plano-stamp-btn:hover{ border-color: var(--color-acento); color: var(--color-acento); }
.plano-lienzo{ position:relative; height:480px; background: repeating-linear-gradient(0deg, #fbfcfe, #fbfcfe 24px, #f1f4fa 25px), repeating-linear-gradient(90deg, transparent, transparent 24px, #f1f4fa 25px); border:1px solid var(--borde); border-radius: var(--radio); overflow:hidden; }
.plano-elemento{ position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 10px; border-radius:8px; background:#fff; border:2px solid var(--color-acento); font-size:11px; font-weight:600; text-align:center; cursor:grab; user-select:none; min-width:64px; }
.plano-elemento:active{ cursor:grabbing; }
.plano-elemento.tipo-puerta{ border-color:#8a6416; }
.plano-elemento.tipo-ventana{ border-color: var(--color-acento); }
.plano-elemento.tipo-mesa{ border-color:#5a6479; }
.plano-elemento.tipo-cuerpo{ border-color: var(--color-peligro); }
.plano-elemento.tipo-evidencia{ border-color: var(--color-aviso); }

.archivos-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#fff; border:1px solid var(--borde); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.grid-archivos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.tarjeta-archivo{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); padding:16px; box-shadow: var(--sombra); position:relative; }
.tarjeta-archivo .icono-archivo{ width:38px; height:38px; border-radius:9px; background: var(--bg-app); color: var(--color-acento); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.tarjeta-archivo strong{ display:block; font-size:13px; margin-bottom:4px; word-break:break-word; }
.tarjeta-archivo .meta-archivo{ font-size:11px; color: var(--texto-suave); line-height:1.6; }
.tarjeta-archivo .eliminar-archivo{ position:absolute; top:10px; right:10px; background:none; border:none; color: var(--texto-suave); padding:4px; border-radius:6px; }
.tarjeta-archivo .eliminar-archivo:hover{ background:#fdece9; color: var(--color-peligro); }

.esquema-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#fff; border:1px solid var(--borde); border-radius:10px; padding:14px 16px; margin-bottom:16px; }
.esquema-lista{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding:20px; }
.esquema-item{ margin-bottom:4px; }
.esquema-item .fila-nodo{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; background: var(--bg-app); font-size:13px; }
.esquema-item .fila-nodo strong{ font-size:13px; }
.esquema-item .fila-nodo button{ margin-left:auto; background:none; border:none; color: var(--texto-suave); padding:3px; border-radius:6px; }
.esquema-item .fila-nodo button:hover{ background:#fdece9; color: var(--color-peligro); }
.esquema-hijos{ padding-left:22px; margin-top:6px; border-left:2px dashed var(--borde); margin-left:14px; }

/* ==========================================================================
   FORMACIÓN
   ========================================================================== */
.rueda-ciclo{ display:grid; grid-template-columns: repeat(5,1fr); gap:12px; margin-bottom: 22px; }
@media (max-width:900px){ .rueda-ciclo{ grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); } }
.paso-ciclo{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); padding:16px 14px; text-align:center; cursor:pointer; box-shadow: var(--sombra); transition: transform .12s; }
.paso-ciclo:hover{ transform: translateY(-2px); }
.paso-ciclo.activo{ border-color: var(--color-acento); background: #eaf1fc; }
.paso-ciclo .num{ width:34px; height:34px; border-radius:50%; background: var(--color-primario); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-family: var(--fuente-titulos); font-weight:600; }
.paso-ciclo strong{ font-size:12.8px; display:block; }
.detalle-paso{ background:#fff; border-radius: var(--radio); border:1px solid var(--borde); box-shadow: var(--sombra); padding:22px; }
.detalle-paso .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.detalle-paso .chips span{ background: var(--bg-app); border:1px solid var(--borde); padding:6px 12px; border-radius:20px; font-size:12.3px; }

.acordeon-item{ border:1px solid var(--borde); border-radius:10px; margin-bottom:10px; overflow:hidden; background:#fff; }
.acordeon-cabecera{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; font-weight:600; font-size:13.7px; }
.acordeon-cabecera .icon{ transition: transform .15s; }
.acordeon-cabecera .icon{ transition: transform .15s; }
.acordeon-item.abierto .acordeon-cabecera .icon{ transform: rotate(90deg); }
.acordeon-cuerpo{ display:none; padding: 0 16px 16px; font-size:13.3px; color: var(--texto-medio); }
.acordeon-item.abierto .acordeon-cuerpo{ display:block; }

.quiz-caja{ background:#fff; border-radius: var(--radio); border:1px solid var(--borde); box-shadow: var(--sombra); padding:24px; max-width:640px; }
.quiz-progreso{ height:6px; background:#eef1f8; border-radius:6px; overflow:hidden; margin-bottom:20px; }
.quiz-progreso > div{ height:100%; background: var(--color-acento); transition: width .2s; }
.quiz-opcion{ display:block; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--borde); border-radius:9px; margin-bottom:10px; background:#fff; font-size:13.5px; }
.quiz-opcion:hover{ border-color: var(--color-acento); }
.quiz-opcion.correcta{ border-color: var(--color-exito); background:#e5f6ee; }
.quiz-opcion.incorrecta{ border-color: var(--color-peligro); background:#fdece9; }
.quiz-resultado{ text-align:center; padding: 20px 0; }
.quiz-resultado .puntuacion{ font-family: var(--fuente-titulos); font-size:44px; color: var(--color-acento); }

.paso-practico{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--borde); }
.paso-practico:last-child{ border-bottom:none; }
.paso-practico .num-paso{ width:32px; height:32px; border-radius:50%; background: var(--color-acento); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:13px; }
.paso-practico h4{ font-size:13.8px; margin-bottom:4px; }
.paso-practico p{ font-size:13px; }

/* ==========================================================================
   CONFIGURACIÓN / PERSONALIZACIÓN
   ========================================================================== */
.config-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:start; }
@media (max-width:980px){ .config-grid{ grid-template-columns:1fr; } }
.color-picker-fila{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--borde); }
.color-picker-fila:last-child{ border-bottom:none; }
.color-picker-fila .info strong{ display:block; font-size:13px; }
.color-picker-fila .info span{ font-size:11.5px; color: var(--texto-suave); }
.color-picker-fila input[type="color"]{ width:44px; height:32px; border:1px solid var(--borde); border-radius:7px; padding:2px; background:#fff; }
.logo-uploader{ display:flex; align-items:center; gap:16px; }
.logo-uploader .previsualizacion{ width:64px; height:64px; border-radius:12px; background: var(--color-acento); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--fuente-titulos); font-size:20px; overflow:hidden; flex-shrink:0; }
.logo-uploader .previsualizacion img{ width:100%; height:100%; object-fit:cover; }
.foto-editor{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.foto-preview{ width:78px; height:78px; border-radius: var(--radio-sm); background: var(--bg-app); border:1px solid var(--borde); color: var(--texto-suave); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.foto-preview img{ width:100%; height:100%; object-fit:cover; }
.foto-preview .foto-vacio{ font-size:10.5px; text-align:center; padding:4px; }
.foto-botones{ display:flex; flex-direction:column; gap:7px; }
.foto-boton-subir{ cursor:pointer; text-align:center; }
.foto-boton-subir input[type="file"]{ display:none; }
.foto-mini{ width:26px; height:26px; border-radius:50%; object-fit:cover; margin-right:8px; vertical-align:middle; }
.foto-grande{ width:84px; height:84px; border-radius: var(--radio-sm); object-fit:cover; flex-shrink:0; }
.vista-previa-marca{ border-radius: var(--radio); overflow:hidden; border:1px solid var(--borde); }
.vista-previa-marca .barra-sim{ background: var(--color-primario); padding:14px 16px; display:flex; align-items:center; gap:10px; color:#fff; }
.vista-previa-marca .cuerpo-sim{ padding:18px; background: var(--bg-app); font-size:12.5px; color: var(--texto-medio); }
.vista-previa-marca .btn-sim{ display:inline-block; margin-top:10px; padding:8px 14px; border-radius:8px; background: var(--color-acento); color:#fff; font-size:12px; font-weight:600; }

/* ==========================================================================
   RED DE VÍNCULOS / GRÁFICOS ANALÍTICOS
   ========================================================================== */
.red-vinculos-caja{ background:#fff; border:1px solid var(--borde); border-radius: var(--radio); padding:10px; }
.red-vinculos-caja svg{ width:100%; height:340px; }
.red-nodo-etiqueta{ font-size:10.5px; fill: var(--texto-oscuro); font-family: var(--fuente-texto); }
.grid-analisis{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:980px){ .grid-analisis{ grid-template-columns:1fr; } }

/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-contenedor{ position:fixed; bottom:22px; right:22px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
.toast{ background: var(--texto-oscuro); color:#fff; padding: 12px 18px; border-radius:10px; font-size:13px; box-shadow: var(--sombra-flot); display:flex; align-items:center; gap:10px; animation: entrar-toast .2s ease; }
.toast.exito{ background: var(--color-exito); }
.toast.error{ background: var(--color-peligro); }
@keyframes entrar-toast{ from{ opacity:0; transform: translateX(20px);} to{opacity:1; transform:none;} }

/* ==========================================================================
   VARIOS
   ========================================================================== */
.texto-suave{ color: var(--texto-suave); }
.separador{ height:1px; background: var(--borde); margin: 18px 0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }