/* Vareo (18/10/2026). Se sirve tal cual, sin pasar por Tailwind, como el
   crucero: el juego es una pantalla cerrada con sus propios colores, los del
   olivar en invierno. */
.vareo {
    --cielo: #d7e3e6;
    --oliva: #556b2f;
    --crema: #efe8d6;
    --albero: #e2b33c;
    --tinta: #2b2a22;
    --hueso: #fffaf0;
    --rojo: #c8402f;
    --sombra: rgba(43, 42, 34, .22);
}

/*
  DENTRO DEL PORTAL, NO A PANTALLA COMPLETA, como el crucero: un alto cómodo
  con la cabecera y el pie alrededor. De pie cabe el olivo entero.
*/
.vareo.juego {
    /* Lo que queda de pantalla entre la cabecera del portal y su barra de abajo: los mantos
       van abajo del todo y no pueden quedar debajo del pliegue. */
    height: min(calc(100vh - 175px), 860px);
    height: min(calc(100dvh - 175px), 860px);
    min-height: 440px;
    color: var(--tinta);
    font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
}

/* ------------------------------------------------------------ Marcador */
.vareo .marcador { display: flex; align-items: center; gap: 8px; }

.vareo .reloj {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    background: var(--hueso);
    border-radius: 999px;
    padding: 4px 14px;
    box-shadow: 0 2px 0 var(--sombra);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vareo .reloj b { font-size: 19px; line-height: 1.2; white-space: nowrap; }
.vareo .reloj .sol { font-size: 20px; }
.vareo .reloj .limite { margin-left: auto; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }

/* La última hora antes de tener que salir, en rojo y latiendo: se ve sin leer. */
.vareo .reloj.apurado { background: #ffe1d9; color: var(--rojo); animation: latido .5s ease-in-out infinite alternate; }

@keyframes latido { to { transform: scale(1.03); } }

.vareo .sonido {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--hueso);
    color: var(--tinta);
    box-shadow: 0 2px 0 var(--sombra);
    cursor: pointer;
}

.vareo .sonido svg { width: 24px; height: 24px; }
.vareo .sonido .con { display: none; }
.vareo .sonido[aria-pressed="true"] .con { display: inline; }
.vareo .sonido[aria-pressed="true"] .sin { display: none; }
.vareo .sonido:focus-visible { outline: 3px solid var(--oliva); outline-offset: 2px; }

.vareo .avance {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    min-width: 0;
}

.vareo .avance #jornada { white-space: nowrap; opacity: .75; }
.vareo .avance #remolque { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vareo .avance .ramas { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vareo .avance .ramas.peligro { color: var(--rojo); }

.vareo .barra {
    flex: 1;
    min-width: 40px;
    height: 9px;
    border-radius: 999px;
    background: rgba(35, 48, 59, .14);
    overflow: hidden;
}

.vareo .barra { position: relative; height: 12px; }
.vareo .barra #relleno { display: block; height: 100%; width: 0; background: var(--oliva); border-radius: 999px; }
.vareo .barra #relleno.lleno { background: var(--albero); }
/* La raya del cupo: hasta ahí es «lleno»; de ahí en adelante, colmo. */
.vareo .barra .raya { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tinta); left: 66.6%; }

/* ------------------------------------------------------------ Campo */
.vareo .campo {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--crema);
    box-shadow: 0 5px 0 rgba(35, 48, 59, .18), 0 14px 30px rgba(35, 48, 59, .22);
    /* El dedo mueve al jugador, no la página. */
    touch-action: none;
}

.vareo canvas { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------ Botones sobre el campo */
.vareo .acciones {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

.vareo .acciones .boton { pointer-events: auto; }
.vareo .acciones .boton[hidden] { display: none; }
.vareo .boton.chico { font-size: 15px; padding: 8px 18px; }
.vareo .boton.molino { background: #f6efe0; box-shadow: 0 4px 0 #a99a74; }

/* ------------------------------------------------------------ Carteles */
.vareo .cartel {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    text-align: center;
    padding: 18px;
    background: rgba(46, 58, 30, .5);
    text-shadow: 0 1px 3px rgba(20, 25, 10, .55);
    color: var(--hueso);
    overflow-y: auto;
}

.vareo .cartel[hidden] { display: none; }

/*
  EN LA BÁSCULA, EL CARTEL SE VA ABAJO Y SE ENCOGE: arriba queda el vale, y
  en medio la tolva, el tractor y la pantalla con los kilos.
*/
.vareo .cartel.al-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-end;
    gap: 6px 10px;
    padding: 12px 12px 14px;
    background: linear-gradient(rgba(46, 58, 30, 0) 58%, rgba(46, 58, 30, .88) 78%);
}

.vareo .cartel.al-pie .firma { display: none; }
.vareo .cartel.al-pie h1 { flex-basis: 100%; font-size: clamp(19px, 5vw, 28px); }
.vareo .cartel.al-pie p { flex-basis: 100%; font-size: 14px; }
.vareo .cartel.al-pie .marca { flex-basis: auto; }
.vareo .cartel.al-pie .boton { font-size: 16px; padding: 8px 20px; }

.vareo .firma {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    background: rgba(255, 250, 240, .94);
    color: var(--tinta);
    border-radius: 999px;
    padding: 7px 15px;
    box-shadow: 0 3px 0 rgba(35, 48, 59, .25);
}

.vareo .firma .de { font-weight: 600; opacity: .62; font-size: 13px; letter-spacing: .03em; }
.vareo .firma .logo { display: block; height: 24px; width: auto; }

.vareo .cartel h1 { margin: 0; color: var(--hueso); font-size: clamp(27px, 7.5vw, 44px); line-height: 1.02; text-wrap: balance; }
.vareo .cartel p { margin: 0; font-size: 15px; max-width: 34ch; font-weight: 600; line-height: 1.35; }

.vareo .cartel .hoy,
.vareo .cartel .marca {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 250, 240, .18);
    font-size: 14px;
}

.vareo .cartel .marca[hidden] { display: none; }

.vareo .boton {
    font: inherit;
    font-weight: 800;
    font-size: 19px;
    color: var(--tinta);
    background: var(--albero);
    border: 0;
    border-radius: 999px;
    padding: 11px 30px;
    cursor: pointer;
    box-shadow: 0 4px 0 #b88a22;
}

.vareo .boton:active { transform: translateY(3px); box-shadow: 0 1px 0 #b88a22; }
.vareo .boton:focus-visible { outline: 3px solid var(--hueso); outline-offset: 3px; }

.vareo .boton.otro {
    background: transparent;
    color: var(--hueso);
    box-shadow: inset 0 0 0 2px var(--hueso);
    font-size: 16px;
    padding: 8px 22px;
}

.vareo .boton.otro[hidden] { display: none; }

.vareo .pie { margin: 0; text-align: center; font-size: 12px; font-weight: 600; opacity: .7; }

/*
  TUMBADO, SIN EL PORTAL ALREDEDOR, igual que el vóley: la cabecera y la barra
  de abajo son fijas y en un móvil apaisado se comerían media calle.
*/
@media (orientation: landscape) and (max-height: 560px) {
    body:has(.vareo) #cabecera-del-portal,
    body:has(.vareo) .barra-de-abajo,
    body:has(.vareo) #aviso-de-especial { display: none; }
    body:has(.vareo) #contenido { padding-block: 0; }
    body:has(.vareo) { padding-bottom: 0; }

    .vareo.juego { height: 100vh; height: 100dvh; min-height: 280px; gap: 4px; padding: 4px 8px; }
    .vareo .pie { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vareo .reloj.apurado { animation: none; }
}