/* =========================================================================
   FIGURITAS NECOCHEA / QUEQUEN — Mundial 2026
   Direccion visual: print poster + sticker album. Mosaico de medias-lunas
   inspirado en la portada oficial de Panini WC 2026.
   ========================================================================= */

:root {
    /* Paleta directa de la portada Panini WC 2026 */
    --rojo:       #E41B23;
    --rojo-deep:  #B81017;
    --azul:       #1E50C8;
    --azul-deep:  #143A98;
    --turquesa:   #0EAE9E;
    --verde:      #3CB44B;
    --naranja:    #F77F1C;
    --amarillo:   #FFD400;
    --dorado:     #D4A93B;

    --crema:      #F5EBD2;
    --crema-2:    #EFE2C0;
    --papel:      #FBF5E4;
    --tinta:      #0E0E10;
    --grafito:    #2A2A2E;
    --humo:       #6E6A60;

    /* Sombras "print" con desplazamiento marcado */
    --sombra-sticker: 4px 4px 0 var(--tinta);
    --sombra-soft:    0 10px 30px -10px rgba(14,14,16,0.25);
    --sombra-hover:   6px 6px 0 var(--tinta);

    --radio:      14px;
    --radio-sm:   8px;
    --radio-lg:   22px;

    --maxw:       1180px;

    --ff-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --ff-numeral: "Bowlby One", "Impact", sans-serif;
    --ff-body:    "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-body);
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Textura de papel sutil sobre el body */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(228,27,35,0.05) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(30,80,200,0.05) 0, transparent 40%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0.07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
    background-size: 100% 100%, 100% 100%, 180px 180px;
}

::selection { background: var(--amarillo); color: var(--tinta); }

a {
    color: var(--azul);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--amarillo);
    transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover { color: var(--rojo); text-decoration-color: var(--rojo); }

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 18px;
}

/* === HEADINGS === */
h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 900;
    color: var(--tinta);
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

p { margin: 0 0 12px; }

code {
    font-family: "JetBrains Mono", "Consolas", monospace;
    background: var(--crema);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
}

/* =========================================================================
   TOPBAR
   ========================================================================= */
.topbar {
    background: var(--rojo);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 4px solid var(--tinta);
    box-shadow: 0 6px 0 -2px var(--amarillo), 0 12px 0 -2px var(--azul);
}
.topbar::before {
    content: "";
    display: block;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        var(--amarillo) 0 22px,
        var(--azul)     22px 44px,
        var(--verde)    44px 66px,
        var(--naranja)  66px 88px,
        var(--turquesa) 88px 110px,
        var(--rojo)     110px 132px
    );
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 12px;
}
.logo {
    color: #fff;
    text-decoration: none;
    font-family: var(--ff-numeral);
    font-size: 1.35em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none !important;
}
.logo::before {
    content: "26";
    background: var(--amarillo);
    color: var(--tinta);
    padding: 4px 8px 2px;
    border: 2px solid var(--tinta);
    border-radius: 6px;
    font-size: 0.85em;
    box-shadow: 2px 2px 0 var(--tinta);
}
.logo:hover { color: #fff; }

.tag-barrio {
    display: none;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.78em;
    background: var(--tinta);
    color: var(--amarillo);
    padding: 5px 10px 3px;
    border-radius: 4px;
    border: 2px solid var(--amarillo);
}
@media (min-width: 720px) {
    .tag-barrio { display: inline-block; }
}

/* === NAV === */
.nav { position: relative; }
.nav-toggle { display: none; }
.nav-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 3px;
    background: #fff;
    transition: transform 0.2s;
}
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-list {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    background: var(--tinta);
    list-style: none;
    margin: 0;
    padding: 8px;
    min-width: 220px;
    border: 3px solid var(--amarillo);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--azul);
}
.nav-toggle:checked ~ .nav-list { display: block; }
.nav-list li { padding: 0; }
.nav-list a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.05em;
    transition: background 0.15s, color 0.15s;
}
.nav-list a:hover { background: var(--amarillo); color: var(--tinta); }
.btn-primary-sm {
    background: var(--amarillo) !important;
    color: var(--tinta) !important;
}
.btn-primary-sm:hover { background: #fff !important; }
.btn-logout { color: #ffb8b8 !important; }
.btn-logout:hover { background: var(--rojo-deep) !important; color: #fff !important; }

@media (min-width: 860px) {
    .nav-burger { display: none; }
    .nav-list {
        display: flex !important;
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: 4px;
        min-width: 0;
    }
    .nav-list a {
        font-size: 0.95em;
        padding: 9px 12px;
        border-radius: 8px;
        color: #fff;
    }
    .nav-list a:hover { background: var(--tinta); color: var(--amarillo); }
    .btn-primary-sm:hover { background: #fff !important; color: var(--rojo) !important; }
}

/* =========================================================================
   MAIN
   ========================================================================= */
main {
    padding: 28px 0 80px;
    min-height: calc(100vh - 220px);
}
main.wrap { padding-left: 18px; padding-right: 18px; }

/* =========================================================================
   FLASH messages (estilo "sello postal")
   ========================================================================= */
.flash {
    padding: 14px 18px;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    margin-bottom: 18px;
    font-weight: 600;
    box-shadow: var(--sombra-sticker);
    position: relative;
    background: #fff;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.flash::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid var(--tinta);
    margin-top: 1px;
}
.flash-exito { background: #C6F2C9; }
.flash-exito::before { background: var(--verde); }
.flash-error { background: #FFD8D5; }
.flash-error::before { background: var(--rojo); }
.flash-info { background: #FFF6BF; }
.flash-info::before { background: var(--amarillo); }

/* =========================================================================
   HERO (home) — sobre Panini abriendose + 3 figuritas volando
   Layout 2 columnas en desktop, stack centrado en mobile.
   ========================================================================= */
.hero {
    position: relative;
    background: var(--azul);
    color: #fff;
    border: 4px solid var(--tinta);
    border-radius: var(--radio-lg);
    padding: 34px 22px 32px;
    margin-bottom: 28px;
    overflow: hidden;
    box-shadow: 8px 8px 0 var(--tinta);
    isolation: isolate;
}
/* Mosaico de medias-lunas, flotando lento */
.hero::before {
    content: "";
    position: absolute;
    inset: -8%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g><circle cx='100' cy='100' r='80' fill='%23E41B23'/><path d='M100 20 A80 80 0 0 1 100 180 Z' fill='%23FFD400'/><circle cx='300' cy='100' r='80' fill='%230EAE9E'/><path d='M300 20 A80 80 0 0 1 300 180 Z' fill='%23F77F1C'/><circle cx='100' cy='300' r='80' fill='%233CB44B'/><path d='M20 300 A80 80 0 0 1 180 300 Z' fill='%23FFD400'/><circle cx='300' cy='300' r='80' fill='%23F77F1C'/><path d='M220 300 A80 80 0 0 1 380 300 Z' fill='%23E41B23'/></g></svg>");
    background-size: 280px 280px;
    background-position: center;
    opacity: 0.88;
    z-index: 0;
    animation: heroBgFloat 28s ease-in-out infinite alternate;
}
@keyframes heroBgFloat {
    from { transform: translate(0, 0); }
    to   { transform: translate(-22px, -16px); }
}
/* Overlay: oscurece el lado del texto, deja el lado del arte luminoso */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg, rgba(20,58,152,0.78) 0%, rgba(20,58,152,0.42) 40%, rgba(30,80,200,0.04) 70%),
        radial-gradient(circle at 75% 50%, rgba(255,212,0,0.16) 0%, transparent 55%),
        radial-gradient(ellipse at center, transparent 0%, var(--azul-deep) 130%);
    z-index: 1;
}
@media (max-width: 819px) {
    .hero::after {
        background:
            linear-gradient(180deg, rgba(20,58,152,0.10) 0%, rgba(20,58,152,0.62) 48%, rgba(20,58,152,0.88) 100%),
            radial-gradient(ellipse at center, transparent 0%, var(--azul-deep) 140%);
    }
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
}
.hero-content { text-align: center; order: 2; }
.hero-art {
    order: 1;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 320px;
}
@media (min-width: 820px) {
    .hero { padding: 54px 42px 50px; }
    .hero-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 38px;
    }
    .hero-content { text-align: left; order: 1; }
    .hero-art    { order: 2; max-width: 100%; }
}

/* Kicker / etiqueta superior */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--tinta);
    color: var(--amarillo);
    padding: 7px 14px 5px;
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8em;
    border-radius: 4px;
    border: 2px solid var(--amarillo);
    box-shadow: 3px 3px 0 var(--rojo);
    margin-bottom: 16px;
    animation: heroIn 0.6s 0.05s cubic-bezier(.2,.7,.2,1) both;
}
.hero-kicker::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--amarillo);
    box-shadow: 0 0 0 2px var(--tinta);
    animation: kickerBlink 1.8s ease-in-out infinite;
}
@keyframes kickerBlink {
    0%, 65%, 100% { opacity: 1; }
    75%           { opacity: 0.25; }
}

