/*
 * global.css — Estilos Globales del Sistema de Citas
 * Pop-Up Store Pokémon GO · Ciudad de México
 *
 * Marca basada en pokemongo.com/es:
 *   - Paleta de azul Pokémon GO (#0061af) + dark navy gaming
 *   - Tipografía: Nunito (equivalente al custom font del sitio oficial)
 *   - Estilo botones: pill (border-radius: 999px) igual al "white-pill" del sitio
 *   - Fondo oscuro inmersivo con aurora radial azul
 *
 * Incluye: variables de marca, reset, shell de app, app bar/footer,
 * tarjetas de sección, campos de formulario, botones, badges de cupos,
 * avisos, divisores y utilidades de espaciado.
 *
 * TODAS las páginas deben enlazar este archivo antes de su propio CSS.
 * Los estilos específicos de página van en un archivo CSS separado
 * (ej. index.css, nueva_cita.css, etc.).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. VARIABLES DE MARCA (pokemongo.com/es)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Colores primarios del sitio oficial */
    --pgo-azul:          #0061af;   /* azul Pokémon GO — extraído de botones SVG del sitio */
    --pgo-azul-hover:    #004e8c;
    --pgo-azul-claro:    #1a8fe8;   /* highlight cielo azul */
    --pgo-amarillo:      #f5c518;   /* amarillo Pikachu */
    --pgo-rojo:          #cc0000;   /* rojo Poké Ball */

    /* Fondos — estilo gaming oscuro del sitio oficial */
    --fondo-app:         #0d1117;   /* fondo exterior muy oscuro (detrás del shell) */
    --fondo-shell:       #111827;   /* fondo del contenedor de la app */
    --fondo-card:        #1c2433;   /* fondo de tarjetas/secciones */
    --fondo-card-hover:  #243044;
    --fondo-input:       #0d1521;   /* fondo de inputs y seleccionables */

    /* Texto */
    --texto-primario:    #f0f4ff;
    --texto-secundario:  #8fa3c0;
    --texto-muted:       #556680;

    /* Bordes */
    --borde:             rgba(255, 255, 255, 0.08);
    --borde-activo:      #0061af;

    /* Colores de estado */
    --color-exito:       #22c55e;
    --color-exito-bg:    rgba(34, 197, 94, 0.12);
    --color-alerta:      #f59e0b;
    --color-alerta-bg:   rgba(245, 158, 11, 0.12);
    --color-peligro:     #ef4444;
    --color-peligro-bg:  rgba(239, 68, 68, 0.12);

    /* Radios de borde */
    --radio-lg:   16px;
    --radio-md:   10px;
    --radio-sm:   6px;
    --radio-pill: 999px;

    /* Safe Areas (Capacitor / iOS notch) */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OCULTAR BARRA DE DESPLAZAMIENTO (Scroll nativo fluido sin barra visual)
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE y Edge clásico */
}

::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, Edge, WebViews */
    width: 0;
    height: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BODY & FONDO GLOBAL
   Aurora radial azul en la parte superior — estilo pokemongo.com
   ═══════════════════════════════════════════════════════════════════════════ */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--fondo-app);
    color: var(--texto-primario);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    background-image:
        radial-gradient(ellipse 120% 60% at 50% -10%, rgba(0, 97, 175, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 80% 110%, rgba(26, 143, 232, 0.15) 0%, transparent 60%);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. APP SHELL — Contenedor mobile estricto (Capacitor Ready)
   max-width 480px, centrado, padding de safe areas
   ═══════════════════════════════════════════════════════════════════════════ */
.app-shell {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--fondo-shell);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. APP BAR — Barra de navegación superior
   ═══════════════════════════════════════════════════════════════════════════ */
.app-bar {
    height: 56px;
    background-color: var(--fondo-card);
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-bar-titulo {
    font-size: 1rem;
    font-weight: 800;
    color: var(--texto-primario);
}

.btn-regresar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 97, 175, 0.12);
    border: 1.5px solid rgba(0, 97, 175, 0.35);
    color: #7ec8ff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: var(--radio-pill);
    min-height: 36px;
    min-width: 44px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s;
    white-space: nowrap;
}

.btn-regresar:active {
    background: rgba(0, 97, 175, 0.25);
    border-color: rgba(0, 97, 175, 0.55);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CONTENIDO PRINCIPAL
   ═══════════════════════════════════════════════════════════════════════════ */
.app-content {
    flex: 1;
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. TARJETAS DE SECCIÓN
   ═══════════════════════════════════════════════════════════════════════════ */
.seccion-card {
    background: var(--fondo-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
}

.seccion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--borde);
}

.icono-header {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.icono-azul  { background: rgba(0, 97, 175, 0.25); }
.icono-verde { background: rgba(34, 197, 94, 0.20); }
.icono-rojo  { background: rgba(204, 0, 0, 0.20); }
.icono-amarillo { background: rgba(245, 197, 24, 0.20); }

.seccion-header-textos h2 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--texto-primario);
    line-height: 1.2;
}

.seccion-header-textos p {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--texto-secundario);
    margin-top: 1px;
}

.seccion-body {
    padding: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. CAMPOS DE FORMULARIO
   ═══════════════════════════════════════════════════════════════════════════ */
.campo {
    margin-bottom: 14px;
}

.campo:last-child {
    margin-bottom: 0;
}

.campo label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select,
.campo textarea {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    background: var(--fondo-input);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-md);
    color: var(--texto-primario);
    transition: border-color 0.2s;
    appearance: none;
}

