/*
    Tema visual de la aplicación.

    ── Qué es esto ──────────────────────────────────────────────────────────────────────────────
    La paleta sale del sistema de diseño de la marca (docs/), muestreada del logotipo: verdes de
    campo, tierras, sol y cielo sobre papel crema. Aquí vive en **un solo sitio**, como variables:
    cambiar de paleta debe ser editar este archivo, no buscar hexadecimales por las pantallas.

    ── Por qué los nombres son genéricos ────────────────────────────────────────────────────────
    Las variables se llaman por su **papel** —acción primaria, superficie, peligro— y no por el
    cliente que inspiró los colores. CCP es un producto que se configura, no un desarrollo a la
    medida: el día que otra organización necesite su identidad, se sustituyen estos valores sin
    tocar una sola pantalla.

    ── Cómo se aplica ───────────────────────────────────────────────────────────────────────────
    Radzen expone su tema como variables `--rz-*`. Este archivo las **reasigna** a la paleta, así
    que los componentes se tiñen solos y ninguna pantalla necesita saber de colores. Va después del
    tema de Radzen en `App.razor`, que es lo que le permite ganarle.

    La tipografía **no se toca**: la aplicación interna se queda con la que ya tenía. Las fuentes
    del sistema de diseño entran cuando se construya la venta de boletos al público, que tiene que
    verse como el sitio informativo.
*/

