/* ==========================================================================
   Calculia — Reusable components
   Requires tokens.css and base.css.
   Buttons >= 64px, gap >= 16px (CLAUDE.md rules 2 and 10).
   ========================================================================== */

/* ---- Page container ---- */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(12px, 2.5vw, var(--espacio-grande)) clamp(12px, 3vw, var(--espacio));
}

body { overflow-x: clip; }
img, svg, canvas, input, select, textarea, button { max-width: 100%; }

/* Reduce padding vertical del container en escritorios altos para
   aprovechar mejor la pantalla sin afectar al padding horizontal
   (que sí aporta respiración al texto en pantallas estrechas). */
@media (min-height: 720px) {
  .container { padding: var(--espacio) var(--espacio); }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--boton-min);
  min-width: var(--boton-min);
  padding: 12px 28px;
  border: 3px solid transparent;
  border-radius: var(--radio);
  background: var(--mod-coordinacion);
  color: #FFFFFF;
  font-size: var(--texto-base);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: scale(1.03); box-shadow: var(--sombra); }
.btn:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--color-superficie);
  color: var(--color-texto);
  border-color: var(--color-borde);
}

.btn-acierto { background: var(--color-acierto); }

/* En pantallas altas (escritorio típico) los botones se compactan:
   no hay touch, así que min-height 64px deja de ser obligatorio
   (CLAUDE.md regla 2 es para táctil). El padding y font bajan
   para reducir desperdicio vertical sin perder clicabilidad
   (ratón: ~32px de altura es cómodo). */
@media (min-height: 720px) {
  .btn {
    min-height: 40px;
    min-width: 40px;
    padding: 6px 18px;
    font-size: var(--texto-pequeno);
    border-width: 2px;
  }
}

/* Audio button (CLAUDE.md rule 4) */
.btn-audio {
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 3px solid var(--color-borde);
}

.btn-audio[aria-pressed="true"],
.btn-audio.hablando {
  border-color: var(--mod-coordinacion);
  background: var(--mod-coordinacion-suave);
}

/* Answer options (multiple choice) */
.option-btn {
  width: 100%;
  min-height: var(--boton-min);
  padding: 16px 24px;
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: var(--texto-base);
  font-weight: 600;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.option-btn:hover { border-color: var(--mod-coordinacion); }

.option-btn.correct {
  border-color: var(--color-acierto);
  background: var(--color-acierto-suave);
}

.option-btn.encourage {
  border-color: var(--color-animo);
  background: var(--color-animo-suave);
}

/* ---- Back link (always top left) ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--boton-min);
  padding: 6px 16px;
  border-radius: var(--radio);
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  color: var(--color-texto);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover { border-color: var(--mod-coordinacion); }

/* ---- Cards ----
   Padding/border/shadow reducidos para que las cards no dominen la
   pantalla en escritorios. Las tools sobreescriben `border-color` por
   módulo; el resto de propiedades son globales y se aplican igual en
   todas las activities (regla de CLAUDE.md: mantener la "shared
   core" intacta, no per-tool). */
.card {
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio);
}

/* Pantallas altas (escritorio típico) aprietan aún más el padding
   para reducir desperdicio vertical sin tocar la legibilidad. */
@media (min-height: 720px) {
  .card { padding: 12px var(--espacio); }
}

/* Ludia's compact progress track: informational, never a touch target. */
.progress-bar {
  position: relative;
  height: 6px;
  background: var(--color-borde);
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  background: var(--mod-coordinacion);
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 6px);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* Ocultar números (estilo runtime: barra limpia sin presión) */
.progress-text {
  display: none;
  line-height: 1;
  pointer-events: none;
}

/* ---- Stars ---- */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--texto-grande);
  font-weight: 700;
  color: var(--color-estrella);
}

/* ---- Feedback zone (aria-live) ---- */
.feedback {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--texto-grande);
  font-weight: 700;
  text-align: center;
}

.feedback.success { color: var(--color-acierto); }
.feedback.encourage { color: var(--color-animo); }

/* ---- Explanation of why an answer is right/wrong (quiz) ---- */
.explanation {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px var(--espacio);
  background: var(--color-superficie);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: var(--texto-base);
  align-items: center;
  gap: 8px;
}
.explanation p { margin: 0; flex: 1; }

/* ---- "Entendido" gate: reading pause after a wrong answer (rule 12) ---- */
.btn-understood {
  margin-left: auto;
  white-space: nowrap;
}

button.locked {
  opacity: 0.6;
}

/* ---- Celebration (brief, <= 2 s) ---- */
.celebration {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio);
  background: rgba(250, 247, 242, 0.95);
  z-index: 100;
  text-align: center;
  padding: var(--espacio);
}

.celebration.hidden { display: none; }