.campo textarea {
    height: auto;
    min-height: 90px;
    padding: 12px 14px;
    resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--pgo-azul);
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--texto-muted);
    font-weight: 600;
}

/* Radio/checkbox ocultos para selectores visuales personalizados */
.radio-oculto {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. BOTONES
   Estilo pill — basado en "variant:white-pill" de pokemongo.com
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: var(--pgo-azul);
    color: #ffffff;
    border: none;
    border-radius: var(--radio-pill);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.18s;
    box-shadow: 0 4px 20px rgba(0, 97, 175, 0.4);
    min-height: 44px;
}

.btn-principal:active {
    background: var(--pgo-azul-hover);
}

/* Variante outline/ghost */
.btn-secundario {
    background: rgba(0, 97, 175, 0.15);
    border: 1.5px solid rgba(0, 97, 175, 0.4);
    color: #7ec8ff;
    box-shadow: none;
}

.btn-secundario:active {
    background: rgba(0, 97, 175, 0.25);
}

/* Variante peligro/destructivo */
.btn-peligro {
    background: rgba(204, 0, 0, 0.15);
    border: 1.5px solid rgba(204, 0, 0, 0.4);
    color: #ff8080;
    box-shadow: none;
}

.btn-peligro:active {
    background: rgba(204, 0, 0, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. BADGES / ETIQUETAS DE ESTADO (cupos, disponibilidad)
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--radio-pill);
    white-space: nowrap;
}

.cupos-ok    { color: var(--color-exito);   background: var(--color-exito-bg); }
.cupos-bajo  { color: var(--color-alerta);  background: var(--color-alerta-bg); }
.cupos-lleno { color: var(--color-peligro); background: var(--color-peligro-bg); }


/* ═══════════════════════════════════════════════════════════════════════════
   11. AVISOS / BANNERS
   ═══════════════════════════════════════════════════════════════════════════ */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radio-md);
    font-size: 0.82rem;
    line-height: 1.4;
}

.aviso .aviso-icono {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.aviso-amarillo {
    background: rgba(245, 197, 24, 0.08);
    border: 1px solid rgba(245, 197, 24, 0.25);
    color: #f5c518;
}

.aviso-azul {
    background: rgba(0, 97, 175, 0.10);
    border: 1px solid rgba(0, 97, 175, 0.30);
    color: #7ec8ff;
}

.aviso-exito {
    background: var(--color-exito-bg);
    border: 1px solid rgba(34, 197, 94, 0.30);
    color: var(--color-exito);
}

.aviso-error {
    background: var(--color-peligro-bg);
    border: 1px solid rgba(239, 68, 68, 0.30);
    color: var(--color-peligro);
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. DIVISOR con texto central
   ═══════════════════════════════════════════════════════════════════════════ */
.divisor {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.divisor::before,
.divisor::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--borde);
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.app-footer {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--borde);
}

.app-footer p {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--texto-muted);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. TEXTO DE INSTRUCCIÓN / AYUDA
   ═══════════════════════════════════════════════════════════════════════════ */
.instruccion {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--texto-muted);
    text-align: center;
    padding: 0 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. UTILIDADES DE ESPACIADO
   ═══════════════════════════════════════════════════════════════════════════ */
.mt-6  { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }


/* ═══════════════════════════════════════════════════════════════════════════
   16. DIÁLOGO DE CONFIRMACIÓN PERSONALIZADO (PGODialog)
   Activado por js/dialog.js — compartido en todas las páginas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overlay de fondo que cubre toda la pantalla */
.pgo-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(13, 17, 23, 0.80);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.pgo-dialog-overlay.pgo-dialog-visible {
    display: flex;
    animation: pgoDialogFadeIn 0.18s ease;
}

@keyframes pgoDialogFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Tarjeta del diálogo */
.pgo-dialog-card {
    background: var(--fondo-card);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60);
    animation: pgoDialogSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pgoDialogSlideIn {
    from { transform: translateY(14px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.pgo-dialog-icono {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 2px;
}

.pgo-dialog-titulo {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--texto-primario);
    text-align: center;
    margin: 0;
}

.pgo-dialog-mensaje {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-secundario);
    text-align: center;
    line-height: 1.5;
    margin: 4px 0 8px;
}

.pgo-dialog-botones {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

/* Heredan estilos de btn-principal desde global — solo ajustes de tamaño */
.pgo-dialog-botones .btn-principal {
    flex: 1;
    padding: 13px 8px;
    font-size: 0.88rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Soporte de cuerpo extra (QR, código de cita, elementos visuales) */
.pgo-dialog-top-extra,
.pgo-dialog-extra {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
}

.pgo-dialog-codigo-box {
    background: var(--fondo-input);
    border: 1.5px dashed var(--pgo-azul-claro);
    border-radius: var(--radio-md);
    padding: 8px 14px;
    text-align: center;
    width: 100%;
}

.pgo-dialog-codigo-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
}

.pgo-dialog-codigo-valor {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pgo-amarillo);
    letter-spacing: 0.08em;
    font-family: monospace, 'Nunito', sans-serif;
}

.pgo-dialog-qr-box {
    background: #ffffff;
    padding: 8px;
    border-radius: var(--radio-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
}

.pgo-dialog-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pgo-dialog-botones.pgo-dialog-botones-solo {
    justify-content: center;
}

.pgo-dialog-botones.pgo-dialog-botones-solo .btn-principal {
    width: 100%;
    flex: 1;
}