/* ============================================================
   Tema Fiestas Patrias — decoración estacional (18 de septiembre)
   Interruptor: Configuración → Apariencia → Tema Fiestas Patrias
   Paleta: rojo #D52B1E · azul #0039A6 · crema #FAF7F0 · dorado #C9A227 · café #A9682E
   Solo agrega elementos decorativos nuevos (guirnalda, medalla de
   esquina en las cabeceras, insignia flotante, confeti) — no modifica
   colores, tipografías ni layout del resto del portal.
   ============================================================ */

:root {
    --fp-red:   #D52B1E;
    --fp-blue:  #0039A6;
    --fp-cream: #FAF7F0;
    --fp-gold:  #C9A227;
    --fp-brown: #A9682E;
}

/* ── Guirnalda de banderines de papel picado — "la entrada de la ramada" ── */
.fp-bunting {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 10px 4px 14px;
    background: linear-gradient(180deg, #0d1f3d 0%, rgba(13, 31, 61, 0) 100%);
    overflow: hidden;
    /* absolute (no relative): en el login el layout de dos columnas usa
       100vh — si la guirnalda queda en flujo normal empuja ese layout hacia
       abajo y corta contenido. Como overlay no le suma alto a la página. */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Cordel del que cuelgan los banderines */
.fp-bunting::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--fp-brown) 0, var(--fp-brown) 9px,
        transparent 9px, transparent 13px
    );
    opacity: .55;
    border-radius: 2px;
}

.fp-flag {
    width: 26px;
    height: 30px;
    flex-shrink: 0;
    transform-origin: top center;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
    /* Silueta triangular con calados redondos + rombo, estilo papel picado */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M0 0H44L22 52Z' fill='white'/%3E%3Ccircle cx='13' cy='13' r='3.4' fill='black'/%3E%3Ccircle cx='31' cy='13' r='3.4' fill='black'/%3E%3Ccircle cx='22' cy='24' r='3.4' fill='black'/%3E%3Cpath d='M22 31l4.5 5.5-4.5 5.5-4.5-5.5Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 52'%3E%3Cpath d='M0 0H44L22 52Z' fill='white'/%3E%3Ccircle cx='13' cy='13' r='3.4' fill='black'/%3E%3Ccircle cx='31' cy='13' r='3.4' fill='black'/%3E%3Ccircle cx='22' cy='24' r='3.4' fill='black'/%3E%3Cpath d='M22 31l4.5 5.5-4.5 5.5-4.5-5.5Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fp-flag:nth-child(3n+1) { background: var(--fp-red); }
.fp-flag:nth-child(3n+2) { background: var(--fp-cream); }
.fp-flag:nth-child(3n)   { background: var(--fp-blue); }

@media (prefers-reduced-motion: no-preference) {
    .fp-flag {
        animation: fp-sway 3.2s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * .12s);
    }
}

@keyframes fp-sway {
    0%, 100% { transform: rotate(calc(var(--base-rot, 0deg) - 5deg)); }
    50%      { transform: rotate(calc(var(--base-rot, 0deg) + 5deg)); }
}

/* ── Medalla de ramada en las cabeceras existentes ───────────── */
/* .dh-banner-outer ya es una clase compartida por todas las cabeceras
   hero del portal (dashboard, grupo, dato fantasy, trivias, ranking),
   así que esta medalla aparece en todas las vistas sin tocar plantillas.
   Se inyecta como elemento real (JS), NO como ::after: .dh-banner ya usa
   tanto ::before como ::after para sus propios brillos decorativos
   (frontend-complete.css) — reusar cualquiera de los dos pseudo-elementos
   mezcla ambas reglas en una sola caja y rompe el tamaño/posición. */
.dh-banner-outer {
    position: relative;
}

