/* ============================================================
   tcont · cuentos para dormir
   Paleta pastel, nubecitas y estrellas.
   ============================================================ */

:root {
    --cielo: #cfe6ff;
    --rosa: #ffd9e6;
    --lavanda: #e6dcff;
    --menta: #d3f3e6;
    --durazno: #ffe3cf;
    --limon: #fff3c4;

    --fondo-arriba: #dcecff;
    --fondo-abajo: #fbe9f3;
    --nube: #ffffff;
    --tarjeta-sombra: rgba(120, 110, 180, .14);
    --texto: #4a4a6a;
    --texto-suave: #7d7b9c;
    --titulo: #5b5391;
    --acento: #9b8cf0;
    --estrella: #fff6c9;
    --estrella-opacidad: .0;

    --letra-lectura: 1.3rem;
    --radio: 28px;
}

/* Modo noche: lavanda oscuro suave, nada de negro duro */
:root[data-modo="noche"] {
    --cielo: #4a5687;
    --rosa: #6b4f73;
    --lavanda: #564b82;
    --menta: #3f6470;
    --durazno: #6e5563;
    --limon: #6a6479;

    --fondo-arriba: #232748;
    --fondo-abajo: #3a2f55;
    --nube: #5e5d8c;
    --tarjeta-sombra: rgba(0, 0, 0, .25);
    --texto: #ece8ff;
    --texto-suave: #bdb6e0;
    --titulo: #fff3c4;
    --acento: #c9bcff;
    --estrella-opacidad: 1;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; } /* el zoom del sitio cambia este valor */

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Nunito", system-ui, sans-serif;
    color: var(--texto);
    background: linear-gradient(180deg, var(--fondo-arriba) 0%, var(--fondo-abajo) 100%) fixed;
    transition: background .6s ease, color .6s ease;
}

h1, h2, .logo, .fin {
    font-family: "Fredoka", "Nunito", system-ui, sans-serif;
    color: var(--titulo);
    font-weight: 600;
}

a { color: var(--acento); }

/* ---------- Cielo de fondo ---------- */

.cielo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.nube {
    position: absolute;
    width: 180px;
    height: 56px;
    background: var(--nube);
    border-radius: 60px;
    opacity: .85;
    filter: drop-shadow(0 8px 12px rgba(150, 140, 200, .15));
    animation: flotar 90s linear infinite;
    transition: background .6s ease;
}

.nube::before,
.nube::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.nube::before { width: 80px; height: 80px; top: -40px; left: 28px; }
.nube::after  { width: 100px; height: 100px; top: -54px; right: 24px; }

.nube-1 { top: 14%; left: -220px; animation-duration: 110s; animation-delay: -30s; }
.nube-2 { top: 46%; left: -220px; transform: scale(.7); animation-duration: 140s; animation-delay: -60s; opacity: .7; }
.nube-3 { top: 76%; left: -220px; transform: scale(1.15); animation-duration: 160s; animation-delay: -110s; opacity: .6; }

@keyframes flotar {
    from { translate: 0 0; }
    to   { translate: calc(100vw + 440px) 0; }
}

.estrella {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--estrella);
    box-shadow: 0 0 10px 2px var(--estrella);
    opacity: var(--estrella-opacidad);
    animation: titilar 3.5s ease-in-out infinite;
    animation-delay: var(--d);
    transition: opacity .8s ease;
}

@keyframes titilar {
    0%, 100% { scale: 1; }
    50%      { scale: .5; }
}

/* ---------- Encabezado ---------- */

.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.8rem;
    text-decoration: none;
}

.logo-luna {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff1a8;
    box-shadow: inset -9px -3px 0 0 #f6d86b, 0 0 18px #fff3c4;
}

.encabezado { flex-wrap: wrap; }

.controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.grupo-zoom { display: inline-flex; gap: .35rem; }

.boton {
    font: 600 1rem "Nunito", system-ui, sans-serif;
    text-transform: inherit;
    color: var(--titulo);
    background: color-mix(in srgb, var(--nube) 80%, transparent);
    border: 0;
    border-radius: 999px;
    padding: .6rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 14px var(--tarjeta-sombra);
    transition: transform .2s ease, background .6s ease;
}

.boton:hover:not(:disabled) { transform: translateY(-2px); }
.boton:disabled { opacity: .45; cursor: default; }

