@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Quicksand:wght@600;700&family=Baloo+2:wght@600;700;800&family=Playfair+Display:wght@600;700&display=swap');


* {
    box-sizing: border-box;
}


/*
 * Bloquea el desplazamiento lateral incluso si el usuario lo
 * fuerza arrastrando con el dedo (rebote elástico de iOS, por
 * ejemplo), no solo cuando algún elemento desborda el ancho.
 */
html {

    overflow-x: hidden;

    max-width: 100%;

    touch-action: pan-y;

    overscroll-behavior-x: none;

}


:root {

    --primary: #8b7ef5;
    --primary-dark: #7264e0;
    --primary-tint: #f1e9ff;
    --primary-soft: #f8f4ff;

    --peach: #ffb4a2;
    --peach-dark: #f2896f;
    --peach-tint: #ffe9e2;

    --sage: #7fc9a3;
    --sage-dark: #5aab80;
    --sage-tint: #e6f6ee;

    --amber: #e8a23d;
    --amber-tint: #fff3da;

    --background: #f9f5ff;

    --card: #ffffff;

    --text: #3d3652;
    --muted: #8d87a0;

    --border: #efe8f5;
    --neutral-tint: #f4f1fa;

    --red: #e8735f;
    --red-dark: #c94f3c;
    --red-tint: #fff0ed;

    --recordatorio: #b3306e;
    --recordatorio-dark: #8f2359;
    --recordatorio-tint: #fce3ee;

    --font-heading:
        "Quicksand",
        "Nunito",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --font-body:
        "Nunito",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --shadow:
        0 8px 24px rgba(130, 100, 160, 0.10);

    --shadow-strong:
        0 10px 28px rgba(130, 100, 160, 0.16);

}


body {

    margin: 0;

    overflow-x: hidden;

    max-width: 100%;

    touch-action: pan-y;

    overscroll-behavior-x: none;

    background:
        linear-gradient(
            180deg,
            #fbf7ff 0%,
            #fff7f2 100%
        );

    color: var(--text);

    font-family: var(--font-body);

    /* Parte cadenas largas sin espacios (URLs, "aaaa…") para
       que una nota no ensanche la tarjeta y se salga por el
       lado. */
    overflow-wrap: break-word;

    min-height: 100vh;
    min-height: 100dvh;

    /* iOS con viewport-fit=cover: hueco para la barra de
       gestos. 0 en pantallas sin notch. */
    padding-bottom: env(safe-area-inset-bottom);

}


/* =====================================================
   TEMA: COCHES DE JUGUETE
   ===================================================== */

body[data-theme="coches"] {

    --primary: #2f7fe0;
    --primary-dark: #1f63b8;
    --primary-tint: #e3f0ff;
    --primary-soft: #eff7ff;

    --peach: #ff8a5c;
    --peach-dark: #e8592b;
    --peach-tint: #ffe4d6;

    --sage: #4caf6b;
    --sage-dark: #358a4e;
    --sage-tint: #dff5e6;

    --amber: #f4b400;
    --amber-tint: #fff4d6;

    --text: #26314a;
    --muted: #7a8699;

    --border: #e1e6ee;
    --neutral-tint: #eef1f6;

    --red: #e0433a;
    --red-dark: #b52e27;
    --red-tint: #ffe6e4;

    --recordatorio: #a52f74;
    --recordatorio-dark: #7d2359;
    --recordatorio-tint: #f6e0ee;

    --font-heading:
        "Baloo 2",
        "Nunito",
        sans-serif;

    --shadow:
        0 8px 24px rgba(40, 70, 120, 0.12);

    --shadow-strong:
        0 10px 28px rgba(40, 70, 120, 0.18);

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 800'%3E %3Cpath d='M250,0 C520,50 520,110 250,160 C-20,210 -20,270 250,320 C520,370 520,430 250,480 C-20,530 -20,590 250,640 C520,690 520,750 250,800' stroke='%23cfd9e8' stroke-width='40' fill='none' stroke-linecap='round' opacity='0.6'/%3E %3Cpath d='M250,0 C520,50 520,110 250,160 C-20,210 -20,270 250,320 C520,370 520,430 250,480 C-20,530 -20,590 250,640 C520,690 520,750 250,800' stroke='%232f7fe0' stroke-width='3' stroke-dasharray='10 12' fill='none' opacity='0.22'/%3E %3Cg transform='translate(452,80) rotate(-40)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%23e8592b' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(250,160) rotate(-5)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%239b6fd6' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(48,240) rotate(35)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%232f7fe0' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(452,400) rotate(-35)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%23f4b400' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(250,480) rotate(5)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%23e0433a' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(48,560) rotate(40)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%234caf6b' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(452,720) rotate(-40)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%232f7fe0' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3C/svg%3E"),
        linear-gradient(
            180deg,
            #f5f8fc 0%,
            #eef3f9 100%
        );

    background-repeat:
        repeat-y,
        no-repeat;

    background-size:
        min(100vw, 500px) min(calc(100vw * 1.6), 800px),
        auto;

    background-position:
        center top,
        0 0;

}


/* =====================================================
   TEMA: COCHES DE JUGUETE — NOCHE
   Mismo trazado y coches que de día, con un velo oscuro por
   encima. Las farolas van en su PROPIA capa, por encima del
   velo, con "background-blend-mode: screen" — así la luz se
   suma sobre la oscuridad en vez de quedar tapada por ella
   (si fuera una capa normal, el velo oscuro pintado encima la
   apagaría igual que apaga la carretera).
   ===================================================== */

