/* ============================================================================
   PCN Carvajal Espacios — Hoja de estilos
   Paleta: violeta corporativo + slate neutro + semáforo semántico de criticidad
   ==========================================================================*/
:root{
  --violeta:#1b3a5c;      /* primario (Carvajal — azul marino de marca) */
  --violeta-osc:#0f273f;
  --violeta-cl:#e4ecf2;
  --teal:#0f8a8a;         /* acento secundario (soporte) */
  --tinta:#1a1d29;        /* casi negro */
  --gris:#5b6172;
  --gris-cl:#8a91a3;
  --linea:#e6e8ee;
  --fondo:#f4f5f8;
  --panel:#ffffff;
  /* semáforo de criticidad (funcional, no decorativo) */
  --verde:#1e9e5a;  --verde-cl:#dcf3e6;
  --ambar:#e8a400;  --ambar-cl:#fdf3d6;
  --rojo:#d14343;   --rojo-cl:#fde2e2;
  --azul:#3b6fd4;   --azul-cl:#dde8fb;
  --radio:14px;
  --sombra:0 1px 2px rgba(20,25,45,.04), 0 8px 24px rgba(20,25,45,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--tinta); background:var(--fondo); line-height:1.5; font-size:15px;
}
/* Escala tipográfica única para todo el sistema: cualquier h1-h4 sin clase
   propia hereda estos tamaños, así todos los módulos se ven iguales. */
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif; margin:0 0 .4em; line-height:1.2; font-weight:600}
h1{font-size:22px}
h2{font-size:20px}
h3{font-size:17px}
h4{font-size:15px}
a{color:var(--violeta); text-decoration:none}
a:hover{text-decoration:underline}

/* Utilidades tipográficas reusables (evitan font-size en línea por módulo) */
.titulo-seccion{font-size:20px; margin-bottom:14px}
.metrica-numero{font-size:30px; font-family:'Space Grotesk'; font-weight:700}

/* ---------- LOGIN ---------- */
.pantalla-login{
  min-height:100vh; display:grid; place-items:center;
  background:linear-gradient(135deg,#0f273f 0%,#1b3a5c 45%,#0f8a8a 130%);
  padding:24px;
}
.login-caja{
  width:100%; max-width:400px; background:var(--panel);
  border-radius:20px; padding:36px 32px; box-shadow:0 24px 60px rgba(10,20,35,.35);
}
.login-marca{display:flex; align-items:center; gap:12px; margin-bottom:26px}
.login-logo,.marca-logo{
  width:44px; height:44px; min-width:44px; min-height:44px; max-width:44px; max-height:44px;
  border-radius:12px; display:grid; place-items:center; overflow:hidden; position:relative;
  background:#fff; color:var(--violeta); font-family:'Space Grotesk'; font-weight:700; letter-spacing:.5px; flex-shrink:0;
}
.login-logo img,.marca-logo img{
  display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; padding:4px;
  box-sizing:border-box; pointer-events:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.login-titulo{font-family:'Space Grotesk'; font-weight:700; font-size:15px}
.login-sub{font-size:12px; color:var(--gris-cl)}
.login-h1{font-size:26px; margin-bottom:2px}
.login-ayuda{color:var(--gris); margin:0 0 20px; font-size:14px}
.login-pie{margin-top:22px; text-align:center; font-size:12px; color:var(--gris-cl)}

.campo{display:block; margin-bottom:16px}
.campo>span{display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--gris)}
.campo input,.campo select,.campo textarea,input[type=text],input[type=password],
input[type=email],input[type=number],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--linea); border-radius:10px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--tinta); transition:border .15s,box-shadow .15s;
}
.campo input:focus,input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--violeta); box-shadow:0 0 0 3px var(--violeta-cl);
}
textarea{resize:vertical; min-height:90px}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent;
  padding:9px 15px; border-radius:10px; font-size:14px; font-weight:500; font-family:inherit;
  background:#fff; color:var(--tinta); transition:.15s; text-decoration:none;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primario{background:var(--violeta); color:#fff}