.boton-modo-noche { display: none; }
:root[data-modo="noche"] .boton-modo-dia { display: none; }
:root[data-modo="noche"] .boton-modo-noche { display: inline; }

/* ---------- Tipo de letra ---------- */

/* Por defecto: imprenta mayúscula, más fácil para los que están aprendiendo a leer */
:root[data-tipo="imprenta"] body {
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* El botón muestra a qué tipo se cambia, así que no se transforma */
#boton-tipo span { text-transform: none; letter-spacing: 0; }
.solo-original { display: none; }
:root[data-tipo="original"] .solo-imprenta { display: none; }
:root[data-tipo="original"] .solo-original { display: inline; }

/* ---------- Contenido ---------- */

.contenido {
    flex: 1;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.portada {
    text-align: center;
    padding: 2.5rem 0 2rem;
}

.portada h1 {
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.portada-bajada {
    font-size: 1.15rem;
    color: var(--texto-suave);
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

.portada-chica { padding-top: 4rem; }

.boton-tematica {
    display: block;
    width: min(100%, 36rem);
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    font: 700 1.2rem "Nunito", system-ui, sans-serif;
    text-transform: inherit;
    letter-spacing: inherit;
    color: #5b3d6e;
    background: linear-gradient(90deg, #ffd9e6, #e6dcff, #cfe6ff);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 28px var(--tarjeta-sombra);
    transition: transform .2s ease, box-shadow .2s ease;
}

.boton-tematica:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px var(--tarjeta-sombra);
}

.vacio { text-align: center; font-size: 1.2rem; }

/* ---------- Tarjetas ---------- */

.grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.tarjeta {
    --fondo-tarjeta: var(--cielo);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.6rem 1.5rem 1.4rem;
    border-radius: var(--radio);
    background: var(--fondo-tarjeta);
    color: var(--texto);
    text-decoration: none;
    box-shadow: 0 10px 28px var(--tarjeta-sombra);
    transition: transform .25s ease, box-shadow .25s ease, background .6s ease;
}

.tarjeta:hover,
.tarjeta:focus-visible {
    transform: translateY(-6px) rotate(-.6deg);
    box-shadow: 0 18px 34px var(--tarjeta-sombra);
}

.tarjeta h2 { font-size: 1.45rem; margin: .2rem 0 0; }
.tarjeta p  { margin: 0; line-height: 1.5; }

.tarjeta-emoji { font-size: 2.6rem; line-height: 1; }

.tarjeta-meta {
    margin-top: auto;
    padding-top: .8rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--texto-suave);
}

.tarjeta-chica { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.4rem; }
.tarjeta-chica h2 { margin: 0; font-size: 1.25rem; }
.tarjeta-chica .tarjeta-emoji { font-size: 2rem; }

.tarjeta-cielo,   .lectura-cielo   { --fondo-tarjeta: var(--cielo); }
.tarjeta-rosa,    .lectura-rosa    { --fondo-tarjeta: var(--rosa); }
.tarjeta-lavanda, .lectura-lavanda { --fondo-tarjeta: var(--lavanda); }
.tarjeta-menta,   .lectura-menta   { --fondo-tarjeta: var(--menta); }
.tarjeta-durazno, .lectura-durazno { --fondo-tarjeta: var(--durazno); }
.tarjeta-limon,   .lectura-limon   { --fondo-tarjeta: var(--limon); }

/* ---------- Lectura ---------- */

.lectura {
    max-width: 44rem;
    margin: 1rem auto 0;
    padding: 2rem clamp(1.25rem, 5vw, 3.5rem) 2.5rem;
    border-radius: 36px;
    background: color-mix(in srgb, var(--fondo-tarjeta) 55%, var(--nube));
    box-shadow: 0 14px 40px var(--tarjeta-sombra);
    transition: background .6s ease;
}

.volver {
    font-weight: 700;
    text-decoration: none;
}

.lectura-encabezado { text-align: center; margin: 1.5rem 0 2rem; }
.lectura-emoji { font-size: 4rem; line-height: 1; display: block; }
.lectura-encabezado h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: .5rem 0; }
.lectura-meta { color: var(--texto-suave); font-weight: 600; margin: 0 0 1rem; }


.lectura-texto p {
    font-size: var(--letra-lectura);
    line-height: 1.8;
    margin: 0 0 1.2em;
}

:root[data-tipo="original"] .lectura-texto p:first-child::first-letter {
    font-family: "Fredoka", sans-serif;
    font-size: 3.2em;
    float: left;
    line-height: .9;
    margin: .08em .12em 0 0;
    color: var(--titulo);
}

.dibujo {
    margin: 2rem 0 2.2rem;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--tarjeta-sombra);
    transform: rotate(-.8deg);
}

.dibujo img { display: block; width: 100%; height: auto; }

.moraleja {
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
    color: var(--texto-suave);
    margin: 2rem 0 0;
}

.fin { text-align: center; font-size: 1.5rem; margin: 2rem 0 0; }

.otro {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    text-align: center;
}

.otro p { font-weight: 700; color: var(--texto-suave); }

/* ---------- Votos ---------- */

.votos {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px dashed color-mix(in srgb, var(--acento) 35%, transparent);
    text-align: center;
}

.votos-pregunta { font-weight: 700; margin: 0 0 .8rem; }

.votos-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
}

