/*
|--------------------------------------------------------------------------
| GoPlay Ticket Validation
|--------------------------------------------------------------------------
|
| Archivo:
|     css/styles.css
|
| Responsabilidad:
|     Definir el Design System y la presentación visual del portal público
|     de validación de tickets.
|
| Enfoque:
|     - Mobile first.
|     - Diseño responsive.
|     - Componentes reutilizables.
|     - Logo de organización controlado.
|     - Estados visuales accesibles.
|
*/

:root {

    /* Brand */

    --color-primary: #1d4ed8;
    --color-primary-hover: #1e40af;
    --color-primary-soft: #eff6ff;

    /* Semantic */

    --color-success: #067647;
    --color-success-background: #ecfdf3;

    --color-warning: #b54708;
    --color-warning-background: #fffaeb;

    --color-danger: #b42318;
    --color-danger-background: #fef3f2;

    /* Neutral */

    --color-background: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-secondary: #f9fafb;

    --color-text-primary: #101828;
    --color-text-secondary: #667085;
    --color-text-muted: #98a2b3;

    --color-border: #e4e7ec;

    /* Shadows */

    --shadow-card:
        0 20px 45px rgba(16, 24, 40, 0.10);

    /* Radius */

    --radius-large: 24px;
    --radius-medium: 16px;
    --radius-small: 12px;
    --radius-pill: 999px;

    /* Spacing */

    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Typography */

    --font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    /* Motion */

    --transition-fast: 180ms ease;
    --transition-normal: 250ms ease;

}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    min-height: 100%;

    font-size: 16px;

    scroll-behavior: smooth;

}

body {

    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at top,
            rgba(59, 130, 246, 0.10),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #eef4ff 0%,
            var(--color-background) 48%,
            var(--color-background) 100%
        );

    color: var(--color-text-primary);

    font-family: var(--font-family);

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

img {

    display: block;

    max-width: 100%;

}

button,
input,
textarea,
select {

    font: inherit;

}

/* ==========================================================================
   APPLICATION ROOT
   ========================================================================== */

.app {

    width: 100%;

    min-height: 100vh;

}

/* ==========================================================================
   INITIAL HTML LOADING
   ========================================================================== */

.initial-loading {

    width: calc(100% - 32px);
    max-width: 420px;

    margin: 10vh auto 0;

    padding:
        var(--spacing-xl)
        var(--spacing-lg);

    background: var(--color-surface);

    border:
        1px solid
        rgba(228, 231, 236, 0.9);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);

    text-align: center;

}

.initial-loading__spinner {

    width: 52px;
    height: 52px;

    margin:
        0
        auto
        var(--spacing-lg);

    border:
        5px solid
        rgba(29, 78, 216, 0.13);

    border-top-color: var(--color-primary);

    border-radius: 50%;

    animation:
        spin
        0.9s
        linear
        infinite;

}

.initial-loading__message {

    margin: 0;

    color: var(--color-text-secondary);

    font-size: 1rem;
    font-weight: 600;

}

/* ==========================================================================
   LOADING VIEW
   ========================================================================== */

.loading-view {

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        var(--spacing-lg)
        var(--spacing-md);

}

.loading-card {

    width: 100%;
    max-width: 420px;

    padding:
        var(--spacing-xxl)
        var(--spacing-lg);

    background: var(--color-surface);

    border:
        1px solid
        rgba(228, 231, 236, 0.9);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);

    text-align: center;

}

.loading-spinner {

    width: 52px;
    height: 52px;

    margin:
        0
        auto
        var(--spacing-lg);

    border:
        5px solid
        rgba(29, 78, 216, 0.13);

    border-top-color: var(--color-primary);

    border-radius: 50%;

    animation:
        spin
        0.9s
        linear
        infinite;

}

.loading-title {

    margin:
        0
        0
        var(--spacing-xs);

    font-size: 1.35rem;
    line-height: 1.25;

}

.loading-message {

    margin: 0;

    color: var(--color-text-secondary);

    font-size: 0.95rem;

}

/* ==========================================================================
   GENERIC STATE VIEWS
   ========================================================================== */

.state-view {

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        var(--spacing-lg)
        var(--spacing-md);

}

.state-card {

    width: 100%;
    max-width: 460px;

    padding:
        var(--spacing-xxl)
        var(--spacing-lg);

    background: var(--color-surface);

    border:
        1px solid
        rgba(228, 231, 236, 0.9);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);

    text-align: center;

}

.state-icon {

    width: 64px;
    height: 64px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: var(--spacing-lg);

    background: var(--color-primary-soft);

    border-radius: 50%;

    color: var(--color-primary);

    font-size: 1.75rem;
    font-weight: 800;

}

.state-icon.warning {

    color: var(--color-warning);

    background: var(--color-warning-background);

}

.state-icon.error {

    color: var(--color-danger);

    background: var(--color-danger-background);

}

.state-card h1 {

    margin:
        0
        0
        var(--spacing-sm);

    font-size: 1.5rem;
    line-height: 1.25;

}

