/* ================================================================
   Fotos y videos de la boda — hoja de estilos
   Comparte paleta, tipografías y componentes con la invitación
   digital (estilos-referencia.css) para que ambas se vean como
   una sola pieza.
   Fuentes servidas en local desde assets/fuentes/ — sin Google
   Fonts ni ningún otro recurso externo en tiempo de ejecución.
================================================================ */

/* ── 0. Fuentes locales ─────────────────────────────────────── */
@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/great-vibes.woff2') format('woff2');
}

/* Fuente variable: un solo archivo cubre los pesos 300–700. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fuentes/montserrat.woff2') format('woff2');
}

/* ── 1. Paleta y tokens ─────────────────────────────────────── */
:root {
    --color-bg:            #f7f4ee;
    --color-primary:       #4e6f52;
    --color-secondary:     #7a8f72;
    --color-accent:        #c9a96a;
    --color-accent-light:  #e8d5a3;
    --color-heading:       #4f5d4f;
    --color-muted:         #7d5f3d;
    --color-cta:           #3f5e45;
    --color-cta-hover:     #2f4734;
    --color-surface:       #ffffff;
    --color-border:        #ddd6cc;
    --color-dark:          #2d4a30;
    --color-dark-text:     #b5c9b2;

    --color-exito:         #4e6f52;
    --color-error:         #a4453a;

    --font-script:  'Great Vibes', cursive;
    --font-sans:    'Montserrat', sans-serif;
}

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

/* Varias piezas se ocultan con el atributo [hidden] desde app.js, pero sus
   reglas de layout (display:flex/grid) ganan a la hoja del navegador. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    background-color: var(--color-bg);
    color: var(--color-heading);
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.9;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── 3. Estructura ──────────────────────────────────────────── */
.cabecera {
    width: 100%;
    max-width: 34rem;
    padding: clamp(1.1rem, 3.5vw, 1.8rem) 1.35rem 0.4rem;
    text-align: center;
}

.logo {
    max-width: clamp(3.4rem, 14vw, 4.6rem);
    height: auto;
    margin: 0 auto 0.35rem;
    display: block;
}

/* Línea de contexto: presente pero sin competir con los nombres. */
.titulo-frase {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(.68rem, 2.4vw, .78rem);
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-heading);
    opacity: .6;
}

.monograma {
    margin-top: .15rem;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(1.7rem, 6.4vw, 2.3rem);
    line-height: 1.15;
    color: var(--color-primary);
    white-space: pre-line;
}

.lema {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(.88rem, 2.9vw, 1.02rem);
    line-height: 1.4;
    color: var(--color-heading);
    opacity: .85;
}

.contenido {
    width: 100%;
    max-width: 34rem;
    flex: 1;
    padding: 0 1.35rem 2.5rem;
}

/* ── 4. Divisor ornamental ──────────────────────────────────── */
.divider-diamond {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    max-width: 220px;
    margin: .55rem auto;
}
.divider-diamond::before,
.divider-diamond::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-accent));
}
.divider-diamond::after { background: linear-gradient(to left, transparent, var(--color-accent)); }
.divider-diamond span {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--color-accent);
    transform: rotate(45deg);
}

/* ── 5. Tarjetas ────────────────────────────────────────────── */
.tarjeta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 1.6rem 1.3rem;
    box-shadow: 0 8px 28px rgba(78, 111, 82, .07);
}

.boton-podio {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 44px;
    margin-top: 1.8rem;
    padding: .7rem 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: 30px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    /* En pantallas muy estrechas el interletrado cede antes que el texto. */
    letter-spacing: clamp(1.5px, .8vw, 3px);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-cta);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.boton-podio:hover {
    background: var(--color-cta);
    color: #fff;
    box-shadow: 0 6px 18px rgba(63, 94, 69, .25);
}
.icono-podio { flex-shrink: 0; }

.fila-acciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.8rem;
}

.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    max-width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 22px;
    padding: .45rem .9rem;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: clamp(1px, .5vw, 2px);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.boton-secundario:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.icono-secundario { flex-shrink: 0; }

/* Acción principal dentro de una fila de botones secundarios (p. ej. guardar
   el avatar): mismo tamaño, más peso visual. */
.boton-secundario.destacado {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: #fff;
}
.boton-secundario.destacado:hover:not(:disabled) {
    background: transparent;
    color: var(--color-cta);
}
.boton-secundario:disabled { opacity: .55; cursor: default; }