.voto {
    font: 700 1.1rem "Nunito", system-ui, sans-serif;
    text-transform: inherit;
    letter-spacing: inherit;
    color: var(--titulo);
    background: var(--nube);
    border: 3px solid transparent;
    border-radius: 999px;
    padding: .7rem 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--tarjeta-sombra);
    transition: transform .2s ease, border-color .2s ease, background .6s ease;
}

.voto:hover { transform: translateY(-2px) scale(1.03); }

.voto[aria-pressed="true"] {
    border-color: var(--acento);
    background: color-mix(in srgb, var(--acento) 22%, var(--nube));
}

.votos-gracias { min-height: 1.5em; margin: .8rem 0 0; color: var(--texto-suave); font-weight: 600; }

/* ---------- Sugerencias ---------- */

.boton-sugerencias {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10;
    font: 700 1rem "Nunito", system-ui, sans-serif;
    text-transform: inherit;
    letter-spacing: inherit;
    color: #5b3d6e;
    background: #ffc9dc;
    border: 0;
    border-radius: 999px;
    padding: .8rem 1.3rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(200, 110, 150, .35);
    transition: transform .2s ease;
}

.boton-sugerencias:hover { transform: translateY(-3px) rotate(-2deg); }

.sugerencias {
    width: min(30rem, calc(100vw - 2rem));
    border: 0;
    border-radius: 32px;
    padding: 0;
    color: var(--texto);
    background: color-mix(in srgb, var(--rosa) 35%, var(--nube));
    box-shadow: 0 20px 60px rgba(90, 70, 140, .3);
}

.sugerencias::backdrop { background: rgba(80, 70, 130, .45); }

.sugerencias form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.8rem 1.6rem 1.5rem;
}

.sugerencias h2 { margin: 0; font-size: 1.5rem; padding-right: 2rem; }
.sugerencias-bajada { margin: 0 0 .6rem; color: var(--texto-suave); }

.sugerencias label { font-weight: 700; margin-top: .4rem; }
.opcional { font-weight: 400; color: var(--texto-suave); }

.sugerencias textarea,
.sugerencias input {
    font: 1rem "Nunito", system-ui, sans-serif;
    color: var(--texto);
    background: var(--nube);
    border: 2px solid color-mix(in srgb, var(--acento) 30%, transparent);
    border-radius: 18px;
    padding: .7rem .9rem;
    width: 100%;
    resize: vertical;
}

/* Lo que escribe cada uno se guarda tal cual, sin pasarlo a mayúscula */
.sugerencias textarea,
.sugerencias input { text-transform: none; letter-spacing: normal; }

.sugerencias textarea:focus,
.sugerencias input:focus { outline: none; border-color: var(--acento); }

.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sugerencias-estado { min-height: 1.4em; margin: .3rem 0 0; font-weight: 600; color: var(--texto-suave); }

.sugerencias-acciones { display: flex; justify-content: flex-end; gap: .6rem; }
.boton-principal { background: var(--acento); color: #fff; }
.boton-secundario { box-shadow: none; }

.cerrar {
    position: absolute;
    top: .9rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--texto-suave);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* ---------- Pie ---------- */

.pie {
    text-align: center;
    padding: 1.5rem 1rem 5.5rem; /* lugar para el botón flotante de sugerencias */
    color: var(--texto-suave);
    font-size: .95rem;
}

/* ---------- Accesibilidad ---------- */

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}