/*
    vms-publico.css — la cara PÚBLICA de Vormansys (página «/», login y el formulario de contacto).

    POR QUÉ ESTA HOJA EXISTE, SIENDO QUE EL SISTEMA USA MUDBLAZOR
    ------------------------------------------------------------
    Las pantallas de sesión pintan con MudBlazor, y ahí seguirá siendo así. La página pública NO puede:

    1. MudBlazor no tiene colores sin <MudThemeProvider>. Su hoja no trae valores por defecto en :root —se
       comprobó leyendo MudBlazor.min.css, no de memoria—: la paleta entera la emite ese componente. Y ese
       componente necesita interactividad para saber si el visitante tiene el sistema en claro u oscuro.
    2. La página pública se rinde ESTÁTICA en el servidor (ver PortadaPublica.razor): tiene que estar
       pintada en el primer viaje, sin esperar la descarga del WebAssembly. Eso descarta la interactividad
       y, con ella, la detección de tema de MudBlazor.

    Con hoja propia, el tema claro/oscuro sale de @media (prefers-color-scheme) —CSS puro, cero JavaScript,
    correcto desde el primer píxel— y el visitante ve la página completa aunque nunca llegue a cargar el
    WebAssembly. La ÚNICA isla interactiva es el formulario de contacto, y también pinta con estas mismas
    variables para que no haya dos estéticas conviviendo.

    SIN NINGÚN RECURSO EXTERNO: ni CDN, ni tipografías remotas, ni imágenes de fuera. La tipografía es la
    Roboto local que ya sirve fonts.css, y los adornos son degradados y formas de CSS.

    Prefijo «vms-» en todas las clases para no chocar con las de MudBlazor ni con las de Bootstrap, que
    conviven en la misma página cargadas por App.razor.
*/

/* ============================================================================
   1. Paleta. Dos juegos completos: el claro por defecto y el oscuro por consulta
      de medios. Todo lo demás en esta hoja usa variables — así el cambio de tema
      es un solo bloque y no una regla duplicada por cada sección.
   ============================================================================ */
