/* ==========================================================
   CataVinos · hoja de estilos única (móvil primero)
   Tema oscuro deliberado: las catas se hacen de noche y con
   luz baja; una pantalla blanca deslumbra y molesta al resto.
   ========================================================== */

:root {
  --fondo:        #150a10;
  --superficie:   #1e0f17;
  --superficie-2: #2a1620;
  --superficie-3: #351c28;
  --borde:        rgba(255, 236, 240, .11);
  --borde-fuerte: rgba(255, 236, 240, .22);
  --texto:        #f7edf0;
  --tenue:        #bb9dab;
  --muy-tenue:    #8a7280;

  --vino:         #d81e4a;
  --vino-suave:   rgba(216, 30, 74, .16);
  --oro:          #e0ac4c;
  --oro-suave:    rgba(224, 172, 76, .15);
  --plata:        #c3ccd6;
  --bronce:       #c98b5e;
  --verde:        #45c98a;
  --azul:         #5aa8e8;

  --r-s:  8px;
  --r-m:  14px;
  --r-l:  22px;
  --sombra: 0 10px 34px rgba(0, 0, 0, .45);

  --serif: ui-serif, "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ancho: 640px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  background-image:
    radial-gradient(1100px 620px at 50% -14%, rgba(216, 30, 74, .17), transparent 62%),
    radial-gradient(760px 460px at 100% 100%, rgba(224, 172, 76, .07), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, .display { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 1.7rem; line-height: 1.15; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--oro); }

.envoltorio { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 96px; }
.centrado   { text-align: center; }
.tenue      { color: var(--tenue); }
.pequeno    { font-size: .85rem; }
.muy-pequeno{ font-size: .76rem; }
.oculto     { display: none !important; }
.mono       { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: rgba(21, 10, 16, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
  padding: env(safe-area-inset-top) 0 0;
}
.cabecera-fila {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  min-height: 58px;
}
.cabecera-fila h1 { font-size: 1.12rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 1.15rem; }
/* El SVG del logo no lleva width/height propios: sin esta regla se
   estira al 100 % del contenedor y ocupa media pantalla. */
.copa { width: 22px; height: 22px; flex: none; display: block; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2));
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: 20px;
  margin: 14px 0;
  box-shadow: var(--sombra);
}
.tarjeta.compacta { padding: 14px 16px; border-radius: var(--r-m); }
.tarjeta.plana { box-shadow: none; background: var(--superficie); }

/* ---------- botones ---------- */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600;
  padding: 14px 20px; border-radius: 999px;
  background: var(--vino); color: #fff;
  transition: transform .12s ease, filter .16s ease, background .16s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; text-decoration: none; text-align: center;
}
.btn:hover  { filter: brightness(1.1); }
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; filter: none; }
.btn.bloque   { display: flex; width: 100%; }
.btn.secundario { background: var(--superficie-3); color: var(--texto); border-color: var(--borde-fuerte); }
.btn.fantasma   { background: transparent; color: var(--tenue); border-color: var(--borde); }
.btn.oro        { background: var(--oro); color: #29180b; }
.btn.peligro    { background: transparent; color: #ef6b8a; border-color: rgba(239, 107, 138, .4); }
.btn.pequeno-btn{ padding: 8px 14px; min-height: 38px; font-size: .86rem; }
.btn-iconos { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- formularios ---------- */
label.campo { display: block; margin: 14px 0; }
label.campo > span.etiqueta {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--tenue); margin-bottom: 6px; letter-spacing: .02em;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=url], select, textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  padding: 13px 14px;
  min-height: 48px;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--vino);
  box-shadow: 0 0 0 3px var(--vino-suave);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23bb9dab' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 38px;
}
.fila { display: flex; gap: 10px; }
.fila > * { flex: 1; min-width: 0; }
.codigo-entrada {
  font-family: ui-monospace, monospace; font-size: 1.9rem; letter-spacing: .34em;
  text-align: center; text-transform: uppercase; padding: 16px 10px 16px 22px; font-weight: 700;
}

