/* Premios Dundies – Dirección de Aguas. Pensado primero para celular. */
:root {
  --petroleo: #0a3440;
  --petroleo-2: #0f4a5a;
  --petroleo-3: #145b6e;
  --celeste: #5ccdf5;
  --celeste-2: #a8e6fb;
  --blanco: #ffffff;
  --texto: #10303b;
  --texto-suave: #4d6a74;
  --dorado: #f5c542;
  --error: #ff6b6b;
  --radio: 18px;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(92, 205, 245, .18), transparent 45%),
    radial-gradient(circle at 100% 30%, rgba(92, 205, 245, .10), transparent 40%),
    var(--petroleo);
  color: var(--blanco);
  line-height: 1.45;
}

.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }

/* ---------- Encabezado ---------- */
.encabezado { text-align: center; padding: 28px 16px 12px; }
.encabezado .mascota { width: 64px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.titulo {
  margin: 8px 0 0;
  font-family: "Bebas Neue", "Nunito", sans-serif;
  font-size: clamp(2.6rem, 11vw, 4.8rem);
  letter-spacing: .04em;
  line-height: .95;
}
.titulo .premios { color: var(--blanco); display: block; font-size: .55em; letter-spacing: .25em; }
.titulo .dundies { color: var(--celeste); text-shadow: 0 3px 0 #0b6d93, 0 8px 22px rgba(92,205,245,.35); }
.subtitulo { margin: 6px 0 0; color: var(--celeste-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.lema { margin: 10px 0 0; font-style: italic; color: var(--blanco); opacity: .9; }

/* ---------- Cuenta regresiva ---------- */
.cuenta {
  display: flex; justify-content: center; gap: 8px; margin: 18px auto 6px; flex-wrap: wrap;
}
.cuenta .caja {
  background: var(--petroleo-2); border: 1px solid rgba(92,205,245,.35);
  border-radius: 12px; padding: 8px 10px; min-width: 64px; text-align: center;
}
.cuenta .num { font-size: 1.6rem; font-weight: 800; color: var(--celeste); display: block; }
.cuenta .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.fase-actual { text-align: center; margin: 4px 0 0; font-weight: 700; }

/* ---------- Contadores "Le quedan..." ---------- */
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.chip {
  background: rgba(92,205,245,.14); color: var(--celeste-2); border: 1px solid rgba(92,205,245,.4);
  padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem;
}

/* ---------- Tarjetas de categoría ---------- */
.rejilla { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 12px; }
@media (min-width: 560px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  position: relative; overflow: hidden;
  background: var(--blanco); color: var(--texto);
  border: 3px solid var(--celeste); border-radius: var(--radio);
  padding: 18px 18px 64px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.tarjeta .icono { font-size: 2.2rem; line-height: 1; }
.tarjeta h3 {
  margin: 8px 0 6px; font-size: 1.25rem; font-weight: 900; text-transform: uppercase;
  color: var(--petroleo-3); letter-spacing: .02em;
}
.tarjeta .porque { margin: 0; font-style: italic; color: var(--texto-suave); }
.tarjeta .porque b { font-style: normal; color: var(--texto); }
.tarjeta .para { margin: 14px 0 0; font-weight: 800; color: var(--texto); }
.tarjeta .para .linea { display: inline-block; min-width: 55%; border-bottom: 2px dotted var(--celeste); }
.tarjeta .autor { font-size: .78rem; color: var(--texto-suave); margin-top: 8px; }
.tarjeta .mascota-mini { position: absolute; right: 12px; bottom: 16px; width: 38px; z-index: 2; }
.tarjeta .ola { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; z-index: 1; }
.tarjeta.oficial { border-color: var(--dorado); }
.tarjeta .sello {
  position: absolute; top: 12px; right: 12px; background: var(--dorado); color: #4a3500;
  font-size: .7rem; font-weight: 900; padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}

.acciones { display: flex; gap: 8px; align-items: center; margin-top: 12px; position: relative; z-index: 3; }

/* ---------- Botones ---------- */
.boton {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: var(--celeste); color: var(--petroleo);
}
.boton:hover { filter: brightness(1.08); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.votado { background: var(--petroleo-3); color: var(--blanco); }
.boton.secundario { background: transparent; color: var(--texto-suave); border: 1px solid #c9dde3; }
.contador-votos { font-weight: 900; color: var(--petroleo-3); margin-left: auto; }

/* ---------- Formularios ---------- */
.panel {
  background: var(--petroleo-2); border: 1px solid rgba(92,205,245,.3);
  border-radius: var(--radio); padding: 20px; max-width: 460px; margin: 20px auto;
}
.panel h2 { margin-top: 0; color: var(--celeste); }
label { display: block; font-weight: 700; margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--blanco);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--celeste); border-color: transparent; }
.aviso { padding: 10px 12px; border-radius: 12px; margin: 12px 0; font-weight: 600; }
.aviso.error { background: rgba(255,107,107,.15); color: #ffc9c9; border: 1px solid rgba(255,107,107,.5); }
.aviso.ok { background: rgba(92,205,245,.15); color: var(--celeste-2); border: 1px solid rgba(92,205,245,.5); }
a { color: var(--celeste); }

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 52, 64, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(92,205,245,.2);
}
.nav .fila {
  max-width: 1100px; margin: 0 auto; padding: 8px 12px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.nav .fila::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto; text-decoration: none; color: var(--celeste-2); font-weight: 700; font-size: .92rem;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.nav a.activo { background: var(--celeste); color: var(--petroleo); }
.nav a.salir { margin-left: auto; opacity: .8; }

h2.seccion { text-align: center; color: var(--celeste); margin: 24px 0 6px; font-size: 1.5rem; }
p.centro { text-align: center; }
.suave { opacity: .8; }
.oculto { display: none !important; }

/* ---------- Formulario de propuesta ---------- */
.panel.ancho { max-width: 640px; }
.porque-input { display: flex; align-items: center; gap: 8px; }
.porque-input span { font-weight: 800; color: var(--celeste-2); }
.iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.iconos button {
  font-size: 1.5rem; height: 46px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; background: rgba(255,255,255,.08);
}
.iconos button.elegido { border-color: var(--celeste); background: rgba(92,205,245,.25); }
.ayuda { font-size: .82rem; opacity: .8; margin: 4px 0 0; }
.aviso.alerta { background: rgba(245,197,66,.15); color: #ffe7a3; border: 1px solid rgba(245,197,66,.5); }
.botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.barra { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.barra input { flex: 1 1 200px; }
.barra select { flex: 0 0 auto; width: auto; }
.barra select option, select option { color: #10303b; }

/* ---------- Tarjetas: extras ---------- */
.tarjeta .sello.empate { background: #ff9f43; color: #3d2100; }
.tarjeta .sello.oculta { background: #777; color: #fff; }
.tarjeta.oculta { opacity: .6; border-style: dashed; }
.tarjeta .admin-fila {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; position: relative; z-index: 3;
  padding-top: 10px; border-top: 1px dashed #c9dde3;
}
.boton.mini { min-height: 34px; padding: 6px 10px; font-size: .8rem; }
.boton.peligro { background: #ffe1e1; color: #8a1f1f; }
.tarjeta select, .tarjeta input {
  background: #f2fafd; color: var(--texto); border: 1px solid #b7dcea;
}
.tarjeta .opcion {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 6px 0;
  border: 1px solid #cfe6ee; border-radius: 12px; cursor: pointer; font-weight: 700;
  position: relative; z-index: 3; background: #fff;
}
.tarjeta .opcion input { width: auto; margin: 0; }
.tarjeta .listo { font-weight: 800; color: #177245; margin-top: 12px; position: relative; z-index: 3; }
.tarjeta .campo { position: relative; z-index: 3; }

/* ---------- Tarjeta de ganador (descargable) ---------- */
.ganador-marco {
  background: var(--petroleo); padding: 18px; border-radius: 24px; text-align: center;
  border: 2px solid rgba(92,205,245,.4);
}
.ganador-marco .mini-titulo {
  font-family: "Bebas Neue", "Nunito", sans-serif; letter-spacing: .08em; font-size: 1.6rem; margin: 0;
}
.ganador-marco .mini-titulo b { color: var(--celeste); font-weight: 400; }
.ganador-marco .mini-sub { color: var(--celeste-2); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; font-weight: 700; }
.ganador-marco .tarjeta { text-align: left; border-color: var(--dorado); }
.ganador-marco .para .nombre { color: var(--petroleo-3); font-size: 1.2rem; }
.ganador-marco .lema { font-size: .85rem; margin-top: 10px; }
.tarjeta-ganador-wrap { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Admin ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla td, .tabla th { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; vertical-align: top; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.stats div { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px; }
.stats b { display: block; font-size: 1.5rem; color: var(--celeste); }
.fechas { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .fechas { grid-template-columns: 1fr 1fr; } }
.panel .boton { margin-top: 8px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 6px 0; }
.check input { width: auto; }

/* ---------- Modal y avisos flotantes ---------- */
dialog {
  border: 0; border-radius: var(--radio); padding: 0; width: min(560px, calc(100vw - 24px));
  background: var(--petroleo-2); color: var(--blanco); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog .panel { margin: 0; max-width: none; border: 0; }
#toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(120px);
  background: var(--blanco); color: var(--texto); padding: 12px 18px; border-radius: 14px;
  font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .25s; z-index: 50;
  max-width: calc(100vw - 32px); opacity: 0; visibility: hidden;
}
#toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
#toast.error { background: #ffe1e1; color: #8a1f1f; }
.cargando { text-align: center; padding: 40px; opacity: .8; }
footer.pie { text-align: center; font-size: .8rem; opacity: .6; padding: 24px 16px 40px; }

/* ---------- Ruta del juego (qué sigue) ---------- */
.nav a.hecho { opacity: .65; }
.nav a.despues { opacity: .45; }
.nav a.ahora:not(.activo) { border: 2px solid var(--dorado); color: var(--blanco); }
.ruta { text-align: center; border-color: var(--dorado); }
.ruta .pasos {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.ruta .pasos li { font-size: .75rem; font-weight: 700; opacity: .5; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ruta .pasos li span {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.35); font-size: .95rem;
}
.ruta .pasos li.hecho { opacity: .8; }
.ruta .pasos li.hecho span { background: var(--celeste); color: var(--petroleo); border-color: var(--celeste); }
.ruta .pasos li.ahora { opacity: 1; color: var(--dorado); }
.ruta .pasos li.ahora span { border-color: var(--dorado); background: rgba(245,197,66,.18); }
.ruta .ahora-toca { font-size: 1.15rem; margin: 6px 0; }
.ruta .ahora-toca b { color: var(--dorado); }
.aviso .boton.mini { margin-left: 6px; text-decoration: none; }

/* ---------- Ruleta de retos ---------- */
.ruleta-caja { position: relative; z-index: 3; text-align: center; margin-top: 8px; }
.ruleta-puntero { font-size: 1.6rem; color: #e0435a; line-height: 1; margin-bottom: -10px; position: relative; z-index: 4; }
.ruleta {
  width: 170px; height: 170px; border-radius: 50%; margin: 6px auto 10px; position: relative;
  background: conic-gradient(#5ccdf5 0 90deg, #f5c542 90deg 180deg, #ff8fa3 180deg 270deg, #8be3a6 270deg 360deg);
  border: 5px solid #0a3440; box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.ruleta span {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px;
  display: grid; place-items: center; font-weight: 900; font-size: 1.3rem; color: #0a3440;
}
.ruleta img { position: absolute; left: 50%; top: 50%; width: 46px; transform: translate(-50%, -50%); }
.retos { text-align: left; padding-left: 22px; margin: 6px 0 10px; font-size: .88rem; color: var(--texto-suave); }
.retos li { padding: 3px 6px; border-radius: 8px; }
.retos li.elegido { background: #fff3c4; color: #4a3500; font-weight: 800; }
.resultado-reto { font-weight: 900; color: var(--petroleo-3); min-height: 1.2em; }
.confeti { position: absolute; top: 0; font-size: 1.4rem; animation: caer 2s ease-in forwards; pointer-events: none; }
@keyframes caer { to { transform: translateY(300px) rotate(360deg); opacity: 0; } }
.animales { font-weight: 700; color: var(--texto); background: #e6f6fc; border-radius: 12px; padding: 8px 10px; }