/*
 * Ajustes técnicos de PESTIA sobre la maqueta (mismo lenguaje visual, D9).
 * Solo lo que la maqueta no trae: enlaces en los nodos, módulo sin acceso,
 * usuario + salir en la barra superior, pantalla de login y portada provisional.
 */
a.node,a.core{color:inherit;text-decoration:none}
.node:focus-visible,.core:focus-visible,.btn:focus-visible,.campo input:focus-visible,.pill-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.node.bloqueado,.core.bloqueado{opacity:.42;filter:grayscale(.6);cursor:not-allowed}
.node.bloqueado:hover,.core.bloqueado:hover{transform:none;box-shadow:0 10px 26px rgba(0,0,0,.24)}
.core.bloqueado:hover{transform:translate(-50%,-50%)}
.candado{font-size:11px;color:#ffb7ae;font-weight:700;letter-spacing:.02em}
.sin-dato{color:var(--muted);cursor:help}

.topbar-derecha{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.usuario{font-size:13px;color:var(--muted);text-align:right;line-height:1.3}
.usuario strong{display:block;color:var(--text);font-size:14px}
.topbar-derecha form{margin:0}
.pill-btn{cursor:pointer;font-family:inherit;color:#ffd9d4;border-color:rgba(255,101,88,.34);background:rgba(255,101,88,.10)}
.pill-btn:hover{background:rgba(255,101,88,.18)}
a.pill{text-decoration:none}

.acceso{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:22px}
.acceso-caja{width:100%;max-width:420px;border-radius:var(--radius-xl);padding:28px 26px;
  background:linear-gradient(180deg, rgba(10,28,42,.90), rgba(7,20,31,.96));border:1px solid var(--line);box-shadow:var(--shadow)}
.acceso-caja img{width:160px;height:auto;display:block;margin:0 auto 18px;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.24)}
.acceso-caja h1{margin:0 0 6px;font-size:24px;text-align:center}
.acceso-caja p{margin:0 0 20px;color:var(--muted);font-size:14px;text-align:center}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font-size:13px;color:#d8f6ff;font-weight:700}
.campo input{height:44px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(4,18,28,.85);color:var(--text);padding:0 14px;font-size:15px;font-family:inherit}
.campo input[aria-invalid="true"]{border-color:rgba(255,101,88,.6)}
.error{font-size:13px;color:#ffb7ae}
.btn{width:100%;height:46px;border-radius:999px;border:1px solid rgba(98,232,159,.5);cursor:pointer;font-size:15px;font-weight:800;font-family:inherit;
  color:#04121c;background:linear-gradient(90deg,var(--cyan),var(--green))}
.btn:hover{filter:brightness(1.08)}

.provisional{margin-top:18px;padding:28px;border:1px dashed rgba(121,227,255,.18);border-radius:22px;color:var(--muted);line-height:1.6}
.provisional h3{margin:0 0 8px;color:var(--logo-green);font-size:22px}

/* Verificación pública del QR del certificado (verificar/certificado.blade.php) */
.verificar h1{color:var(--yellow)}
.verificar[data-estado="valido"] h1{color:var(--green)}
.verificar[data-estado="cancelado"] h1{color:var(--red)}
.verificar-datos{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 18px;font-size:15px}
.verificar-datos dt{color:var(--muted);font-weight:700}
.verificar-datos dd{margin:0;overflow-wrap:anywhere}
.acceso-caja p.verificar-pie{margin:0;font-size:13px}

/* Hub de la Pantalla General (observación del dueño, 16/10/2026): la maqueta coloca los 7 módulos con posiciones fijas
   pensadas para un lienzo de unos 1000 px; más estrecho se encimaban (Cliente 360 tapaba Almacén y Configuración).
   Con sitio se conserva la maqueta; sin sitio, 3 columnas (3 módulos, Cliente 360 al centro, 3 módulos) y,
   muy estrecho, una sola columna. Las medidas son las del lienzo (consulta de contenedor), no las de la ventana. */
.hub-panel{container:hub / inline-size}
.menu-item.centro{left:50%;top:50%;transform:translate(-50%,-50%)}
.menu-item.centro .core{left:auto;top:auto;transform:none}
.menu-item.centro .core:hover{transform:translateY(-3px)}
.menu-item.centro .core.bloqueado:hover{transform:none}
/* Cliente 360 es el núcleo (observación 9 del dueño): halo de luz alrededor; todo lo demás gira en torno a él. */
.connectors-rejilla{display:none}
.menu-item.centro{z-index:2}
.menu-item.centro::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(closest-side, rgba(103,232,255,.22), rgba(98,232,159,.08) 60%, transparent);pointer-events:none;z-index:-1}
.menu-item.centro .core{border-color:rgba(103,232,255,.55);box-shadow:0 0 0 6px rgba(103,232,255,.07), 0 0 38px rgba(103,232,255,.28), 0 16px 34px rgba(0,0,0,.32)}
@media (prefers-reduced-motion:no-preference){
  .menu-item.centro::before{animation:nucleo-latido 4s ease-in-out infinite}
  @keyframes nucleo-latido{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
}
@container hub (width < 1000px){
  .hub-canvas{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:18px;padding:22px;align-items:center}
  .hub-canvas .connectors{display:none}
  .hub-canvas .connectors-rejilla{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
  .hub-canvas .menu-item{z-index:1}
  .hub-canvas .menu-item.centro{z-index:2}
  /* Anillo (observación 10): Cliente 360 solo en la fila del medio; los dos de arriba y los dos de abajo se acercan entre sí
     por encima y por debajo de él, y los del medio quedan a sus lados. */
  .hub-canvas .menu-item.n1,.hub-canvas .menu-item.n3{transform:translateX(45%)}
  .hub-canvas .menu-item.n6,.hub-canvas .menu-item.n4{transform:translateX(-45%)}
  .hub-canvas .menu-item{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;min-width:0;align-self:stretch}
  .hub-canvas .menu-item .node{width:100%;height:100%;min-height:138px;position:relative}
  .hub-canvas .menu-item .node .title{max-width:100%}
  .hub-canvas .menu-item.centro{grid-column:2;grid-row:2;justify-self:center;align-self:center;width:88%;max-width:260px}
  .hub-canvas .menu-item.n2,.hub-canvas .menu-item.n5{align-self:center}
  .hub-canvas .menu-item.centro .core{position:relative;width:100%;height:auto;aspect-ratio:1}
  .hub-canvas .n1{grid-column:1;grid-row:1}
  .hub-canvas .n2{grid-column:1;grid-row:2}
  .hub-canvas .n3{grid-column:1;grid-row:3}
  .hub-canvas .n6{grid-column:3;grid-row:1}
  .hub-canvas .n5{grid-column:3;grid-row:2}
  .hub-canvas .n4{grid-column:3;grid-row:3}
  /* Las ayudas salen debajo de cada módulo: a los lados no caben. */
  .hub-canvas .menu-item .tooltip,.hub-canvas .menu-item.tooltip-right .tooltip,.hub-canvas .menu-item.tooltip-left .tooltip{left:50%;right:auto;bottom:auto;top:calc(100% + 10px);width:min(240px,100%);transform:translateX(-50%) translateY(-4px)}
  .hub-canvas .menu-item:hover .tooltip,.hub-canvas .menu-item.tooltip-right:hover .tooltip,.hub-canvas .menu-item.tooltip-left:hover .tooltip{transform:translateX(-50%) translateY(0)}
}
@container hub (width < 620px){
  .hub-canvas{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hub-canvas .menu-item,.hub-canvas .menu-item.centro,.hub-canvas .n1,.hub-canvas .n2,.hub-canvas .n3,.hub-canvas .n4,.hub-canvas .n5,.hub-canvas .n6{grid-column:1;grid-row:auto}
  .hub-canvas .menu-item.centro{order:-1;max-width:none}
  .hub-canvas .menu-item.n2,.hub-canvas .menu-item.n5{align-self:stretch}
  .hub-canvas .connectors-rejilla{display:none}
  .hub-canvas .menu-item.n1,.hub-canvas .menu-item.n3,.hub-canvas .menu-item.n4,.hub-canvas .menu-item.n6{transform:none}
  .hub-canvas .menu-item.centro .core{aspect-ratio:auto;min-height:200px}
}
/* Ayudas de los módulos (aviso del dueño, 16/10/2026: salían incompletas menos en Tickets y Cliente 360).
   Cada módulo tiene su propia capa, así que su ayuda quedaba debajo de los módulos vecinos: el señalado sube encima.
   En columnas el lienzo ya no recorta lo que se sale, y la fila de abajo abre la ayuda hacia arriba. */
.hub-canvas .menu-item:hover,.hub-canvas .menu-item:focus-within{z-index:30}
@container hub (width < 1000px){
  .hub-canvas{overflow:visible}
}
@container hub (width < 1000px) and (width >= 620px){
  .hub-canvas .menu-item.n3 .tooltip,.hub-canvas .menu-item.n4 .tooltip{top:auto;bottom:calc(100% + 10px)}
}

/* Pantalla General · Acciones por módulo: cada línea es un enlace con su cifra a la derecha (16/10/2026). */
.list.acciones a.accion{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.list.acciones a.accion:hover span,.list.acciones a.accion:focus-visible span{text-decoration:underline}
.list.acciones .cuenta{flex:none;min-width:34px;padding:1px 8px;border-radius:999px;text-align:center;font-size:13px;background:rgba(255,156,55,.16);color:#ffd2a1;border:1px solid rgba(255,156,55,.30)}
.list.acciones .cuenta.cero{background:rgba(98,232,159,.10);color:#a8f0c8;border-color:rgba(98,232,159,.24)}
/* Pantalla General · Panel de Cumplimiento: «N de M» bajo cada círculo (plagados-50, 16/10/2026). */
.cumplimiento-detalle{margin-top:8px;font-size:11px;line-height:1.3;color:var(--muted,#97b8c8)}
/* Pantalla General · Estado General: qué cuenta cada cifra (observación del dueño, 16/10/2026). */
.metrics .metrica-detalle{display:block;margin-top:3px;font-size:11px;line-height:1.3;color:var(--muted,#97b8c8);font-weight:400}

/* Pantalla General · Monitor por módulo: cada cifra es un enlace a su pantalla (16/10/2026). */
.module-kpi.monitor a.monitor-linea{color:inherit;text-decoration:none}
.module-kpi.monitor a.monitor-linea:hover,.module-kpi.monitor a.monitor-linea:focus-visible{text-decoration:underline}
.module-kpi.monitor a.monitor-linea strong{color:var(--text)}