/**
 * components.css — las piezas reutilizables.
 *
 * Casi todo hereda de dos formas: la TARJETA DE PERGAMINO (fondo claro,
 * borde dorado, para lo que se lee) y el CUADRO DE DIÁLOGO (azul oscuro,
 * borde claro, para lo que habla). Esa pareja es lo que hace que la app
 * se lea como un Zelda clásico sin necesitar un solo sprite.
 */

/* ── Tarjeta de pergamino ───────────────────────────────────────────────── */

.tarjeta {
  position: relative;
  padding: var(--e4);
  border: var(--borde-oro);
  border-radius: var(--r-md);
  background:
    linear-gradient(rgba(239,227,196,.06), rgba(239,227,196,.02)),
    rgba(22,24,43,.82);
  box-shadow: var(--sombra-media), inset 0 0 0 1px rgba(217,180,74,.18);
  backdrop-filter: blur(8px);
}

/* Los cuatro remaches dorados de las esquinas. */
.tarjeta::before, .tarjeta::after {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 5px rgba(217,180,74,.6);
}
.tarjeta::before { top: 6px; left: 6px; }
.tarjeta::after  { top: 6px; right: 6px; }

.tarjeta-titulo {
  margin-bottom: var(--e3);
  font-size: var(--t-md);
  color: var(--oro-claro);
  letter-spacing: .06em;
}

/* Variante clara, para lo que se lee mucho rato (cartas, diario). */
.tarjeta--pergamino {
  color: var(--tinta);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(160deg, var(--pergamino), var(--pergamino-hond));
  border-color: var(--oro-oscuro);
}
.tarjeta--pergamino .tarjeta-titulo { color: var(--tinta); }

/* ── Cuadro de diálogo ──────────────────────────────────────────────────── */

.dialogo {
  position: relative;
  padding: var(--e4) var(--e4) var(--e5);
  border: 2px solid var(--dialogo-borde);
  border-radius: var(--r-lg);
  background: linear-gradient(to bottom, rgba(18,32,63,.96), rgba(10,20,44,.96));
  box-shadow: var(--sombra-media), inset 0 0 24px rgba(74,111,168,.25);
  font-size: var(--t-base);
  line-height: 1.6;
}

/* El triángulo que parpadea esperando que pulses para continuar. */
.dialogo-continuar {
  position: absolute;
  right: var(--e4);
  bottom: var(--e2);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--oro);
  animation: saltar 900ms ease-in-out infinite;
}
@keyframes saltar {
  0%, 100% { translate: 0 0; opacity: 1; }
  50%      { translate: 0 4px; opacity: .5; }
}

/* Quien habla, arriba a la izquierda. */
.dialogo-quien {
  display: inline-block;
  margin-bottom: var(--e2);
  color: var(--oro-claro);
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e3) var(--e5);
  border: 2px solid var(--oro);
  border-radius: var(--r-md);
  background: linear-gradient(to bottom, rgba(217,180,74,.22), rgba(217,180,74,.08));
  color: var(--oro-claro);
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: scale var(--rapido), background var(--rapido), box-shadow var(--rapido);
}
.boton:hover { background: linear-gradient(to bottom, rgba(217,180,74,.34), rgba(217,180,74,.14)); }
.boton:active { scale: .95; }
.boton:disabled { opacity: .4; pointer-events: none; }

.boton--principal {
  background: linear-gradient(to bottom, var(--oro), var(--oro-oscuro));
  color: #201802;
  box-shadow: var(--brillo-oro);
}
.boton--fantasma { border-color: var(--panel-borde); background: none; color: var(--pergamino); }
.boton--peligro { border-color: var(--peligro); color: #ffb3ab; }
.boton--pequeno { padding: var(--e2) var(--e3); font-size: var(--t-xs); }

/* ── Misión ─────────────────────────────────────────────────────────────── */

.mision {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3);
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-md);
  background: rgba(22,24,43,.72);
  text-align: left;
  transition: background var(--rapido), border-color var(--rapido), scale var(--rapido);
}
.mision:active { scale: .985; }

.mision[data-hecha='true'] {
  border-color: rgba(111,191,90,.5);
  background: rgba(40,66,40,.5);
}
.mision[data-hecha='true'] .mision-titulo {
  color: #a8c9a0;
  text-decoration: line-through;
  text-decoration-color: rgba(168,201,160,.5);
}

.mision-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.3);
  font-size: 1.5rem;
}

.mision-cuerpo { flex: 1; min-width: 0; }
.mision-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-base);
  color: var(--pergamino);
  transition: color var(--rapido);
}
.mision-detalle {
  font-size: var(--t-xs);
  color: #9aa2c0;
  line-height: 1.4;
}

/* La casilla, con forma de rombo como los cofres. */
.mision-casilla {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 2px solid var(--oro-oscuro);
  border-radius: var(--r-sm);
  rotate: 45deg;
  transition: background var(--rapido), border-color var(--rapido);
}
.mision[data-hecha='true'] .mision-casilla {
  border-color: var(--exito);
  background: var(--exito);
}
.mision-casilla::after {
  content: '';
  width: 45%; height: 22%;
  border-left: 3px solid #12200f;
  border-bottom: 3px solid #12200f;
  rotate: 0deg;
  translate: 0 -12%;
  opacity: 0;
  transition: opacity var(--rapido);
}
.mision[data-hecha='true'] .mision-casilla::after { opacity: 1; }

