/* ==========================================================================
   BUG CRAFT · COMPONENTES DE INTERFAZ
   Todos salen de la maqueta 00e y de docs/guia-pantallas.md.
   Prohibido aquí: fondo oscuro, vidrio (backdrop-filter), neón, gris de superficie,
   emojis y alert/confirm/prompt nativos. Todo lo interactivo mide ≥ 48 px.
   ========================================================================== */

/* --- Icono (SVG propio; nunca emoji) --- */
.icono { width: 24px; height: 24px; flex: 0 0 auto; }
.icono--chico { width: 16px; height: 16px; }

/* --- Logotipo (Bagel Fat One + contorno + sombra plana) --- */
.logotipo {
  font-family: var(--fuente-logo);
  font-size: clamp(32px, 9vw, 44px); line-height: 1;
  letter-spacing: .02em; color: var(--maiz);
  text-shadow:
    3px 3px 0 var(--ciruela), -3px 3px 0 var(--ciruela),
    3px -3px 0 var(--ciruela), -3px -3px 0 var(--ciruela),
    0 7px 0 var(--ciruela);
}

/* --- Texto con contorno ciruela (títulos de juego, cifras) --- */
.contorno {
  color: var(--blanco);
  text-shadow:
    2px 2px 0 var(--ciruela), -2px 2px 0 var(--ciruela),
    2px -2px 0 var(--ciruela), -2px -2px 0 var(--ciruela),
    0 4px 0 var(--ciruela);
}

/* ==========================================================================
   1 · BOTÓN CON RELIEVE
   ========================================================================== */
.boton {
  --fondo: var(--maiz);
  --fondo-claro: var(--maiz-claro);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  min-height: 56px; padding: 0 var(--e3);
  font-family: var(--fuente-titulo); font-size: var(--t5); letter-spacing: .4px; line-height: 1;
  text-transform: uppercase; text-decoration: none;
  color: var(--blanco);
  text-shadow:
    2px 2px 0 var(--ciruela), -2px 2px 0 var(--ciruela),
    2px -2px 0 var(--ciruela), -2px -2px 0 var(--ciruela),
    0 4px 0 var(--ciruela);
  background: linear-gradient(var(--fondo-claro), var(--fondo));
  border: var(--borde); border-radius: var(--r1);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .22), inset 0 4px 0 rgba(255, 255, 255, .45), var(--sombra);
  cursor: pointer; user-select: none; touch-action: manipulation;
  transition: transform var(--t-rapido) var(--curva-suave), box-shadow var(--t-rapido) var(--curva-suave);
}
.boton:hover { filter: brightness(1.03); }
.boton:active {
  transform: translateY(4px);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .3), var(--sombra-pulsado);
}
.boton:focus-visible { outline: 4px solid var(--turquesa); outline-offset: 3px; }
.boton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.boton--magenta { --fondo: var(--magenta); --fondo-claro: var(--magenta-claro); }
.boton--verde { --fondo: var(--pasto); --fondo-claro: var(--pasto-claro); }
.boton--fantasma { background: var(--blanco); color: var(--ciruela); text-shadow: none; }
.boton--chico { min-height: 48px; font-size: var(--t4); padding: 0 var(--e2); border-radius: var(--r1); }
.boton--ancho { width: 100%; }

/* ==========================================================================
   2 · ESTUD Y PLACA (el bloque tipo LEGO como firma)
   ========================================================================== */
.estud { display: flex; gap: var(--e3); padding: 0 var(--e2) var(--e1); }
.estud i {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--pasto); border: var(--borde);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45);
}
.placa {
  position: relative; padding: var(--e2) var(--e2) var(--e1);
  background: var(--magenta); border: var(--borde); border-radius: var(--r3);
  box-shadow: var(--sombra);
}
.placa--verde { background: var(--pasto); }
.placa--maiz { background: var(--maiz); }
.placa--maiz-oscuro { background: #E3A600; }
.placa--maiz-oscuro .placa__estuds i { background: #E3A600; }
.placa__estuds { position: absolute; top: -16px; left: var(--e3); display: flex; gap: var(--e3); }
.placa__estuds i {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--magenta); border: var(--borde);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4);
}
.placa--verde .placa__estuds i { background: var(--pasto); }
.placa--maiz .placa__estuds i { background: var(--maiz); }