/* Titulo principal — dominante */
.hero-title {
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.86;
    letter-spacing: -0.02em;
    font-size: clamp(2.7rem, 9.5vw, 5.4rem);
    color: #fff;
    margin: 0 0 18px;
    text-shadow:
        4px 4px 0 var(--tinta),
        -2px 0 0 var(--tinta),
        0 -2px 0 var(--tinta),
        2px 0 0 var(--tinta),
        0 2px 0 var(--tinta);
    animation: heroIn 0.75s 0.15s cubic-bezier(.2,.7,.2,1) both;
}
.hero-title span { display: block; }
.hero-title span:nth-child(2) { color: var(--amarillo); }

/* Subtitulo — alto contraste, con highlight tipo marcador en strong */
.hero-lead {
    color: #fff;
    font-size: clamp(1.04rem, 1.6vw, 1.18rem);
    font-weight: 600;
    line-height: 1.45;
    max-width: 540px;
    margin: 0 auto 12px;
    text-shadow: 0 2px 0 rgba(14,14,16,0.35);
    animation: heroIn 0.7s 0.25s cubic-bezier(.2,.7,.2,1) both;
}
.hero-lead strong {
    color: var(--tinta);
    background: var(--amarillo);
    padding: 1px 7px;
    border-radius: 4px;
    font-weight: 800;
    box-shadow: 2px 2px 0 var(--tinta);
    display: inline-block;
    line-height: 1.2;
}

/* Bajada secundaria, mas chica pero legible */
.hero-note {
    color: #FFE9A8;
    font-size: 0.96em;
    font-weight: 500;
    line-height: 1.5;
    max-width: 540px;
    margin: 0 auto 22px;
    text-shadow: 0 1px 0 rgba(14,14,16,0.3);
    animation: heroIn 0.7s 0.35s cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 820px) {
    .hero-lead, .hero-note { margin-left: 0; margin-right: 0; }
}

/* CTAs del hero */
.hero-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    animation: heroIn 0.7s 0.45s cubic-bezier(.2,.7,.2,1) both;
}
@media (min-width: 820px) {
    .hero-cta { justify-content: flex-start; }
}

/* Boton outline blanco para fondos oscuros */
.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 2.5px solid #fff;
    box-shadow: 3px 3px 0 var(--tinta);
}
.btn-outline-light:hover {
    background: #fff;
    color: var(--azul-deep);
}

/* === Arte: sobre Panini + stickers === */
.hero-art .pack-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 14px 26px rgba(14,14,16,0.35));
    animation: heroIn 0.8s 0.4s cubic-bezier(.2,.7,.2,1) both;
}
.pack-svg .halo  { animation: haloPulse 5s ease-in-out infinite; }
@keyframes haloPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.9; }
}
.pack-svg .pack-bob,
.pack-svg .sticker-bob { will-change: transform; }
.pack-svg .pack-bob              { animation: bob 4.4s ease-in-out infinite; }
.pack-svg .s-left   .sticker-bob { animation: bob 4.0s ease-in-out -0.6s infinite; }
.pack-svg .s-center .sticker-bob { animation: bob 3.6s ease-in-out -0.2s infinite; }
.pack-svg .s-right  .sticker-bob { animation: bob 4.2s ease-in-out -1.0s infinite; }
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
/* Hover: el sobre se eleva, los stickers se abren mas */
.hero-art:hover .pack-svg .pack-bob               { transform: translateY(-4px); transition: transform 0.35s; animation-play-state: paused; }
.hero-art:hover .pack-svg .s-left   .sticker-bob  { transform: translate(-6px,-12px); transition: transform 0.35s; animation-play-state: paused; }
.hero-art:hover .pack-svg .s-center .sticker-bob  { transform: translateY(-16px); transition: transform 0.35s; animation-play-state: paused; }
.hero-art:hover .pack-svg .s-right  .sticker-bob  { transform: translate(6px,-12px); transition: transform 0.35s; animation-play-state: paused; }

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

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero-kicker, .hero-kicker::before,
    .hero-title, .hero-lead, .hero-note, .hero-cta,
    .hero-art .pack-svg,
    .pack-svg .halo,
    .pack-svg .pack-bob, .pack-svg .sticker-bob {
        animation: none !important;
    }
}

/* Pantallas muy chicas: ajustar paddings y tamanos */
@media (max-width: 420px) {
    .hero { padding: 26px 16px 28px; border-width: 3px; box-shadow: 5px 5px 0 var(--tinta); }
    .hero-title { font-size: clamp(2.1rem, 11vw, 3rem); }
    .hero-art   { max-width: 270px; }
    .hero-kicker { font-size: 0.74em; padding: 6px 12px 4px; }
}

/* =========================================================================
   PASOS (cards numeradas)
   ========================================================================= */
.pasos {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin: 28px 0;
}
.paso {
    background: #fff;
    padding: 28px 22px 22px;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.paso:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-hover); }