/* ── Contador del mesiversario ──────────────────────────────────────────── */

.contador {
  display: flex;
  justify-content: center;
  gap: var(--e2);
}

.contador-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.5rem;
  padding: var(--e2);
  border: 1px solid rgba(217,180,74,.35);
  border-radius: var(--r-md);
  background: rgba(0,0,0,.35);
}

.contador-numero {
  font-family: var(--fuente-numero);
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  color: var(--oro-claro);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.contador-etiqueta {
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  color: #9aa2c0;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Cuando es el día, el contador se sustituye por esto. */
.carnaval-cartel {
  padding: var(--e5);
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  color: var(--oro-claro);
  text-shadow: 0 0 20px rgba(217,180,74,.7);
  animation: latir-cartel 2.4s ease-in-out infinite;
}
@keyframes latir-cartel {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

/* ── Barra de progreso del ciclo ────────────────────────────────────────── */

.barra-ciclo {
  position: relative;
  height: 10px;
  border: 1px solid var(--oro-oscuro);
  border-radius: var(--r-full);
  background: rgba(0,0,0,.45);
  overflow: hidden;
}
.barra-ciclo-relleno {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(to right, var(--oro-oscuro), var(--oro), var(--oro-claro));
  transition: width var(--lento) var(--curva);
}

/* ── Avisos flotantes ───────────────────────────────────────────────────── */

.avisos {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-pestanas) + var(--e4) + env(safe-area-inset-bottom));
  z-index: var(--z-aviso);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  width: min(92vw, 26rem);
  pointer-events: none;
}

.aviso {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 2px solid var(--oro);
  border-radius: var(--r-md);
  background: rgba(18,32,63,.96);
  box-shadow: var(--sombra-alta);
  font-size: var(--t-sm);
  animation: aviso-entra var(--normal) var(--curva);
}
.aviso.saliendo { animation: aviso-sale var(--normal) var(--curva) forwards; }
.aviso--exito { border-color: var(--exito); }
.aviso--premio { border-color: var(--oro-claro); box-shadow: var(--sombra-alta), var(--brillo-oro); }

@keyframes aviso-entra {
  from { opacity: 0; translate: 0 16px; scale: .94; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes aviso-sale {
  to { opacity: 0; translate: 0 -10px; scale: .96; }
}

/* ── Modal ──────────────────────────────────────────────────────────────── */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--e4);
  background: rgba(4,6,14,.78);
  backdrop-filter: blur(4px);
  animation: aparecer var(--normal) var(--curva);
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(94vw, 32rem);
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: modal-entra var(--normal) var(--curva);
}
@keyframes modal-entra {
  from { opacity: 0; translate: 0 24px; scale: .95; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* ── Campos de formulario ───────────────────────────────────────────────── */

.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e3); }
.campo-etiqueta {
  font-family: var(--fuente-ui);
  font-size: var(--t-xs);
  color: #9aa2c0;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.campo-entrada {
  padding: var(--e3);
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.35);
  color: var(--pergamino);
  font-size: var(--t-base);
  transition: border-color var(--rapido);
}
.campo-entrada:focus { border-color: var(--oro); outline: none; }
textarea.campo-entrada { min-height: 7rem; resize: vertical; line-height: 1.55; }

/* Rejilla para elegir icono o dificultad. */
.rejilla-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: var(--e2);
}
.opcion-icono {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 0; min-width: 0;
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.3);
  font-size: 1.3rem;
  transition: border-color var(--rapido), scale var(--rapido);
}
.opcion-icono[aria-pressed='true'] {
  border-color: var(--oro);
  background: rgba(217,180,74,.2);
  scale: 1.08;
}

/* ── Tienda ─────────────────────────────────────────────────────────────── */

.tienda { width: min(94vw, 34rem); }

.tienda-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e3);
}

.tienda-saldo {
  display: flex;
  align-items: center;
  gap: var(--e1);
  font-family: var(--fuente-numero);
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

.tienda-categorias {
  display: flex;
  gap: var(--e1);
  margin-bottom: var(--e3);
}

.tienda-categoria {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--e2) var(--e1);
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .28);
  color: #9aa2c0;
  font-size: var(--t-xs);
  transition: all var(--rapido);
}
.tienda-categoria[aria-pressed='true'] {
  border-color: var(--oro);
  background: rgba(217, 180, 74, .18);
  color: var(--oro-claro);
}

.tienda-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tienda-articulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--panel-borde);
  border-radius: var(--r-sm);
  background: rgba(22, 24, 43, .72);
}
.tienda-articulo[data-alcanza='false'] { opacity: .55; }

.tienda-icono { font-size: 1.6rem; line-height: 1; }