/* ==========================================================================
   3 · CHIPS (HUD)
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 6px 12px;
  background: var(--blanco); border: var(--borde); border-radius: var(--r-pill);
  box-shadow: 0 3px 0 var(--ciruela);
  font-size: var(--t2); font-weight: 700; line-height: 1.25;
}
.chip i { font-family: var(--fuente-texto); font-style: italic; }
.chip--titulo { font-size: var(--t3); }
.chip--rango { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .04em; font-size: var(--t1); padding: 4px 12px; }
.chip--hierro { background: #B3ABC3; }
.chip--bronce { background: #D08A55; color: var(--blanco); text-shadow: 1px 1px 0 var(--ciruela); }
.chip--plata { background: #E3DEEB; }
.chip--oro { background: var(--maiz); }
.chip--platino { background: #8FE6DC; }
.chip--esmeralda { background: #4FD08A; }
.chip--diamante { background: #8CCBF3; }
.chip--maestro { background: #B78BF5; }
.chip--gm { background: #EE6A8C; }
.chip--retador { background: var(--naranja); color: var(--blanco); text-shadow: 1px 1px 0 var(--ciruela); }
.chip--cuenta { background: var(--maiz); font-family: var(--fuente-titulo); font-size: var(--t4); padding: 4px 14px 4px 6px; }
.chip--cuenta .icono { width: 28px; height: 28px; }

/* ==========================================================================
   4 · TARJETA
   ========================================================================== */
.tarjeta {
  background: var(--blanco); border: var(--borde); border-radius: var(--r3);
  padding: var(--e3); box-shadow: var(--sombra-corta);
}
.tarjeta__rotulo { font-size: var(--t1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-tenue); }
.tarjeta__titulo { font-family: var(--fuente-titulo); font-size: var(--t4); margin-top: 4px; }
.tarjeta__texto { font-size: var(--t2); line-height: var(--l2); color: var(--tinta-suave); margin-top: var(--e1); }
.tarjeta__fuente { display: block; margin-top: var(--e2); padding-top: var(--e1); border-top: var(--borde-fino); font-size: var(--t1); color: var(--tinta-tenue); word-break: break-word; }

/* ==========================================================================
   5 · BARRA DE XP Y "+N" ANIMADO
   ========================================================================== */
.xp { display: flex; flex-direction: column; gap: var(--e1); position: relative; }
.xp__rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e1); font-size: var(--t2); font-weight: 700; }
.xp__faltan { color: var(--tinta-suave); font-weight: 400; }
.xp__barra {
  position: relative; height: 24px; border: var(--borde); border-radius: var(--r-pill);
  background: var(--blanco); overflow: hidden;
}
.xp__relleno {
  height: 100%; width: 0;
  background: linear-gradient(var(--maiz-claro), var(--maiz));
  border-right: 3px solid var(--ciruela);
  transition: width var(--t-lento) var(--curva-suave);
}
.xp__barra::after {                       /* brillo de "juice" */
  content: ''; position: absolute; inset: 3px 3px auto; height: 4px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
}
.mas-n {
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  font-family: var(--fuente-titulo); font-size: var(--t5); line-height: 1;
  color: var(--maiz);
  text-shadow: 2px 2px 0 var(--ciruela), -2px 2px 0 var(--ciruela), 2px -2px 0 var(--ciruela), -2px -2px 0 var(--ciruela), 0 3px 0 var(--ciruela);
  transform: translate(-50%, 0); opacity: 0; pointer-events: none;
}
.mas-n.sube { animation: mas-n-sube 900ms var(--curva-suave) forwards; }
@keyframes mas-n-sube {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.85); }
  20%  { opacity: 1; transform: translate(-50%, -4px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(1); }
}