.vms-pub {
    /* Identidad CSSTEC: el verde-lima sobre gris del sistema (el mismo de EstadoTenantCliente). */
    --vms-lima: #C1D42F;
    --vms-lima-oscuro: #A3B518;

    /* El lima puro sobre blanco NO alcanza contraste para texto (queda casi ilegible en un teléfono al
       sol). Por eso hay dos tonos: el lima para RELLENOS y la oliva para TEXTO y enlaces. */
    --vms-marca-texto: #5F6B08;

    --vms-fondo: #ffffff;
    --vms-fondo-alt: #f4f6ee;
    --vms-superficie: #ffffff;
    --vms-texto: #1e2024;
    --vms-texto-suave: #565c66;
    --vms-borde: #e0e3d8;
    --vms-sombra: 0 1px 2px rgba(16, 18, 12, .06), 0 8px 24px rgba(16, 18, 12, .06);

    /* La banda del héroe y la del cierre son OSCURAS en los dos temas, a propósito: son el ancla visual
       de la página y mantienen la marca reconocible se mire donde se mire. */
    --vms-noche: #1c1f14;
    --vms-noche-alt: #2a2f1c;
    --vms-noche-texto: #f2f4ea;
    --vms-noche-suave: #b9c0a6;

    --vms-radio: 14px;
    --vms-ancho: 1120px;

    color: var(--vms-texto);
    background: var(--vms-fondo);
    /* Que la propia página llene la ventana: así, si el navegador no entiende la regla de body de más
       abajo, en tema oscuro no asoma el blanco del navegador por debajo del contenido. */
    min-height: 100vh;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* El :not([data-tema="claro"]) es lo que deja que un LOGIN con el interruptor en "Tema claro" se quede
   claro aunque el sistema operativo prefiera oscuro: sin ese guard, la preferencia del sistema le ganaba
   siempre a la elección explícita del visitante. */
@media (prefers-color-scheme: dark) {
    .vms-pub:not([data-tema="claro"]) {
        --vms-marca-texto: #C1D42F;      /* en oscuro el lima SÍ contrasta: vuelve a ser color de texto */
        --vms-fondo: #15171a;
        --vms-fondo-alt: #1b1e22;
        --vms-superficie: #1e2126;
        --vms-texto: #eceef1;
        --vms-texto-suave: #a5abb4;
        --vms-borde: #2c3036;
        --vms-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

/*
    Forzado explícito (login, ver TemaOscuro en MarcoPublico.razor): el interruptor "Tema oscuro"/"Tema
    claro" de esa pantalla gobierna ESTE marco Y el MudThemeProvider de su tarjeta a la vez, tocando el
    MISMO booleano — antes cada uno leía una fuente distinta (este marco, prefers-color-scheme; la
    tarjeta, el interruptor) y el resultado se veía "a medio aplicar". [data-tema="oscuro"] gana siempre,
    haya lo que haya en el sistema operativo; [data-tema="claro"] solo necesita el guard de arriba porque
    el juego de variables por defecto YA es el claro.
*/
.vms-pub[data-tema="oscuro"] {
    --vms-marca-texto: #C1D42F;
    --vms-fondo: #15171a;
    --vms-fondo-alt: #1b1e22;
    --vms-superficie: #1e2126;
    --vms-texto: #eceef1;
    --vms-texto-suave: #a5abb4;
    --vms-borde: #2c3036;
    --vms-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

/* El fondo del documento acompaña al de la página: sin esto, al hacer scroll de rebote en un móvil
   asoma el blanco del navegador por debajo de una página oscura. */
body:has(.vms-pub) {
    background: var(--vms-fondo, #fff);
    margin: 0;
}

/* ============================================================================
   2. Piezas base
   ============================================================================ */
.vms-pub *, .vms-pub *::before, .vms-pub *::after { box-sizing: border-box; }

.vms-contenedor {
    width: 100%;
    max-width: var(--vms-ancho);
    margin: 0 auto;
    padding: 0 20px;
}

.vms-pub h1, .vms-pub h2, .vms-pub h3 {
    margin: 0 0 .5em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.015em;
}

.vms-pub p { margin: 0 0 1em; }
.vms-pub a { color: var(--vms-marca-texto); }

/* Foco SIEMPRE visible: media plataforma se navega con teclado y en tableta el hover no existe. */
.vms-pub a:focus-visible,
.vms-pub button:focus-visible,
.vms-pub input:focus-visible,
.vms-pub textarea:focus-visible {
    outline: 3px solid var(--vms-lima);
    outline-offset: 2px;
}

/* Enlace de salto: invisible hasta que alguien tabula. Es la primera parada del teclado. */
.vms-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--vms-lima);
    color: #1a1a1a;
    padding: 10px 16px;
    z-index: 100;
    border-radius: 0 0 8px 0;
}
.vms-saltar:focus { left: 0; }

/* --- Botones ---------------------------------------------------------------- */
.vms-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    /* 44px de alto mínimo: es el tamaño por debajo del cual un dedo falla el objetivo. */
    min-height: 44px;
}
.vms-boton:hover { transform: translateY(-1px); }
.vms-boton:active { transform: translateY(0); }

.vms-boton--marca {
    background: var(--vms-lima);
    color: #1a1a1a;
    box-shadow: 0 4px 14px rgba(193, 212, 47, .35);
}
.vms-boton--marca:hover { background: #cfe23a; }

.vms-boton--linea {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}
.vms-boton--linea:hover { background: rgba(127, 127, 127, .12); }

.vms-boton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ============================================================================
   3. Barra superior
   ============================================================================ */
.vms-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Doble declaración a propósito: la primera es el color sólido que entiende cualquier navegador; la
       segunda, el translúcido que solo entienden los recientes. Un navegador viejo se queda con la
       primera en vez de quedarse SIN fondo —que sobre una barra fija significa texto sobre el contenido
       que pasa por debajo—. Mismo criterio en cada color-mix de esta hoja. */
    background: var(--vms-fondo);
    background: color-mix(in srgb, var(--vms-fondo) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vms-borde);
}

.vms-barra__fila {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
}

.vms-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--vms-texto);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

/* El isotipo se dibuja con CSS: un cuadrado con las esquinas del organigrama. Cero imágenes. */
.vms-isotipo {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--vms-lima) 0%, var(--vms-lima-oscuro) 100%);
    display: inline-grid;
    place-items: center;
    color: #1a1a1a;
    font-weight: 800;
    font-size: .95rem;
    flex: 0 0 auto;
}

.vms-barra__nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}
.vms-barra__nav a {
    text-decoration: none;
    color: var(--vms-texto-suave);
    font-size: .95rem;
    font-weight: 500;
}
.vms-barra__nav a:hover { color: var(--vms-marca-texto); }

/* En teléfono los enlaces de sección estorban: se esconden y queda solo «Entrar», que es lo que se
   busca de verdad desde un móvil. El recorrido de la página sigue completo haciendo scroll. */
.vms-solo-ancho { display: none; }
@media (min-width: 860px) {
    .vms-solo-ancho { display: flex; }
}

/* ============================================================================
   4. Héroe
   ============================================================================ */
