/* ════════════════════════════════════════════════════════════════════════════
   Estilos de la PORTADA (Main.html, el directorio de entidades del dominio raíz).

   Estaban embebidos dentro del HTML porque Cloudflare cachea styles.css de forma
   agresiva y un cambio no llegaba. Ahora el hub versiona sus archivos por fecha de
   modificación (?v=…), que resuelve lo mismo sin depender de estilos en línea —
   necesario desde que el hub aplica `style-src 'self'`.
   ════════════════════════════════════════════════════════════════════════════ */

/* El puntero: el del TEMA (--cursor-default, styles.css ya cargó). Antes iba acá el SVG
   con el borde celeste fijo y, como esta hoja va después, pisaba el rosa y el azul. */
    html, body { cursor: var(--cursor-default), default; }

/* 3 columnas a ancho completo: el contenido institucional se pega al
       borde izquierdo, las entidades quedan centradas (la lista crece al
       sumar municipalidades) y los bloques de la derecha se pegan al borde
       derecho. Todo plano, sin recuadros de fondo. */
    /* Menos padding vertical para que el pie de página entre sin scroll. */
    .hub-shell { padding-top: 16px; padding-bottom: 20px; justify-content: flex-start; }
    /* Emblema completo en la portada (antes de elegir entidad) */
    .hub-hero-logo {
      display: block; margin: 0 auto 8px; width: clamp(120px, 16vw, 180px); height: auto;
      filter: drop-shadow(0 0 22px rgba(var(--rgb-acento), .35)) drop-shadow(0 0 48px rgba(var(--rgb-aviso-suave), .22));
      animation: hubLogoFloat 5s ease-in-out infinite;
    }
    @keyframes hubLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    .hub-layout {
      width: 100%;
      margin: 6px auto 0;
      display: grid;
      grid-template-columns: 1fr minmax(0, 540px) 1fr;
      gap: 28px;
      align-items: start;
    }
    .hub-side {
      display: flex;
      flex-direction: column;
      gap: 26px;
    }
    /* Ajuste fino de altura: izquierda un poco más abajo, derecha un poco más
       arriba, para equilibrar contra el bloque central (más alto). */
    .hub-side--left  { align-items: flex-start; margin-top: 32px; }
    .hub-side--right { align-items: flex-end;  margin-top: -32px; }
    /* Columna central: emblema + título + tarjetas. Al estar dentro del grid
       (align-items:start), las 3 columnas se alinean arriba solas: cero blanco. */
    .hub-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
    }
    /* Buscador de entidades — oculto por defecto; el script lo muestra solo
       cuando hay más de 6 entidades (escala). */
    .hub-search {
      display: flex; align-items: center; gap: 10px;
      width: min(560px, 100%);
      margin: 0 auto 16px; padding: 0 16px;
      border: 1px solid rgba(var(--rgb-acento), .28);
      border-radius: 14px;
      background: rgba(var(--rgb-acento), .06);
      box-shadow: none;
      transition: border-color .16s ease, background-color .16s ease;
    }
    /* En foco: solo un borde más brillante y el fondo un pelín más azul.
       Sin box-shadow ni anillos -> imposible que aparezca un 2º recuadro. */
    .hub-search:focus-within {
      border-color: rgba(var(--rgb-acento), .6);
      background: rgba(var(--rgb-acento), .10);
    }
    .hub-search svg { width: 18px; height: 18px; color: var(--brand1, var(--acento)); flex: 0 0 auto; opacity: .85; }
    .hub-search input {
      flex: 1 1 auto; min-width: 0; font: inherit; line-height: 1.2;
      background: transparent; border: 0; outline: 0; box-shadow: none;
      -webkit-appearance: none; appearance: none;
      color: var(--texto-claro); font-size: 14px; padding: 12px 0; margin: 0;
    }
    .hub-search input::placeholder { color: var(--muted); }
    /* Sin la "x" nativa de type=search (Chrome/Edge) — choca con el estilo. */
    .hub-search input::-webkit-search-decoration,
    .hub-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    /* Con muchas entidades, la lista tiene scroll propio en vez de estirarse. */
    .hub-grid--scroll { max-height: 58vh; overflow-y: auto; padding-right: 6px; }
    .hub-card.is-hidden { display: none; }
    .hub-grid__empty { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 8px; }

    /* Bloque institucional: ícono + título + cuerpo, plano (sin fondo). */
    .hub-pillar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      width: 100%;
      max-width: 340px;
      text-align: center;
    }
    /* Ícono, título y cuerpo: todo centrado dentro del bloque. */
    .hub-pillar__icon { display: flex; justify-content: center; color: var(--brand1, var(--acento)); }
    .hub-pillar__icon svg { width: 30px; height: 30px; display: block; }
    .hub-pillar__title { margin: 0; font-size: 15px; font-weight: 800; color: var(--texto-claro); }
    .hub-pillar__text  { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--texto-2); }

    /* Valores — etiquetas con borde fino, centradas. */
    .hub-values__list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    }
    .hub-values__list li {
      padding: 6px 13px;
      border-radius: 999px;
      border: 1px solid rgba(var(--rgb-acento), .24);
      color: var(--texto-4);
      font-size: 12.5px;
      font-weight: 600;
    }
    /* Módulos del sistema — lista centrada. */
    .hub-modules {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; align-items: center; gap: 7px;
    }
    .hub-modules li { font-size: 12.5px; color: var(--muted); }
    /* Soporte — botón que abre el modal de contacto (réplica del login). */
    .hub-support__btn {
      margin-top: 2px;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(var(--rgb-acento), .40);
      background: rgba(var(--rgb-acento), .10);
      color: var(--texto-4);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      cursor: var(--cursor-pointer), pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .hub-support__btn:hover {
      background: rgba(var(--rgb-acento), .18);
      border-color: rgba(var(--rgb-acento), .62);
    }

    /* Micro-interacciones (GPU): realce sutil al pasar el mouse. Sin reflow. */
    .hub-card { transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform; }
    .hub-card:hover { transform: translateY(-3px); }
    .hub-card__crest { transition: transform .25s ease, filter .25s ease; }
    .hub-card:hover .hub-card__crest { transform: scale(1.07); filter: drop-shadow(0 0 10px rgba(var(--rgb-acento), .45)); }
    .hub-card__arrow { transition: transform .2s ease; }
    .hub-card:hover .hub-card__arrow { transform: translateX(4px); }
    .hub-pillar__icon { transition: transform .25s ease, color .25s ease; }
    .hub-pillar:hover .hub-pillar__icon { transform: scale(1.12) rotate(-4deg); color: var(--acento-2); }
    @media (prefers-reduced-motion: reduce) {
      .hub-card, .hub-card__crest, .hub-card__arrow, .hub-pillar__icon { transition: none !important; }
    }

    /* Pantallas angostas: una sola columna, entidades primero, todo centrado. */
    @media (max-width: 1024px) {
      .hub-layout {
        grid-template-columns: 1fr;
        width: min(560px, 100%);
        gap: 30px;
      }
      .hub-center { order: -1; }
      .hub-side { margin-top: 0; }
      .hub-side--left, .hub-side--right { align-items: center; margin-top: 0; }
      .hub-side--left .hub-pillar,
      .hub-side--right .hub-pillar { text-align: center; max-width: 100%; }
      .hub-side--left .hub-pillar__icon,
      .hub-side--right .hub-pillar__icon { justify-content: center; }
      .hub-values__list { justify-content: center; }
      .hub-modules li { justify-content: center; }
    }

    /* ═══ Splash animado de entrada (muni-digital.com) ═══
       Overlay full-screen: brasas en canvas + anillo de energía giratorio +
       logo flotante con glow + destello que barre el emblema + título shimmer.
       Se muestra 1 vez por sesión y se desvanece solo (o con click). */
    .splash {
      position: fixed; inset: 0; z-index: 99999; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(circle at 50% 42%, var(--panel) 0%, var(--bg) 72%);
      transition: opacity .7s ease, visibility .7s ease;
    }
    .splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .splash__embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
    .splash__stage {
      position: relative; z-index: 2;
      display: flex; flex-direction: column; align-items: center; gap: 22px;
      text-align: center; padding: 24px;
    }
    /* Halo: anillo de energía giratorio detrás del logo */
    .splash__halo {
      position: relative; width: min(66vw, 500px); aspect-ratio: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .splash__halo::before {
      content: ""; position: absolute; inset: -8%; border-radius: 50%;
      background: radial-gradient(circle at 50% 46%, rgba(var(--rgb-acento), .20) 0%, rgba(var(--rgb-aviso-suave), .10) 42%, transparent 70%);
      filter: blur(24px); opacity: .9; animation: splashBreathe 5.5s ease-in-out infinite;
    }
    @keyframes splashBreathe { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
    .splash__halo::after {
      content: ""; position: absolute; inset: 8%; border-radius: 50%;
      box-shadow: inset 0 0 70px 12px rgba(var(--rgb-acento), .16), 0 0 90px 10px rgba(var(--rgb-aviso-suave), .12);
    }
    /* Logo central flotante (su opacidad/enfoque/escala los controla GSAP). */
    .splash__logo-wrap {
      position: relative; width: 86%; aspect-ratio: 1;
      display: flex; align-items: center; justify-content: center;
      animation: splashFloat 4.5s ease-in-out 1s infinite;
    }
    .splash__full {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
      opacity: 0; z-index: 2; pointer-events: none;
    }
    /* Destello de impacto cuando las piezas se unen */
    .splash__flash {
      position: absolute; inset: -40%; pointer-events: none; opacity: 0; z-index: 3;
      background: radial-gradient(circle at 50% 50%, rgba(var(--rgb-blanco), .95) 0%, rgba(var(--rgb-acento), .55) 28%, transparent 62%);
    }
    /* Luz volumétrica (god-rays) detrás del logo — profundidad cinematográfica. */
    .splash__rays {
      position: absolute; left: 50%; top: 50%; width: 168%; aspect-ratio: 1;
      margin: -84% 0 0 -84%; border-radius: 50%; opacity: 0; z-index: 1; pointer-events: none;
      background: repeating-conic-gradient(from 0deg,
        rgba(var(--rgb-aviso-suave), 0) 0deg, rgba(var(--rgb-aviso-suave), .12) 2.5deg, rgba(var(--rgb-aviso-suave), 0) 6deg,
        rgba(var(--rgb-acento), 0) 9deg, rgba(var(--rgb-acento), .10) 11.5deg, rgba(var(--rgb-acento), 0) 15deg);
      filter: blur(5px);
      -webkit-mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.5) 30%, transparent 62%);
              mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.5) 30%, transparent 62%);
    }
    /* Aura de energía detrás del emblema (lo que "lo enciende"). */
    .splash__glow {
      position: absolute; left: 50%; top: 50%; width: 122%; aspect-ratio: 1;
      margin: -61% 0 0 -61%; border-radius: 50%; opacity: 0; z-index: 1; pointer-events: none;
      background: radial-gradient(circle, rgba(var(--rgb-acento), .24) 0%, rgba(var(--rgb-aviso-suave), .15) 38%, transparent 66%);
      filter: blur(16px);
    }
    /* Barrido de luz sobre el emblema ya armado (recortado a su silueta) */
    .splash__sweep {
      position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4;
      -webkit-mask: url("/fuentes/general/logo_sistema_control.png") center / contain no-repeat;
              mask: url("/fuentes/general/logo_sistema_control.png") center / contain no-repeat;
    }
    .splash__sweep-bar {
      position: absolute; top: -20%; bottom: -20%; width: 55%; left: -65%;
      background: linear-gradient(100deg, transparent, rgba(var(--rgb-blanco), .6), transparent);
      transform: skewX(-12deg);
    }
    /* Viñeta cinematográfica */
    .splash::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
      box-shadow: inset 0 0 220px 70px rgba(0,0,0,.55);
    }
    /* perspectiva para el título 3D (letra por letra) */
    .splash__title { perspective: 500px; }
    @keyframes splashFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    .splash__title {
      font-size: 17px; letter-spacing: 6px; font-weight: 800; color: var(--texto-claro);
      text-shadow: 0 0 14px rgba(var(--rgb-acento), .55), 0 0 32px rgba(var(--rgb-aviso-suave), .35);
    }
    .splash__bar { width: 200px; height: 3px; border-radius: 3px; background: rgba(var(--rgb-acento), .15); overflow: hidden; }
    .splash__bar span {
      display: block; height: 100%; width: 42%; border-radius: 3px;
      background: linear-gradient(90deg, var(--acento), var(--aviso-suave));
      animation: splashBar 1.3s ease-in-out infinite;
    }
    @keyframes splashBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
    /* Crédito © en el splash */
    .splash__credit { margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--muted, var(--muted-3)); opacity: 0; }
    .splash__credit .email { color: var(--acento); }
    @media (prefers-reduced-motion: reduce) {
      .splash__halo::before, .splash__logo-wrap, .splash__bar span { animation: none !important; }
      .splash__full, .splash__title { opacity: 1; }
    }