.paso .numero {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--amarillo);
    border: 3px solid var(--tinta);
    color: var(--tinta);
    font-family: var(--ff-numeral);
    font-size: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 3px 3px 0 var(--tinta);
    line-height: 1;
}
.paso:nth-child(2) .numero { background: var(--turquesa); }
.paso:nth-child(3) .numero { background: var(--rojo); color: #fff; }
.paso h3 { text-align: center; margin-bottom: 8px; }
.paso p { text-align: center; color: var(--grafito); }

@media (min-width: 720px) {
    .pasos { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   CARDS genericas
   ========================================================================= */
.card {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 22px;
    box-shadow: var(--sombra-sticker);
    margin-bottom: 18px;
}
.card h2:first-child { margin-top: 0; }

/* =========================================================================
   FORM
   ========================================================================= */
.form {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 26px;
    box-shadow: var(--sombra-sticker);
}
.form h1 { text-align: center; margin-bottom: 18px; }
.form .campo { margin-bottom: 16px; }
.form label {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.88em;
    margin-bottom: 6px;
    color: var(--tinta);
}
.form input[type=text],
.form input[type=email],
.form input[type=password],
.form input[type=tel],
.form input[type=number],
.form input[type=time],
.form input[type=date],
.form input[type=file],
.form select,
.form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    font-size: 1em;
    background: var(--papel);
    font-family: inherit;
    color: var(--tinta);
    transition: background 0.15s, box-shadow 0.15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    background: #fff;
    box-shadow: 4px 4px 0 var(--amarillo);
}
.form .ayuda {
    font-size: 0.86em;
    color: var(--humo);
    margin-top: 6px;
}
.form input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--rojo);
    vertical-align: middle;
    margin-right: 6px;
}

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn {
    display: inline-block;
    background: var(--tinta);
    color: #fff;
    border: 2.5px solid var(--tinta);
    padding: 12px 22px;
    border-radius: var(--radio-sm);
    font-size: 0.98em;
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 3px 3px 0 var(--tinta);
    transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
    line-height: 1.1;
}
.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--tinta);
    color: #fff;
}
.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--tinta);
}
.btn-amarillo {
    background: var(--amarillo);
    color: var(--tinta);
}
.btn-amarillo:hover { background: #FFE54D; color: var(--tinta); }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { background: var(--rojo-deep); color: #fff; }
.btn-verde { background: var(--verde); color: #fff; }
.btn-verde:hover { background: #2E9A3C; color: #fff; }
.btn-secundario {
    background: #fff;
    color: var(--tinta);
}
.btn-secundario:hover { background: var(--crema); color: var(--tinta); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 7px 14px; font-size: 0.85em; box-shadow: 2px 2px 0 var(--tinta); }
.btn-sm:hover { box-shadow: 3px 3px 0 var(--tinta); }

/* =========================================================================
   ALBUM
   ========================================================================= */
.album-filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: #fff;
    padding: 14px;
    border-radius: var(--radio);
    border: 3px solid var(--tinta);
    box-shadow: var(--sombra-sticker);
    position: sticky;
    top: 78px;
    z-index: 50;
    align-items: center;
}
.album-filtros select,
.album-filtros input[type=text] {
    padding: 8px 12px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    font-size: 0.95em;
    background: var(--papel);
    font-family: inherit;
    color: var(--tinta);
}
.album-filtros .resumen {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.album-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.fig {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 12px 10px 10px;
    text-align: center;
    font-size: 0.88em;
    box-shadow: var(--sombra-sticker);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    position: relative;
    overflow: hidden;
}
.fig::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 6px;
    background: repeating-linear-gradient(90deg, transparent 0 8px, var(--tinta) 8px 10px);
    opacity: 0.4;
}
.fig:hover {
    transform: rotate(-1deg) translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--tinta);
}
.fig.estado-tengo {
    background: #DCFCE4;
}
.fig.estado-tengo::after {
    content: "OK";
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--verde);
    color: #fff;
    font-family: var(--ff-numeral);
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 50%;
    border: 2px solid var(--tinta);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.fig.estado-repetida {
    background: #FFF6BF;
}
.fig.estado-repetida::after {
    content: "x2";
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--amarillo);
    color: var(--tinta);
    font-family: var(--ff-numeral);
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 50%;
    border: 2px solid var(--tinta);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.fig.estado-falta { background: #fff; }
.fig.estado-invitado { background: #fff; opacity: 0.95; }
.fig .numero {
    font-family: var(--ff-numeral);
    color: var(--azul);
    font-size: 1.05em;
    line-height: 1;
    margin-top: 4px;
}
.fig .nombre {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.95em;
    margin: 6px 0 2px;
    min-height: 2.4em;
    color: var(--tinta);
    line-height: 1.05;
}
.fig .equipo {
    color: var(--humo);
    font-size: 0.78em;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.fig .estados {
    display: flex;
    gap: 3px;
    justify-content: center;
    border-top: 2px dashed var(--tinta);
    padding-top: 8px;
    margin-top: 6px;
}
.fig .estados button {
    border: 2px solid var(--tinta);
    background: #fff;
    padding: 5px 7px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72em;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tinta);
    transition: background 0.12s, color 0.12s;
    flex: 1;
}
.fig .estados button:hover { background: var(--crema); }
.fig .estados button.activo {
    background: var(--azul);
    color: #fff;
}
.fig .estados button[data-estado=tengo].activo { background: var(--verde); color: #fff; }
.fig .estados button[data-estado=repetida].activo { background: var(--amarillo); color: var(--tinta); }
.fig .punto-info {
    margin-top: 8px;
    font-size: 0.75em;
    color: var(--tinta);
    background: var(--papel);
    padding: 5px 6px;
    border-radius: 5px;
    border: 1.5px dashed var(--tinta);
    line-height: 1.3;
}

.fig-invitado-cta {
    margin-top: 8px;
    font-size: 0.78em;
    border-top: 2px dashed var(--tinta);
    padding-top: 8px;
}
.fig-invitado-cta a {
    color: var(--tinta);
    text-decoration: none !important;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--amarillo);
    display: block;
    padding: 7px;
    border-radius: 6px;
    border: 2px solid var(--tinta);
}
.fig-invitado-cta a:hover { background: #FFE54D; }

.invitado-banner {
    background: var(--tinta);
    color: var(--amarillo);
    padding: 16px 18px;
    border: 3px solid var(--amarillo);
    border-radius: var(--radio);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--sombra-sticker);
}
.invitado-banner strong {
    display: block;
    font-family: var(--ff-display);
    font-size: 1.15em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
.invitado-banner span { color: #FFE9A8; font-size: 0.95em; }
.invitado-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 720px) {
    .invitado-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(14,14,16,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 18px;
    animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: #fff;
    padding: 28px;
    border-radius: var(--radio);
    max-width: 440px;
    width: 100%;
    border: 3px solid var(--tinta);
    box-shadow: 8px 8px 0 var(--amarillo);
    animation: popIn 0.22s ease-out;
}
@keyframes popIn {
    from { transform: scale(0.92) translateY(8px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal h3 { margin-top: 0; }
.modal select {
    width: 100%;
    padding: 12px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    font-size: 1em;
    background: var(--papel);
    font-family: inherit;
}

/* =========================================================================
   TABLAS
   ========================================================================= */
.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-sticker);
}
.tabla th, .tabla td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 2px solid var(--tinta);
}
.tabla th {
    background: var(--tinta);
    color: var(--amarillo);
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 0.88em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:nth-child(even) td { background: var(--papel); }
.tabla-scroll { overflow-x: auto; }

/* =========================================================================
   MATCHES (la pantalla del "payoff")
   ========================================================================= */
.match-card {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    padding: 22px 22px 18px;
    margin-bottom: 18px;
    border-left: 14px solid var(--amarillo);
    position: relative;
    overflow: hidden;
}
.match-card::before {
    content: "CAMBIO";
    position: absolute;
    top: 12px;
    right: -32px;
    background: var(--rojo);
    color: #fff;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 0.78em;
    letter-spacing: 0.18em;
    padding: 4px 36px;
    transform: rotate(35deg);
    border: 2px solid var(--tinta);
}
.match-card h3 {
    margin: 0 0 14px;
    color: var(--azul);
    padding-right: 80px;
}
.match-intercambio {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin: 16px 0;
    background: var(--papel);
    border: 2.5px dashed var(--tinta);
    border-radius: var(--radio);
    padding: 16px 12px;
}
.match-flecha {
    font-size: 2em;
    color: var(--rojo);
    text-align: center;
    font-weight: 900;
}
.match-fig {
    background: #fff;
    padding: 12px 10px;
    border-radius: var(--radio-sm);
    text-align: center;
    border: 2.5px solid var(--tinta);
    box-shadow: 2px 2px 0 var(--tinta);
}
.match-fig small {
    display: block;
    text-transform: uppercase;
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--humo);
    letter-spacing: 0.08em;
    font-size: 0.72em;
    margin-bottom: 6px;
}
.match-fig strong {
    font-family: var(--ff-numeral);
    color: var(--azul);
    font-size: 1.25em;
    display: inline-block;
    margin: 2px 0;
}
.match-contacto {
    background: var(--crema);
    padding: 12px 14px;
    border-radius: var(--radio-sm);
    margin: 12px 0;
    border: 2px solid var(--tinta);
    font-size: 0.95em;
}
.match-contacto strong {
    font-family: var(--ff-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--azul-deep);
}
.match-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* =========================================================================
   ADMIN — stats / accesos / grids
   ========================================================================= */
.admin-stats {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: 26px;
}
.stat {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    padding: 18px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--amarillo) 0 16px,
        var(--azul)     16px 32px,
        var(--rojo)     32px 48px,
        var(--verde)    48px 64px
    );
}
.stat-num {
    font-family: var(--ff-numeral);
    font-size: 2.4em;
    color: var(--azul);
    line-height: 1;
    margin-top: 8px;
}
.stat-label {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta);
    margin-top: 6px;
    font-size: 0.92em;
}
.stat-sub {
    font-size: 0.78em;
    color: var(--humo);
    margin-top: 6px;
}

.admin-accesos {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 26px;
}
.acceso {
    background: var(--azul);
    color: #fff !important;
    text-decoration: none !important;
    padding: 20px;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    display: block;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.acceso:nth-child(2) { background: var(--rojo); }
.acceso:nth-child(3) { background: var(--verde); }
.acceso:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sombra-hover);
}
.acceso strong {
    display: block;
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.15em;
}
.acceso small { display: block; opacity: 0.92; margin-top: 4px; font-size: 0.88em; }

.admin-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .admin-grid { grid-template-columns: 1fr 1fr; }
}