/* ── 6. Formulario ──────────────────────────────────────────── */
.etiqueta {
    display: block;
    margin-bottom: .55rem;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.fila-etiqueta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    margin: 1.8rem 0 .7rem;
}
.fila-etiqueta .etiqueta { margin: 0; }

.boton-otros {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    gap: .4rem;
    min-height: 44px;
    background: var(--color-bg);
    border: 1px solid var(--color-accent);
    border-radius: 22px;
    padding: .35rem .8rem;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: clamp(1px, .5vw, 2px);
    text-transform: uppercase;
    color: var(--color-cta);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.boton-otros:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.boton-otros:active { transform: scale(.96); }
.icono-otros { flex-shrink: 0; transition: transform .4s ease; }
.boton-otros:hover .icono-otros { transform: rotate(180deg); }

.campo {
    width: 100%;
    padding: .8rem .9rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-heading);
}
.campo::placeholder { color: var(--color-muted); font-style: italic; }
.campo:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── 7. Botones ─────────────────────────────────────────────── */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    margin-top: 1.6rem;
    padding: .85rem 2rem;
    border: 2px solid transparent;
    border-radius: 50px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease,
                transform .2s ease, box-shadow .3s ease, letter-spacing .3s ease;
}

.boton.principal {
    background: var(--color-cta);
    color: #fff;
    box-shadow: 0 4px 14px rgba(78, 111, 82, .25);
}
.boton.principal:hover:not(:disabled) {
    background: transparent;
    color: var(--color-cta);
    border-color: var(--color-cta);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(78, 111, 82, .35);
    letter-spacing: 3px;
}
.boton:disabled { opacity: .55; cursor: default; }

.aviso {
    margin-top: 1rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--color-error);
}

/* ── 8. Avatares ────────────────────────────────────────────── */
.rejilla-avatares {
    display: grid;
    /* minmax(0,1fr): las columnas pueden encoger por debajo del contenido
       en 320px en vez de desbordar la tarjeta. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

/* A partir de ~480px caben cinco por fila: los 10 avatares en dos filas. */
@media (min-width: 30em) {
    .rejilla-avatares { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.avatar {
    aspect-ratio: 1;
    padding: .3rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.avatar img { width: 100%; height: 100%; display: block; }
.avatar:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.avatar.elegido {
    border: 2px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ── 9. Identidad del invitado ──────────────────────────────── */
.identidad {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    margin-bottom: 1.1rem;
    padding: .9rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: 2px;
}

.avatar-grande {
    width: 3.4rem;
    height: 3.4rem;
    flex: none;
    display: block;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

/* El avatar de la cabecera es un botón: abre el modal para cambiarlo. */
.avatar-editable {
    position: relative;
    flex: none;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;
    transition: transform .2s ease;
}
.avatar-editable:hover { transform: translateY(-2px); }
.avatar-editable:hover .avatar-grande { border-color: var(--color-accent); }
.avatar-editable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.avatar-lapiz {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    background: var(--color-cta);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    color: #fff;
}

/* Sin min-width:0 el nombre largo de un invitado estira la caja flex. */
.identidad > div { min-width: 0; }

.mi-nombre {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.15rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
    color: var(--color-primary);
}

.mi-conteo {
    margin-top: .15rem;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Puesto actual en el podio, junto al nombre; enlaza al podio completo. */
.mi-posicion {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    padding: .2rem .55rem .2rem .4rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: .72rem;
    line-height: 1.4;
    text-decoration: none;
    color: var(--color-muted);
}
.mi-posicion:hover { border-color: var(--color-accent); color: var(--color-primary); }

.mi-posicion-numero {
    font-weight: 700;
    font-size: .85rem;
    color: var(--color-accent);
}

/* En el podio la pastilla toma el metal de la medalla correspondiente. */
.mi-posicion .medalla {
    position: static;
    width: 1.15rem;
    margin: 0;
    flex: none;
    animation: none;
}
.mi-posicion.en-podio {
    background: color-mix(in srgb, var(--metal) 24%, var(--color-surface));
    border-color: var(--metal);
    font-weight: 600;
    color: var(--color-primary);
}
.mi-posicion.en-podio-oro    { --metal: #dfba5e; }
.mi-posicion.en-podio-plata  { --metal: #c3cace; }
.mi-posicion.en-podio-bronce { --metal: #c98a55; }

/* ── 10. Zona de subida ─────────────────────────────────────── */
.zona-soltar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.4rem 1rem;
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg));
    border: 1px dashed var(--color-accent);
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease;
}
.zona-soltar:hover,
.zona-soltar.encima {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
    border-color: var(--color-primary);
}

.zona-icono {
    font-family: var(--font-sans);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--color-accent);
}

.zona-texto {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--color-heading);
}

.zona-ayuda {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-muted);
}

.resumen {
    margin-top: 1.1rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: .9rem;
    color: var(--color-primary);
}

/* ── 11. Lista de archivos ──────────────────────────────────── */
.lista-archivos { list-style: none; margin-top: 1.3rem; }

.archivo {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .75rem 0;
    border-top: 1px solid var(--color-border);
}

/* min-width:0 para que el nombre largo se recorte dentro del flex en vez de
   empujar la fila y desbordar la tarjeta. */
.archivo-cuerpo { flex: 1; min-width: 0; }

/* Vista previa generada en el propio teléfono (ver miniatura() en app.js).
   Mientras no está lista, la caja muestra el icono del tipo de archivo. */
.archivo-miniatura {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--color-border);
    color: var(--color-muted);
}
.archivo-miniatura canvas {
    display: block;
    width: 100%;
    height: 100%;
}
/* Con imagen dentro el fondo sobra, y un borde suave la separa de la tarjeta. */
.archivo-miniatura.con-vista {
    background: none;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.icono-tipo { display: block; line-height: 0; }

.archivo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .8rem;
}

.archivo-nombre {
    /* flex:1 + min-width:0 para que un nombre de archivo largo se recorte
       en vez de desbordar la tarjeta en móvil. */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    color: var(--color-heading);
}

.archivo-estado {
    flex: none;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-muted);
}
.archivo.ok .archivo-estado { color: var(--color-exito); }
.archivo.error .archivo-estado { color: var(--color-error); }

.barra {
    margin-top: .5rem;
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}
.barra span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--color-accent);
    transition: width .2s ease-out;
}
.archivo.ok .barra span { background: var(--color-primary); }
.archivo.error .barra span { background: var(--color-error); }