:root {
    /* ── Paleta base ─────────────────────────────────────────────────────────────────────────
       Muestreada del logotipo. No se usa directamente en las pantallas: siempre a través de un
       papel semántico, para que un cambio de paleta no obligue a revisar cada uso. */
    --ccp-green-900: #053f16;
    --ccp-green-800: #0a5925;
    --ccp-green-700: #0a6624;
    --ccp-green-600: #18813a;
    --ccp-green-500: #2e8b43;
    --ccp-green-300: #8fc79c;
    --ccp-green-100: #dcefdf;
    --ccp-green-50: #eef7ef;

    --ccp-grass-700: #5c7414;
    --ccp-grass-500: #7fa01f;
    --ccp-grass-300: #a8c45c;
    --ccp-grass-100: #e9f4cf;

    --ccp-brown-900: #2b1a0d;
    --ccp-brown-800: #3b2314;
    --ccp-brown-700: #4d301b;
    --ccp-brown-600: #6b4425;
    --ccp-brown-400: #8a5a32;
    --ccp-brown-200: #c9a988;
    --ccp-brown-100: #eadfd2;

    --ccp-clay-500: #ce7d3f;
    --ccp-clay-300: #e2a76f;

    --ccp-sun-600: #d99000;
    --ccp-sun-500: #f5b300;
    --ccp-sun-400: #fbc738;
    --ccp-sun-200: #fde49b;
    --ccp-sun-100: #fef4d8;

    --ccp-sky-600: #3d8fbe;
    --ccp-sky-400: #7cc6e8;
    --ccp-sky-300: #aeddf2;
    --ccp-sky-100: #dcf1fa;

    --ccp-cream-100: #f7f2e4;
    --ccp-cream-50: #fbf8ef;

    --ccp-white: #ffffff;
    --ccp-ink-900: #2b1a0d;
    --ccp-ink-700: #4d3a2a;
    --ccp-ink-500: #7a6857;
    --ccp-ink-300: #b6a795;

    --ccp-berry-500: #b83a3a;
    --ccp-berry-100: #f7e0de;

    /* ── Papeles ────────────────────────────────────────────────────────────────────────────
       Lo que las pantallas deberían usar. El verde es la acción; el sol es el acento y el foco,
       nunca el fondo de un botón con texto blanco encima. */
    --ccp-action-primary: var(--ccp-green-700);
    --ccp-action-primary-hover: var(--ccp-green-800);
    --ccp-action-primary-active: var(--ccp-green-900);
    --ccp-action-accent: var(--ccp-sun-500);
    --ccp-action-accent-hover: var(--ccp-sun-600);

    --ccp-surface-page: var(--ccp-cream-50);
    --ccp-surface-card: var(--ccp-white);
    --ccp-surface-sunken: var(--ccp-cream-100);
    --ccp-surface-dark: var(--ccp-green-800);

    --ccp-text-strong: var(--ccp-brown-900);
    --ccp-text-body: var(--ccp-brown-800);
    --ccp-text-muted: var(--ccp-ink-500);
    --ccp-text-inverse: var(--ccp-cream-50);

    --ccp-border-hairline: var(--ccp-brown-100);
    --ccp-border-default: var(--ccp-brown-200);

    /* ── Radzen: escala neutra ──────────────────────────────────────────────────────────────
       Los grises del tema se sustituyen por neutros **cálidos**: un gris azulado sobre papel
       crema se ve sucio. De esta escala salen, por herencia del propio tema, el color del texto
       (`base-800`), el del texto secundario (`base-700`) y el fondo del cuerpo (`base-100`). */
    --rz-base: var(--ccp-brown-100);
    --rz-base-50: var(--ccp-white);
    --rz-base-100: var(--ccp-cream-50);
    --rz-base-200: var(--ccp-cream-100);
    --rz-base-300: var(--ccp-brown-100);
    --rz-base-400: var(--ccp-brown-200);
    --rz-base-500: var(--ccp-ink-300);
    --rz-base-600: var(--ccp-ink-500);
    --rz-base-700: var(--ccp-ink-700);
    --rz-base-800: var(--ccp-brown-800);
    --rz-base-900: var(--ccp-brown-900);
    --rz-base-light: var(--ccp-cream-100);
    --rz-base-lighter: var(--ccp-cream-50);
    --rz-base-dark: var(--ccp-ink-500);
    --rz-base-darker: var(--ccp-brown-900);
    --rz-base-background-color: var(--ccp-surface-card);

    --rz-body-background-color: var(--ccp-surface-page);
    --rz-text-color: var(--ccp-text-body);
    --rz-text-title-color: var(--ccp-text-strong);
    --rz-text-contrast-color: var(--ccp-text-inverse);

    /* ── Radzen: acción primaria ────────────────────────────────────────────────────────────── */
    --rz-primary: var(--ccp-action-primary);
    --rz-primary-light: var(--ccp-green-600);
    --rz-primary-dark: var(--ccp-action-primary-hover);
    --rz-primary-darker: var(--ccp-action-primary-active);
    --rz-primary-lighter: rgba(10, 102, 36, 0.14);
    --rz-on-primary: var(--ccp-white);
    --rz-on-primary-light: var(--ccp-white);
    --rz-on-primary-dark: var(--ccp-white);
    --rz-on-primary-darker: var(--ccp-white);
    --rz-on-primary-lighter: var(--ccp-green-800);

    /* ── Radzen: acento ─────────────────────────────────────────────────────────────────────
       El sol lleva texto **oscuro** encima. Radzen pone blanco por omisión, que sobre amarillo
       no se lee: es el ajuste que más se nota si se olvida. */
    --rz-secondary: var(--ccp-sun-500);
    --rz-secondary-light: var(--ccp-sun-400);
    --rz-secondary-dark: var(--ccp-sun-600);
    --rz-secondary-darker: var(--ccp-sun-600);
    --rz-secondary-lighter: rgba(245, 179, 0, 0.18);
    --rz-on-secondary: var(--ccp-brown-900);
    --rz-on-secondary-light: var(--ccp-brown-900);
    --rz-on-secondary-dark: var(--ccp-brown-900);
    --rz-on-secondary-darker: var(--ccp-brown-900);
    --rz-on-secondary-lighter: var(--ccp-brown-900);

    /* ── Radzen: estados ────────────────────────────────────────────────────────────────────
       Los cuatro salen del sistema de diseño, no de los colores de fábrica: un rojo genérico
       junto a estas tierras canta. */
    --rz-success: var(--ccp-green-600);
    --rz-success-light: var(--ccp-green-500);
    --rz-success-dark: var(--ccp-green-700);
    --rz-success-darker: var(--ccp-green-800);
    --rz-success-lighter: rgba(24, 129, 58, 0.16);
    --rz-on-success-lighter: var(--ccp-green-800);

    --rz-warning: var(--ccp-sun-600);
    --rz-warning-light: var(--ccp-sun-500);
    --rz-warning-dark: var(--ccp-sun-600);
    --rz-warning-darker: var(--ccp-clay-500);
    --rz-warning-lighter: rgba(217, 144, 0, 0.18);
    --rz-on-warning-lighter: var(--ccp-brown-900);

    --rz-danger: var(--ccp-berry-500);
    --rz-danger-light: #c85252;
    --rz-danger-dark: #9c3030;
    --rz-danger-darker: #832828;
    --rz-danger-lighter: rgba(184, 58, 58, 0.16);
    --rz-on-danger-lighter: #9c3030;

    --rz-info: var(--ccp-sky-600);
    --rz-info-light: var(--ccp-sky-400);
    --rz-info-dark: #33789f;
    --rz-info-darker: #2a6285;
    --rz-info-lighter: rgba(61, 143, 190, 0.18);
    --rz-on-info-lighter: #2a6285;

    /* ── Radzen: enlaces ────────────────────────────────────────────────────────────────────
       Por omisión heredan del color secundario, que aquí es el sol: ilegible sobre papel. Se
       fijan al verde de marca, que es lo que hace el sitio informativo. */
    --rz-link-color: var(--ccp-action-primary);
    --rz-link-hover-color: var(--ccp-action-primary-active);

    /* ── Radzen: menú lateral ───────────────────────────────────────────────────────────────
       Verde de marca, y no el marrón del texto: es la única superficie grande de color de la
       aplicación y es la que la hace reconocible de un vistazo. */
    --rz-sidebar-background-color: var(--ccp-surface-dark);
    --rz-panel-menu-item-background-color: var(--ccp-surface-dark);
    --rz-panel-menu-item-color: var(--ccp-text-inverse);
    --rz-panel-menu-item-hover-background-color: var(--ccp-green-700);
    --rz-panel-menu-item-selected-background-color: var(--ccp-green-700);
    --rz-panel-menu-item-selected-color: var(--ccp-white);
}