.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li {
    padding: 10px 0;
    border-bottom: 1.5px dashed var(--tinta);
}
.lista-simple li:last-child { border-bottom: none; }
.lista-simple li small { margin-left: 6px; }

.admin-buscador {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.admin-buscador input[type=text],
.admin-buscador select {
    padding: 10px 12px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    font-size: 0.95em;
    background: var(--papel);
    font-family: inherit;
    flex: 1 1 180px;
    min-width: 0;
}

.pagina-links {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}
.pagina-links a, .pagina-links span {
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none !important;
    background: #fff;
    color: var(--tinta);
    border: 2.5px solid var(--tinta);
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    box-shadow: 2px 2px 0 var(--tinta);
}
.pagina-links a:hover { background: var(--amarillo); }
.pagina-links .actual {
    background: var(--azul);
    color: #fff;
    border-color: var(--tinta);
}

/* =========================================================================
   HOME — DISPONIBLES PARA CAMBIO
   ========================================================================= */

/* Buscador de figuritas disponibles */
.disponibles-buscador {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 18px 0 12px;
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 12px 14px;
    box-shadow: var(--sombra-sticker);
}
.disponibles-buscador input[type=search] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 10px 14px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    background: var(--papel);
    font-family: inherit;
    font-size: 1em;
    color: var(--tinta);
    -webkit-appearance: none;
    appearance: none;
}
.disponibles-buscador input[type=search]:focus {
    outline: none;
    background: #fff;
    box-shadow: 4px 4px 0 var(--amarillo);
}
.disponibles-buscador input[type=search]::placeholder {
    color: var(--humo);
}
.disponibles-buscador input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    background: var(--rojo);
    border-radius: 50%;
    cursor: pointer;
    mask-image: linear-gradient(45deg, transparent 38%, #fff 38% 46%, transparent 46% 54%, #fff 54% 62%, transparent 62%),
                linear-gradient(-45deg, transparent 38%, #fff 38% 46%, transparent 46% 54%, #fff 54% 62%, transparent 62%);
    -webkit-mask-image: linear-gradient(45deg, transparent 38%, #fff 38% 46%, transparent 46% 54%, #fff 54% 62%, transparent 62%),
                        linear-gradient(-45deg, transparent 38%, #fff 38% 46%, transparent 46% 54%, #fff 54% 62%, transparent 62%);
}

.disponibles-resultado-info {
    text-align: center;
    margin: 0 0 16px;
    font-size: 0.95em;
}
.disponibles-resultado-info strong { color: var(--azul-deep); }

.disponibles-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 540px) { .disponibles-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .disponibles-grid { grid-template-columns: 1fr 1fr 1fr; } }

.disponible-card {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s;
}
.disponible-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sombra-hover);
}
.disponible-fig {
    background: var(--amarillo);
    border-bottom: 3px solid var(--tinta);
    padding: 18px 14px;
    text-align: center;
    position: relative;
}
.disponible-fig::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, transparent 0 8px, var(--tinta) 8px 10px);
    opacity: 0.35;
}
.disponible-fig .numero {
    font-family: var(--ff-numeral);
    color: var(--azul);
    font-size: 1.05em;
    line-height: 1;
}
.disponible-fig .nombre {
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    margin: 6px 0 2px;
    color: var(--tinta);
    font-size: 1.15em;
    line-height: 1.05;
    letter-spacing: 0.01em;
}
.disponible-fig .equipo {
    color: var(--tinta);
    font-size: 0.82em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    opacity: 0.7;
}
.disponible-puntos {
    padding: 14px;
    font-size: 0.9em;
    flex: 1;
    background: #fff;
}
.disponible-puntos strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--azul-deep);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.disponible-puntos ul { list-style: none; margin: 0; padding: 0; }
.disponible-puntos li {
    padding: 6px 0;
    border-bottom: 1.5px dashed var(--tinta);
    line-height: 1.4;
}
.disponible-puntos li:last-child { border-bottom: none; }
.disponible-puntos li small { display: inline; margin-left: 4px; color: var(--humo); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
    background: var(--tinta);
    color: var(--crema);
    padding: 40px 0 24px;
    border-top: 4px solid var(--amarillo);
    margin-top: 50px;
    position: relative;
}
.footer::before {
    content: "";
    display: block;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        var(--rojo)     0 22px,
        var(--turquesa) 22px 44px,
        var(--verde)    44px 66px,
        var(--naranja)  66px 88px,
        var(--azul)     88px 110px,
        var(--amarillo) 110px 132px
    );
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
}
.footer small { font-size: 0.88em; line-height: 1.6; }
.footer .wrap { padding-top: 10px; }
.footer-chip {
    display: inline-block;
    background: var(--amarillo);
    color: var(--tinta);
    padding: 4px 10px 2px;
    border-radius: 4px;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82em;
    margin: 0 3px;
}

/* Grilla principal: 1 columna en mobile, 3 desktop */
.footer-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
    padding-bottom: 26px;
    margin-bottom: 22px;
    border-bottom: 1.5px dashed rgba(245, 235, 210, 0.18);
}
@media (min-width: 720px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
}

/* Titulos de seccion del footer */
.footer-bloque h4 {
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--amarillo);
    font-size: 0.86em;
    margin: 0 0 14px;
    line-height: 1;
    position: relative;
    padding-bottom: 8px;
}
.footer-bloque h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 3px;
    background: var(--rojo);
    border-radius: 2px;
}