.vms-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1000px 500px at 78% -10%, rgba(193, 212, 47, .22), transparent 60%),
        linear-gradient(160deg, var(--vms-noche) 0%, var(--vms-noche-alt) 100%);
    color: var(--vms-noche-texto);
    padding: 72px 0 80px;
}

.vms-hero__marco { max-width: 780px; }

.vms-hero h1 {
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    margin-bottom: 20px;
}
.vms-hero h1 em {
    font-style: normal;
    color: var(--vms-lima);
}

.vms-hero__bajada {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--vms-noche-suave);
    max-width: 62ch;
}

.vms-hero__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.vms-hero__nota {
    margin-top: 26px;
    font-size: .9rem;
    color: var(--vms-noche-suave);
}

/* ============================================================================
   5. Secciones
   ============================================================================ */
.vms-seccion { padding: 72px 0; }
.vms-seccion--alt { background: var(--vms-fondo-alt); }

.vms-seccion__titulo {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    max-width: 22ch;
}
.vms-seccion__entrada {
    font-size: 1.08rem;
    color: var(--vms-texto-suave);
    max-width: 68ch;
}

.vms-etiqueta {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vms-marca-texto);
    margin-bottom: 12px;
}

/* --- Rejilla genérica: una columna en teléfono, se abre sola al haber sitio ---- */
.vms-rejilla {
    display: grid;
    gap: 20px;
    margin-top: 40px;
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .vms-rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .vms-rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .vms-rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .vms-rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Tarjeta ---------------------------------------------------------------- */
.vms-tarjeta {
    background: var(--vms-superficie);
    border: 1px solid var(--vms-borde);
    border-radius: var(--vms-radio);
    padding: 26px;
    box-shadow: var(--vms-sombra);
    height: 100%;
}
.vms-tarjeta h3 { font-size: 1.12rem; }
.vms-tarjeta p {
    color: var(--vms-texto-suave);
    margin-bottom: 0;
    font-size: .97rem;
}

/* --- Anexo de privacidad por organización ------------------------------------
   El texto lo escribe quien administra una organización y lo lee cualquiera que abra la política.
   Se pinta como TEXTO, nunca como marcado: pre-wrap es lo que respeta los párrafos y los saltos de
   línea SIN interpretar nada. Cambiar esto por MarkupString en el componente convertiría el anexo
   en una vía para ejecutar código en el navegador de quien lea la página (y el token de sesión vive
   en el almacenamiento local). break-word está por lo mismo que pre-wrap: una dirección larga pegada
   sin espacios no puede desbordar la caja en un teléfono.                                          */
.vms-anexo {
    background: var(--vms-superficie);
    border: 1px solid var(--vms-borde);
    border-radius: var(--vms-radio);
    padding: 26px;
    box-shadow: var(--vms-sombra);
    margin-bottom: 18px;
}
.vms-anexo h3 { font-size: 1.12rem; margin-bottom: 10px; }
.vms-anexo__texto {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: var(--vms-texto-suave);
    margin-bottom: 0;
    font-size: .97rem;
}

/* --- Pasos: el número grande hace de guía de lectura -------------------------- */
.vms-paso { position: relative; }
.vms-paso__numero {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--vms-lima);
    color: #1a1a1a;
    font-weight: 800;
    margin-bottom: 16px;
}

/* --- Capacidades: lista con viñeta propia ------------------------------------ */
.vms-capacidad__lista {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.vms-capacidad__lista li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    color: var(--vms-texto-suave);
    font-size: .94rem;
}
.vms-capacidad__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--vms-lima);
}

/* --- Escenarios: la tarjeta lleva un rótulo de sector -------------------------- */
.vms-escenario__sector {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vms-fondo-alt);
    background: color-mix(in srgb, var(--vms-lima) 24%, transparent);
    color: var(--vms-marca-texto);
    margin-bottom: 14px;
}
.vms-escenario__cita {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--vms-borde);
    font-size: .93rem;
    color: var(--vms-texto-suave);
}
.vms-escenario__cita strong { color: var(--vms-texto); }

/* ============================================================================
   6. Cierre y formulario
   ============================================================================ */
.vms-cierre {
    background:
        radial-gradient(800px 420px at 15% 0%, rgba(193, 212, 47, .18), transparent 62%),
        linear-gradient(200deg, var(--vms-noche) 0%, var(--vms-noche-alt) 100%);
    color: var(--vms-noche-texto);
    padding: 76px 0;
}
.vms-cierre h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.vms-cierre p { color: var(--vms-noche-suave); }

.vms-cierre__reparto {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 940px) {
    .vms-cierre__reparto { grid-template-columns: 1fr 1.15fr; gap: 56px; }
}