html[data-momento="noche"] body[data-theme="coches"] {

    --card: #1c2436;
    --text: #e7ecf6;
    --muted: #8d9ab3;

    --border: #2d374d;
    --neutral-tint: #232c40;

    --primary-tint: #22304a;
    --primary-soft: #1a2233;

    --peach-tint: #3a2a20;
    --sage-tint: #1f3327;
    --amber-tint: #3a2f14;
    --red-tint: #3a1f1c;
    --recordatorio-tint: #3a1a2a;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 800'%3E%3Cdefs%3E%3CradialGradient id='glow' cx='50%' cy='50%' r='50%'%3E%3Cstop offset='0%' stop-color='%23fff6d8' stop-opacity='0.95'/%3E%3Cstop offset='40%' stop-color='%23ffe9a8' stop-opacity='0.5'/%3E%3Cstop offset='100%' stop-color='%23ffe9a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='halo' cx='50%' cy='50%' r='50%'%3E%3Cstop offset='0%' stop-color='%23ffdf9c' stop-opacity='0.3'/%3E%3Cstop offset='60%' stop-color='%23ffdf9c' stop-opacity='0.1'/%3E%3Cstop offset='100%' stop-color='%23ffdf9c' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cg transform='translate(70,160)'%3E%3Ccircle r='45' fill='url(%23halo)'/%3E%3Ccircle r='22' fill='url(%23glow)'/%3E%3Cline x1='0' y1='8' x2='0' y2='50' stroke='%232a2f45' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M-8,6 Q0,-7 8,6 Z' fill='%232a2f45' opacity='0.55'/%3E%3Ccircle cy='3' r='3.5' fill='%23fffdf4'/%3E%3C/g%3E %3Cg transform='translate(430,320)'%3E%3Ccircle r='45' fill='url(%23halo)'/%3E%3Ccircle r='22' fill='url(%23glow)'/%3E%3Cline x1='0' y1='8' x2='0' y2='50' stroke='%232a2f45' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M-8,6 Q0,-7 8,6 Z' fill='%232a2f45' opacity='0.55'/%3E%3Ccircle cy='3' r='3.5' fill='%23fffdf4'/%3E%3C/g%3E %3Cg transform='translate(70,400)'%3E%3Ccircle r='45' fill='url(%23halo)'/%3E%3Ccircle r='22' fill='url(%23glow)'/%3E%3Cline x1='0' y1='8' x2='0' y2='50' stroke='%232a2f45' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M-8,6 Q0,-7 8,6 Z' fill='%232a2f45' opacity='0.55'/%3E%3Ccircle cy='3' r='3.5' fill='%23fffdf4'/%3E%3C/g%3E %3Cg transform='translate(430,560)'%3E%3Ccircle r='45' fill='url(%23halo)'/%3E%3Ccircle r='22' fill='url(%23glow)'/%3E%3Cline x1='0' y1='8' x2='0' y2='50' stroke='%232a2f45' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M-8,6 Q0,-7 8,6 Z' fill='%232a2f45' opacity='0.55'/%3E%3Ccircle cy='3' r='3.5' fill='%23fffdf4'/%3E%3C/g%3E %3Cg transform='translate(70,640)'%3E%3Ccircle r='45' fill='url(%23halo)'/%3E%3Ccircle r='22' fill='url(%23glow)'/%3E%3Cline x1='0' y1='8' x2='0' y2='50' stroke='%232a2f45' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M-8,6 Q0,-7 8,6 Z' fill='%232a2f45' opacity='0.55'/%3E%3Ccircle cy='3' r='3.5' fill='%23fffdf4'/%3E%3C/g%3E %3Cg transform='translate(430,720)'%3E%3Ccircle r='45' fill='url(%23halo)'/%3E%3Ccircle r='22' fill='url(%23glow)'/%3E%3Cline x1='0' y1='8' x2='0' y2='50' stroke='%232a2f45' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M-8,6 Q0,-7 8,6 Z' fill='%232a2f45' opacity='0.55'/%3E%3Ccircle cy='3' r='3.5' fill='%23fffdf4'/%3E%3C/g%3E %3C/svg%3E"),
        linear-gradient(
            rgba(6, 10, 26, .58),
            rgba(6, 10, 26, .58)
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 800'%3E %3Cpath d='M250,0 C520,50 520,110 250,160 C-20,210 -20,270 250,320 C520,370 520,430 250,480 C-20,530 -20,590 250,640 C520,690 520,750 250,800' stroke='%23cfd9e8' stroke-width='40' fill='none' stroke-linecap='round' opacity='0.6'/%3E %3Cpath d='M250,0 C520,50 520,110 250,160 C-20,210 -20,270 250,320 C520,370 520,430 250,480 C-20,530 -20,590 250,640 C520,690 520,750 250,800' stroke='%232f7fe0' stroke-width='3' stroke-dasharray='10 12' fill='none' opacity='0.22'/%3E %3Cg transform='translate(452,80) rotate(-40)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%23e8592b' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(250,160) rotate(-5)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%239b6fd6' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(48,240) rotate(35)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%232f7fe0' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(452,400) rotate(-35)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%23f4b400' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(250,480) rotate(5)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%23e0433a' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(48,560) rotate(40)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%234caf6b' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3Cg transform='translate(452,720) rotate(-40)'%3E%3Crect x='-16' y='-8' width='32' height='16' rx='6' fill='%232f7fe0' opacity='0.6'/%3E%3Crect x='-16' y='-2' width='32' height='4' fill='%23ffffff' opacity='0.45'/%3E%3Ccircle cx='-9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='-8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='-9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3Ccircle cx='9' cy='8' r='3' fill='%2326314a' opacity='0.6'/%3E%3C/g%3E %3C/svg%3E"),
        linear-gradient(
            180deg,
            #f5f8fc 0%,
            #eef3f9 100%
        );

    background-blend-mode:
        screen,
        normal,
        normal,
        normal;

    background-repeat:
        repeat-y,
        no-repeat,
        repeat-y,
        no-repeat;

    background-size:
        min(100vw, 500px) min(calc(100vw * 1.6), 800px),
        auto,
        min(100vw, 500px) min(calc(100vw * 1.6), 800px),
        auto;

    background-position:
        center top,
        0 0,
        center top,
        0 0;

}


/* =====================================================
   TEMA: FLORES
   ===================================================== */

body[data-theme="flores"] {

    --primary: #d888b3;
    --primary-dark: #c06998;
    --primary-tint: #fbe6f1;
    --primary-soft: #fdf2f8;

    --peach: #ffb199;
    --peach-dark: #f2825f;
    --peach-tint: #ffe6dd;

    --sage: #8fbf8a;
    --sage-dark: #699b64;
    --sage-tint: #e9f5e7;

    --amber: #e8b74d;
    --amber-tint: #fff3da;

    --text: #4a3b46;
    --muted: #9c8a97;

    --border: #f3e3ee;
    --neutral-tint: #f8eef4;

    --red: #e07a92;
    --red-dark: #c65873;
    --red-tint: #fdeaf0;

    --recordatorio: #8a3272;
    --recordatorio-dark: #6b2459;
    --recordatorio-tint: #f3e0ee;

    --font-heading:
        "Playfair Display",
        "Nunito",
        serif;

    --shadow:
        0 8px 24px rgba(190, 120, 160, 0.14);

    --shadow-strong:
        0 10px 28px rgba(190, 120, 160, 0.2);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(216, 136, 179, .10) 0,
            rgba(216, 136, 179, .10) 6px,
            transparent 7px
        ),
        radial-gradient(
            circle at 70% 65%,
            rgba(143, 191, 138, .10) 0,
            rgba(143, 191, 138, .10) 5px,
            transparent 6px
        ),
        radial-gradient(
            circle at 40% 85%,
            rgba(255, 177, 153, .10) 0,
            rgba(255, 177, 153, .10) 4px,
            transparent 5px
        ),
        linear-gradient(
            180deg,
            #fff5fa 0%,
            #f5fbf3 100%
        );

    background-size:
        90px 90px,
        110px 110px,
        70px 70px,
        auto;

}