/* Cifras bajo la barra: el porcentaje manda (la barra solo lo aproxima) y
   al lado los megas ya enviados. */
.archivo-pie {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .8rem;
    margin-top: .3rem;
}

.archivo-porcentaje {
    flex: none;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-heading);
}
.archivo.ok .archivo-porcentaje { color: var(--color-exito); }
.archivo.error .archivo-porcentaje { color: var(--color-error); }

.archivo-bytes {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: .72rem;
    color: var(--color-muted);
}

/* ── 12. Podio ──────────────────────────────────────────────── */
.podio {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    /* Sin hueco: las tres peanas se tocan y leen como una sola tarima. */
    gap: 0;
    /* Centrado y con tope propio: en pantallas anchas la tarima no debe
       estirarse a lo ancho del contenido, queda en el eje de la página. */
    width: 100%;
    max-width: 26rem;
    margin: 0 auto 2.2rem;
    padding-bottom: .55rem; /* deja sitio al suelo de ::after */
}

/* Suelo continuo bajo las tres peanas, con su sombra proyectada. */
.podio::after {
    content: '';
    position: absolute;
    left: -3%;
    right: -3%;
    bottom: 0;
    height: .55rem;
    background: linear-gradient(var(--color-cta), var(--color-dark));
    border-radius: 2px;
    box-shadow: 0 8px 16px -8px rgba(45, 74, 48, .55);
}

.puesto {
    min-width: 0;
    text-align: center;
    animation: sube-puesto .55s ease-out both;
}
.puesto.p2 { animation-delay: .04s; }
.puesto.p3 { animation-delay: .1s; }
.puesto.p1 { animation-delay: .18s; }