/* ==========================================================================
   6 · MODAL (entra con rebote, nunca bloquea la navegación)
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--e3); visibility: hidden; }
.modal[data-abierto="si"] { visibility: visible; }
.modal__fondo { position: absolute; inset: 0; background: rgba(30, 16, 51, .55); opacity: 0; transition: opacity var(--t-medio) var(--curva-suave); }
.modal[data-abierto="si"] .modal__fondo { opacity: 1; }
.modal__panel {
  position: relative; width: 100%; max-width: 360px;
  background: var(--blanco); border: var(--borde-grueso); border-radius: var(--r4);
  padding: var(--e3); box-shadow: var(--sombra);
  opacity: 0; transform: scale(.86) translateY(24px);
}
.modal[data-abierto="si"] .modal__panel { animation: modal-entra 450ms var(--curva-rebote) forwards; }
@keyframes modal-entra {
  0%   { opacity: 0; transform: scale(.86) translateY(24px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  80%  { transform: scale(.985) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.modal__titulo { font-family: var(--fuente-titulo); font-size: var(--t5); }
.modal__texto { margin-top: var(--e1); font-size: var(--t2); line-height: var(--l2); color: var(--tinta-suave); }
.modal__acciones { display: flex; gap: var(--e2); margin-top: var(--e3); }

/* ==========================================================================
   7 · HOJA INFERIOR (sube desde abajo)
   ========================================================================== */
.hoja-fondo { position: fixed; inset: 0; z-index: 55; background: rgba(30, 16, 51, .45); opacity: 0; visibility: hidden; transition: opacity var(--t-medio) var(--curva-suave), visibility var(--t-medio); }
.hoja-fondo[data-abierto="si"] { opacity: 1; visibility: visible; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; width: 100vw; max-width: 100vw;
  transform: translateY(112%);
  transition: transform var(--t-lento) var(--curva-rebote);
}
.hoja[data-abierto="si"] { transform: translateY(0); }
.hoja__cuerpo {
  width: 100%; max-width: min(var(--ancho), 100%); margin: 0 auto; overflow-wrap: anywhere;
  background: var(--blanco); border: var(--borde-grueso); border-bottom: 0;
  border-radius: var(--r4) var(--r4) 0 0;
  padding: var(--e2) var(--e3) calc(var(--e3) + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 0 var(--ciruela);
}
.hoja__asa { width: 56px; height: 8px; margin: 0 auto var(--e2); border-radius: var(--r-pill); background: rgba(30, 16, 51, .22); }
.hoja__titulo { font-family: var(--fuente-titulo); font-size: var(--t5); }
.hoja__texto { margin-top: var(--e1); font-size: var(--t2); line-height: var(--l2); color: var(--tinta-suave); }

/* ==========================================================================
   8 · TOAST
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--e6) + env(safe-area-inset-bottom)); z-index: 70;
  display: inline-flex; align-items: center; gap: var(--e1);
  width: max-content;                     /* sin esto, con left:50 % el aviso se parte en dos líneas */
  max-width: calc(100vw - var(--e4));
  padding: 12px var(--e3);
  background: var(--blanco); color: var(--ciruela);
  border: var(--borde); border-radius: var(--r-pill); box-shadow: var(--sombra-corta);
  font-weight: 700; font-size: var(--t2);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: transform var(--t-medio) var(--curva-rebote), opacity var(--t-medio) var(--curva-suave);
}
.toast[data-abierto="si"] { transform: translate(-50%, 0); opacity: 1; }
.toast .icono { color: var(--pasto); }

/* ==========================================================================
   9 · HUD (dos chips; se apilan solos en pantallas angostas)
   ========================================================================== */
.hud { display: flex; flex-wrap: wrap; gap: var(--e1); align-items: flex-start; }
@media (max-width: 440px) { .hud { flex-direction: column; align-items: stretch; } }