/* El anillo de foco es el sol: es el único sitio donde el acento manda sobre el verde, porque
   tiene que verse encima de cualquier control. */
.rz-button:focus-visible,
.rz-textbox:focus-visible,
.rz-dropdown:focus-visible,
.rz-numeric:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 179, 0, 0.55);
}

/* Superficie de marca reutilizable: el panel de identidad del acceso y cualquier bloque que deba
   ir sobre color. Existe para que las pantallas no vuelvan a escribir un hexadecimal. */
.ccp-superficie-marca {
    background-color: var(--ccp-surface-dark) !important;
    color: var(--ccp-text-inverse);
}

.ccp-texto-inverso {
    color: var(--ccp-text-inverse) !important;
}

.ccp-texto-tenue {
    color: var(--ccp-text-muted) !important;
}

/* ---------------------------------------------------------------------------------------------
   Pantallas públicas: la tienda y el "no encontrado".

   Marco propio, sin menú lateral ni encabezado de administración. Quien las ve no tiene sesión, y
   el marco completo solo ofrecería puertas cerradas. Se apoyan en las mismas variables del tema
   para que la tienda no acabe con su propia paleta paralela.
   --------------------------------------------------------------------------------------------- */
.ccp-tienda {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 🔴 `border-box` es lo que impide que en un teléfono la página se vaya de lado (US-055,
   2026-09-30). Sin él, `width: 100%` más los dos rellenos laterales daba 407 px en una pantalla de
   375: exactamente los 32 px de relleno, y las tarjetas cortadas por la derecha.
   El `max-width` suma esos mismos rellenos para que en escritorio **nada cambie**: el ancho total
   sigue siendo 900 px de contenido más el relleno, como antes. */
.ccp-tienda-cuerpo {
    box-sizing: border-box;
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(900px + 2rem);
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
}

.ccp-tienda-pie {
    flex-shrink: 0;
    padding: 1rem;
    border-top: var(--rz-panel-border, 1px solid rgba(0, 0, 0, 0.08));
}

/* Enlace a la ficha externa de un producto en la tienda (US-047): discreto, del color primario,
   y claramente un enlace —sale del sitio, y quien lo pulsa tiene que saberlo—. */
.ccp-mas-informacion {
    font-size: var(--rz-text-caption-font-size, 0.75rem);
    color: var(--rz-primary);
    text-decoration: underline;
    width: fit-content;
}