/* =====================================================
   TEMA: FLORES — NOCHE
   Mismo patrón de flores que de día, con un velo oscuro por
   encima. Las luciérnagas se añaden aparte como elementos
   propios (ver .luciernaga en js/app.js), no en el fondo.
   ===================================================== */

html[data-momento="noche"] body[data-theme="flores"] {

    --card: #241b28;
    --text: #f3e7ee;
    --muted: #a8899d;

    --border: #3a2c3a;
    --neutral-tint: #2a1f2b;

    --primary-tint: #3a2430;
    --primary-soft: #2a1c26;

    --peach-tint: #3a2620;
    --sage-tint: #223326;
    --amber-tint: #3a3018;
    --red-tint: #3a1f28;
    --recordatorio-tint: #3a1a2c;

    background:
        linear-gradient(
            rgba(10, 8, 26, .55),
            rgba(10, 8, 26, .55)
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(216, 136, 179, .10) 0,
            rgba(216, 136, 179, .10) 6px,
            transparent 7px
        ),
        radial-gradient(
            circle at 70% 65%,
            rgba(143, 191, 138, .10) 0,
            rgba(143, 191, 138, .10) 5px,
            transparent 6px
        ),
        radial-gradient(
            circle at 40% 85%,
            rgba(255, 177, 153, .10) 0,
            rgba(255, 177, 153, .10) 4px,
            transparent 5px
        ),
        linear-gradient(
            180deg,
            #fff5fa 0%,
            #f5fbf3 100%
        );

    background-size:
        auto,
        90px 90px,
        110px 110px,
        70px 70px,
        auto;

}


/* =====================================================
   LUCIÉRNAGAS (tema Flores, de noche)
   Elementos creados por JS (ver crearLuciernagas() en app.js),
   cada una con su propia posición, velocidad y retraso para que
   parpadeen y se muevan de forma independiente, no todas a la vez.
   ===================================================== */

.luciernagas-contenedor {

    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

}

.luciernaga {

    position: absolute;

    left: var(--x);
    top: var(--y);

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #f3ffb0;

    box-shadow:
        0 0 6px 2px rgba(243, 255, 176, .8),
        0 0 14px 6px rgba(200, 255, 120, .35);

    opacity: 0;

    animation:
        luciernaga-parpadeo var(--dur-parpadeo) ease-in-out infinite,
        luciernaga-deriva var(--dur-deriva) ease-in-out infinite;

    animation-delay: var(--retraso);

}