@keyframes sube-puesto {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

/* Con un único participante el oro no debe quedar colgado a la izquierda. */
.podio:has(.puesto:only-child) {
    grid-template-columns: minmax(0, 12rem);
    justify-content: center;
}

/* El avatar necesita envoltorio propio: la medalla se ancla a él. */
.puesto-avatar {
    position: relative;
    width: 100%;
    max-width: clamp(3.4rem, 15vw, 5.6rem);
    margin: 0 auto;
}
.puesto.p1 .puesto-avatar { max-width: clamp(4.2rem, 18.5vw, 7rem); }

.puesto img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
}
.puesto.p1 img { border-color: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.puesto.p2 img { border-color: #b9bcb4; }
.puesto.p3 img { border-color: var(--color-muted); }

/* Medalla colgada del borde inferior derecho del avatar. */
.medalla {
    position: absolute;
    right: -.4rem;
    bottom: -.5rem;
    width: clamp(1.35rem, 6vw, 2.1rem);
    line-height: 0;
    filter: drop-shadow(0 2px 3px rgba(45, 74, 48, .35));
}
.puesto.p1 .medalla {
    width: clamp(1.7rem, 7.5vw, 2.6rem);
    animation: brillo-medalla 3.2s ease-in-out infinite;
}
.medalla svg { width: 100%; height: auto; display: block; }
.medalla .numero {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 11px;
}

@keyframes brillo-medalla {
    0%, 100% { filter: drop-shadow(0 2px 3px rgba(45, 74, 48, .35)); }
    50%      { filter: drop-shadow(0 2px 3px rgba(45, 74, 48, .35)) drop-shadow(0 0 6px rgba(201, 169, 106, .85)); }
}

@media (prefers-reduced-motion: reduce) {
    .puesto  { animation: none; }
    .puesto.p1 .medalla { animation: none; }
}

/* En el podio el nombre puede ocupar dos líneas antes de recortarse: en
   320px cada columna mide ~70px y el ellipsis se comía casi todo. */
.puesto-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: .75rem;
    padding: 0 .2rem;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: clamp(.75rem, 2.8vw, .9rem);
    line-height: 1.25;
    color: var(--color-primary);
}

.puesto-conteo {
    padding: 0 .2rem;
    font-size: 9px;
    letter-spacing: clamp(1px, .5vw, 2px);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Bloque de la tarima: cada barra lleva el metal de su medalla (ver
   MEDALLAS en app.js) con cara frontal iluminada al centro y cantos en
   sombra, para que se lea como un volumen y no como una barra plana. */
.peana {
    /* Un solo valor por bloque: alto y line-height (el número va centrado). */
    height: var(--alto);
    line-height: var(--alto);
    margin-top: .55rem;
    background-color: var(--metal-medio);
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, .22),
        rgba(0, 0, 0, 0) 18%,
        rgba(255, 255, 255, .35) 50%,
        rgba(0, 0, 0, 0) 82%,
        rgba(0, 0, 0, .24));
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 5px 0 var(--metal-claro),
                inset 0 -2px 0 var(--metal-oscuro);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 1.35rem);
    color: var(--metal-texto);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.puesto.p1 .peana {
    --alto: clamp(4.2rem, 16vw, 6.2rem);
    --metal-claro:  #f9e7ae;
    --metal-medio:  #dfba5e;
    --metal-oscuro: #a37f21;
    --metal-texto:  #6b4e10;
}
.puesto.p2 .peana {
    --alto: clamp(3rem, 11.5vw, 4.5rem);
    --metal-claro:  #f4f6f7;
    --metal-medio:  #c3cace;
    --metal-oscuro: #8d979d;
    --metal-texto:  #5a656b;
}
.puesto.p3 .peana {
    --alto: clamp(2.4rem, 9vw, 3.4rem);
    --metal-claro:  #f0c69c;
    --metal-medio:  #c98a55;
    --metal-oscuro: #8e5a2c;
    --metal-texto:  #63391a;
}

/* ── 12d. Marca del invitado de esta sesión ─────────────────────
   Etiqueta «TÚ» reutilizada en el podio, el ranking y la tabla. */
.chip-yo {
    display: inline-block;
    flex: none;
    padding: .1rem .4rem;
    background: var(--color-accent);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.5;
    color: #fff;
    vertical-align: middle;
}
.puesto-nombre .chip-yo { margin-left: .3rem; }
.ranking .chip-yo { margin-right: -.2rem; }

/* Tarjeta propia del podio: anillo dorado sobre el avatar (va después de
   .puesto.p1 img para ganarle el box-shadow). */
.puesto.yo img {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 50%, transparent);
}
.puesto.yo .puesto-nombre { color: var(--color-cta); }

/* Aviso propio: en qué puesto voy, con felicitación extra si estoy arriba. */
.mi-puesto {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto 1.5rem;
    padding: .75rem .95rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: 2px;
    text-align: left;
}

.mi-puesto .medalla {
    position: static;
    width: 2.1rem;
    margin: 0;
    flex: none;
    animation: none;
}

.mi-puesto-texto { min-width: 0; }

.mi-puesto-titulo {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: var(--color-primary);
}

.mi-puesto-detalle {
    margin-top: .2rem;
    font-family: var(--font-sans);
    font-size: .78rem;
    line-height: 1.4;
    color: var(--color-muted);
}