/* ==========================================================================
   11 · FORMULARIO
   ========================================================================== */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta { font-size: var(--t2); font-weight: 700; }
.campo__fila { display: flex; align-items: center; gap: var(--e1); }
.campo__caja {
  display: flex; align-items: center; gap: var(--e1); flex: 1; min-width: 0;
  padding: 0 var(--e2); background: var(--blanco);
  border: var(--borde); border-radius: var(--r2);
  box-shadow: inset 0 3px 0 rgba(30, 16, 51, .06);
}
.campo__caja:focus-within { outline: 4px solid var(--turquesa); outline-offset: 2px; }
.campo input {
  flex: 1; min-width: 0; height: 48px; border: 0; background: transparent;
  font-family: var(--fuente-texto); font-size: var(--t3); color: var(--ciruela);
}
.campo input:focus { outline: none; }
.campo input::placeholder { color: var(--tinta-tenue); }
.campo input[readonly] { color: var(--tinta-suave); }
.campo__enlace {
  border: 0; background: none; padding: 0 4px; min-height: 48px;
  font: 700 var(--t2)/1 var(--fuente-texto); color: var(--magenta);
  text-decoration: underline; cursor: pointer;
}
.campo__enlace:focus-visible { outline: 4px solid var(--turquesa); outline-offset: 2px; border-radius: 6px; }

.medidor { display: flex; align-items: center; gap: var(--e1); }
.medidor__pista { flex: 1; height: 10px; border: 2px solid var(--ciruela); border-radius: var(--r-pill); background: var(--blanco); overflow: hidden; }
.medidor__relleno { display: block; height: 100%; width: 0; background: var(--carmin); transition: width var(--t-medio) var(--curva-suave), background var(--t-medio) var(--curva-suave); }
.medidor__texto { font-size: var(--t1); font-weight: 700; }

.casilla { display: flex; align-items: center; gap: var(--e1); min-height: 48px; cursor: pointer; font-size: var(--t2); font-weight: 700; }
.casilla input { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; border: var(--borde); border-radius: 8px; background: var(--blanco); display: grid; place-items: center; }
.casilla input:checked { background: var(--pasto); }
.casilla input:checked::after {            /* el tilde se dibuja: nada de glifos ni emojis */
  content: ''; width: 15px; height: 8px; margin-top: -3px;
  border-left: 3px solid var(--blanco); border-bottom: 3px solid var(--blanco);
  transform: rotate(-45deg);
}
.casilla input:focus-visible { outline: 4px solid var(--turquesa); outline-offset: 2px; }

/* --- Línea de fuente de un dato (pequeña, siempre visible) --- */
.fuente-linea { font-size: 10px; line-height: 1.4; color: var(--tinta-tenue); margin-top: 4px; overflow-wrap: anywhere; }

/* ==========================================================================
   10 · ANDAMIAJE DE LA PÁGINA DE COMPONENTES
   ========================================================================== */
.seccion { padding: var(--e4) 0 var(--e2); border-top: var(--borde-fino); }
.seccion:first-of-type { border-top: 0; }
.rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ciruela); color: var(--crema);
  font-size: var(--t1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.seccion__titulo { font-family: var(--fuente-titulo); font-size: var(--t6); margin: var(--e1) 0 4px; }
.seccion__nota { font-size: var(--t2); line-height: var(--l2); color: var(--tinta-suave); margin-bottom: var(--e3); }
.clase {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--rosa); border: 1px solid var(--ciruela);
  font-size: var(--t1); font-family: var(--fuente-texto);
}
.muestra { display: flex; align-items: center; gap: var(--e2); font-size: var(--t1); }
.muestra i { width: 40px; height: 40px; border-radius: var(--r1); border: var(--borde); display: block; }
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e2); }
.regla-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: var(--e1); }
.regla-8 i { height: 8px; border-radius: 2px; background: var(--maiz); border: 1px solid var(--ciruela); }