/* Danyverso — paleta clara. Nada oscuro: el fondo siempre es crema, los colores son pastel y el texto es gris cálido. */
:root {
  --crema: #FFF8EC;
  --papel: #FFFFFF;
  --arena: #FDEFD2;
  --borde: #F3E3C3;
  --tinta: #4A3F35;
  --tinta-suave: #8A7B6C;
  --vino: #B23A48;        /* el granate de la gorra de Dany */
  --vino-claro: #F6D9DD;
  --sol: #FFD166;
  --sol-claro: #FFF1C9;
  --menta: #8EE4C1;
  --menta-claro: #DFF8EE;
  --cielo: #9ED8F5;
  --cielo-claro: #E3F4FD;
  --lila: #CDB4F0;
  --lila-claro: #F0E8FB;
  --durazno: #FFB996;
  --durazno-claro: #FFE8DC;
  --verde-ok: #35B36B;
  --rojo-suave: #E8707F;
  --radio: 18px;
  --sombra: 0 6px 18px rgba(120, 90, 50, .12);
  --fuente: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--fuente); color: var(--tinta); background: var(--crema); font-size: 16px; line-height: 1.4;
  background-image: radial-gradient(circle at 10% 10%, #FFF3D6 0, transparent 40%), radial-gradient(circle at 90% 90%, #E9F7FF 0, transparent 40%); }
h1, h2, h3 { margin: 0 0 .4em; font-weight: 800; line-height: 1.15; }
p { margin: 0 0 .8em; }
a { color: var(--vino); }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

.pagina-centro { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.tarjeta { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; border: 1px solid var(--borde); }
.entrar { max-width: 420px; width: 100%; text-align: center; }
.entrar h1 { font-size: 2rem; color: var(--vino); }
.entrar .sub { color: var(--tinta-suave); }
.dany-grande { width: 150px; height: auto; margin: 0 auto 6px; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
label { display: block; text-align: left; font-weight: 700; margin: 10px 0; font-size: .95rem; }
input[type=text], input[type=password], input:not([type]), select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--borde); background: #fff; margin-top: 4px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cielo); box-shadow: 0 0 0 4px var(--cielo-claro); }
.error { background: var(--vino-claro); color: var(--vino); padding: 10px; border-radius: 12px; font-weight: 700; }
.nota { font-size: .85rem; color: var(--tinta-suave); margin-top: 12px; }

.boton { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--borde); background: #fff; color: var(--tinta);
  font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .15s; }
.boton:active { transform: scale(.97); }
.boton.principal { background: var(--vino); border-color: var(--vino); color: #fff; box-shadow: 0 4px 0 #8C2C38; }
.boton.principal:active { box-shadow: 0 1px 0 #8C2C38; transform: translateY(3px); }
.boton.sol { background: var(--sol); border-color: var(--sol); color: var(--tinta); box-shadow: 0 4px 0 #D9A93F; }
.boton.menta { background: var(--menta); border-color: var(--menta); box-shadow: 0 4px 0 #5FC79D; }
.boton.cielo { background: var(--cielo); border-color: var(--cielo); box-shadow: 0 4px 0 #6BB8E0; }
.boton.grande { width: 100%; padding: 14px; font-size: 1.1rem; margin-top: 10px; }
.boton.chico { padding: 6px 12px; font-size: .85rem; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Juego ---------- */
.juego { min-height: 100vh; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.hud { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; }
.hud img { width: 44px; height: 44px; object-fit: contain; }
.hud .quien { flex: 1; min-width: 0; }
.hud .quien b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .quien small { color: var(--tinta-suave); }
.ficha { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.ficha.saberes { background: var(--sol-claro); color: #9B6A00; }
.ficha.vidas { background: var(--vino-claro); color: var(--vino); }
.ficha.racha { background: var(--durazno-claro); color: #B55A2C; }
.pantalla { flex: 1; padding: 14px 14px 90px; display: none; }
.pantalla.activa { display: block; }
.nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: #fff; border-top: 1px solid var(--borde);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 5; max-width: 720px; margin: 0 auto; }
.nav button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--tinta-suave); font-size: .72rem; font-weight: 800; padding: 4px 0; border-radius: 12px; }
.nav button span.ico { font-size: 1.5rem; }
.nav button.activo { color: var(--vino); background: var(--vino-claro); }

.titulo-pantalla { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.titulo-pantalla h2 { flex: 1; font-size: 1.3rem; }
.volver { border: 0; background: #fff; border: 2px solid var(--borde); border-radius: 999px; width: 40px; height: 40px; font-size: 1.1rem; font-weight: 800; cursor: pointer; }

/* Dany bocadillo */
.dany-dice { display: flex; gap: 10px; align-items: flex-end; margin: 10px 0; }
.dany-dice img { width: 86px; height: 86px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.bocadillo { background: #fff; border: 2px solid var(--borde); border-radius: 18px 18px 18px 4px; padding: 12px 14px; flex: 1; position: relative; font-weight: 600; }
.bocadillo.ok { background: var(--menta-claro); border-color: var(--menta); }
.bocadillo.mal { background: var(--durazno-claro); border-color: var(--durazno); }
.bocadillo.pista { background: var(--sol-claro); border-color: var(--sol); }

/* Mapa */
.continente { background: linear-gradient(180deg, #E3F4FD 0%, #FFF8EC 100%); border-radius: var(--radio); border: 1px solid var(--borde); padding: 14px; position: relative; overflow: hidden; }
.continente h2 { color: var(--vino); }
.continente .lema { color: var(--tinta-suave); margin-bottom: 12px; }
.territorios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.territorio { background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: 12px; text-align: center; cursor: pointer; position: relative; transition: transform .1s; }
.territorio:active { transform: scale(.97); }
.territorio .ico { font-size: 2.2rem; line-height: 1; }
.territorio b { display: block; font-size: .95rem; margin: 4px 0 2px; }
.territorio small { color: var(--tinta-suave); display: block; font-size: .75rem; line-height: 1.2; }
.territorio.cerrado { background: var(--arena); opacity: .75; }
.territorio.cerrado .ico { filter: grayscale(1); }
.candado { position: absolute; top: 8px; right: 10px; font-size: 1rem; }
.barra { height: 8px; background: var(--arena); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--menta), var(--cielo)); border-radius: 99px; }
.insignias-mini { font-size: .9rem; margin-top: 4px; letter-spacing: 2px; }

/* Territorio */
.tema { background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.tema .info { flex: 1; min-width: 0; }
.tema b { display: block; }
.tema small { color: var(--tinta-suave); }
.medalla { font-size: 1.6rem; width: 36px; text-align: center; }
.medalla.n0 { opacity: .25; }
.acciones { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.acciones .boton { flex: 1; text-align: center; }

/* Reto */
.reto-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; color: var(--tinta-suave); flex-wrap: wrap; }
.dificultad { letter-spacing: 1px; }
.reto-caja { background: #fff; border: 2px solid var(--borde); border-radius: var(--radio); padding: 18px 16px; box-shadow: var(--sombra); }
.enunciado { font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; }
.ini .enunciado { font-size: 1.5rem; }
.opciones { display: grid; gap: 10px; }
.opcion { width: 100%; padding: 14px; border-radius: 14px; border: 2px solid var(--borde); background: var(--crema); text-align: left; font-weight: 700; cursor: pointer; font-size: 1.05rem; }
.ini .opcion { font-size: 1.4rem; text-align: center; padding: 18px; }
.opcion:hover { border-color: var(--cielo); }
.opcion.elegida { border-color: var(--cielo); background: var(--cielo-claro); }
.opcion.correcta { border-color: var(--verde-ok); background: var(--menta-claro); }
.opcion.incorrecta { border-color: var(--rojo-suave); background: var(--durazno-claro); }
.opcion[disabled] { cursor: default; }
.vf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vf .opcion { text-align: center; font-size: 1.2rem; }
.ordenar .opcion { display: flex; align-items: center; gap: 10px; }
.ordenar .num { background: var(--sol); border-radius: 50%; width: 28px; height: 28px; display: inline-grid; place-items: center; font-size: .9rem; flex: none; }
.ordenar .num.vacio { background: var(--arena); }
.emparejar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.emparejar .opcion { text-align: center; padding: 12px 8px; }
.emparejar .opcion.unido { opacity: .55; border-style: dashed; }
.completar input { font-size: 1.2rem; text-align: center; }
.botonera { display: flex; gap: 10px; margin-top: 14px; }
.botonera .boton { flex: 1; text-align: center; }
.escuchar { border: 0; background: var(--cielo-claro); border-radius: 999px; padding: 6px 12px; font-weight: 800; cursor: pointer; }
.retro { margin-top: 12px; }
.logro { background: var(--sol-claro); border: 2px solid var(--sol); border-radius: 14px; padding: 10px 12px; margin-top: 8px; font-weight: 800; animation: aparecer .4s; }
@keyframes aparecer { from { transform: scale(.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.saberes-ganados { font-size: 1.4rem; font-weight: 900; color: #9B6A00; }
.sin-recompensa { font-size: .85rem; color: var(--tinta-suave); }
.reportar { font-size: .8rem; color: var(--tinta-suave); background: none; border: 0; text-decoration: underline; cursor: pointer; margin-top: 10px; }

/* Parcela */
.parcela-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: #CFEFC4; padding: 8px; border-radius: 16px; border: 3px solid #A9DD9A; }
.celda { aspect-ratio: 1; background: #DDF5D4; border-radius: 8px; display: grid; place-items: center; font-size: clamp(1.1rem, 5vw, 2rem); cursor: pointer; border: 2px solid transparent; }
.celda:hover { border-color: var(--sol); }
.celda.ocupada { background: #EFFAEA; }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-top: 12px; }
.item { background: #fff; border: 2px solid var(--borde); border-radius: 14px; padding: 8px; text-align: center; cursor: pointer; }
.item .ico { font-size: 1.8rem; }
.item b { display: block; font-size: .8rem; }
.item small { color: #9B6A00; font-weight: 800; }
.item.elegido { border-color: var(--sol); background: var(--sol-claro); }
.item.caro { opacity: .5; }
.item.bloqueado { opacity: .5; }
.aviso { background: var(--cielo-claro); border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-weight: 700; }

/* Avatar */
.avatar-vista { font-size: 4rem; text-align: center; background: #fff; border-radius: var(--radio); border: 2px solid var(--borde); padding: 16px; line-height: 1; }
.avatar-vista .nombre { font-size: 1.2rem; font-weight: 800; display: block; margin-top: 8px; }
.grupo-acc h3 { font-size: 1rem; margin: 14px 0 6px; color: var(--tinta-suave); }

/* Manada */
.miembro, .fila-tabla { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border-radius: 12px; border: 1px solid var(--borde); margin-bottom: 6px; }
.miembro.yo, .fila-tabla.yo { background: var(--sol-claro); border-color: var(--sol); }
.pos { font-weight: 900; width: 28px; color: var(--tinta-suave); }
.muro { background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: 10px; max-height: 280px; overflow: auto; }
.msg { padding: 6px 0; border-bottom: 1px dashed var(--borde); font-size: .95rem; }
.msg b { color: var(--vino); }
.msg small { color: var(--tinta-suave); float: right; }
.frases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.frases button { border: 2px solid var(--borde); background: #fff; border-radius: 999px; padding: 6px 10px; font-size: .85rem; cursor: pointer; }
.pestanas { display: flex; gap: 6px; margin-bottom: 10px; }
.pestanas button { flex: 1; border: 2px solid var(--borde); background: #fff; border-radius: 999px; padding: 8px; font-weight: 800; cursor: pointer; }
.pestanas button.activa { background: var(--vino-claro); border-color: var(--vino); color: var(--vino); }

/* Tutorial / modal */
.capa { position: fixed; inset: 0; background: rgba(255, 248, 236, .92); z-index: 20; display: grid; place-items: center; padding: 16px; }
.capa .tarjeta { max-width: 460px; width: 100%; text-align: center; }
.capa img { width: 180px; }
.capa h2 { color: var(--vino); }
.capa.oculta { display: none; }
.progreso-dany { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.progreso-dany i { width: 10px; height: 10px; border-radius: 50%; background: var(--arena); }
.progreso-dany i.on { background: var(--vino); }
.celebra { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.confeti { position: absolute; top: -10px; width: 10px; height: 14px; border-radius: 2px; animation: caer 1.6s linear forwards; }
@keyframes caer { to { transform: translateY(110vh) rotate(540deg); opacity: .6 } }
.yo-tarjeta { background: #fff; border: 2px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 10px; }
.yo-tarjeta .fila { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.cargando { text-align: center; padding: 40px; color: var(--tinta-suave); font-weight: 800; }

/* ---------- Panel y familia ---------- */
.panel { max-width: 1100px; margin: 0 auto; padding: 16px; }
.panel-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-cab img { width: 56px; }
.panel-cab h1 { flex: 1; font-size: 1.5rem; color: var(--vino); }
.panel-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.panel-nav a { padding: 8px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--borde); text-decoration: none; color: var(--tinta); font-weight: 800; font-size: .9rem; }
.panel-nav a.activo { background: var(--vino-claro); border-color: var(--vino); color: var(--vino); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: 12px 14px; }
.kpi b { font-size: 1.7rem; display: block; color: var(--vino); }
.kpi small { color: var(--tinta-suave); }
.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: .92rem; }
.tabla th, .tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { background: var(--arena); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.tabla tr:hover td { background: var(--crema); }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.etiqueta.pendiente { background: var(--sol-claro); color: #9B6A00; }
.etiqueta.validado { background: var(--menta-claro); color: #1E7A4B; }
.etiqueta.retirado { background: var(--vino-claro); color: var(--vino); }
.seccion { background: #fff; border: 2px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 14px; }
.seccion h2 { font-size: 1.1rem; color: var(--vino); }
.mini-barra { height: 8px; background: var(--arena); border-radius: 99px; overflow: hidden; min-width: 80px; }
.mini-barra i { display: block; height: 100%; background: var(--menta); }
.mensajes-django { list-style: none; padding: 0; }
.mensajes-django li { background: var(--menta-claro); padding: 8px 12px; border-radius: 10px; margin-bottom: 8px; font-weight: 700; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 10px; }
.filtros label { margin: 0; }
.filtros select, .filtros input { width: auto; min-width: 160px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.hijo { background: #fff; border: 2px solid var(--borde); border-radius: var(--radio); padding: 16px; margin-bottom: 14px; }
.hijo h2 { color: var(--vino); }
.areas-familia { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.area-familia { background: var(--crema); border-radius: 12px; padding: 10px; }
.area-familia b { display: block; font-size: .9rem; }
@media (max-width: 600px) { .tabla { font-size: .82rem; } .tabla th, .tabla td { padding: 6px; } }