@keyframes luciernaga-parpadeo {

    0%, 100% { opacity: 0; }
    45% { opacity: .9; }
    55% { opacity: .9; }

}

@keyframes luciernaga-deriva {

    0%   { transform: translate(0, 0); }
    25%  { transform: translate(14px, -12px); }
    50%  { transform: translate(-8px, 6px); }
    75%  { transform: translate(10px, 16px); }
    100% { transform: translate(0, 0); }

}

@media (prefers-reduced-motion: reduce) {

    .luciernaga {
        animation: none;
        opacity: .6;
    }

}


h1,
h2,
h3,
strong {

    font-family: var(--font-heading);

}


button,
input,
select,
textarea {

    font-family: inherit;

}


button {

    cursor: pointer;

}


a {

    text-decoration: none;

    color: inherit;

}


.app {

    width: 100%;

    max-width: 900px;

    margin: auto;

}


/* HEADER */

.header {

    background: var(--card);

    /* Con viewport-fit=cover el contenido llega hasta el borde;
       sumamos el safe-area para no quedar bajo la barra de
       estado / notch (env() = 0 sin notch). */
    padding:
        calc(18px + env(safe-area-inset-top))
        calc(20px + env(safe-area-inset-right))
        18px
        calc(20px + env(safe-area-inset-left));

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    row-gap: 10px;

    border-bottom:
        1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 10;

}


.header-title {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}


.header-actions {

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    justify-content: flex-end;

    gap: 8px;

    flex-basis: 100%;

}


.baby-icon {

    width: 50px;

    height: 50px;

    background:
        var(--primary-tint);

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

}


.header h1 {

    font-size: 19px;

    margin: 0 0 2px;

    overflow-wrap: break-word;

}


.header span {

    color: var(--muted);

    font-size: 13px;

}


.header-button {

    background:
        var(--primary-tint);

    color:
        var(--primary);

    padding:
        10px 13px;

    border-radius: 14px;

    display: flex;

    gap: 6px;

    align-items: center;

    font-weight: 700;

}


.header > .header-button {

    flex-basis: 100%;

    justify-content: flex-end;

}


.header-button span {

    color: inherit;

    font-size: 13px;

}


/* BUSCADOR */

.search-bar {

    padding: 0 16px 16px;

}


.search-bar input {

    font-size: 16px;

}


/* MAIN */

main {

    padding:
        16px
        16px
        calc(16px + env(safe-area-inset-bottom));

}


/* DAY NAVIGATION */

.day-navigation {

    display: grid;

    grid-template-columns:
        80px 1fr 80px;

    align-items: center;

    background: var(--card);

    border-radius: 22px;

    padding: 12px;

    box-shadow: var(--shadow);

    margin-bottom: 20px;

}


.nav-day {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    color: var(--primary);

}


.nav-day span {

    font-size: 32px;

    line-height: 20px;

}


.nav-day small {

    font-size: 11px;

}


.current-day {

    text-align: center;

}


.current-day strong {

    display: block;

    font-size: 20px;

}


.current-day span {

    display: block;

    color: var(--muted);

    font-size: 13px;

    margin-top: 2px;

}


.today-label {

    display: inline-block;

    background: var(--primary-tint);

    color: var(--primary);

    padding:
        3px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 800;

    margin-bottom: 4px;

}


/* TITULOS */

.section-title {

    margin:
        18px 4px 12px;

}


.section-title h2 {

    margin: 0;

    font-size: 20px;

}


.section-title span {

    color: var(--muted);

    font-size: 12px;

}


/* TOMA */

.toma-card {

    background: var(--card);

    border-radius: 20px;

    padding: 16px;

    margin-bottom: 12px;

    box-shadow: var(--shadow);

    border:
        1px solid
        var(--border);

}


.nota-card {

    border-left: 4px solid var(--primary);

}


.cita-card-dia {

    border-left: 4px solid var(--peach-dark);

}


.recordatorio-card-dia {

    border-left: 4px solid var(--recordatorio);

}


.toma-time {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    margin-bottom: 12px;

}


.toma-time strong {

    font-size: 17px;

}


.toma-main {

    padding-left: 2px;

}


.toma-quantity {

    display: flex;

    align-items: baseline;

    gap: 6px;

}


.toma-quantity span {

    font-size: 22px;

}


.toma-quantity strong {

    font-size: 28px;

}


.toma-quantity small {

    font-size: 14px;

    color: var(--muted);

}


.toma-notas {

    background:
        var(--primary-soft);

    padding: 10px;

    border-radius: 12px;

    margin-top: 10px;

    font-size: 14px;

    white-space: pre-wrap;

}


.recordatorio-texto {

    background:
        var(--recordatorio-tint);

    color: var(--recordatorio-dark);

}


.toma-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 12px;

}


.edit-button,
.delete-button {

    border: 0;

    border-radius: 12px;

    padding:
        8px 11px;

    background:
        var(--neutral-tint);

    color: var(--text);

}


.delete-button {

    color:
        var(--red);

}


/* EMPTY */

.empty-state {

    background: var(--card);

    border-radius: 22px;

    padding:
        35px 20px;

    text-align: center;

    box-shadow: var(--shadow);

}


.empty-icon {

    font-size: 45px;

    margin-bottom: 8px;

}


.empty-state h3 {

    margin:
        5px 0;

}


.empty-state p {

    color: var(--muted);

    font-size: 14px;

}