/* Cards de auspiciantes (estilo sticker) */
.footer-logos {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.footer-logo {
    background: #fff;
    color: var(--tinta) !important;
    border: 2.5px solid var(--amarillo);
    border-radius: var(--radio-sm);
    padding: 12px 14px;
    text-decoration: none !important;
    box-shadow: 3px 3px 0 var(--rojo);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    transition: transform 0.12s, box-shadow 0.12s;
}
.footer-logo:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--amarillo);
    color: var(--tinta) !important;
}
.footer-logo img {
    max-width: 100%;
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
}
.footer-logo span {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.94em;
    color: var(--tinta);
    line-height: 1;
}
.footer-logo small {
    color: var(--humo);
    font-size: 0.74em;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

/* Listas de links del footer */
.footer-navega ul,
.footer-legal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-navega li,
.footer-legal li {
    margin-bottom: 8px;
}
.footer-navega a,
.footer-legal a {
    color: var(--crema);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    padding-bottom: 1px;
    font-size: 0.95em;
    transition: color 0.15s, border-bottom-color 0.15s;
}
.footer-navega a:hover,
.footer-legal a:hover {
    color: var(--amarillo);
    border-bottom-color: var(--amarillo);
}

/* Fila inferior: solo el credito Ecosoft, centrado y minimalista */
.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Credito Ecosoft — texto sobre fondo oscuro, sin caja */
.footer-creditos {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    text-align: center;
}
.footer-creditos-label {
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(245, 235, 210, 0.78);
    font-size: 0.78em;
    line-height: 1;
}
.footer-creditos-marca {
    font-family: var(--ff-numeral);
    color: var(--amarillo);
    font-size: 1.85em;
    letter-spacing: 0.04em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.footer-creditos-marca .bolt {
    width: 0.7em;
    height: 1.1em;
    margin: 0 0.05em;
    transform: translateY(-2px);
    filter: drop-shadow(1px 1px 0 var(--rojo));
}

/* =========================================================================
   UTILIDADES
   ========================================================================= */
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }
.mb-2 { margin-bottom: 18px; }
.muted { color: var(--humo); }

.badge {
    display: inline-block;
    padding: 3px 10px 2px;
    border-radius: 999px;
    font-family: var(--ff-display);
    font-size: 0.78em;
    font-weight: 700;
    background: var(--crema);
    color: var(--tinta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 2px solid var(--tinta);
}
.badge-ok   { background: var(--verde);    color: #fff; }
.badge-warn { background: var(--amarillo); color: var(--tinta); }
.badge-err  { background: var(--rojo);     color: #fff; }

/* Divisor perforado decorativo */
.perforacion {
    display: block;
    height: 14px;
    margin: 24px 0;
    background-image: radial-gradient(circle, var(--tinta) 1.5px, transparent 2px);
    background-size: 14px 14px;
    background-position: center;
    background-repeat: repeat-x;
    opacity: 0.5;
}

/* details (importar CSV) */
details.card {
    padding: 0;
}
details.card summary {
    padding: 16px 20px;
    cursor: pointer;
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--amarillo);
    border-bottom: 3px solid var(--tinta);
    border-radius: var(--radio) var(--radio) 0 0;
}
details.card[open] summary { border-bottom: 3px solid var(--tinta); }
details.card .form,
details.card > *:not(summary) {
    padding: 18px 20px;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
details.card .form { background: transparent; max-width: none; }

/* =========================================================================
   SOLICITUDES (pedidos manuales) — tabs, cards, modal, nav-badge
   ========================================================================= */

/* Tabs de mis-cambios — pills horizontales, scroll-x en mobile.
   Fade lateral derecho indica scrollabilidad cuando hay overflow. */
.tabs-mis-cambios {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 6px;
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.tabs-mis-cambios:hover,
.tabs-mis-cambios:focus-within {
    -webkit-mask-image: none;
            mask-image: none;
}
/* Toggle entre label largo y corto segun viewport */
.tab-label-short { display: none; }
@media (max-width: 540px) {
    .tab-label-full  { display: none; }
    .tab-label-short { display: inline; }
    .tabs-mis-cambios { gap: 6px; }
}
.tabs-mis-cambios .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--tinta);
    text-decoration: none !important;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.88em;
    border: 2px solid transparent;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tabs-mis-cambios .tab:hover {
    background: var(--crema);
    color: var(--tinta);
}
.tabs-mis-cambios .tab-activa {
    background: var(--azul);
    color: #fff;
    border-color: var(--tinta);
    box-shadow: 2px 2px 0 var(--tinta);
}
.tabs-mis-cambios .tab-activa:hover { background: var(--azul-deep); color: #fff; }
.tabs-mis-cambios .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-family: var(--ff-numeral);
    font-size: 0.78em;
    line-height: 1;
    border: 2px solid var(--tinta);
}
.tabs-mis-cambios .tab-activa .tab-count {
    background: var(--amarillo);
    color: var(--tinta);
}

/* Card del historial: compacta, una linea en desktop, stack en mobile */
.historial-card {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 12px 16px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 0 var(--tinta);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.historial-info {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.historial-titulo {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--tinta);
    font-size: 0.96em;
    line-height: 1.2;
}
.historial-titulo strong { color: var(--azul-deep); }
.historial-detalle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.88em;
    color: var(--tinta);
}
.historial-accion { flex-shrink: 0; }

/* Card de solicitud — variante de .match-card con barra lateral propia */
.solicitud-card {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    padding: 22px 22px 18px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    border-left: 14px solid var(--turquesa);
}
.solicitud-card.solicitud-enviada { border-left-color: var(--naranja); }
.solicitud-tag {
    display: inline-block;
    background: var(--turquesa);
    color: #fff;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 0.78em;
    letter-spacing: 0.12em;
    padding: 4px 10px 3px;
    border-radius: 4px;
    border: 2px solid var(--tinta);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.solicitud-enviada .solicitud-tag { background: var(--naranja); }
.solicitud-card h3 {
    margin: 0 0 12px;
    color: var(--azul-deep);
}
.solicitud-mensaje {
    background: var(--papel);
    padding: 12px 14px;
    border-radius: var(--radio-sm);
    margin: 12px 0;
    border: 2px dashed var(--tinta);
    font-size: 0.95em;
}
.solicitud-mensaje strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--ff-display);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--humo);
}
.solicitud-mensaje em {
    color: var(--tinta);
    font-style: italic;
    font-weight: 500;
}
.solicitud-card .small,
.solicitud-card p.small { font-size: 0.85em; margin: 8px 0 4px; }

/* Boton "Me interesa" en las cards de home */
.disponible-cta {
    padding: 0 14px 14px;
    background: #fff;
}

/* Modal de pedido — variante de .modal */
.modal-pedido {
    max-width: 500px;
}
.modal-pedido h3 { margin-top: 0; color: var(--azul-deep); }
.modal-pedido .campo { margin-bottom: 14px; }
.modal-pedido label {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.86em;
    color: var(--tinta);
    margin-bottom: 8px;
}
.modal-pedido select,
.modal-pedido textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    font-family: inherit;
    font-size: 1em;
    background: var(--papel);
    color: var(--tinta);
}
.modal-pedido textarea { resize: vertical; min-height: 60px; }

.lista-vecinos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
.vecino-opcion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--tinta);
    border-radius: var(--radio-sm);
    background: var(--papel);
    cursor: pointer;
    transition: background 0.12s, transform 0.08s;
}
.vecino-opcion:hover { background: var(--crema); }
.vecino-opcion input[type=radio] {
    margin-top: 4px;
    accent-color: var(--rojo);
    flex-shrink: 0;
}
.vecino-opcion:has(input:checked) {
    background: #FFF6BF;
    box-shadow: 3px 3px 0 var(--tinta);
    transform: translate(-1px, -1px);
}
.vecino-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vecino-info strong {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tinta);
    font-size: 0.95em;
}
.vecino-info small {
    color: var(--humo);
    font-size: 0.82em;
}

/* Badge rojo del nav (pedidos pendientes) */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-family: var(--ff-numeral);
    font-size: 0.72em;
    line-height: 1;
    border: 2px solid var(--amarillo);
    vertical-align: middle;
}

/* Mobile tweaks */
@media (max-width: 540px) {
    .tabs-mis-cambios .tab { padding: 9px 11px; font-size: 0.82em; }
    .solicitud-card { padding: 18px 16px 14px; border-left-width: 10px; }
    .modal-pedido { padding: 22px 18px; }
    .lista-vecinos { max-height: 200px; }
}

/* =========================================================================
   VECINO (perfil de intercambio anonimizado) — pages/vecino.php
   ========================================================================= */

/* Selector cuando hay varios vecinos con la misma figurita */
.vecinos-selector {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 18px;
}
@media (min-width: 700px) {
    .vecinos-selector { grid-template-columns: repeat(2, 1fr); }
}
.vecino-link {
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    padding: 18px 18px 14px;
    text-decoration: none !important;
    color: var(--tinta);
    display: block;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
    position: relative;
}
.vecino-link:hover {
    background: var(--papel);
    transform: translate(-2px, -2px);
    box-shadow: var(--sombra-hover);
    color: var(--tinta);
}
.vecino-link-lugar {
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--azul-deep);
    font-size: 1.15em;
}
.vecino-link-horario {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--tinta);
    margin-top: 4px;
    font-size: 0.95em;
}
.vecino-link-desc {
    color: var(--humo);
    font-size: 0.88em;
    margin-top: 4px;
}
.vecino-link-flecha {
    display: block;
    margin-top: 10px;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82em;
    color: var(--rojo);
}

