/* assets/estilos.css
   Web publica de lole. Movil, una sola columna, max 480px centrado.
   Los colores de cada cuento van inline desde PHP (dependen de la ficha).

   ACA NO VA NADA DEL REPRODUCTOR. Todo lo de la ficha del cuento
   (?cuento=...) vive en reproductor/reproductor.css, que carga solo esa pagina.
   Esto es: home, bienvenida, catalogo, fichas, favoritos, pantalla final y pie. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #ffffff;
    color: #23211d;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

.contenedor {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Encabezado ---------- */
.top { text-align: center; padding: 24px 8px 12px; position: relative; }
.marca { display: inline-block; width: 120px; height: auto; }
.copete { font-size: 15px; color: #6a655c; margin: 12px auto 0; max-width: 40ch; }

/* ---------- Bienvenida ---------- */
.bienvenida { text-align: center; padding: 8px 0 24px; }
.pregunta { font-size: 20px; font-weight: 700; margin: 8px 0 18px; }
.edades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.edad-btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 64px; border-radius: 16px;
    background: #f1efe8; color: #3a372f; text-decoration: none;
    font-size: 24px; font-weight: 800;
}
.edad-btn:active { transform: scale(.97); }
.edad-btn.todos { grid-column: 1 / -1; font-size: 18px; font-weight: 700; background: #e6eef7; color: #185fa5; }

/* ---------- Chips de seccion: Cuentos / Canciones ----------
   Van despues del copete y antes de las fichas. La eleccion viaja en la URL,
   asi que el chip activo llega ya pintado desde el servidor: sin parpadeo. */
.secciones { display: flex; gap: 8px; justify-content: center; margin: 2px 0 18px; }
/* Emoji arriba y texto abajo: con TRES chips es lo unico que entra sin
   desbordar en un telefono angosto ("Canciones" es una palabra larga). */
.seccion-chip {
    flex: 1 1 0; max-width: 160px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 64px; padding: 8px 6px; border-radius: 18px;
    background: #f1efe8; color: #4a463d; text-decoration: none; text-align: center;
    font-size: 15px; font-weight: 800; line-height: 1.15;
    transition: transform .08s ease;
}
.seccion-chip .seccion-emoji { font-size: 22px; line-height: 1; }
.seccion-chip:active { transform: scale(.98); }
.seccion-chip.activo { background: #3a372f; color: #fff; }

/* ---------- Catalogo ---------- */
.catalogo { padding-bottom: 8px; }
.conteo { font-size: 18px; font-weight: 700; color: #3a372f; text-align: center; margin: 6px 4px 16px; }
.conteo a { color: #185fa5; text-decoration: underline; text-underline-offset: 2px; }
.conteo .elegir { font-size: 14px; font-weight: 600; }
.vacio { font-size: 15px; color: #6a655c; text-align: center; padding: 24px 8px; }

/* Filas de igual alto: grid-auto-rows:1fr iguala TODAS las filas entre si y
   align-items:stretch hace que cada ficha ocupe su fila entera. Asi dos fichas
   vecinas miden lo mismo aunque un titulo tenga 1 linea y el otro 3.

   minmax(0, 1fr) y NO 1fr a secas: un "1fr" pelado toma como ancho MINIMO el
   min-content de la ficha, y un subtitulo con white-space:nowrap mide todo el
   texto de una. Con un subtitulo largo (los de "para dormir" lo son) las dos
   columnas se estiraban y aparecia scroll horizontal. Con minmax(0,...) la
   columna puede bajar de su min-content y el texto se corta con puntos. */
.grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; grid-auto-rows: 1fr; }

/* ---------- Ficha (tonos inline) ----------
   Alto unico para todas: el minimo entra un titulo de 3 lineas sin cortarlo
   (36 de padding + 82 de emoji + 60 de titulo + 28 de duracion).
   Reparto fijo: emoji arriba, titulo al medio, duracion abajo. Con un titulo
   corto el titulo queda centrado en su franja, nunca descolgado. */
.ficha {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 18px 12px; border-radius: 18px;
    text-decoration: none; min-height: 206px; height: 100%;
    min-width: 0;   /* que nunca empuje el ancho de su columna */
    transition: transform .08s ease;
}
.ficha:active { transform: scale(.98); }
.ficha-emoji {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    font-size: 36px; line-height: 1; margin-bottom: 10px; flex: 0 0 auto;
}
/* El titulo toma la franja del medio y se centra dentro de ella. */
.ficha-titulo {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    width: 100%; font-size: 16px; font-weight: 700; line-height: 1.25;
    overflow-wrap: anywhere; word-break: break-word;
}
/* Subtitulo chico debajo del titulo: el "momento" de una cancion ("Para
   lavarse los dientes") o el subtitulo de un sonido para dormir.
   Una sola linea; si no entra, se corta con puntos suspensivos. */
.ficha-momento, .ficha-sub {
    flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; margin-top: 4px;
    font-size: 12px; font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-dur { flex: 0 0 auto; font-size: 13px; font-weight: 600; margin-top: 8px; }
/* "Para dormir": en vez de una duracion, que no tiene, va la marca de bucle. */
.ficha-bucle {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700; margin-top: 8px; white-space: nowrap;
}
.ficha-bucle .simbolo { font-size: 17px; line-height: 1; }

/* ---------- Favoritos (fila horizontal) ---------- */
.favoritos { margin: 4px 0 20px; }
.fav-titulo { font-size: 15px; font-weight: 700; margin: 0 4px 10px; color: #4a463d; }
/* align-items:stretch -> todas las tarjetas de la fila quedan del alto de la mas alta. */
.favoritos-fila { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; align-items: stretch; -webkit-overflow-scrolling: touch; }
.favoritos-fila .fav-card { flex: 0 0 132px; width: 132px; min-height: 184px; height: auto; padding: 14px 10px; }
.favoritos-fila .fav-card .ficha-emoji { width: 60px; height: 60px; font-size: 30px; margin-bottom: 8px; }

/* ---------- Final ---------- */
.final { padding: 8px 0 24px; text-align: center; }
.otravez {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 200px; border-radius: 22px; margin-bottom: 16px;
    border: 0; cursor: pointer; font-family: inherit;
}
.otravez-emoji { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; font-size: 48px; }
.otravez-txt { font-size: 22px; font-weight: 800; margin-top: 12px; }
.fav-grande {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    min-height: 48px; padding: 12px 22px; border-radius: 24px;
    background: #fff; border: 1.5px solid #E0245E; color: #E0245E;
    font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 24px;
}
.fav-grande.activo { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.sug-titulo { font-size: 16px; font-weight: 700; margin: 8px 4px 12px; color: #4a463d; }
.ver-todos { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 700; color: #185fa5; text-decoration: none; }

/* ---------- Pie ----------
   Base para todo el sitio. En la pagina del cuento lo achica y lo fija abajo
   reproductor/reproductor.css (regla .pagina-cuento .pie). */
.pie { margin-top: auto; text-align: center; font-size: 12px; color: #a29d93; padding: 28px 16px 24px; }

/* ---------- Movimiento reducido ----------
   Lo del reproductor (pelotas y halo) esta en reproductor/reproductor.css. */
@media (prefers-reduced-motion: reduce) {
    .ficha, .edad-btn { transition: none; }
}