.empty-state button {

    border: 0;

    background:
        var(--primary);

    color: white;

    padding:
        11px 16px;

    border-radius: 14px;

    font-weight: 700;

}


/* RESUMEN */

.daily-summary {

    margin-top: 22px;

}


.daily-summary h2 {

    font-size: 18px;

    margin:
        0 4px 12px;

}


.summary-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

}


/* Cuando el número de tarjetas visibles es impar, la última
   se queda sola en su fila: que ocupe el ancho completo en
   vez de dejar hueco a su lado. Se asigna por JS a la última
   tarjeta visible (no siempre es la última del DOM, porque
   alguna puede estar oculta con display:none). */

.summary-card--ancho-completo {

    grid-column: 1 / -1;

}


.summary-grid-inline {

    margin-bottom: 20px;

}


.summary-card {

    background: var(--card);

    border-radius: 18px;

    padding: 15px;

    text-align: center;

    box-shadow: var(--shadow);

}


.summary-icon {

    display: block;

    font-size: 22px;

}


.summary-card strong {

    display: block;

    font-size: 20px;

    margin:
        5px 0 2px;

}


.summary-card small {

    color: var(--muted);

}


/* ADD BUTTON */

.add-button {

    width: 100%;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: white;

    border-radius: 20px;

    padding: 15px;

    margin:
        20px 0 10px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    box-shadow:
        0 8px 20px
        rgba(139, 126, 245, .28);

}


.add-button > span {

    width: 42px;

    height: 42px;

    background:
        rgba(255,255,255,.2);

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

}


.add-button strong {

    display: block;

    font-size: 16px;

}


.add-button small {

    display: block;

    opacity: .8;

    margin-top: 2px;

}


/*
 * Botón de "Añadir recordatorio": mismos bloques que
 * .add-button (icono + strong/small), pero en rojo tirando
 * a morado para que destaque visualmente del resto de
 * acciones sin salirse de la estética general.
 */

.add-button-recordatorio {

    width: 100%;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--recordatorio),
            var(--recordatorio-dark)
        );

    color: white;

    border-radius: 20px;

    padding: 15px;

    margin:
        20px 0 10px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    box-shadow:
        0 8px 20px
        rgba(179, 48, 110, .28);

}


.add-button-recordatorio > span {

    width: 42px;

    height: 42px;

    background:
        rgba(255,255,255,.2);

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

}


.add-button-recordatorio strong {

    display: block;

    font-size: 16px;

}


.add-button-recordatorio small {

    display: block;

    opacity: .8;

    margin-top: 2px;

}


/* MODAL */

.modal {

    display: none;

    position: fixed;

    inset: 0;

    background:
        rgba(50,40,70,.55);

    z-index: 100;

    align-items: flex-end;

    justify-content: center;

}


.modal.visible {

    display: flex;

}


/*
 * Bloquea el scroll de la página que queda detrás del
 * modal en móviles (evita que la página se mueva al
 * hacer scroll dentro del formulario).
 */

body.modal-open {

    position: fixed;

    left: 0;

    right: 0;

    width: 100%;

    overflow: hidden;

}


.modal-content {

    background: var(--card);

    width: 100%;

    max-width: 600px;

    border-radius:
        28px 28px 0 0;

    padding: 20px;

}


/*
 * Solo dentro de un modal real: la tarjeta se limita a la
 * altura de la ventana y hace su propio scroll, y es columna
 * flex para que la cabecera y los botones queden fijos y solo
 * el formulario haga scroll (ver más abajo).
 *
 * Fuera de un modal, ".modal-content" se reutiliza como
 * tarjeta suelta (login.php, registro.php, configuracion.php,
 * nueva-password.php, admin.php) y NO debe capar su altura ni
 * hacer scroll interno: crece con su contenido y quien hace
 * scroll es la página. Si no, al abrir/cerrar el teclado en
 * móvil el scroll interno se queda descolocado y deja un hueco.
 */

.modal .modal-content {

    display: flex;

    flex-direction: column;

    max-height: 92vh;
    max-height: 92dvh;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    animation:
        modalUp .2s ease;

}


@keyframes modalUp {

    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }

}


/*
 * La cabecera y los botones quedan fijos; solo los campos
 * del formulario hacen scroll internamente si no caben, con
 * "Guardar" siempre pegado abajo (position: sticky) para no
 * tener que bajar del todo para verlo. Así los campos (incl.
 * el de notas) mantienen su tamaño normal en vez de
 * encogerse para caber a la fuerza.
 *
 * OJO: va con el prefijo ".modal " a propósito.
 * ".modal-content" y ".modal-header" también se reutilizan
 * como simples tarjetas normales fuera de un modal
 * (configuracion.php, login.php, registro.php); sin ese
 * prefijo estas reglas también se les aplicarían a ellas.
 */

.modal .modal-content form {

    flex: 1 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

}


.modal-header {

    flex-shrink: 0;

}


.modal .modal-content .form-actions {

    position: sticky;

    bottom: 0;

    flex-shrink: 0;

    background: var(--card);

    padding-top: 12px;

    margin-top: 4px;

}