.btn-primario:hover{background:var(--violeta-osc)}
.btn-teal{background:var(--teal); color:#fff}
.btn-linea{background:#fff; border-color:var(--linea); color:var(--gris)}
.btn-linea:hover{border-color:var(--violeta); color:var(--violeta)}
.btn-peligro{background:#fff; border-color:var(--rojo); color:var(--rojo)}
.btn-peligro:hover{background:var(--rojo); color:#fff}
.btn-bloque{width:100%; justify-content:center; padding:12px}
.btn-mini{padding:6px 10px; font-size:13px; border-radius:8px}

/* ---------- LAYOUT APP ---------- */
.app{display:flex; min-height:100vh}
.lateral{
  width:250px; background:var(--violeta-osc); color:#e6edf3; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.lateral-marca{display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.09)}
.marca-texto{display:flex; flex-direction:column; line-height:1.15}
.marca-texto strong{font-family:'Space Grotesk'; font-size:17px; color:#fff}
.marca-texto span{font-size:11.5px; color:#9fb4c9}
.lateral-menu{
  flex:1; overflow-y:auto; padding:10px 10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;
}
.lateral-menu::-webkit-scrollbar{width:6px}
.lateral-menu::-webkit-scrollbar-track{background:transparent}
.lateral-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:6px}
.lateral-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
.lateral-menu::-webkit-scrollbar-button{display:none; width:0; height:0}
.menu-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  color:#b6c8d9; font-size:14px; margin-bottom:2px; transition:.12s;
}
.menu-item:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.menu-item.activo{background:var(--teal); color:#fff; font-weight:500}
.menu-icono{width:20px; text-align:center; font-size:15px; opacity:.95}
.lateral-pie{padding:10px; border-top:1px solid rgba(255,255,255,.09)}
.menu-item.salir:hover{background:rgba(209,67,67,.25); color:#fff}

.contenido{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  display:flex; align-items:center; gap:16px; padding:14px 26px; background:var(--panel);
  border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:20;
}
.topbar-titulo{font-family:'Space Grotesk'; font-weight:600; font-size:18px; flex:1}
.btn-menu{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--violeta)}
.btn-colapsar{
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:none;
  border:none; color:var(--gris-cl); font-size:13px; cursor:pointer; transition:.15s; flex-shrink:0;
}
.btn-colapsar:hover{background:var(--violeta-cl); color:var(--violeta)}

/* Barra lateral colapsada (solo iconos) */
.lateral.colapsada{width:72px}
.lateral.colapsada .marca-texto,
.lateral.colapsada .menu-item span:not(.menu-icono){display:none}
.lateral.colapsada .lateral-marca{justify-content:center; padding:20px 0}
.lateral.colapsada .menu-item{justify-content:center; padding:11px 0}
.lateral.colapsada .menu-icono{width:auto; font-size:18px}
.lateral.colapsada .lateral-pie .menu-item span:not(.menu-icono){display:none}
@media(max-width:760px){
  .lateral.colapsada{width:250px}
  .lateral.colapsada .marca-texto,
  .lateral.colapsada .menu-item span:not(.menu-icono){display:flex}
  .lateral.colapsada .menu-item span:not(.menu-icono){display:inline}
  .btn-colapsar{display:none}
}
.topbar-usuario{text-align:right}
.usuario-nombre{font-size:13.5px; font-weight:500}
.usuario-rol{font-size:11px; padding:1px 8px; border-radius:20px; display:inline-block; margin-top:2px}
.rol-admin{background:var(--rojo-cl); color:#8a2a2a}
.rol-editor{background:var(--ambar-cl); color:#7a5a00}
.rol-consulta{background:var(--verde-cl); color:#0f5132}

.principal{padding:26px; max-width:1180px; width:100%}
.pie{padding:16px 26px; color:var(--gris-cl); font-size:12.5px; border-top:1px solid var(--linea)}

/* ---------- ELEMENTOS COMUNES ---------- */
.pagina-intro{
  background:linear-gradient(120deg,var(--violeta-cl),#fff); border:1px solid var(--linea);
  border-left:4px solid var(--violeta); border-radius:var(--radio); padding:16px 20px; margin-bottom:22px;
}
.pagina-intro h2{font-size:20px; margin-bottom:4px}
.pagina-intro p{margin:0; color:var(--gris)}
.pista{
  display:flex; gap:10px; align-items:flex-start; background:var(--ambar-cl);
  border:1px solid #f0dda0; border-radius:10px; padding:11px 14px; margin-bottom:18px; font-size:13.5px; color:#6b5200;
}
.pista::before{content:'💡'; font-size:15px}

.encabezado-seccion{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.encabezado-seccion h1{font-size:22px; margin:0}

.panel{background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra)}
.panel-cuerpo{padding:20px}
.rejilla{display:grid; gap:16px}
.rejilla-2{grid-template-columns:repeat(2,1fr)}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
.rejilla-4{grid-template-columns:repeat(4,1fr)}

/* Tarjetas del dashboard */
.tarjeta-modulo{
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:18px; box-shadow:var(--sombra); transition:.15s; display:block; color:inherit;
}
.tarjeta-modulo:hover{transform:translateY(-3px); border-color:var(--violeta); text-decoration:none; box-shadow:0 10px 30px rgba(27,58,92,.15)}
.tarjeta-icono{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--violeta-cl);color:var(--violeta);font-size:19px;margin-bottom:11px}
.tarjeta-modulo h3{font-size:16px; margin-bottom:3px}
.tarjeta-modulo p{margin:0; color:var(--gris); font-size:13.5px}

/* Tablas */
.tabla-envoltura{overflow-x:auto; background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra)}
table.tabla{width:100%; border-collapse:collapse; font-size:14px}
table.tabla th{
  text-align:left; padding:13px 18px; background:#faf9fc; color:var(--gris); white-space:nowrap;
  font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--linea);
}
table.tabla td{padding:14px 18px; border-bottom:1px solid var(--linea); vertical-align:top}
table.tabla tr:last-child td{border-bottom:none}
table.tabla tbody tr:hover{background:#faf9fc}
table.tabla th.col-estado,table.tabla td.col-estado{width:1%; white-space:nowrap}
table.tabla th.col-acciones,table.tabla td.col-acciones{width:1%; white-space:nowrap}

/* Insignias / etiquetas */
.insignia{display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap}
.b-verde{background:var(--verde-cl); color:#0f5132}
.b-ambar{background:var(--ambar-cl); color:#7a5a00}
.b-rojo{background:var(--rojo-cl); color:#8a2a2a}
.b-azul{background:var(--azul-cl); color:#1e3a8a}
.b-gris{background:#eef0f4; color:var(--gris)}
.b-teal{background:#d6f0f0; color:#0a5b5b}
.b-violeta{background:var(--violeta-cl); color:var(--violeta)}
.estado-activo{color:var(--verde); font-weight:600; white-space:nowrap; display:inline-block}
.estado-inactivo{color:var(--gris-cl); font-weight:600; white-space:nowrap; display:inline-block}

/* Alertas */
.alerta{padding:11px 15px; border-radius:10px; margin-bottom:16px; font-size:14px; border:1px solid}
.alerta-error,.alerta-danger{background:var(--rojo-cl); border-color:#f2c1c1; color:#8a2a2a}
.alerta-ok,.alerta-exito{background:var(--verde-cl); border-color:#b6e2c8; color:#0f5132}
.alerta-info{background:var(--azul-cl); border-color:#c1d4f2; color:#1e3a8a}

/* Chips de acciones */
.acciones{display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end}

/* Botones de ícono compactos para filas de tabla (editar/activar/eliminar) */
.btn-icono,.pg-btn{
  width:30px; height:30px; border-radius:8px; display:inline-grid; place-items:center; flex-shrink:0;
  background:var(--violeta-cl); color:var(--violeta); border:none; font-size:14px; cursor:pointer; text-decoration:none;
}
.btn-icono:hover,.pg-btn:hover{background:var(--violeta); color:#fff; text-decoration:none}
.btn-icono-peligro:hover,.pg-btn-del:hover{background:var(--rojo)}

/* Formularios en rejilla */
.form-rejilla{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-rejilla .full{grid-column:1/-1}

/* Barra RTO */
.rto-barra{height:8px; border-radius:6px; background:#eef0f4; overflow:hidden; min-width:120px}
.rto-relleno{height:100%; border-radius:6px}

/* Nivel de emergencia */
.nivel-cinta{
  position:relative; border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea);
  margin-bottom:22px; box-shadow:var(--sombra); transition:transform .15s;
}
.nivel-cinta:hover{transform:translateY(-2px)}
.nivel-cabeza{padding:22px 22px; color:#fff; display:flex; align-items:center; gap:16px; position:relative; overflow:hidden}
.nivel-cabeza.verde{background:linear-gradient(120deg,#0f5132,var(--verde) 75%)}
.nivel-cabeza.amarillo{background:linear-gradient(120deg,#8a6400,var(--ambar) 75%)}
.nivel-cabeza.rojo{background:linear-gradient(120deg,#7f1d1d,var(--rojo) 75%)}
.nivel-cabeza::after{
  content:''; position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.nivel-ico{
  width:56px; height:56px; min-width:56px; border-radius:16px; background:rgba(255,255,255,.18);
  display:grid; place-items:center; font-size:28px; font-family:'Space Grotesk'; font-weight:700; z-index:1;
}
.nivel-cabeza h3{margin:0; color:#fff; z-index:1}
.nivel-cabeza .peque{color:rgba(255,255,255,.85); z-index:1}
.nivel-cuerpo{padding:20px 22px; background:#fff}
.nivel-amenazas{
  display:flex; gap:10px; align-items:flex-start; background:#faf9fc; border:1px solid var(--linea);
  border-radius:10px; padding:12px 14px; margin:12px 0 16px;
}
.nivel-amenazas .ico{font-size:17px; flex-shrink:0; line-height:1.3}
.nivel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.nivel-item{background:#faf9fc; border:1px solid var(--linea); border-radius:10px; padding:12px 13px; font-size:13px; transition:.15s}
.nivel-item:hover{border-color:var(--violeta); background:var(--violeta-cl)}
.nivel-item .ico{font-size:16px; margin-bottom:4px; display:block}
.nivel-item b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--gris-cl); margin-bottom:3px}
.nivel-activacion{
  margin-top:14px; display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:13px 15px;
  background:var(--violeta-cl); border:1px solid #ddd0ef;
}
.nivel-activacion .ico{font-size:17px; flex-shrink:0}
.nivel-activacion b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--violeta); margin-bottom:3px}

/* Estructura de Respuesta Operativa (colapsable por nivel) */
.nivel-estructura{margin-top:18px; border:1px solid var(--linea); border-radius:12px; background:#faf9fc; overflow:hidden}
.nivel-estructura summary{
  list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:14px; color:var(--violeta); user-select:none;
}
.nivel-estructura summary::-webkit-details-marker{display:none}
.nivel-estructura summary::marker{content:''}
.nivel-estructura-flecha{display:inline-block; transition:transform .15s; font-size:11px; color:var(--gris-cl)}
.nivel-estructura[open] .nivel-estructura-flecha{transform:rotate(90deg)}
.nivel-estructura summary:hover{background:var(--violeta-cl)}
.nivel-estructura-cuerpo{padding:6px 16px 18px; border-top:1px solid var(--linea); background:#fff}
.nivel-estructura-cuerpo img{max-width:100%; border-radius:10px; border:1px solid var(--linea); display:block; margin:14px auto 0}

/* Escenario + estrategias */
.escenario-bloque{margin-bottom:18px}
.escenario-cabeza{display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--violeta); color:#fff; border-radius:var(--radio) var(--radio) 0 0}
.escenario-cabeza .ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:16px}
.escenario-cabeza h3{margin:0; color:#fff; font-size:16px}
.escenario-cabeza p{margin:0; font-size:12.5px; color:#cddce8}

/* Cabecera de panel con acento de marca (procedimientos y similares) */
.panel-cabecera-pro{display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--violeta); border-radius:var(--radio) var(--radio) 0 0; flex-wrap:wrap}
.acciones-invertidas .btn{background:rgba(255,255,255,.15); border-color:transparent; color:#fff}
.acciones-invertidas .btn:hover{background:rgba(255,255,255,.28); color:#fff}
.estrategia-lista{background:#fff; border:1px solid var(--linea); border-top:none; border-radius:0 0 var(--radio) var(--radio); padding:6px 0}
.estrategia-fila{display:flex; align-items:flex-start; gap:10px; padding:9px 18px; border-bottom:1px solid var(--linea)}
.estrategia-fila:last-child{border-bottom:none}
.estrategia-fila .chk{color:var(--teal); font-weight:700}

/* Matriz de riesgo */
.matriz{border-collapse:collapse; width:100%; max-width:560px}
.matriz td,.matriz th{border:1px solid #fff; text-align:center; padding:0; height:52px; font-weight:600; font-size:13px; color:#333}
.matriz th{background:#faf9fc; color:var(--gris); font-size:11px; height:auto; padding:6px}
.m-verde{background:#bfe6cf} .m-ambar{background:#f7e2a0} .m-rojo{background:#f2b6b6}
.matriz .punto{background:var(--tinta); color:#fff; border-radius:50%; width:26px;height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin:2px}

/* Diagrama mermaid */
.mermaid-caja{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px; overflow-x:auto; box-shadow:var(--sombra)}
.mermaid{display:flex; justify-content:center}

/* Flujo tarjeta */
.flujo-tarjeta{margin-bottom:22px}
.flujo-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap}
.flujo-ref{font-size:12.5px; color:var(--gris-cl)}

/* Ventana modal simple */
.modal-fondo{position:fixed; inset:0; background:rgba(10,20,35,.55); display:none; place-items:center; z-index:100; padding:20px}
.modal-fondo.abierto{display:grid}
.modal{background:#fff; border-radius:16px; width:100%; max-width:640px; max-height:90vh; overflow:auto; box-shadow:0 30px 70px rgba(0,0,0,.3)}
.modal-cabeza{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--linea)}
.modal-cabeza h3{margin:0}
.modal-cuerpo{padding:22px}
.modal-pie{padding:16px 22px; border-top:1px solid var(--linea); display:flex; justify-content:flex-end; gap:10px}
.cerrar-x{background:none;border:none;font-size:24px;cursor:pointer;color:var(--gris-cl);line-height:1}

/* ---------- PLAN GLOBAL (galería vertical, imagen completa) ---------- */
.pg-intro{background:linear-gradient(120deg,var(--violeta) 0%,#0f273f 55%,var(--teal) 145%); border:none; border-left:none}
.pg-intro h2,.pg-intro p{color:#fff}
.pg-intro p{color:#d3e0ea}

.pg-galeria{display:flex; flex-direction:column; gap:22px}
.pg-tarjeta{
  margin:0; background:#fff; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
}
.pg-tarjeta-cabeza{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--linea)}
.pg-tarjeta-cabeza h3{margin:0}

.pg-img-envoltura{position:relative; background:#f4f5f8; text-align:center; cursor:pointer}
.pg-img-envoltura img{width:100%; height:auto; max-height:78vh; object-fit:contain; display:block; margin:0 auto}
.pg-zoom-ico{
  position:absolute; right:14px; bottom:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(10,20,35,.6); color:#fff; display:grid; place-items:center; font-size:15px;
  opacity:0; transition:opacity .15s; pointer-events:none;
}
.pg-img-envoltura:hover .pg-zoom-ico,.pg-img-envoltura:focus-visible .pg-zoom-ico{opacity:1}
.pg-img-envoltura:focus-visible{outline:3px solid var(--teal); outline-offset:-3px}

.pg-tarjeta-desc{margin:0; padding:12px 18px; font-size:13.5px; color:var(--gris); border-top:1px solid var(--linea); background:#faf9fc}

.pg-acciones{display:flex; gap:6px; flex-shrink:0}

.pg-lightbox{
  position:relative; max-width:min(92vw,1100px); max-height:92vh; overflow-y:auto;
  background:#0f273f; border-radius:16px; padding:20px 20px 22px; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.pg-lightbox img{max-width:100%; max-height:74vh; border-radius:10px; display:block; margin:0 auto}
.pg-lightbox-info{text-align:center; padding-top:16px}
.pg-lightbox-info h3{color:#fff; font-size:17px; margin-bottom:6px}
.pg-lightbox-info p{color:#cddce8; font-size:13.5px; margin:0; line-height:1.5}

/* ---------- DESPLIEGUE DE LA COMUNICACIÓN ---------- */
.cmu-nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:14px 16px; margin-bottom:22px; position:sticky; top:70px; z-index:10; box-shadow:var(--sombra);
}
.cmu-nav-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gris-cl); margin-right:2px; white-space:nowrap}
.cmu-nav a{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--violeta);
  background:var(--violeta-cl); border:1px solid transparent; border-radius:20px; padding:6px 14px 6px 7px;
  text-decoration:none; transition:.15s; box-shadow:0 1px 2px rgba(20,25,45,.05);
}
.cmu-nav a b{
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:var(--violeta); color:#fff; font-size:11px; font-weight:700;
}
.cmu-nav a:hover{background:var(--violeta); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 10px rgba(27,58,92,.3)}
.cmu-nav a:hover b{background:#fff; color:var(--violeta)}

.cmu-seccion{margin-bottom:18px; scroll-margin-top:130px}
.cmu-seccion h3{font-size:17px; color:var(--violeta); margin-bottom:12px}
.cmu-chips{display:flex; flex-wrap:wrap; gap:8px}
.cmu-lista{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; font-size:14px}
.cmu-lista li{padding-left:2px}
.cmu-lista-check{list-style:none; padding-left:0}
.cmu-lista-check li{display:flex; align-items:flex-start; gap:9px}
.cmu-lista-check .chk{color:var(--teal); font-weight:700; flex-shrink:0}
.cmu-subtitulo{font-family:'Space Grotesk'; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--teal); margin-bottom:10px}
.cmu-fuente-grupo{margin-bottom:14px}
.cmu-fuente-grupo b{display:block; font-size:14px; margin-bottom:5px}
.cmu-checklist{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.cmu-check-item{display:flex; align-items:center; gap:10px; background:#faf9fc; border:1px solid var(--linea); border-radius:10px; padding:10px 12px; font-size:13.5px}
.cmu-check-num{
  width:22px; height:22px; border-radius:50%; background:var(--violeta); color:#fff; font-size:11px; font-weight:700;
  display:grid; place-items:center; flex-shrink:0;
}
/* ---------- SIMULACRO GUIADO ---------- */
.modulo-bloque{margin-bottom:24px}
.modulo-titulo{margin-bottom:16px}
.modulo-titulo h2{font-size:20px; margin-bottom:4px}
.modulo-titulo p{margin:0; color:var(--gris)}

.sim-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.sim-card{border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea); box-shadow:var(--sombra)}
.sim-card .sim-head{padding:16px 18px; color:#fff}
.sim-card.verde .sim-head{background:var(--verde)}
.sim-card.amarillo .sim-head{background:var(--ambar)}
.sim-card.rojo .sim-head{background:var(--rojo)}
.sim-card .sim-head span{font-size:12px; text-transform:uppercase; letter-spacing:.05em; opacity:.85; display:block; margin-bottom:2px}
.sim-card .sim-head h3{margin:0 0 4px; color:#fff; font-size:16px}
.sim-card .sim-head p{margin:0; font-size:12.5px; color:rgba(255,255,255,.9)}
.sim-card .sim-body{padding:16px 18px; background:#fff}
.sim-card .sim-meta{font-size:13px; margin-bottom:10px; color:var(--gris)}
.sim-card h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--gris-cl); margin:14px 0 8px}
.sim-card h4:first-of-type{margin-top:0}
.sim-chips{display:flex; flex-wrap:wrap; gap:6px}
.sim-chips span{background:#faf9fc; border:1px solid var(--linea); border-radius:20px; padding:3px 10px; font-size:12px; color:var(--gris)}
.sim-salida{margin-top:14px; padding:10px 12px; background:var(--violeta-cl); border-radius:8px; font-size:12.5px; color:var(--violeta)}

.checklist-sgcn{display:flex; flex-direction:column; gap:8px}
.check-item{background:#faf9fc; border:1px solid var(--linea); border-radius:8px; padding:9px 12px; font-size:13px; color:var(--tinta)}

.flujo-lista{display:flex; flex-direction:column; gap:6px}
.flujo-paso{background:#faf9fc; border-left:3px solid var(--violeta); border-radius:0 8px 8px 0; padding:8px 12px; font-size:13px}

/* Diagrama "Despliegue de la Comunicación" — paleta e iconografía fiel al documento fuente */
.despliegue-comunicacion{
  --dc-naranja:#ED6F03; --dc-azul:#00395D;
  background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); border:1px solid var(--linea);
}
.dc-header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 26px 0}
.dc-header-titulo{color:var(--dc-naranja); font-size:20px; font-weight:700; margin:0}
.dc-alerta-ico{
  width:44px; height:44px; min-width:44px; border-radius:50%; background:var(--dc-naranja); color:#fff;
  display:grid; place-items:center; font-size:20px; flex-shrink:0;
}
.dc-header-barra{height:4px; width:180px; margin:10px 26px 0; border-radius:4px; background:linear-gradient(90deg,#3a1f68,#3b82c4,#1e9e5a,var(--dc-naranja))}

.dc-lienzo{
  position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px;
  padding:38px 26px; margin-top:18px;
  background:linear-gradient(180deg,#eef1f4 0%,#eef1f4 42%,#d8e8ec 42%,#d8e8ec 100%);
}
.dc-decor{position:absolute; right:20px; top:18px; width:100px; color:#9db3c2; opacity:.55}
.dc-decor svg{width:100%; height:auto; display:block}

.dc-paso{display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; min-width:150px; z-index:1}
.dc-icono{width:60px; height:60px; color:var(--dc-naranja)}
.dc-icono svg{width:100%; height:100%; display:block}
.dc-icono-final{color:var(--dc-naranja)}
.dc-paso-caption{color:var(--dc-azul); font-weight:700; font-size:13px; line-height:1.3; margin-bottom:2px}
.dc-paso-label{color:var(--dc-azul); font-weight:700; font-size:13px; line-height:1.35}
.dc-paso-label-lider{text-decoration:underline; text-decoration-color:var(--dc-naranja); text-underline-offset:3px}
.dc-paso-label-final{color:var(--dc-naranja); font-size:15px; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}

.dc-conector{display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--dc-azul); font-weight:600; font-size:12px; min-width:90px; z-index:1}
.dc-conector-texto{text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
.dc-conector-flecha{font-size:22px; color:var(--dc-azul); line-height:1}

@media(max-width:760px){
  .dc-lienzo{flex-direction:column}
  .dc-conector-flecha{transform:rotate(90deg)}
  .dc-decor{display:none}
}

/* Simulador de mensajes de crisis */
.cmu-sim-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px}
.cmu-sim-grid .full{grid-column:1/-1}
.cmu-sim-resultado{
  margin-top:18px; background:#faf9fc; border:1px solid var(--linea); border-radius:12px; padding:18px 20px;
}
.cmu-sim-resultado h4{margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--gris-cl)}
.cmu-sim-texto{
  white-space:pre-wrap; font-family:'Inter',sans-serif; font-size:14px; line-height:1.6; color:var(--tinta);
  background:#fff; border:1px solid var(--linea); border-radius:10px; padding:16px 18px; margin:0 0 12px;
}
.cmu-sim-copiado{color:var(--verde); font-weight:600; font-size:13px; margin-left:10px; opacity:0; transition:opacity .2s}
.cmu-sim-copiado.mostrar{opacity:1}

/* Utilidades */
.muted{color:var(--gris-cl)} .peque{font-size:12.5px} .mt{margin-top:16px} .mb0{margin-bottom:0}
.centro{text-align:center} .der{text-align:right} .nowrap{white-space:nowrap}
.vacio{text-align:center; padding:44px 20px; color:var(--gris-cl)}
.vacio .ico{font-size:40px; display:block; margin-bottom:10px; opacity:.4}
.busca{max-width:320px}
.contador{background:var(--violeta-cl); color:var(--violeta); font-weight:600; border-radius:20px; padding:2px 10px; font-size:13px}

/* Responsive */
@media(max-width:900px){
  .rejilla-4{grid-template-columns:repeat(2,1fr)}
  .rejilla-3{grid-template-columns:repeat(2,1fr)}
  .nivel-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .lateral{position:fixed; left:-260px; z-index:60; transition:left .2s; box-shadow:0 0 40px rgba(0,0,0,.3)}
  .lateral.abierta{left:0}
  .btn-menu{display:block}
  .rejilla-2,.rejilla-3,.rejilla-4,.form-rejilla,.nivel-grid,.cmu-checklist{grid-template-columns:1fr}
  .principal{padding:18px}
  .cmu-nav{position:static}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}