.tienda-nombre { display: block; font-size: var(--t-sm); }
.tienda-tienes {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--exito);
}
.tienda-detalle {
  display: block;
  font-size: var(--t-xs);
  color: #9aa2c0;
  line-height: 1.4;
}

.tienda-precio {
  flex: 0 0 auto;
  min-width: 3.75rem;
  font-variant-numeric: tabular-nums;
}

.tienda-nota {
  margin: var(--e3) 0 0;
  text-align: center;
  font-size: var(--t-xs);
  color: #8b93b5;
}

/* El contador de rupias de la cabecera abre la tienda. */
.contador-rupias {
  cursor: pointer;
  padding: var(--e1) var(--e2);
  border-radius: var(--r-sm);
  transition: background var(--rapido), scale var(--rapido);
}
.contador-rupias:hover { background: rgba(217, 180, 74, .16); }
.contador-rupias:active { scale: .92; }

/* ── Banda de instalación ───────────────────────────────────────────────── */

.banda-instalar {
  position: fixed;
  left: 50%;
  /* Por encima de las pestañas, no tapándolas. */
  bottom: calc(var(--alto-pestanas) + var(--e3) + env(safe-area-inset-bottom));
  z-index: var(--z-aviso);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: min(94vw, 30rem);
  padding: var(--e3) var(--e4);
  border: 2px solid var(--oro);
  border-radius: var(--r-md);
  background: rgba(18, 32, 63, .97);
  box-shadow: var(--sombra-alta), var(--brillo-oro);
  font-size: var(--t-sm);
  animation: aviso-entra var(--normal) var(--curva);
}

.banda-instalar-icono { font-size: 1.6rem; line-height: 1; }

.banda-instalar strong {
  display: block;
  color: var(--oro-claro);
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm);
}

.banda-instalar-nota {
  display: block;
  font-size: var(--t-xs);
  color: #9aa2c0;
  line-height: 1.35;
}

/* ── Foco del tutorial ──────────────────────────────────────────────────── */

.foco-capa {
  position: fixed;
  inset: 0;
  z-index: 45;                 /* por encima del contenido, bajo el textbox */
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--normal) var(--curva);
}
.foco-capa.visible { opacity: 1; }

/*
  El agujero se hace con una sombra enorme hacia fuera en vez de con cuatro
  rectángulos o un clip-path: es una sola capa, se ajusta exacto a la forma
  del elemento y sigue funcionando si este se mueve.
*/
.foco-anillo {
  position: absolute;
  /*
    55%, no 82%.

    Encima de esta capa va el cuadro de diálogo de Tatl, que trae su propio
    velo. Apiladas al 82% + 78% quedaba un ~96% de negro: no se veía NADA
    de lo que se supone que estaba señalando. El velo del textbox se anula
    en .textbox-fondo.con-foco, aquí abajo.
  */
  box-shadow: 0 0 0 9999px rgba(4, 6, 14, .55);
  border: 2px solid var(--oro-claro);
  transition: left var(--normal) var(--curva), top var(--normal) var(--curva),
              width var(--normal) var(--curva), height var(--normal) var(--curva);
  animation: foco-latido 1.8s ease-in-out infinite;
}

@keyframes foco-latido {
  0%, 100% { outline: 0 solid rgba(240, 217, 138, .55); outline-offset: 0; }
  50%      { outline: 8px solid rgba(240, 217, 138, 0); outline-offset: 6px; }
}

/* Flecha que apunta al elemento enfocado. */
.foco-anillo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  translate: -50% 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid var(--oro-claro);
  animation: saltar 900ms ease-in-out infinite;
}

/*
  Mientras hay foco, el textbox se aparta abajo para no taparlo Y renuncia
  a su propio velo: el oscurecido ya lo pone la capa de foco. Sin esto se
  sumaban los dos y la pantalla quedaba casi negra.
*/
.textbox-fondo.con-foco {
  align-items: end;
  padding-bottom: var(--e7);
  background: transparent;
  backdrop-filter: none;
}

/* ── Banda de actualización ─────────────────────────────────────────────── */

.banda-actualizar {
  position: fixed;
  left: 50%;
  top: calc(var(--e3) + env(safe-area-inset-top));
  z-index: var(--z-aviso);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: min(94vw, 30rem);
  padding: var(--e3) var(--e4);
  border: 2px solid var(--oro);
  border-radius: var(--r-md);
  background: rgba(18, 32, 63, .97);
  box-shadow: var(--sombra-alta), var(--brillo-oro);
  font-size: var(--t-sm);
  animation: aviso-entra var(--normal) var(--curva);
}

.banda-cerrar {
  width: 2rem; height: 2rem;
  min-width: 0; min-height: 0;
  border-radius: var(--r-sm);
  color: #9aa2c0;
}
.banda-cerrar:hover { color: var(--peligro); }

/* ── Estado vacío ───────────────────────────────────────────────────────── */

.vacio {
  padding: var(--e6) var(--e4);
  text-align: center;
  color: #8b93b5;
}
.vacio-icono { font-size: 2.5rem; margin-bottom: var(--e2); opacity: .6; }