@media (max-width: 700px) {

    .modal .modal-content {

        height: 100vh;
        height: 100dvh;

        max-height: 100vh;
        max-height: 100dvh;

        border-radius: 0;

        /* Con viewport-fit=cover el modal a pantalla completa
           llega hasta los bordes: sumamos safe-area arriba y
           abajo para no quedar bajo el notch / barra de gestos. */
        padding: calc(16px + env(safe-area-inset-top))
            16px
            calc(16px + env(safe-area-inset-bottom))
            16px;

        overflow: hidden;

    }


    .modal .modal-header {

        margin-bottom: 12px;

    }


    .modal .modal-content .form-group {

        margin-bottom: 8px;

    }


    .modal .modal-content .form-group label {

        margin-bottom: 4px;

    }


    .modal .modal-content .emoji-buttons {

        gap: 6px;

        margin-bottom: 6px;

    }


    .modal .modal-content .emoji-buttons button {

        padding: 5px 4px;

        font-size: 19px;

    }


    .modal .modal-content .emoji-buttons small {

        font-size: 8px;

    }

}


.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}


.modal-header h2 {

    margin: 0;

    font-size: 20px;

}


.modal-header span {

    color: var(--muted);

    font-size: 13px;

}


.close-button {

    border: 0;

    background:
        var(--neutral-tint);

    width: 38px;

    height: 38px;

    border-radius: 50%;

    font-size: 25px;

    color: var(--muted);

}


/* FORM */

.form-row {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 12px;

}


.form-row-compacta {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 14px;

    max-width: 90%;

}


.form-row-compacta .form-group {

    margin-bottom: 0;

}


.form-row-compacta input,
.form-row-compacta .campo-cantidad {

    width: auto;

    max-width: 170px;

}


.form-group {

    margin-bottom: 18px;

}


.form-group label {

    display: block;

    font-weight: 700;

    font-size: 14px;

    margin-bottom: 7px;

}


.form-group label small {

    display: block;

    font-weight: 400;

    font-size: 11px;

    color: var(--muted);

    margin-top: 2px;

}


.form-group .checkbox-label {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    margin-bottom: 0;

}


.checkbox-label input[type="checkbox"] {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    accent-color: var(--primary);

}


input,
select,
textarea {

    width: 100%;

    border:
        1px solid var(--border);

    border-radius: 14px;

    padding:
        12px;

    font-size: 16px;

    background: var(--neutral-tint);

    color: var(--text);

    outline: none;

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--primary);

    background: var(--card);

}


.input-with-unit {

    position: relative;

}


.input-with-unit input {

    padding-right: 50px;

}


.input-with-unit span {

    position: absolute;

    right: 15px;

    top: 13px;

    color: var(--muted);

    font-size: 14px;

}


/* SELECTOR DE CANTIDAD (las tres ruedas: centenas /
   decenas / unidades, visibles y rodables a la vez) */

.selector-numero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    padding: 0 10px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: var(--neutral-tint);

}


.selector-numero::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 8px;

    right: 8px;

    height: 34px;

    transform: translateY(-50%);

    background: var(--primary-soft);

    border-radius: 10px;

    pointer-events: none;

}


.rueda-columna {

    position: relative;

    width: 38px;

    height: 170px;

    overflow-y: scroll;

    scroll-snap-type: y mandatory;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    scrollbar-width: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 25%,
        black 75%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 25%,
        black 75%,
        transparent 100%
    );

}


.rueda-columna::-webkit-scrollbar {

    display: none;

}


.rueda-digito {

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    scroll-snap-align: center;

    -webkit-user-select: none;

    user-select: none;

    cursor: pointer;

}


.rueda-digito:hover {

    color: var(--primary);

}


.selector-unidad {

    position: relative;

    align-self: center;

    color: var(--muted);

    font-size: 13px;

    margin-left: 4px;

}


/* SELECTOR DE IDIOMA (bandera) */

.idioma-selector {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.idioma-opcion {

    position: relative;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 8px 12px;

    border: 2px solid var(--border);

    border-radius: 14px;

    background: var(--neutral-tint);

    color: var(--text);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

}


.idioma-opcion.activa,
.idioma-opcion:has(input:checked) {

    border-color: var(--primary);

    background: var(--primary-soft);

}


.idioma-bandera {

    font-size: 20px;

}


/* CAMPO QUE ABRE EL POPUP DE CANTIDAD */

.campo-cantidad {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    height: 44px;

    border: 1px solid var(--border);

    border-radius: 14px;

    background: var(--neutral-tint);

    color: var(--text);

    padding: 0 14px;

    font-size: 16px;

    font-weight: 700;

}


.campo-cantidad:active {

    border-color: var(--primary);

    background: var(--card);

}


.campo-cantidad-flecha {

    color: var(--muted);

    font-size: 12px;

    margin-left: 8px;

}


.campo-cantidad-total {

    display: flex;

    align-items: center;

    width: 100%;

    height: 44px;

    border: 1px dashed var(--border);

    border-radius: 14px;

    background: var(--primary-soft);

    color: var(--primary-dark);

    padding: 0 14px;

    font-size: 16px;

    font-weight: 700;

}


/* POPUP DE CANTIDAD */

.popup-cantidad {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(50, 40, 70, .55);

    z-index: 200;

    align-items: center;

    justify-content: center;

    padding:
        calc(24px + env(safe-area-inset-top))
        24px
        calc(24px + env(safe-area-inset-bottom));

}


.popup-cantidad.visible {

    display: flex;

}


.popup-cantidad-contenido {

    width: 100%;

    max-width: 280px;

    background: var(--card);

    border-radius: 20px;

    padding: 20px;

    animation: modalUp .2s ease;

}


.popup-cantidad-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}