.state-card p {

    max-width: 360px;

    margin:
        0
        auto;

    color: var(--color-text-secondary);

    font-size: 0.95rem;

}

/* ==========================================================================
   TICKET VIEW
   ========================================================================== */

.ticket-view {

    min-height: 100vh;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding:
        var(--spacing-lg)
        var(--spacing-md);

}

.ticket-card {

    width: 100%;
    max-width: 560px;

    overflow: hidden;

    background: var(--color-surface);

    border:
        1px solid
        rgba(228, 231, 236, 0.95);

    border-radius: 0;

    box-shadow: var(--shadow-card);

}

/* ==========================================================================
   TICKET HEADER
   ========================================================================== */

.ticket-header {

    position: relative;

    padding:
        36px
        var(--spacing-lg)
        var(--spacing-xl);

    overflow: hidden;

    background:
        var(--color-surface);

    border-bottom:
        1px solid
        var(--color-border);

    text-align: center;

}

/*
 * Halo decorativo detrás de la identidad de la organización.
 */
.ticket-header::before {

    content: none;

}

/*
 * Área institucional del logo.
 *
 * Permite mostrar logos:
 * - Circulares.
 * - Cuadrados.
 * - Horizontales.
 * - Verticales.
 *
 * No recorta ni deforma la imagen.
 */
.ticket-header .organization-logo-frame {

    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 180px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        var(--spacing-lg)
        auto
        0;

    padding: 0;

    overflow: visible;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

}

/*
 * Logo original de la organización.
 *
 * La imagen utiliza el espacio disponible sin:
 * - Recortes.
 * - Escalado artificial.
 * - Forma circular.
 * - Deformaciones.
 */
.ticket-header .organization-logo {

    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    clip-path: none;

    transform: none;

}

/*
 * Estado alternativo cuando una organización no posee logo.
 */
.organization-logo-frame--fallback {

    background:
        linear-gradient(
            145deg,
            var(--color-primary),
            var(--color-primary-hover)
        );

}

.organization-logo-fallback {

    color: #ffffff;

    font-size: 2rem;
    font-weight: 800;

    line-height: 1;

}

/*
 * Certificación tipográfica del registro oficial.
 *
 * No utiliza:
 * - Iconos.
 * - Fondo.
 * - Bordes.
 * - Sombras.
 * - Forma de alerta o botón.
 */
.ticket-verification-banner {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    width: 100%;

    margin:
        0
        auto
        28px;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

}

.ticket-verification-title {

    color: var(--color-success);

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-align: center;

}

.ticket-verification-description {

    color: var(--color-text-secondary);

    font-size: 0.86rem;

    font-weight: 500;

    text-align: center;

}

.ticket-verification-banner::after {

    content: "";

    width: 140px;

    height: 1px;

    margin-top: 18px;

    background: var(--color-border);

}

.ticket-raffle-title {

    position: relative;
    z-index: 1;

    margin:
        0
        0
        var(--spacing-xs);

    color: var(--color-text-primary);

    font-size:
        clamp(
            1.45rem,
            6vw,
            2rem
        );

    line-height: 1.2;

}

.ticket-organization-name {

    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--color-text-secondary);

    font-size: 0.95rem;
    font-weight: 600;

}

/* ==========================================================================
   TICKET INFORMATION SECTIONS
   ========================================================================== */

.ticket-section {

    display: grid;

    grid-template-columns:
        minmax(100px, 0.85fr)
        minmax(0, 1.4fr);

    gap: var(--spacing-md);

    padding:
        var(--spacing-md)
        var(--spacing-lg);

    border-bottom:
        1px solid
        var(--color-border);

}

.ticket-section h3 {

    margin: 0;

    color: var(--color-text-secondary);

    font-size: 0.88rem;
    font-weight: 600;

}

.ticket-section p {

    margin: 0;

    overflow-wrap: anywhere;

    color: var(--color-text-primary);

    font-size: 0.94rem;
    font-weight: 750;

    text-align: right;

    white-space: normal;

}

/*
 * Badge semántico del estado público del ticket.
 *
 * Las variantes representan exclusivamente los estados declarados
 * por el contrato público v1:
 *
 * - VALID
 * - CANCELLED
 * - VOIDED
 *
 * El estado desconocido funciona como protección visual ante un valor
 * no contemplado por el frontend.
 */
.ticket-status-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding:
        4px
        10px;

    border:
        1px solid
        transparent;

    border-radius: var(--radius-pill);

    font-size: 0.78rem;
    font-weight: 750;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

}

/*
 * Ticket vigente y reconocido por GoPlay.
 */
.ticket-status-badge--valid {

    color: var(--color-success);

    background:
        var(--color-success-background);

    border-color:
        rgba(6, 118, 71, 0.18);

}

/*
 * Ticket cancelado.
 *
 * Se utiliza advertencia porque el registro continúa existiendo,
 * pero ya no representa un ticket vigente.
 */