.fp-hero-medal {
    /* "18" en texto plano + bandera y empanada dibujadas en SVG propio: nunca
       depende de que el sistema del visitante tenga esos glifos de emoji
       (la bandera 🇨🇱 en particular es una secuencia de "regional indicators"
       que varios sistemas — Windows sobre todo — no combinan y muestran como
       casilleros en blanco). */
    /* .dh-banner-outer tiene overflow:hidden (lo usa para sus propios
       adornos internos), así que la medalla debe quedar DENTRO del borde,
       no colgando por fuera (se recortaría). */
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 13px;
    font-weight: 800;
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
    line-height: 1;
    color: #3a2a12;
    text-align: center;
    white-space: nowrap;
    background-color: var(--fp-cream);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='white'/%3E%3Crect y='10' width='30' height='10' fill='%23D52B1E'/%3E%3Crect width='12' height='10' fill='%230039A6'/%3E%3Cpolygon points='6,2 7,4.8 10,4.8 7.6,6.5 8.5,9.3 6,7.6 3.5,9.3 4.4,6.5 2,4.8 5,4.8' fill='white'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 17 Q3 4 20 4 Q37 4 37 17 Q37 21 33.5 21 Q30.5 17.5 27.5 21 Q24.5 17.5 21.5 21 Q18.5 17.5 15.5 21 Q12.5 17.5 9.5 21 Q6.5 21 3 17 Z' fill='%23D9A441' stroke='%23A9682E' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 10px center, calc(100% - 8px) center;
    background-size: 17px 11px, 15px 11px;
    border: 2px dashed var(--fp-gold);
    border-radius: 100px;
    padding: 8px 34px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    transform: rotate(-4deg);
    pointer-events: none;
    z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .fp-hero-medal {
        animation: fp-idle-float 3.6s ease-in-out infinite;
    }
}

@keyframes fp-idle-float {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(-4deg) translateY(-4px); }
}

/* ── Insignia flotante "¡Viva Chile!" — medalla con cinta ────── */
.fp-badge {
    position: fixed;
    right: 20px;
    bottom: 22px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* Bandera dibujada en SVG propio, no emoji: 🇨🇱 es una secuencia de
       "regional indicators" que varios sistemas (Windows en particular) no
       combinan y muestran como casilleros en blanco.
       Orden importa: en background-image con varias capas, la PRIMERA se
       pinta encima — la bandera va primero para que no quede tapada por
       el degradado de fondo. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='white'/%3E%3Crect y='10' width='30' height='10' fill='%23D52B1E'/%3E%3Crect width='12' height='10' fill='%230039A6'/%3E%3Cpolygon points='6,2 7,4.8 10,4.8 7.6,6.5 8.5,9.3 6,7.6 3.5,9.3 4.4,6.5 2,4.8 5,4.8' fill='white'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--fp-red), var(--fp-blue));
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 27px 18px, cover;
    border: 3px solid var(--fp-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    cursor: pointer;
    z-index: 9999;
    user-select: none;
    transition: opacity .2s;
}

.fp-badge.fp-badge--muted {
    opacity: .55;
}

/* Cinta de medalla colgando debajo del círculo */
.fp-badge::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 16px;
    background: linear-gradient(90deg, var(--fp-red) 50%, var(--fp-blue) 50%);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}

.fp-badge:focus-visible {
    outline: 2px solid var(--fp-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .fp-badge {
        animation: fp-pulse 3s ease-in-out infinite;
    }

    .fp-badge:hover,
    .fp-badge:focus-visible {
        animation: fp-wobble .5s ease-in-out;
    }
}

@keyframes fp-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes fp-wobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-10deg); }
    75%      { transform: rotate(10deg); }
}

.fp-badge::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 64px;
    right: 0;
    background: #1a2744;
    color: #fff;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s, transform .18s;
    pointer-events: none;
}

.fp-badge:hover::before,
.fp-badge:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

/* ── Confeti de bienvenida (una sola vez al cargar) ──────────── */
.fp-confetti-piece {
    position: fixed;
    top: -12px;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 9998;
    opacity: .9;
}

.fp-confetti-piece.fp-c-diamond {
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.fp-confetti-piece.fp-c-star {
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
}

.fp-confetti-piece.fp-c-circle {
    border-radius: 50%;
}

@keyframes fp-fall {
    0%   { transform: translate(0, 0)      rotate(0deg);   opacity: .95; }
    25%  { transform: translate(10px, 25vh) rotate(90deg);  }
    50%  { transform: translate(-10px, 50vh) rotate(180deg); }
    75%  { transform: translate(10px, 75vh) rotate(270deg); }
    100% { transform: translate(0, 105vh)   rotate(360deg); opacity: 0; }
}

/* ── Responsive: en pantallas angostas el menú hamburguesa vive en la
   misma esquina superior derecha de la cabecera — la medalla choca con
   él, así que se oculta ahí y la guirnalda + insignia + confeti quedan
   igual. ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .fp-hero-medal {
        display: none;
    }
}

@media (max-width: 480px) {
    .fp-flag {
        width: 19px;
        height: 22px;
    }

    .fp-badge {
        width: 44px;
        height: 44px;
        right: 14px;
        bottom: 14px;
        background-size: 23px 15px, cover;
    }
}