.popup-cantidad-header h3 {

    margin: 0;

    font-size: 16px;

}


.popup-cantidad-listo {

    width: 100%;

    margin-top: 16px;

}


/* EMOJIS */

.emoji-buttons {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 10px;

}


.emoji-buttons button {

    border:
        1px solid var(--border);

    background:
        var(--primary-soft);

    border-radius: 14px;

    padding: 8px 4px;

    font-size: 23px;

}


.emoji-buttons small {

    display: block;

    font-size: 9px;

    color: var(--muted);

    margin-top: 2px;

}


.form-actions {

    display: grid;

    grid-template-columns:
        1fr 1.5fr;

    gap: 10px;

}


.cancel-button,
.save-button {

    border: 0;

    border-radius: 15px;

    padding: 13px;

    font-weight: 700;

    font-size: 15px;

}


.cancel-button {

    background:
        var(--neutral-tint);

    color: var(--text);

}


.save-button {

    background:
        var(--primary);

    color: white;

}


.form-message {

    color:
        var(--red);

    font-size: 13px;

    margin-bottom: 10px;

}


/* MONTHLY */

.monthly-summary {

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: white;

    border-radius: 24px;

    padding: 20px;

    box-shadow:
        0 8px 25px
        rgba(139, 126, 245, .3);

}


.monthly-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.monthly-title span {

    font-size: 11px;

    opacity: .8;

    font-weight: 700;

}


.monthly-title h2 {

    margin:
        3px 0 0;

    font-size: 25px;

}


.month-icon {

    font-size: 38px !important;

    opacity: 1 !important;

}


.monthly-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

    margin-top: 20px;

}


.monthly-grid strong {

    display: block;

    font-size: 20px;

}


.monthly-grid span {

    opacity: .75;

    font-size: 11px;

}


/* HISTORY */

.history-section {

    margin-top: 25px;

}


.history-card {

    background: var(--card);

    border-radius: 18px;

    padding: 15px;

    margin-bottom: 10px;

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 12px;

    box-shadow: var(--shadow);

}


.history-date strong {

    display: block;

    text-transform: capitalize;

    font-size: 15px;

}


.history-date span {

    color: var(--muted);

    font-size: 12px;

}


.history-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.history-stats div {

    background:
        var(--primary-soft);

    padding:
        6px 8px;

    border-radius: 10px;

    font-size: 12px;

    white-space: nowrap;

}


@media (max-width: 480px) {

    .history-card {

        gap: 6px;

        padding: 12px 10px;

    }


    .history-stats {

        gap: 3px;

    }


    .history-stats div {

        padding: 5px 5px;

        font-size: 10.5px;

    }


    .history-arrow {

        font-size: 20px;

    }

}


.history-arrow {

    color:
        var(--primary);

    font-size: 28px;

}


/* CITA (tarjeta de agenda con texto de longitud variable) */

.cita-card {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

}


.cita-info {

    min-width: 0;

    overflow-wrap: break-word;

}


.cita-acciones {

    display: flex;

    gap: 8px;

    justify-content: flex-end;

}


/* LOADING */

.loading {

    text-align: center;

    padding: 35px;

    color: var(--muted);

}


.error-state {

    background:
        var(--red-tint);

    color:
        var(--red-dark);

    padding: 15px;

    border-radius: 14px;

}


/* DESKTOP */

@media (min-width: 700px) {

    body {

        padding-bottom: 40px;

    }


    .header {

        margin-top: 20px;

        border-radius: 22px;

    }


    .header-actions {

        flex-basis: auto;

    }


    .header > .header-button {

        flex-basis: auto;

    }


    .cita-card {

        display: grid;

        grid-template-columns:
            minmax(110px, auto)
            minmax(0, 1fr)
            auto;

        align-items: start;

        gap: 12px;

    }


    .cita-acciones {

        margin-left: auto;

    }


    main {

        padding:
            20px 0;

    }


    .modal {

        align-items: center;

    }


    .modal-content {

        border-radius: 28px;

    }


    .summary-grid {

        grid-template-columns:
            repeat(4, 1fr);

    }


    .monthly-grid {

        grid-template-columns:
            repeat(4, 1fr);

    }

}
/* =====================================================
   BOTONES DE ACCIÓN
   ===================================================== */

.action-buttons {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;

}


/* =====================================================
   EMPEZAR TOMA
   ===================================================== */

.start-button {

    width: 100%;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--sage),
            var(--sage-dark)
        );

    color: white;

    border-radius: 20px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    box-shadow:
        0 8px 20px
        rgba(95, 171, 128, .28);

}


.start-button > span {

    width: 42px;

    height: 42px;

    background:
        rgba(255,255,255,.2);

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}


.start-button strong {

    display: block;

    font-size: 16px;

}


.start-button small {

    display: block;

    opacity: .85;

    margin-top: 2px;

}


.danger-button {

    background:
        linear-gradient(
            135deg,
            var(--red),
            var(--red-dark)
        );

    box-shadow:
        0 8px 20px
        rgba(232, 115, 95, .28);

}


/* =====================================================
   TOMA ACTIVA
   ===================================================== */

.toma-activa {

    border:
        2px solid var(--sage);

    background:
        linear-gradient(
            135deg,
            var(--card),
            var(--sage-tint)
        );

}


