/* =============================================================
   MAIN.CSS — Estilos globales y variables de diseño
   Proyecto: Real del Monte — Herramienta Turística
   ============================================================= */

/* ---- Variables de diseño ---- */
:root {
    /* ═══ "THE ARTISANAL ARCHIVE" — Paleta de diseño ═══ */

    /* Jerarquía de superficies */
    --color-bg:            #fcf9f4;    /* surface — canvas base */
    --color-surface:       #f6f3ee;    /* surface-container-low */
    --color-surface-2:     #e5e2dd;    /* surface-container-highest */
    --color-surface-float: #ffffff;    /* surface-container-lowest — flotante */

    /* Marca → terracota */
    --color-primary:       #843823;    /* primary */
    --color-primary-light: #a34f38;    /* primary-container */

    /* Terciario — ámbar oscuro */
    --color-gold:          #6c4820;    /* tertiary */
    --color-gold-light:    #a34f38;    /* highlight cálido */

    /* Texto */
    --color-text:          #2c1a14;    /* on-surface cálido oscuro */
    --color-text-muted:    #54433c;    /* on-surface-variant */

    /* Bordes — Regla sin-línea: usar cambio tonal, no 1px sólido */
    --color-border:        rgba(135, 115, 107, 0.18); /* outline-variant suave */
    --color-outline:       #87736b;    /* outline — Bottom-Stroke inputs */

    /* Terciario expuesto */
    --color-tertiary:      #6c4820;

    /* Acento — teal (conservado del logotipo) */
    --color-accent:        #0091B0;

    /* Gaming */
    --color-xp:            #843823;    /* primary */
    --color-xp-bg:         #f3ece8;    /* tinte terracota suave */

    /* Fuentes */
    --font-display: 'Newsreader', 'Palatino Linotype', Palatino, serif;
    --font-body:    'Newsreader', Georgia, serif;
    --font-ui:      'Work Sans', system-ui, -apple-system, sans-serif;

    /* Espaciado */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  40px;

    /* Bordes rústicos */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;

    /* Sombras — ambiente cálido (24 px+, 6-10 % opacidad) */
    --shadow-sm: 0 2px 12px rgba(84, 67, 60, 0.06);
    --shadow-md: 0 4px 24px rgba(84, 67, 60, 0.08);
    --shadow-lg: 0 8px 40px rgba(84, 67, 60, 0.10);

    /* Navbar */
    --navbar-height: 56px;
    --points-bar-height: 44px;

    /* Transiciones */
    --transition-fast: 0.18s ease;
    --transition-mid:  0.3s ease;
}

/* ---- Reset y base ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    height: 100dvh;
    overflow: hidden; /* Sin scroll — todo cabe en pantalla */
    display: flex;
    flex-direction: column;
    /* Reservar espacio para navbar + points bar fijos */
    padding-top: calc(var(--navbar-height) + var(--points-bar-height));
}

/* Fondo con textura piedra simulada */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.main-content {
    position: relative;
    z-index: 1;
    flex: 1;          /* Ocupa todo el espacio vertical restante */
    overflow: hidden; /* Sin scroll interno */
    display: flex;
    flex-direction: column;
}

/* ---- Scrollbar personalizada ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* ---- Accesibilidad: foco visible ---- */
:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100% - 32px);
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-left: 4px solid var(--color-gold, #C4952B);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
    padding: 14px 16px;
    animation: toastIn .4s cubic-bezier(.22,1,.36,1) forwards;
    cursor: pointer;
    transition: opacity .3s, transform .3s;
}
.toast.toast--exit {
    animation: toastOut .35s ease forwards;
}
.toast__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.toast__body {
    flex: 1;
    min-width: 0;
}
.toast__title {
    font-weight: 600;
    font-size: .93rem;
    color: #1E0A0A;
    margin: 0 0 2px;
}
.toast__msg {
    font-size: .82rem;
    color: #555;
    margin: 0;
    line-height: 1.35;
}
.toast__close {
    background: none;
    border: none;
    font-size: 1.15rem;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.toast__close:hover { color: #333; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(40px) scale(.9); }
}

/* ---- Separador decorativo rústico ---- */
.divider-rustic {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    margin: var(--spacing-md) 0;
    opacity: 0.5;
}