.vms-contacto__dato {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: .96rem;
}
.vms-contacto__dato span { color: var(--vms-noche-suave); min-width: 84px; }
.vms-contacto__dato a { color: var(--vms-lima); }

/* --- Formulario ------------------------------------------------------------- */
.vms-formulario {
    background: var(--vms-superficie);
    border: 1px solid var(--vms-borde);
    border-radius: var(--vms-radio);
    padding: 28px;
    box-shadow: var(--vms-sombra);
    color: var(--vms-texto);
}

.vms-campos {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 620px) {
    .vms-campos { grid-template-columns: 1fr 1fr; }
    .vms-campo--ancho { grid-column: 1 / -1; }
}

.vms-campo { display: flex; flex-direction: column; gap: 6px; }
.vms-campo label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--vms-texto);
}
.vms-campo__opcional { font-weight: 400; color: var(--vms-texto-suave); }

.vms-campo input,
.vms-campo textarea {
    font-family: inherit;
    /* 16px exactos: por debajo de eso, Safari en iPhone hace zoom al enfocar el campo y descoloca la
       página entera. No es una preferencia estética. */
    font-size: 16px;
    color: var(--vms-texto);
    background: var(--vms-fondo);
    border: 1px solid var(--vms-borde);
    border-radius: 10px;
    padding: 11px 14px;
    width: 100%;
    transition: border-color .12s ease;
}
.vms-campo input:focus,
.vms-campo textarea:focus { border-color: var(--vms-lima); }
.vms-campo textarea { resize: vertical; min-height: 108px; }

.vms-campo--malo input,
.vms-campo--malo textarea { border-color: #d9534f; }

.vms-campo__error {
    font-size: .84rem;
    color: #d9534f;
}

/*
    Campo trampa (honeypot). Fuera de la vista SIN usar display:none ni visibility:hidden: los robots más
    cuidadosos saltan los campos ocultos por esas dos propiedades justamente para no caer. Sacarlo del
    lienzo lo deja invisible para la persona y presente para el programa que rellena todo lo que encuentra.
    aria-hidden y tabindex=-1 (en el marcado) lo sacan además del lector de pantalla y del tabulador, para
    que ninguna persona pueda llenarlo sin querer.
*/
.vms-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.vms-aviso {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: .95rem;
    border: 1px solid;
}
.vms-aviso--bien {
    background: var(--vms-fondo-alt);
    background: color-mix(in srgb, var(--vms-lima) 18%, transparent);
    border-color: var(--vms-lima);
    color: var(--vms-texto);
}
.vms-aviso--mal {
    background: rgba(217, 83, 79, .12);
    border-color: #d9534f;
    color: var(--vms-texto);
}

.vms-formulario__pie {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.vms-formulario__nota {
    font-size: .84rem;
    color: var(--vms-texto-suave);
    margin: 0;
}

/* ============================================================================
   7. Pie de página
   ============================================================================ */
.vms-pie {
    background: var(--vms-fondo);
    border-top: 1px solid var(--vms-borde);
    padding: 36px 0;
    font-size: .9rem;
    color: var(--vms-texto-suave);
}
.vms-pie__fila {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    justify-content: space-between;
}
.vms-pie a { text-decoration: none; }
.vms-pie a:hover { text-decoration: underline; }

/* ============================================================================
   8. Marco de las pantallas de entrada (login) montadas sobre esta misma cara
   ============================================================================ */
.vms-centrado {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 60px;
    background: var(--vms-fondo-alt);
    background:
        radial-gradient(900px 460px at 50% -20%, color-mix(in srgb, var(--vms-lima) 16%, transparent), transparent 60%),
        var(--vms-fondo-alt);
}
.vms-panel {
    width: 100%;
    max-width: 440px;
}

/* Quien llega por invitación tiene que ver de entrada de QUIÉN es la invitación. */
.vms-invitacion {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--vms-radio);
    background: var(--vms-superficie);
    border: 1px solid var(--vms-borde);
    margin-bottom: 18px;
}
.vms-invitacion img {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}
.vms-invitacion__texto { line-height: 1.3; }
.vms-invitacion__texto strong { display: block; font-size: 1.02rem; }
.vms-invitacion__texto span { font-size: .86rem; color: var(--vms-texto-suave); }

/* Quien prefiera menos animación, que tenga menos animación. */
@media (prefers-reduced-motion: reduce) {
    .vms-pub *, .vms-pub *::before, .vms-pub *::after {
        transition: none !important;
        animation: none !important;
    }
    .vms-boton:hover { transform: none; }
}