* { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--font-cuerpo);
  font-size: var(--text-base);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-titulo); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-2); }
h1 { font-size: var(--text-titulo); }
h2 { font-size: var(--text-grande); }
h3 { font-size: var(--text-base); }
p { margin: 0 0 var(--space-2); }

:focus-visible { outline: 4px solid var(--c-acento); outline-offset: 3px; }

/* ---------- Estructura ---------- */
.pantalla { max-width: var(--ancho-max); margin: 0 auto; padding: var(--space-2) var(--space-2) var(--space-5); }

.barra {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min); margin-bottom: var(--space-2);
}
.barra h1 { margin: 0; font-size: var(--text-grande); flex: 1; }
.barra .volver { min-width: var(--tap-min); }

.pila > * + * { margin-top: var(--space-2); }
.fila { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fila > * { flex: 1 1 200px; }
.abajo { margin-top: var(--space-4); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--tap-min); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius); border: var(--borde-grueso) solid var(--c-primario);
  background: var(--c-fondo); color: var(--c-primario);
  font: 600 var(--text-base) var(--font-titulo); text-decoration: none; cursor: pointer;
  width: 100%; text-align: center;
}
.btn-primario { background: var(--c-primario); color: var(--c-primario-texto); }
.btn-suave { background: var(--c-secundario); color: var(--c-secundario-texto); border-color: var(--c-secundario); }
.btn-texto { border-color: transparent; background: transparent; text-decoration: underline; width: auto; }
.btn-chico { min-height: 48px; font-size: var(--text-pequeno); width: auto; padding: var(--space-1) var(--space-2); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--c-superficie); border-radius: var(--radius);
  padding: var(--space-3); border: 2px solid transparent;
}
.tarjeta-borde { background: var(--c-fondo); border-color: var(--c-borde); }
.etiqueta {
  display: block; font: 600 var(--text-pequeno) var(--font-titulo);
  color: var(--c-texto-suave); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-1);
}
.suave { color: var(--c-texto-suave); }
.chico { font-size: var(--text-pequeno); }

/* ---------- Avisos y pendientes ---------- */
.aviso {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: var(--c-aviso-fondo); border-left: 8px solid var(--c-aviso-borde);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-weight: 700;
}
.aviso::before { content: "⚠"; font-size: 1.6rem; line-height: 1.1; }
.regla {
  display: flex; gap: var(--space-2); align-items: flex-start;
  border: 2px dashed var(--c-borde); border-radius: var(--radius); padding: var(--space-2) var(--space-3);
}
.regla::before { content: "♥"; color: var(--c-acento); font-size: 1.4rem; line-height: 1.2; }
.pendiente {
  border: 3px dashed var(--c-acento); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); color: var(--c-texto-suave); font-style: italic;
}
.pendiente::before { content: "[PENDIENTE] "; font-style: normal; font-weight: 700; }

/* ---------- La frase "Haz" ---------- */
.frase {
  font-family: var(--font-titulo); font-size: var(--text-frase); line-height: 1.25;
  background: var(--c-superficie); border-radius: var(--radius); padding: var(--space-4) var(--space-3);
  margin: 0;
}
.frase-resto { font-size: var(--text-grande); color: var(--c-texto-suave); margin-top: var(--space-1); }

/* ---------- Escalera de sentidos ---------- */
.sentido-btn { justify-content: flex-start; gap: var(--space-2); text-align: left; }
.sentido-icono { font-size: 2rem; line-height: 1; }
.escalon { font-size: var(--text-pequeno); color: inherit; opacity: .8; margin-left: auto; }

/* ---------- Opciones (máximo 3) y "mi elección" ---------- */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); }
.opcion {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  min-height: 160px; padding: var(--space-2);
  border: 4px dashed var(--c-acento); border-radius: var(--radius);
  background: var(--c-fondo); color: var(--c-texto); font: 600 var(--text-grande) var(--font-titulo); cursor: pointer;
}
.opcion .letra { font-size: var(--text-pequeno); color: var(--c-texto-suave); }
.opcion img { max-width: 100%; max-height: 180px; border-radius: 12px; object-fit: cover; }
.opcion audio { width: 100%; }
.opcion[aria-pressed="true"] { border-style: solid; border-color: var(--c-primario); background: var(--c-eleccion); }
.mi-eleccion {
  border-radius: var(--radius-pill); background: var(--c-eleccion); padding: var(--space-2) var(--space-3);
  font: 600 var(--text-grande) var(--font-titulo); text-align: center;
}
.seleccionable[aria-pressed="true"] { background: var(--c-secundario); border-color: var(--c-primario); }

/* ---------- Caritas ---------- */
.caritas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.carita {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-3) var(--space-2); min-height: 150px;
  border: var(--borde-grueso) solid var(--c-borde); border-radius: var(--radius);
  background: var(--c-fondo); color: var(--c-texto); cursor: pointer; font: 600 var(--text-base) var(--font-titulo);
}
.carita .emoji { font-size: 3.2rem; line-height: 1; }
.carita .significa { font: 400 var(--text-pequeno) var(--font-cuerpo); color: var(--c-texto-suave); }
.carita[aria-pressed="true"] { border-color: var(--c-primario); background: var(--c-secundario); }

/* ---------- Formularios ---------- */
label.campo { display: block; font-weight: 700; }
label.campo > span { display: block; margin-bottom: var(--space-1); }
input[type="text"], input[type="number"], textarea, select {
  width: 100%; min-height: var(--tap-min); padding: var(--space-2);
  border: var(--borde-grueso) solid var(--c-borde); border-radius: 14px;
  font: var(--text-base) var(--font-cuerpo); color: var(--c-texto); background: var(--c-fondo);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--c-primario); outline: none; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font-weight: 700; cursor: pointer; }
.check input { width: 32px; height: 32px; accent-color: var(--c-primario); flex: none; }

/* ---------- Listas ---------- */
.lista { list-style: none; padding: 0; margin: 0; }
.lista > li + li { margin-top: var(--space-2); }
.media-mini { max-width: 100%; max-height: 260px; border-radius: 12px; display: block; }
.recuerdo-texto { font-family: var(--font-titulo); font-size: var(--text-grande); }

/* ---------- Grabador ---------- */
.grabador { display: flex; flex-direction: column; gap: var(--space-2); }
.grabando { font-weight: 700; }
.grabando::before { content: "● "; color: #C0392B; }

/* ---------- Inicio ---------- */
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.reloj { font: 600 4rem var(--font-titulo); text-align: center; margin: var(--space-3) 0; }

/* ---------- Libro (vista previa e impresión) ---------- */
.libro { font-family: var(--font-cuerpo); }
.libro-portada { text-align: center; padding: var(--space-5) 0; }
.libro-capitulo { margin-top: var(--space-5); }
.libro-recuerdo { margin: var(--space-3) 0; break-inside: avoid; }
.libro-recuerdo img { max-width: 100%; border-radius: 8px; }
.libro-cita { font-family: var(--font-titulo); font-size: var(--text-grande); margin: var(--space-1) 0; }

@media print {
  .no-imprimir { display: none !important; }
  body { font-size: 12pt; }
  .pantalla { max-width: none; padding: 0; }
  .libro-capitulo { break-before: page; }
}