/* Top 3: el aviso toma el metal de su medalla y entra con un latido. */
.mi-puesto.celebra {
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--metal) 30%, var(--color-surface)),
        var(--color-surface) 70%);
    border-color: var(--metal);
    box-shadow: 0 8px 22px -14px rgba(45, 74, 48, .6);
    animation: latido-mi-puesto .9s ease-out both;
}
.mi-puesto.celebra .mi-puesto-titulo { color: var(--color-cta); }
.mi-puesto.celebra-oro    { --metal: #dfba5e; }
.mi-puesto.celebra-plata  { --metal: #c3cace; }
.mi-puesto.celebra-bronce { --metal: #c98a55; }

@keyframes latido-mi-puesto {
    0%   { opacity: 0; transform: scale(.96); }
    60%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mi-puesto.celebra { animation: none; }
}

.ranking { list-style: none; }

.ranking li {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .5rem;
    padding: .6rem .85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.ranking li.yo {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.ranking li.yo .posicion,
.ranking li.yo .nombre { color: var(--color-cta); font-weight: 600; }

.ranking .posicion {
    width: 1.6rem;
    flex: none;
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-muted);
}

.ranking img {
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.ranking .nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: .95rem;
    color: var(--color-heading);
}

.ranking .conteo {
    flex: none;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-accent);
}

.vacio {
    margin-top: 1.5rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-muted);
}

.totales {
    margin-top: 1.4rem;
    text-align: center;
    font-size: 9px;
    letter-spacing: clamp(1.5px, .8vw, 3px);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* ── 12c. Podio completo (modal con la tabla de posiciones) ──── */
.modal {
    /* Centrado explícito: sin esto dependemos de la hoja del navegador para
       el <dialog> y en algunos motores queda clavado arriba a la izquierda.
       Con inset:0 + height:fit-content, los márgenes auto lo centran.
       El ancho va en % (no vw) para no contar la barra de scroll. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100% - 2rem);
    max-width: 34rem;
    height: fit-content;
    max-height: min(80vh, 44rem);
    padding: 0;
    background: var(--color-surface);
    color: var(--color-heading);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(45, 74, 48, .28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* El display:flex de arriba se impondría al dialog cerrado. */
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(45, 74, 48, .5); }

.modal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: none;
    padding: .9rem 1rem .9rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-titulo {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.modal-cerrar {
    width: 34px;
    height: 34px;
    flex: none;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.modal-cerrar:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Solo scrollea la tabla: cabecera y pie quedan fijos.
   La base debe ser auto (no 0): el modal tiene height:fit-content, así que
   con flex-basis:0 + min-height:0 el cuerpo colapsa a 0px en los motores
   móviles y solo se ven cabecera y pie. */
.modal-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-pie {
    flex: none;
    padding: .7rem 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 9px;
    letter-spacing: clamp(1.5px, .8vw, 3px);
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Modal de cambio de avatar: la rejilla necesita aire propio, y la primera
   fila-etiqueta no debe heredar su margen superior dentro del modal. */
.modal-cuerpo-avatar { padding: 0 1.2rem 1.2rem; }
.modal-cuerpo-avatar .fila-etiqueta { margin-top: 1.2rem; }

/* ── Historial de subidas (modal de «Mis archivos») ─────────── */
.historial { list-style: none; }

.historial-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.2rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
}
.historial-item:last-child { border-bottom: none; }

.historial-texto { flex: 1; min-width: 0; }

.historial-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--color-heading);
}

.historial-meta {
    margin-top: .15rem;
    font-family: var(--font-sans);
    font-size: .72rem;
    color: var(--color-muted);
}

/* «Cargando…», el error de red y el «todavía no has subido nada» comparten
   sitio: solo uno de los tres puede estar en pantalla a la vez. */
.historial-aviso {
    padding: 2rem 1.2rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--color-muted);
}

.modal-pie-acciones {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: .8rem 1.2rem;
}

.tabla-podio {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: .9rem;
    line-height: 1.4;
}

.tabla-podio th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .55rem .7rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-muted);
}
.tabla-podio th.num { text-align: right; }

.tabla-podio td {
    padding: .5rem .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    vertical-align: middle;
}
.tabla-podio tr:last-child td { border-bottom: none; }
/* Mi fila, marcada con banda lateral: la tabla puede ser larga y hay que
   encontrarse de un vistazo (abrir el modal además la centra). */
