@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/anton-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/karla-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/spacemono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/spacemono-700.woff2') format('woff2');
}

:root {
    --pizarra: #16211C;
    --pizarra-alta: #1C2921;
    --pizarra-borde: #2A382F;
    --tiza: #F2EFE6;
    --tiza-tenue: #B7BFB4;
    --azul: #3E8EA8;
    --azul-oscuro: #2E6C81;
    --oro: #E8B93E;
    --plata: #C9D1D3;
    --bronce: #C97F45;
    --radio: 16px;
    --radio-chico: 10px;
    --espacio: 16px;
    --toque-min: 48px;
    --rojo: #C9503E;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--pizarra);
    color: var(--tiza);
    font-family: 'Karla', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: calc(var(--espacio) * 2);
}

h1, h2, h3 {
    font-family: 'Anton', 'Karla', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.cifra {
    font-family: 'Space Mono', monospace;
}

a {
    color: var(--azul);
}

button {
    font-family: inherit;
}

img, svg {
    max-width: 100%;
}

/* Cabecera */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--pizarra);
    border-bottom: 1px solid var(--pizarra-borde);
    padding: 14px var(--espacio);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 12px;
}

.cabecera__titulo {
    font-size: 22px;
    color: var(--tiza);
    flex: 1 1 auto;
}

.cabecera__volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--toque-min);
    padding: 0 10px;
    color: var(--tiza-tenue);
    text-decoration: none;
    font-family: 'Karla', sans-serif;
    font-weight: 700;
}

.contenedor {
    padding: var(--espacio);
    max-width: 560px;
    margin: 0 auto;
}

.subtitulo {
    color: var(--tiza-tenue);
    margin-top: 6px;
    font-size: 15px;
}

/* Estados / pastillas */
.pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pastilla--abierta {
    background: rgba(62, 142, 168, 0.18);
    color: var(--azul);
}

.pastilla--cerrada {
    background: rgba(232, 185, 62, 0.18);
    color: var(--oro);
}

/* Lista de participantes (Inicio) */
.lista-participantes {
    list-style: none;
    margin: var(--espacio) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.participante {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    background: var(--pizarra-alta);
    border: 1px solid var(--pizarra-borde);
    border-radius: var(--radio);
    color: var(--tiza);
    text-align: left;
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    cursor: pointer;
}

.participante:active {
    background: var(--pizarra-borde);
}

.participante--yo {
    border-color: var(--azul);
}

.participante__nombre {
    font-weight: 700;
    display: block;
}

.participante__tapa {
    display: block;
    color: var(--tiza-tenue);
    font-size: 14px;
    margin-top: 2px;
}

.estado-voto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.estado-voto--ok { color: var(--azul); }
.estado-voto--pendiente { color: var(--tiza-tenue); }

.aviso {
    margin-top: var(--espacio);
    padding: 14px 16px;
    border-radius: var(--radio);
    background: rgba(201, 80, 62, 0.15);
    color: #F2A99A;
    font-size: 15px;
}

.aviso--info {
    background: rgba(62, 142, 168, 0.15);
    color: #9FD4E6;
}

/* Botones */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--toque-min);
    width: 100%;
    padding: 0 20px;
    border-radius: var(--radio);
    border: none;
    background: var(--azul);
    color: var(--tiza);
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.boton:disabled {
    background: var(--pizarra-borde);
    color: var(--tiza-tenue);
    cursor: not-allowed;
}

.boton--fantasma {
    background: transparent;
    border: 1px solid var(--pizarra-borde);
    color: var(--tiza);
}

.boton--peligro {
    background: var(--rojo);
}

.boton--chico {
    min-height: 40px;
    font-size: 14px;
    width: auto;
    padding: 0 16px;
}

/* Pantalla Votar: tarjetas de tapas */
.lista-votar {
    list-style: none;
    margin: var(--espacio) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tapa-votar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    width: 100%;
    padding: 12px 16px;
    background: var(--pizarra-alta);
    border: 2px solid var(--pizarra-borde);
    border-radius: var(--radio);
    color: var(--tiza);
    text-align: left;
    cursor: pointer;
}

.tapa-votar:active {
    background: var(--pizarra-borde);
}

.tapa-votar[data-puntos="3"] { border-color: var(--oro); }
.tapa-votar[data-puntos="2"] { border-color: var(--plata); }
.tapa-votar[data-puntos="1"] { border-color: var(--bronce); }

.tapa-votar__banderilla {
    flex: none;
    width: 34px;
    height: 44px;
}

.tapa-votar__info {
    flex: 1;
    min-width: 0;
}

.tapa-votar__nombre {
    font-weight: 700;
    display: block;
}

.tapa-votar__tapa {
    display: block;
    color: var(--tiza-tenue);
    font-size: 14px;
    margin-top: 2px;
}

.barra-votar-fija {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent, var(--pizarra) 30%);
    padding: 14px 0 6px;
    margin-top: 8px;
}

/* Marcador */
.lista-marcador {
    list-style: none;
    margin: var(--espacio) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fila-marcador {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pizarra-alta);
    border: 1px solid var(--pizarra-borde);
    border-radius: var(--radio);
}

.fila-marcador__puesto {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 20px;
    color: var(--tiza-tenue);
    width: 28px;
    flex: none;
    text-align: center;
}

.fila-marcador__banderilla {
    flex: none;
    width: 28px;
    height: 36px;
}

.fila-marcador__cuerpo {
    flex: 1;
    min-width: 0;
}

.fila-marcador__cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.fila-marcador__nombre {
    font-weight: 700;
}

.fila-marcador__puntos {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--oro);
    white-space: nowrap;
}

.fila-marcador__tapa {
    color: var(--tiza-tenue);
    font-size: 14px;
    margin: 2px 0 8px;
}

.barra-proporcional {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--pizarra-borde);
    overflow: hidden;
}

.barra-proporcional__relleno {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--bronce), var(--oro));
    border-radius: 999px;
}

.fila-marcador--votado .fila-marcador__nombre::after {
    content: '✓';
    color: var(--azul);
    margin-left: 6px;
}

/* Admin */
.campo {
    margin-bottom: 14px;
}

.campo label {
    display: block;
    font-size: 14px;
    color: var(--tiza-tenue);
    margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="tel"] {
    width: 100%;
    min-height: var(--toque-min);
    padding: 0 14px;
    background: var(--pizarra-alta);
    border: 1px solid var(--pizarra-borde);
    border-radius: var(--radio-chico);
    color: var(--tiza);
    font-size: 17px;
}

.campo input:focus {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

.fila-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--pizarra-alta);
    border: 1px solid var(--pizarra-borde);
    border-radius: var(--radio-chico);
    margin-bottom: 8px;
}

.fila-admin__info {
    min-width: 0;
}

.fila-admin__nombre {
    font-weight: 700;
    display: block;
}

.fila-admin__tapa {
    color: var(--tiza-tenue);
    font-size: 13px;
}

.separador {
    height: 1px;
    background: var(--pizarra-borde);
    margin: 24px 0;
    border: none;
}

.grupo-botones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.grupo-botones .boton {
    width: auto;
    flex: 1;
    min-width: 140px;
}

.oculto {
    display: none !important;
}

.cargando {
    text-align: center;
    color: var(--tiza-tenue);
    padding: 40px 0;
}

@media (min-width: 560px) {
    body {
        font-size: 18px;
    }
}