.toma-en-curso {

    display: inline-block;

    background: var(--sage-tint);

    color: var(--sage-dark);

    font-size: 12px;

    font-weight: 700;

    padding:
        5px 9px;

    border-radius: 20px;

    margin-bottom: 10px;

}


.pending-value {

    color: var(--muted);

    font-size: 20px !important;

}


/* =====================================================
   BOTÓN AÑADIR
   ===================================================== */

.action-buttons .add-button,
.action-buttons .add-button-recordatorio {

    margin: 0;

}
/* =====================================================
   PRÓXIMA TOMA
   ===================================================== */

.next-feed-box {

    display: none;

    background:
        linear-gradient(
            135deg,
            var(--amber-tint),
            var(--card)
        );

    border:
        1px solid var(--border);

    border-radius: 22px;

    padding: 17px;

    margin:
        0 0 22px;

    box-shadow:
        0 5px 18px
        rgba(150,120,50,.10);

    align-items: center;

    gap: 14px;

}


.next-feed-box.visible {

    display: flex;

}


.next-feed-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    border-radius: 16px;

    background:
        var(--amber-tint);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

}


.next-feed-content {

    min-width: 0;

}


.next-feed-label {

    display: block;

    color:
        var(--muted);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 2px;

}


.next-feed-content > strong {

    display: block;

    color:
        var(--text);

    font-size: 25px;

    line-height: 1.2;

}


.next-feed-countdown {

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 14px;

}


.next-feed-countdown strong {

    font-size: 15px;

    letter-spacing: .5px;

}


.next-feed-countdown.countdown-finished {

    color:
        var(--amber);

    font-weight: 700;

}
/* =====================================================
   CITA MÉDICA - RECORDATORIO
   ===================================================== */

#recordatorioCita {
    width: 100%;
    box-sizing: border-box;

    margin: 0 0 20px 0 !important;
    padding: 16px 18px !important;

    background: var(--red-tint) !important;

    border: 1px solid var(--border) !important;
    border-left: 6px solid var(--red-dark) !important;

    border-radius: 20px !important;

    display: none;

    align-items: center;
    gap: 15px;

    box-shadow: 0 5px 16px rgba(201, 79, 60, 0.14);

    min-height: 84px;
}

/* Cuando hay una cita */

#recordatorioCita.visible {
    display: flex !important;
}


/* ICONO */

#recordatorioCita .recordatorio-icono {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--peach-tint);

    border-radius: 16px;

    font-size: 27px;
}


/* CONTENIDO */

#recordatorioCita .recordatorio-contenido {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


/* CITA MÉDICA */

#recordatorioCita .recordatorio-titulo {
    font-size: 11px;
    font-weight: 800;

    color: var(--red-dark);

    letter-spacing: 0.7px;
}


/* ESPECIALIDAD */

#recordatorioCita .recordatorio-especialidad {
    font-size: 19px;
    line-height: 1.2;

    font-weight: 700;

    color: var(--text);
}


/* HORA */

#recordatorioCita .recordatorio-hora {
    font-size: 14px;

    font-weight: 600;

    color: var(--muted);
}
.complete-feed-button {
    margin-top: 10px;
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
/* =====================================================
   SELECTOR DE TEMA VISUAL
   ===================================================== */

.theme-options {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 20px;

}


.theme-option {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    border: 2px solid var(--border);

    border-radius: 16px;

    background: var(--neutral-tint);

    cursor: pointer;

}


.theme-option input {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}


.theme-option:has(input:checked) {

    border-color: var(--primary);

    background: var(--primary-soft);

}


.theme-option-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--card);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

}


.theme-option-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}


.theme-option-info small {

    color: var(--muted);

    font-size: 13px;

}


.theme-option-swatches {

    display: flex;

    gap: 6px;

    margin-top: 4px;

}


.theme-swatch {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    border: 1px solid rgba(0,0,0,.08);

}


/* FOOTER DE LA APP (enlace a instrucciones de instalación, etc.) */

.app-footer {

    text-align: center;

    padding: 24px 16px calc(32px + env(safe-area-inset-bottom));

}


.app-footer a {

    color: var(--muted);

    font-size: 13px;

    text-decoration: none;

}


.app-footer a:hover {

    color: var(--primary);

    text-decoration: underline;

}


/* AVISO "¿YA NACIÓ?" / falta la fecha de nacimiento: llamativo,
   para que invite a tocarlo, bien separado de los botones de arriba */

.banner-nacimiento {

    display: flex;

    align-items: center;

    gap: 14px;

    background:
        linear-gradient(
            135deg,
            var(--amber),
            var(--peach-dark)
        );

    border: none;

    border-radius: 18px;

    padding: 15px 18px;

    margin: 24px 0 20px;

    text-decoration: none;

    color: #ffffff;

    box-shadow: 0 10px 24px -6px rgba(232, 162, 61, .55);

    transition: transform .15s ease, box-shadow .15s ease;

}


.banner-nacimiento:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 30px -6px rgba(232, 162, 61, .65);

}


.banner-nacimiento-icono {

    font-size: 25px;

    line-height: 1;

}


.banner-nacimiento-texto {

    flex: 1;

    min-width: 0;

    font-size: 14.5px;

    font-weight: 700;

}


.banner-nacimiento-flecha {

    font-size: 22px;

    font-weight: 700;

    color: #ffffff;

    flex-shrink: 0;

}