.tabla-podio tr.yo { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.tabla-podio tr.yo td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
.tabla-podio tr.yo .nombre-tabla { font-weight: 600; color: var(--color-cta); }

.tabla-podio .celda-puesto {
    width: 2.8rem;
    text-align: center;
    font-weight: 700;
    color: var(--color-muted);
}
/* En la tabla la medalla no cuelga de ningún avatar: fluye en su celda. */
.tabla-podio .medalla {
    position: static;
    width: 1.6rem;
    margin: 0 auto;
    animation: none;
}

.tabla-podio .celda-invitado { width: 100%; }
.tabla-podio .invitado-tabla {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.tabla-podio img {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}
.tabla-podio .nombre-tabla {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabla-podio td.num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}
.tabla-podio td.col-peso { font-weight: 400; color: var(--color-muted); }

/* Bajo ~415px el peso sobra antes que el nombre. */
@media (max-width: 26em) {
    .tabla-podio .col-peso { display: none; }
}

/* ── 12b. Podio en pantallas grandes ────────────────────────────
   Una sola columna centrada: el podio manda en el eje central y el
   ranking cae debajo. Todas las medidas del podio son fluidas (clamp),
   así que aquí solo se ensancha la columna de contenido. */
@media (min-width: 48em) {
    body[data-pagina="podio"] .cabecera,
    body[data-pagina="podio"] .contenido { max-width: 42rem; }
}

/* ── 13. Footer ─────────────────────────────────────────────── */
.site-footer {
    width: 100%;
    margin-top: auto;
    padding: clamp(1.1rem, 3vw, 1.6rem) 1.25rem;
    background-color: var(--color-dark);
    text-align: center;
}

.footer-tagline {
    margin-bottom: .45rem;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-dark-text);
}

.footer-names {
    font-family: var(--font-script);
    font-size: clamp(1.15rem, 3vw, 1.7rem);
    line-height: 1.2;
    color: var(--color-accent);
    white-space: pre-line;
}

/* ── 14. Animaciones de entrada ─────────────────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── 15. Accesibilidad: movimiento reducido ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, .fade-in {
        animation: none !important;
        transition: none !important;
    }
    .fade-in { opacity: 1 !important; transform: none !important; }
    .barra span { transition: none !important; }
    .globo-ayuda { transition: none !important; }
}

/* ── 16. Ayudas contextuales ────────────────────────────────────
   Un botón «?» junto a lo que necesita explicación y un globo con el
   texto. En un móvil no hay hover, así que el globo se abre al tocar
   (ver iniciarAyudas() en app.js); el hover es solo un extra de
   escritorio. */
.ayuda {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* El círculo mide 18px por estética; el área de toque, 40px. */
.ayuda::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}
.ayuda:hover,
.ayuda[aria-expanded="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.globo-ayuda {
    position: fixed;
    z-index: 3000;
    /* Con position:fixed, 100vw es la pantalla: el globo nunca la desborda. */
    max-width: min(17rem, calc(100vw - 1.5rem));
    padding: .6rem .8rem;
    background: var(--color-dark);
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(45, 74, 48, .35);
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: .78rem;
    line-height: 1.55;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    color: #eef1ea;
    opacity: 0;
    transform: translateY(-.25rem);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none; /* el globo nunca roba el toque de lo que hay debajo */
}
.globo-ayuda.visible { opacity: 1; transform: none; }

.globo-flecha {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-dark);
    transform: rotate(45deg);
}

/* Etiqueta de sección con su «?» al lado. */
.etiqueta-con-ayuda {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
}
.etiqueta-con-ayuda .etiqueta { margin-bottom: 0; }
/* Dentro de .fila-etiqueta el margen inferior lo pone la fila. */
.fila-etiqueta .etiqueta-con-ayuda { margin-bottom: 0; }

/* Texto de presentación y pasos: qué es esto y qué se espera de mí. */
.intro {
    margin-bottom: 1.2rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--color-heading);
}

.pasos {
    list-style: none;
    margin-bottom: 1.6rem;
    padding: .9rem 1rem;
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
    border: 1px solid var(--color-border);
    border-radius: 2px;
}

.pasos li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--color-heading);
}
.pasos li + li { margin-top: .5rem; }

.paso-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    background: var(--color-cta);
    border-radius: 50%;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1;
    color: #fff;
}

/* Apunte discreto al pie de una tarjeta o sección. */
.nota {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .9rem;
    text-align: center;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--color-muted);
}

/* Límites reales de la subida, bajo el texto de la zona. */
.zona-detalle {
    margin-top: .3rem;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.cabecera-lista { margin: 1.3rem 0 -.4rem; }