/* Hero del perfil del vecino */
.vecino-hero {
    background: var(--azul);
    color: #fff;
    border: 4px solid var(--tinta);
    border-radius: var(--radio-lg);
    padding: 22px 22px 18px;
    margin-bottom: 18px;
    box-shadow: 6px 6px 0 var(--tinta);
    position: relative;
    overflow: hidden;
}
.vecino-hero-tag {
    display: inline-block;
    background: var(--tinta);
    color: var(--amarillo);
    padding: 5px 12px 3px;
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75em;
    border-radius: 4px;
    border: 2px solid var(--amarillo);
    margin-bottom: 10px;
}
.vecino-hero h1 {
    color: #fff;
    margin: 0 0 12px;
    text-shadow: 3px 3px 0 var(--tinta);
}
.vecino-hero-punto {
    background: rgba(14,14,16,0.35);
    padding: 10px 14px;
    border-radius: var(--radio-sm);
    border: 2px solid var(--amarillo);
    color: #fff;
    font-weight: 500;
}
.vecino-hero-punto strong {
    color: var(--amarillo);
    text-transform: uppercase;
    font-family: var(--ff-display);
    letter-spacing: 0.05em;
    font-size: 0.85em;
    display: inline-block;
    margin-right: 6px;
}
.vecino-hero-desc {
    color: #FFE9A8;
    margin-top: 8px;
    font-size: 0.92em;
    padding-left: 14px;
}
.vecino-hero-priv {
    color: #FFE9A8;
    font-size: 0.82em;
    margin: 10px 0 0;
    font-style: italic;
}

/* Card "vos le pedis" */
.vecino-pide {
    background: var(--amarillo);
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 14px 18px;
    box-shadow: var(--sombra-sticker);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.vecino-pide small {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tinta);
    font-size: 0.8em;
}
.vecino-pide-fig {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}
.vecino-pide-fig .numero {
    font-family: var(--ff-numeral);
    color: var(--azul-deep);
    font-size: 1.5em;
    line-height: 1;
}
.vecino-pide-fig .nombre {
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--tinta);
    font-size: 1.25em;
}
.vecino-pide-fig .equipo {
    color: var(--tinta);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

/* Titulo de seccion con badge */
.vecino-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 10px;
}

/* Grilla y cards para elegir que ofrecer */
.ofrecer-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin-top: 12px;
}
.ofrecer-card {
    position: relative;
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 14px 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
    box-shadow: var(--sombra-sticker);
    display: block;
}
.ofrecer-card input[type=radio] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    accent-color: var(--rojo);
    margin: 0;
}
.ofrecer-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sombra-hover);
}
.ofrecer-card .numero {
    font-family: var(--ff-numeral);
    color: var(--azul);
    font-size: 1.1em;
    line-height: 1;
    margin-top: 8px;
}
.ofrecer-card .nombre {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.95em;
    margin: 6px 0 4px;
    color: var(--tinta);
    line-height: 1.1;
}
.ofrecer-card .equipo {
    color: var(--humo);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Variante: le sirve (verde, destacada) */
.ofrecer-sirve {
    background: #DCFCE4;
    border-color: var(--verde);
}
.ofrecer-sirve:has(input:checked) {
    background: #B8F5C3;
    box-shadow: 5px 5px 0 var(--tinta);
    transform: translate(-2px, -2px);
}
.ofrecer-sello {
    position: absolute;
    top: 6px;
    right: -28px;
    background: var(--verde);
    color: #fff;
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: 0.68em;
    letter-spacing: 0.14em;
    padding: 3px 30px;
    transform: rotate(35deg);
    border: 2px solid var(--tinta);
    text-transform: uppercase;
    pointer-events: none;
}

/* Variante: no le sirve (grisado) */
.ofrecer-no-sirve {
    background: #fff;
    opacity: 0.75;
}
.ofrecer-no-sirve:has(input:checked) {
    opacity: 1;
    background: #FFF6BF;
    box-shadow: 5px 5px 0 var(--tinta);
    transform: translate(-2px, -2px);
}

/* details/summary de "otras repetidas" y "faltantes del vecino" */
.otras-rep,
.faltantes-bloc {
    margin-top: 20px;
    background: #fff;
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sticker);
    overflow: hidden;
}
.otras-rep summary,
.faltantes-bloc summary {
    cursor: pointer;
    padding: 14px 18px;
    background: var(--crema);
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta);
    border-bottom: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.otras-rep[open] summary,
.faltantes-bloc[open] summary {
    border-bottom-color: var(--tinta);
    background: var(--amarillo);
}
.otras-rep .ofrecer-grid,
.faltantes-bloc .faltantes-chips {
    padding: 18px;
    margin: 0;
}

/* Chips compactos para faltantes del vecino (informativo) */
.faltantes-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.faltante-chip {
    background: var(--papel);
    border: 2px solid var(--tinta);
    border-radius: var(--radio-sm);
    padding: 6px 10px;
    font-size: 0.85em;
    color: var(--tinta);
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.faltante-chip strong {
    font-family: var(--ff-numeral);
    color: var(--azul);
}
.faltante-chip small {
    color: var(--humo);
    font-size: 0.85em;
    margin-left: 3px;
}

/* Form layout dentro del perfil */
.vecino-form .campo label {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.88em;
    margin-bottom: 6px;
    color: var(--tinta);
}
.vecino-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2.5px solid var(--tinta);
    border-radius: var(--radio-sm);
    font-size: 1em;
    background: var(--papel);
    font-family: inherit;
    color: var(--tinta);
    resize: vertical;
    min-height: 60px;
}
.vecino-form textarea:focus {
    outline: none;
    background: #fff;
    box-shadow: 4px 4px 0 var(--amarillo);
}

.vecino-acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

@media (max-width: 540px) {
    .vecino-hero { padding: 18px 16px 16px; }
    .vecino-pide { padding: 12px 14px; gap: 10px; }
    .vecino-pide-fig .nombre { font-size: 1.1em; }
    .ofrecer-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
    .ofrecer-card { padding: 12px 8px 10px; }
}

/* =========================================================================
   NAV — saludo "Hola, [nombre]!"
   ========================================================================= */
.nav-hola {
    background: var(--amarillo);
    color: var(--tinta);
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.92em;
    padding: 10px 14px !important;
    border-radius: 8px;
    border: 2px solid var(--tinta);
    margin-bottom: 6px;
    cursor: default;
    pointer-events: none;
    text-align: center;
}
.nav-hola strong {
    color: var(--rojo);
    font-weight: 900;
    margin-left: 3px;
}
@media (min-width: 860px) {
    .nav-hola {
        font-size: 0.78em;
        padding: 6px 10px !important;
        margin-bottom: 0;
        margin-right: 4px;
        border-width: 2px;
        box-shadow: 2px 2px 0 var(--tinta);
    }
}

/* =========================================================================
   HOME — lista de vecinos en "Figuritas disponibles"
   ========================================================================= */
.lista-vecinos-disponibles {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}
.lista-vecinos-disponibles li {
    margin-bottom: 8px;
    padding: 0;
    border-bottom: none;
    line-height: 1.4;
}
.lista-vecinos-disponibles li:last-child {
    margin-bottom: 0;
}
.vecino-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--tinta);
    border-radius: var(--radio-sm);
    background: var(--papel);
    text-decoration: none !important;
    color: var(--tinta);
    transition: background 0.12s, transform 0.08s, box-shadow 0.12s;
}
.vecino-fila:hover {
    background: #FFF6BF;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--tinta);
    color: var(--tinta);
}
.vecino-fila small {
    flex: 1;
    color: var(--humo);
    font-size: 0.82em;
}
.vecino-fila small strong {
    color: var(--tinta);
}
.vecino-rotulo {
    display: inline-block;
    background: var(--azul);
    color: #fff;
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78em;
    padding: 4px 9px 3px;
    border-radius: 4px;
    border: 2px solid var(--tinta);
    line-height: 1;
    flex-shrink: 0;
}
.vecino-yo {
    background: var(--verde);
    color: #fff;
}
.vecino-flecha {
    color: var(--rojo);
    font-family: var(--ff-numeral);
    font-size: 1.1em;
    margin-left: auto;
    flex-shrink: 0;
}
.lista-vecinos-disponibles li > small {
    color: var(--humo);
    font-size: 0.82em;
    display: inline-block;
    margin-left: 8px;
}