.celebration .emoji {
  font-size: 96px;
  animation: celebrar 0.6s ease;
}

.celebration .message {
  font-size: var(--texto-titulo);
  font-weight: 700;
  color: var(--color-acierto);
}

@keyframes celebrar {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Standard tool header ---- */
.tool-header {
  display: flex;
  align-items: center;
  gap: var(--espacio);
  flex-wrap: wrap;
  margin-bottom: var(--espacio);
}

.tool-header h1 {
  flex: 1;
  font-size: var(--texto-grande);
}

/* ---- Grid of large cards (menu) ---- */
.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--espacio-grande);
}

/* ---- Legal footer link (present on every page) ---- */
.pie-app {
  display: flex;
  justify-content: center;
  padding: var(--espacio) 0 8px;
  margin-top: var(--espacio);
}

.legal-link {
  color: var(--color-texto-suave);
  font-size: var(--texto-pequeno);
  padding: 8px 12px;
  text-decoration: underline;
}

.legal-link:hover, .legal-link:focus {
  color: var(--color-texto);
}

/* Utilities */
.centered { text-align: center; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: var(--espacio); flex-wrap: wrap; }

/* ---- Visual money (euros drawn with CSS; logic in assets/js/dinero.js) ---- */
.money {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 800;
  color: #3A2E1E;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow: var(--sombra);
}

/* Coins: round, >= 64 px (rule 2) */
.money.coin {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  font-size: 18px;
}

.m5c { background: #C98850; border: 4px solid #A2652F; }                /* copper */
.m10c, .m20c, .m50c { background: #E9C55B; border: 4px solid #BC9430; } /* gold */
.m1e { background: #D9D9D9; border: 7px solid #C9A227; }                /* silver center, gold ring */
.m2e { background: #E3C14B; border: 7px solid #B9B9B9; }                /* gold center, silver ring */
/* Number must be readable inside the coin so users can sum the
   table by eye in "How much is there?". Coins are 68 px wide;
   22 px gives a clear number without clipping. */
.money.coin { font-size: 22px; }

/* Banknotes: rectangular with the real colors */
.money.banknote {
  min-width: 112px;
  height: 64px;
  border-radius: 8px;
  font-size: 22px;
}

.b5e { background: #C9CFD8; border: 4px solid #8E99A8; }    /* gray */
.b10e { background: #EFB2A6; border: 4px solid #C56F5C; }   /* red */
.b20e { background: #AFC8E8; border: 4px solid #6D8FBC; }   /* blue */
.b50e { background: #F2C08A; border: 4px solid #C98B3F; }   /* orange */

button.money { cursor: pointer; }
button.money:hover { transform: scale(1.05); }
button.money:disabled { cursor: default; }

.money.correct {
  outline: 4px solid var(--color-acierto);
  outline-offset: 3px;
}

.money.encourage { opacity: 0.45; }

/* Table where the money is displayed */
.money-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espacio);
  padding: var(--espacio-grande);
  background: var(--color-superficie);
  border: 3px solid var(--color-borde);
  border-radius: var(--radio);
}

@media (prefers-reduced-motion: reduce) {
  button.money:hover { transform: none; }
}

/* ---- Responsive: móvil (≤ 640px) ----
   Sin `@media (max-width)` previo — solo hay reglas `min-height: 720px`
   que se aplican a escritorios típicos pero no estrechan el contenido en
   teléfonos. Aquí apretamos padding del container y de los botones
   para que en pantallas estrechas el contenido respire sin tocar la
   legibilidad (botones siguen >= 64px por la regla CLAUDE.md #2). */
@media (max-width: 640px) {
  .container {
    padding-left: var(--espacio);
    padding-right: var(--espacio);
    padding-top: var(--espacio);
  }
  .tarjeta { margin-block: 8px; }
  .opciones, .stack { gap: 8px; }
  .btn { padding: 10px 20px; }
}

/* ---- Responsive: tablet (641px–1023px) ----
   Ajustes intermedios: tipografía algo mayor, padding cómodo. No
   cambiamos el layout (sigue siendo una columna principal). */
@media (min-width: 641px) and (max-width: 1023px) {
  .tarjeta { padding: calc(var(--espacio) * 1.25); }
}

/* ---- Responsive: escritorio ancho (≥ 1024px) ----
   El container (max-width: 900px) ya centra bien en pantallas grandes,
   pero las tarjetas de actividad y los botones se ven pequeños. Damos
   más padding y dejamos al `min-height: 720px` (ya existente) ajustar
   el padding vertical. Engordamos también los títulos de actividad. */
@media (min-width: 1024px) {
  .tarjeta { padding: calc(var(--espacio) * 1.5); }
  .tool-header h1 { font-size: 2.25rem; }
}