.ticket-status-badge--cancelled {

    color: var(--color-warning);

    background:
        var(--color-warning-background);

    border-color:
        rgba(181, 71, 8, 0.18);

}

/*
 * Ticket anulado.
 */
.ticket-status-badge--voided {

    color: var(--color-danger);

    background:
        var(--color-danger-background);

    border-color:
        rgba(180, 35, 24, 0.18);

}

/*
 * Protección visual ante valores no contemplados por el contrato conocido.
 */
.ticket-status-badge--unknown {

    color: var(--color-text-secondary);

    background:
        var(--color-surface-secondary);

    border-color:
        var(--color-border);

}

/*
 * Contenedor de los números oficiales incluidos en el ticket.
 *
 * Permite distribuir múltiples números de forma fluida y responsive
 * sin convertirlos en botones ni elementos interactivos.
 */
.ticket-numbers {

    min-width: 0;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-end;

    gap: var(--spacing-xs);

}

/*
 * Número individual del ticket.
 *
 * La apariencia es neutral porque en este punto no representa:
 * - Ganador.
 * - No ganador.
 * - Sorteo pendiente.
 */
.ticket-number-chip {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 58px;
    min-height: 34px;

    padding:
        6px
        12px;

    background:
        var(--color-primary-soft);

    border:
        1px solid
        rgba(29, 78, 216, 0.16);

    border-radius:
        var(--radius-small);

    color:
        var(--color-primary);

    font-size: 0.9rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.04em;

    text-align: center;

    white-space: nowrap;

}

/*
 * Estado visual cuando el contrato no contiene números.
 */
.ticket-numbers-empty {

    margin: 0;

    color:
        var(--color-text-secondary);

    font-size: 0.94rem;
    font-weight: 600;

    text-align: right;

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ticket-footer {

    padding:
        var(--spacing-lg);

    background: var(--color-surface-secondary);

    color: var(--color-text-secondary);

    text-align: center;

}

.ticket-footer small {

    font-size: 0.8rem;
    font-weight: 600;

}

/* ==========================================================================
   SYSTEM MESSAGE / NOSCRIPT
   ========================================================================== */

.system-message {

    width: calc(100% - 32px);
    max-width: 640px;

    margin:
        var(--spacing-xxl)
        auto;

    padding: var(--spacing-xl);

    background: var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-large);

    box-shadow: var(--shadow-card);

}

.system-message h1 {

    margin-top: 0;

}

.system-message p {

    color: var(--color-text-secondary);

}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.hidden {

    display: none !important;

}

.text-center {

    text-align: center !important;

}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 600px) {

    .ticket-view,
    .loading-view,
    .state-view {

        padding:
            var(--spacing-xxl)
            var(--spacing-lg);

    }

    .ticket-header {

        padding:
            40px
            var(--spacing-xl)
            var(--spacing-xl);

    }

    .ticket-section {

        padding:
            18px
            var(--spacing-xl);

    }

}

@media (max-width: 420px) {

    .ticket-view {

        padding:
            var(--spacing-sm);

    }

    .ticket-card {

    border-radius: 0;

    }

    .ticket-header {

        padding:
            var(--spacing-lg)
            var(--spacing-md);

    }

    /*
     * Área institucional del logo en pantallas pequeñas.
     *
     * Conserva:
     * - Proporción.
     * - Imagen completa.
     * - Ausencia de recorte.
     * - Ausencia de escalado artificial.
     */
    .ticket-header .organization-logo-frame {

        position: relative;
        z-index: 1;

        width: 100%;
        max-width: 200px;
        height: 104px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin:
            0
            auto
            var(--spacing-lg);

        padding: 0;

        overflow: visible;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;

    }

    .ticket-header .organization-logo {

        display: block;

        width: auto;
        height: auto;

        max-width: 100%;
        max-height: 100%;

        object-fit: contain;
        object-position: center;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        clip-path: none;

        transform: none;

    }

    /*
     * La certificación conserva en móvil la misma naturaleza tipográfica
     * aprobada para escritorio.
     */
    .ticket-verification-banner {

        max-width: 100%;

        gap: 4px;

        margin:
            0
            auto
            var(--spacing-lg);

        padding: 0;

        background: transparent;

        border: 0;

        border-radius: 0;

        box-shadow: none;

    }

    .ticket-verification-title {

        font-size: 0.84rem;

    }

    .ticket-verification-description {

        font-size: 0.76rem;

    }

    .ticket-raffle-title {

        font-size: 1.45rem;

    }

    .ticket-organization-name {

        font-size: 0.9rem;

    }

    .ticket-section {

        grid-template-columns: 1fr;

        gap: 4px;

        padding:
            var(--spacing-md);

    }

    .ticket-section p {

        text-align: left;

    }

    .ticket-numbers {

    justify-content: flex-start;

}

.ticket-numbers-empty {

    text-align: left;

}

    .loading-card,
    .state-card {

        padding:
            var(--spacing-xl)
            var(--spacing-lg);

    }

}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}