/* =========================================================================
   VERIFICACION POR CODIGO — input OTP + banner
   ========================================================================= */
.codigo-input {
    text-align: center;
    font-family: "Courier New", Consolas, monospace !important;
    font-size: 2em !important;
    letter-spacing: 0.5em !important;
    padding: 16px 12px !important;
    font-weight: bold !important;
    background: var(--amarillo) !important;
    color: var(--tinta) !important;
    border-width: 3px !important;
    box-shadow: 4px 4px 0 var(--tinta) !important;
}
.codigo-input::placeholder {
    color: rgba(14, 14, 16, 0.35);
    letter-spacing: 0.5em;
}
.codigo-input:focus {
    background: #fff !important;
    box-shadow: 5px 5px 0 var(--rojo) !important;
}

.banner-verificar {
    background: var(--amarillo);
    color: var(--tinta);
    border: 3px solid var(--tinta);
    border-radius: var(--radio);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--sombra-sticker);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.banner-verificar strong {
    display: block;
    font-family: var(--ff-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.05em;
}
.banner-verificar span {
    display: block;
    font-size: 0.92em;
    margin-top: 2px;
}
@media (min-width: 600px) {
    .banner-verificar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .banner-verificar .btn { flex-shrink: 0; }
}

/* =========================================================================
   RESPONSIVE — refinamientos para celulares chicos (≤480px y ≤380px)
   Sin cambios esteticos: solo ajustes de spacing, tipografia y layout para
   que todo respire bien en 360-420px.
   ========================================================================= */

@media (max-width: 480px) {
    /* === Layout base === */
    .wrap { padding: 0 14px; }
    main { padding: 20px 0 60px; min-height: calc(100vh - 180px); }
    main.wrap { padding-left: 14px; padding-right: 14px; }

    /* === Topbar / logo === */
    .topbar .wrap { min-height: 58px; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
    .topbar::before { height: 5px; }
    .logo { font-size: 1.08em; gap: 6px; }
    .logo::before { font-size: 0.78em; padding: 3px 6px 1px; box-shadow: 2px 2px 0 var(--tinta); border-width: 2px; }
    .nav-burger { padding: 8px; }
    .nav-burger span { width: 20px; height: 2.5px; }

    /* === Tipografia general === */
    body { font-size: 15.5px; }
    h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
    h3 { font-size: clamp(1.1rem, 3.5vw, 1.35rem); }

    /* === Cards y formularios menos voluminosos === */
    .card { padding: 16px 14px; }
    .form { padding: 20px 16px; max-width: none; }
    .form .campo { margin-bottom: 13px; }
    .form input, .form select, .form textarea { padding: 10px 12px; font-size: 0.96em; }
    .form label { font-size: 0.82em; margin-bottom: 5px; }

    /* === Flash messages === */
    .flash { padding: 12px 14px; font-size: 0.92em; }

    /* === Botones === */
    .btn { padding: 11px 18px; font-size: 0.94em; }
    .btn-sm { padding: 6px 11px; font-size: 0.8em; box-shadow: 2px 2px 0 var(--tinta); }

    /* === Album === */
    .album-grid { gap: 10px; }
    .fig { padding: 10px 8px 8px; font-size: 0.85em; }
    .fig .numero { font-size: 1em; }
    .fig .nombre { font-size: 0.9em; margin: 5px 0 2px; min-height: 2.2em; }
    .fig .equipo { font-size: 0.74em; margin-bottom: 8px; }
    .fig .estados { gap: 2px; padding-top: 6px; }
    .fig .estados button { padding: 4px 4px; font-size: 0.68em; letter-spacing: 0.02em; }
    .fig .punto-info { font-size: 0.7em; padding: 4px 5px; }
    .fig.estado-tengo::after,
    .fig.estado-repetida::after { width: 22px; height: 22px; font-size: 0.62em; top: 5px; right: 5px; }

    .album-filtros { padding: 10px; gap: 7px; top: 64px; }
    .album-filtros select,
    .album-filtros input[type=text] { padding: 7px 10px; font-size: 0.9em; }
    .album-filtros .resumen { gap: 5px; margin-left: 0; width: 100%; }
    .album-filtros .badge { font-size: 0.7em; padding: 2px 7px 1px; }

    /* === Modal === */
    .modal-bg { padding: 10px; }
    .modal { padding: 22px 18px; }

    /* === Match cards: stack vertical + paddings reducidos === */
    .match-card { padding: 18px 16px 14px; border-left-width: 10px; }
    .match-card::before {
        font-size: 0.64em;
        padding: 3px 24px;
        top: 8px;
        right: -28px;
        letter-spacing: 0.14em;
    }
    .match-card h3 {
        padding-right: 56px;
        font-size: 1.02em;
        margin-bottom: 10px;
        line-height: 1.1;
    }
    .match-intercambio {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 8px;
    }
    .match-fig {
        padding: 10px 12px;
        text-align: left;
        position: relative;
    }
    .match-fig small {
        font-size: 0.66em;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
        color: var(--humo);
    }
    .match-fig strong { font-size: 1.15em; display: inline-block; margin-right: 6px; }
    .match-fig small.muted { font-size: 0.76em; margin-top: 2px; margin-bottom: 0; }
    .match-flecha {
        font-size: 1.6em;
        transform: rotate(90deg);
        margin: 0 auto;
        line-height: 0.8;
    }
    .match-contacto { padding: 10px 12px; font-size: 0.87em; }
    .match-acciones { gap: 8px; }
    .match-acciones form { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .match-acciones form .btn { width: 100%; text-align: center; }

    /* === Solicitud cards === */
    .solicitud-card { padding: 18px 16px 14px; border-left-width: 10px; }
    .solicitud-tag { font-size: 0.72em; padding: 3px 8px 2px; }
    .solicitud-mensaje { padding: 10px 12px; font-size: 0.9em; }
    .solicitud-card h3 { font-size: 1.05em; margin-bottom: 10px; line-height: 1.1; }
    .solicitud-card p.muted { font-size: 0.82em; }

    /* === Tabs de mis-cambios === */
    .tabs-mis-cambios { padding: 5px; gap: 5px; }
    .tabs-mis-cambios .tab { padding: 8px 10px; font-size: 0.78em; gap: 5px; }
    .tabs-mis-cambios .tab-count {
        min-width: 19px;
        height: 19px;
        font-size: 0.7em;
        padding: 0 5px;
        border-width: 1.5px;
    }

    /* === Admin (stats) === */
    .admin-stats { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; }
    .stat { padding: 14px 10px; }
    .stat-num { font-size: 2em; }
    .stat-label { font-size: 0.82em; }
    .stat-sub { font-size: 0.72em; }
    .acceso { padding: 16px; }
    .acceso strong { font-size: 1.02em; }
    .acceso small { font-size: 0.82em; }
    .admin-buscador { gap: 7px; }
    .admin-buscador input[type=text],
    .admin-buscador select { padding: 9px 11px; font-size: 0.9em; }

    /* === Tablas === */
    .tabla th, .tabla td { padding: 9px 10px; font-size: 0.86em; }
    .tabla th { font-size: 0.78em; }

    /* === Buscador de disponibles === */
    .disponibles-buscador { padding: 10px 12px; gap: 8px; }
    .disponibles-buscador input[type=search] { padding: 9px 12px; font-size: 0.95em; flex: 1 1 100%; }

    /* === Disponibles (home) === */
    .disponible-fig { padding: 14px 12px; }
    .disponible-fig .numero { font-size: 0.95em; }
    .disponible-fig .nombre { font-size: 1.05em; }
    .disponible-fig .equipo { font-size: 0.78em; }
    .disponible-puntos { padding: 12px; font-size: 0.88em; }
    .disponible-puntos strong { font-size: 0.76em; }
    .disponible-cta { padding: 0 12px 12px; }

    /* === Vecino fila (lista de disponibles) === */
    .vecino-fila { padding: 9px 11px; gap: 8px; }
    .vecino-fila small { font-size: 0.78em; }
    .vecino-rotulo { font-size: 0.72em; padding: 3px 7px 2px; border-width: 1.5px; }
    .vecino-flecha { font-size: 1em; }

    /* === Vecino page === */
    .vecino-hero { padding: 16px 14px 14px; border-width: 3px; box-shadow: 5px 5px 0 var(--tinta); }
    .vecino-hero-tag { font-size: 0.68em; letter-spacing: 0.12em; padding: 4px 10px 2px; }
    .vecino-hero h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); margin-bottom: 10px; }
    .vecino-hero-punto { padding: 9px 12px; font-size: 0.92em; }
    .vecino-hero-punto strong { font-size: 0.78em; }
    .vecino-hero-priv { font-size: 0.78em; }
    .vecino-pide { padding: 12px 14px; gap: 8px; }
    .vecino-pide small { font-size: 0.74em; letter-spacing: 0.08em; }
    .vecino-pide-fig .numero { font-size: 1.3em; }
    .vecino-pide-fig .nombre { font-size: 1.08em; }
    .vecino-pide-fig .equipo { font-size: 0.78em; }
    .vecino-seccion-titulo { font-size: clamp(1.1rem, 4.5vw, 1.4rem); gap: 8px; }
    .ofrecer-card { padding: 11px 8px 9px; }
    .ofrecer-card input[type=radio] { width: 16px; height: 16px; top: 6px; left: 6px; }
    .ofrecer-card .numero { font-size: 1em; }
    .ofrecer-card .nombre { font-size: 0.88em; margin: 5px 0 3px; }
    .ofrecer-card .equipo { font-size: 0.7em; }
    .ofrecer-sello { font-size: 0.6em; padding: 2px 24px; top: 4px; right: -24px; letter-spacing: 0.1em; }
    .otras-rep summary,
    .faltantes-bloc summary { padding: 12px 14px; font-size: 0.85em; }
    .otras-rep .ofrecer-grid,
    .faltantes-bloc .faltantes-chips { padding: 14px; }
    .faltante-chip { font-size: 0.78em; padding: 4px 8px; }
    .faltantes-chips { gap: 6px; }
    .vecinos-selector { gap: 10px; }
    .vecino-link { padding: 14px 14px 12px; }
    .vecino-link-lugar { font-size: 1.05em; }
    .vecino-link-horario { font-size: 0.88em; }
    .vecino-link-desc { font-size: 0.82em; }

    /* === Verificacion (codigo OTP) === */
    .codigo-input {
        font-size: 1.65em !important;
        letter-spacing: 0.36em !important;
        padding: 13px 8px !important;
        box-shadow: 3px 3px 0 var(--tinta) !important;
    }

    /* === Banner verificar === */
    .banner-verificar { padding: 12px 14px; }
    .banner-verificar strong { font-size: 0.96em; }
    .banner-verificar span { font-size: 0.85em; }

    /* === Invitado banner === */
    .invitado-banner { padding: 12px 14px; }
    .invitado-banner strong { font-size: 1.02em; }
    .invitado-banner span { font-size: 0.88em; }

    /* === Footer === */
    .footer { padding: 28px 0 18px; margin-top: 36px; }
    .footer small { font-size: 0.78em; line-height: 1.6; }
    .footer-chip { font-size: 0.7em; padding: 3px 8px 1px; margin: 0 2px; }
    .footer-grid { gap: 22px; padding-bottom: 20px; margin-bottom: 18px; }
    .footer-bloque h4 { font-size: 0.78em; margin-bottom: 12px; letter-spacing: 0.14em; }
    .footer-bloque h4::after { width: 24px; height: 2.5px; }
    .footer-logo { padding: 10px 12px; }
    .footer-logo img { height: 44px; }
    .footer-logo span { font-size: 0.88em; }
    .footer-logo small { font-size: 0.7em; }
    .footer-navega a, .footer-legal a { font-size: 0.9em; }
    .footer-creditos { padding: 0; gap: 6px; }
    .footer-creditos-label { font-size: 0.68em; letter-spacing: 0.24em; }
    .footer-creditos-marca { font-size: 1.5em; }

    /* === Paginacion === */
    .pagina-links a, .pagina-links span { padding: 6px 10px; font-size: 0.76em; }

    /* === Nav hola (mobile, ya overridea) === */
    .nav-hola { font-size: 0.86em; padding: 8px 12px !important; }

    /* === Lista vecinos disponibles (Vos case sin link) === */
    .lista-vecinos-disponibles li > small { display: block; margin-left: 0; margin-top: 3px; }
}

/* === Pase fino para pantallas muy chicas (~360-380px) === */
@media (max-width: 380px) {
    /* Topbar y logo aun mas compactos */
    .topbar .wrap { min-height: 54px; gap: 6px; }
    .logo { font-size: 0.98em; }
    .logo::before { font-size: 0.72em; padding: 2px 5px 0; }

    /* Hero */
    .hero { padding: 22px 14px 24px; box-shadow: 4px 4px 0 var(--tinta); }
    .hero-title { font-size: clamp(1.9rem, 11.5vw, 2.6rem) !important; }
    .hero-kicker { font-size: 0.7em !important; padding: 5px 10px 3px !important; letter-spacing: 0.14em; }
    .hero-lead { font-size: 0.98em; }
    .hero-note { font-size: 0.88em; margin-bottom: 18px; }
    .hero-art { max-width: 250px; }

    /* === Match cards: aun mas compacto en celulares chicos === */
    .match-card { padding: 16px 14px 12px; border-left-width: 8px; }
    .match-card::before {
        font-size: 0.58em;
        padding: 2px 22px;
        top: 7px;
        right: -26px;
    }
    .match-card h3 { padding-right: 50px; font-size: 0.98em; }
    .match-intercambio { padding: 10px; }
    .match-fig { padding: 9px 10px; }
    .match-fig strong { font-size: 1.05em; }
    .solicitud-card { padding: 16px 14px 12px; border-left-width: 8px; }

    /* Album: 2 cols garantizadas pero un pelin mas chicas */
    .album-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .fig { padding: 9px 6px 7px; }
    .fig .nombre { font-size: 0.85em; min-height: 2em; }

    /* Modal aun mas compacto */
    .modal-bg { padding: 8px; }
    .modal { padding: 20px 16px; }

    /* Disponibles a 1 columna real */
    .disponibles-grid { grid-template-columns: 1fr; }

    /* Ofrecer: 2 cols obligadas */
    .ofrecer-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* Form padding minimo */
    .form { padding: 18px 13px; }

    /* Codigo OTP mas chico */
    .codigo-input {
        font-size: 1.45em !important;
        letter-spacing: 0.28em !important;
        padding: 12px 6px !important;
    }

    /* Tabs aun mas compactas */
    .tabs-mis-cambios .tab { padding: 7px 9px; font-size: 0.74em; gap: 4px; }
    .tabs-mis-cambios .tab-count { min-width: 18px; height: 18px; font-size: 0.68em; }

    /* Faltantes chips densos */
    .faltante-chip { font-size: 0.74em; padding: 4px 7px; }
    .faltantes-chips { gap: 5px; }

    /* Acciones del match: en 360px que se apilen vertical */
    .match-acciones form { flex: 1 1 100%; }

    /* Vecino acciones */
    .vecino-acciones { gap: 8px; }
    .vecino-acciones .btn { flex: 1; text-align: center; }
}

/* Pantallas muy bajas (landscape phone, etc.): evitar que modal sobrepase */
@media (max-height: 600px) {
    .modal { max-height: calc(100vh - 24px); overflow-y: auto; }
    .lista-vecinos { max-height: 160px; }
}