/* ---------- avisos ---------- */
.aviso {
  border-radius: var(--r-m); padding: 12px 14px; margin: 12px 0;
  font-size: .9rem; border: 1px solid;
}
.aviso.error   { background: rgba(216, 30, 74, .13);  border-color: rgba(216, 30, 74, .4);  color: #ffb3c4; }
.aviso.ok      { background: rgba(69, 201, 138, .12); border-color: rgba(69, 201, 138, .35);color: #9fe8c4; }
.aviso.info    { background: rgba(90, 168, 232, .11); border-color: rgba(90, 168, 232, .3); color: #b6d9f6; }
.aviso.atencion{ background: var(--oro-suave);        border-color: rgba(224, 172, 76, .38);color: #f0d39a; }

/* ---------- píldoras y etiquetas ---------- */
.pildora {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--superficie-3); color: var(--tenue); border: 1px solid var(--borde);
}
.pildora.viva     { background: var(--vino-suave); color: #ff9ab0; border-color: rgba(216,30,74,.35); }
.pildora.oro      { background: var(--oro-suave);  color: #f0d39a; border-color: rgba(224,172,76,.35); }
.pildora.verde    { background: rgba(69,201,138,.14); color: #9fe8c4; border-color: rgba(69,201,138,.3); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.punto.late { animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- selector de vinos ---------- */
.vinos-tira {
  display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.vinos-tira::-webkit-scrollbar { display: none; }
.vino-chip {
  flex: none; scroll-snap-align: center;
  min-width: 62px; padding: 10px 8px 9px;
  border-radius: var(--r-m); border: 1.5px solid var(--borde);
  background: var(--superficie-2); color: var(--tenue);
  cursor: pointer; text-align: center; font: inherit;
  transition: all .16s ease; position: relative;
}
.vino-chip .num { display: block; font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; color: var(--texto); }
.vino-chip .est { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.vino-chip[aria-selected="true"] {
  background: var(--vino); border-color: var(--vino); color: #ffd9e2;
}
.vino-chip[aria-selected="true"] .num { color: #fff; }
.vino-chip.completo { border-color: rgba(69, 201, 138, .5); }
.vino-chip.completo .est { color: var(--verde); }
.vino-chip[aria-selected="true"].completo .est { color: #d7ffe9; }

/* ---------- preguntas ---------- */
.bloque-fase { margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.bloque-fase h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .13em; color: var(--oro); font-family: var(--sans); font-weight: 700; }
.bloque-fase .linea { flex: 1; height: 1px; background: var(--borde); }

.pregunta { margin: 18px 0 22px; }
.pregunta > .enunciado { font-weight: 600; margin-bottom: 3px; display: flex; gap: 7px; align-items: baseline; }
.pregunta > .enunciado .obligatoria { color: var(--vino); font-size: .9rem; }
.pregunta > .ayuda { color: var(--muy-tenue); font-size: .82rem; margin-bottom: 12px; }

/* Escala de botones. Cinco columnas siempre: un 1–10 en una sola
   fila deja botones de 27 px en un móvil estrecho — se salen de la
   pantalla y son imposibles de acertar con el pulgar. En dos filas
   de cinco caben holgados y se pulsan sin mirar. */
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.escala button {
  aspect-ratio: 1.25 / 1; min-height: 46px;
  border-radius: 12px; border: 1.5px solid var(--borde);
  background: var(--superficie-2); color: var(--tenue);
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: all .13s ease; padding: 0;
}
@media (min-width: 560px) {
  .escala { grid-template-columns: repeat(10, 1fr); gap: 6px; }
  .escala.corta { grid-template-columns: repeat(5, 1fr); }
}
.escala button:active { transform: scale(.9); }
.escala button[aria-pressed="true"] {
  background: var(--vino); border-color: var(--vino); color: #fff;
  box-shadow: 0 0 0 3px var(--vino-suave);
}
.escala-pies { display: flex; justify-content: space-between; margin-top: 7px; font-size: .72rem; color: var(--muy-tenue); }

/* deslizador */
.slider-caja { padding: 4px 2px 0; }
input[type=range] {
  width: 100%; appearance: none; background: transparent; height: 40px; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--vino) var(--pct, 50%), var(--superficie-3) var(--pct, 50%));
}
input[type=range]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--superficie-3); }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--vino); }
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 3px solid var(--vino); margin-top: -11px;
  box-shadow: 0 3px 10px rgba(0,0,0,.5); cursor: grab;
}
input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: #fff;
  border: 3px solid var(--vino); box-shadow: 0 3px 10px rgba(0,0,0,.5); cursor: grab;
}
.slider-valor { text-align: center; font-family: var(--serif); font-size: 1.5rem; margin-bottom: -4px; }
.slider-valor.vacio { color: var(--muy-tenue); font-size: 1rem; font-family: var(--sans); }

/* opciones */
.opciones { display: flex; flex-direction: column; gap: 8px; }
.opciones.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.opcion {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-m);
  border: 1.5px solid var(--borde); background: var(--superficie-2);
  cursor: pointer; font-size: .95rem; transition: all .13s ease;
  min-height: 48px;
}
.opcion:active { transform: scale(.985); }
.opcion .marca-op {
  width: 21px; height: 21px; flex: none; border-radius: 50%;
  border: 2px solid var(--borde-fuerte); display: grid; place-items: center;
  transition: all .13s ease;
}
.opcion.multi .marca-op { border-radius: 6px; }
.opcion[aria-pressed="true"] { border-color: var(--vino); background: var(--vino-suave); }
.opcion[aria-pressed="true"] .marca-op { border-color: var(--vino); background: var(--vino); }
.opcion[aria-pressed="true"] .marca-op::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.opcion.multi[aria-pressed="true"] .marca-op::after {
  width: 11px; height: 6px; border-radius: 0; background: transparent;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* sí / no */
.sino { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sino button {
  padding: 15px 12px; border-radius: var(--r-m); border: 1.5px solid var(--borde);
  background: var(--superficie-2); color: var(--tenue); font: inherit; font-weight: 600;
  cursor: pointer; min-height: 52px; transition: all .13s ease;
}
.sino button[aria-pressed="true"] { border-color: var(--vino); background: var(--vino); color: #fff; }
.sino button.no[aria-pressed="true"] { border-color: var(--muy-tenue); background: var(--superficie-3); color: var(--texto); }

/* ---------- progreso ---------- */
.barra { height: 7px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--vino), var(--oro)); transition: width .45s cubic-bezier(.2,.8,.2,1); }

.pie-fijo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(21, 10, 16, .93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
}
.pie-fijo .interior { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: 13px; }
.pie-fijo .interior .txt { flex: 1; min-width: 0; font-size: .82rem; color: var(--tenue); }

/* ---------- participantes ---------- */
.gente { display: flex; flex-wrap: wrap; gap: 8px; }
.persona {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 5px 13px 5px 5px; font-size: .87rem;
}
.avatar {
  width: 27px; height: 27px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .78rem;
}
.avatar.grande { width: 40px; height: 40px; font-size: 1rem; }

.lista-progreso { display: flex; flex-direction: column; gap: 12px; }
.fila-progreso { display: flex; align-items: center; gap: 12px; }
.fila-progreso .datos { flex: 1; min-width: 0; }
.fila-progreso .nombre { font-size: .92rem; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.fila-progreso .nombre small { color: var(--muy-tenue); font-weight: 400; }

/* ---------- resultados ---------- */
.podio { display: grid; grid-template-columns: 1fr 1.22fr 1fr; gap: 9px; align-items: end; margin: 22px 0 10px; }
.peldano { border-radius: var(--r-m) var(--r-m) 0 0; padding: 14px 8px 16px; text-align: center;
  border: 1px solid var(--borde); border-bottom: none; background: var(--superficie-2); }
.peldano .medalla { font-size: 1.5rem; line-height: 1; }
.peldano .etiq { font-family: var(--serif); font-size: 1.5rem; margin-top: 5px; }
.peldano .nom { font-size: .78rem; color: var(--tenue); margin-top: 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.peldano .pts { font-weight: 700; margin-top: 7px; font-size: 1.02rem; }
.peldano.p1 { background: linear-gradient(180deg, rgba(224,172,76,.24), var(--superficie-2)); border-color: rgba(224,172,76,.45); padding-top: 22px; }
.peldano.p2 { background: linear-gradient(180deg, rgba(195,204,214,.16), var(--superficie-2)); border-color: rgba(195,204,214,.3); }
.peldano.p3 { background: linear-gradient(180deg, rgba(201,139,94,.16), var(--superficie-2)); border-color: rgba(201,139,94,.3); }
.peldano.p1 .pts { color: var(--oro); }

.fila-rank {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 4px; border-bottom: 1px solid var(--borde);
}
.fila-rank:last-child { border-bottom: none; }
.fila-rank .puesto { font-family: var(--serif); font-size: 1.25rem; width: 26px; text-align: center; color: var(--muy-tenue); flex: none; }
.fila-rank .info { flex: 1; min-width: 0; }
.fila-rank .info .t { font-weight: 600; }
.fila-rank .info .s { font-size: .8rem; color: var(--muy-tenue); }
.fila-rank .nota { font-family: var(--serif); font-size: 1.4rem; color: var(--oro); flex: none; }
.fila-rank .nota small { font-size: .68rem; color: var(--muy-tenue); font-family: var(--sans); }

.premios { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.premio { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-m); padding: 14px; }
.premio .cat { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--oro); font-weight: 700; }
.premio .q { font-family: var(--serif); font-size: 1.08rem; margin: 5px 0 2px; }
.premio .d { font-size: .78rem; color: var(--muy-tenue); }

.comentario {
  border-left: 2.5px solid var(--borde-fuerte); padding: 3px 0 3px 13px; margin: 11px 0;
  font-size: .92rem;
}
.comentario .autor { font-size: .74rem; color: var(--muy-tenue); margin-top: 4px; }
.comentario em { color: var(--texto); font-style: italic; }

/* barras horizontales del perfil */
.perfil-fila { display: grid; grid-template-columns: 88px 1fr 38px; gap: 10px; align-items: center; margin: 7px 0; font-size: .82rem; }
.perfil-fila .val { text-align: right; color: var(--oro); font-weight: 700; }

/* Tabla comparativa.
   `contain: inline-size` no es decorativo: sin él, con muchos
   catadores la tabla ensancha el viewport de maquetación en el
   móvil (Chrome deja de respetar width=device-width) y toda la
   página se ve encogida. Le dice al navegador que el ancho de
   este contenedor no depende de lo que lleva dentro, que es
   justo lo que queremos de un carrusel horizontal. */
.tabla-envoltorio {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -20px; padding: 0 20px;
  contain: inline-size;
}
table.matriz { border-collapse: collapse; font-size: .84rem; min-width: 100%; }
table.matriz th, table.matriz td { padding: 8px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--borde); }
table.matriz th { color: var(--tenue); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
table.matriz td.n { font-weight: 700; }
table.matriz th.izq, table.matriz td.izq { text-align: left; position: sticky; left: 0; background: var(--superficie); }

/* ---------- QR y código ---------- */
.codigo-grande {
  font-family: ui-monospace, monospace; font-size: 2.5rem; font-weight: 800;
  letter-spacing: .2em; text-align: center; color: var(--oro);
  padding: 6px 0 2px; text-indent: .2em;
}
.qr-caja { background: #fff; padding: 13px; border-radius: var(--r-m); display: inline-block; line-height: 0; }
.qr-caja svg, .qr-caja canvas { display: block; width: 190px; height: 190px; }

/* ---------- utilidades ---------- */
.hueco-s { height: 8px; }  .hueco-m { height: 18px; }  .hueco-l { height: 34px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.envuelve { flex-wrap: wrap; }
.cargando { display: grid; place-items: center; padding: 60px 0; color: var(--muy-tenue); }
.girador {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--superficie-3); border-top-color: var(--vino);
  animation: gira .8s linear infinite; margin-bottom: 12px;
}
@keyframes gira { to { transform: rotate(360deg); } }

.aparece { animation: aparece .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(9px); } }

.brindis { font-size: 2.6rem; text-align: center; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- pantallas anchas: dos columnas en el panel ---------- */
@media (min-width: 900px) {
  .envoltorio.ancho { max-width: 1080px; }
  .dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .dos-columnas > .tarjeta { margin: 0; }
}

/* ---------- impresión del informe ---------- */
@media print {
  body { background: #fff; color: #000; }
  .cabecera, .pie-fijo, .btn, .no-imprimir { display: none !important; }
  .tarjeta { box-shadow: none; border: 1px solid #ccc; background: #fff; break-inside: avoid; }
  .tenue, .muy-tenue, .fila-rank .info .s { color: #555; }
  .fila-rank .nota, .premio .cat, .bloque-fase h3 { color: #7a1030; }
}