body.theme-default {
    --color-bg-start: #667eea;
    --color-bg-end: #764ba2;
    --color-accent: #7b68ee;
    --color-text: #f0f0f0;
    --color-text-dark: #333333;
    --color-accent-secondary: #4a90e2;
    --color-highlight: #ffd93d;
    --color-green: #6bcb77;
    --color-blue: #4d96ff;
    --color-error-text: #e74c3c;
    --color-panel-title: #463E66;

    /* Formatos RGB */
    --color-accent-rgb: 123, 104, 238;
    --color-text-rgb: 240, 240, 240;
    --color-bg-start-rgb: 102, 126, 234;
    --color-bg-end-rgb: 118, 75, 162;

    --color-bg-logo-shadow: rgba(0, 0, 0, 0.8);
    --color-footer-guide-title: var(--color-text-dark);
    --color-footer-guide-text: var(--color-text);

    /* Logos */
    --logo-big-img: url('assets/img/logos/logo_medium.png');
    --logo-small-img: url('assets/img/logos/logo.png');
}

body.theme-ocean {
    --color-bg-start: #2e8b57;
    --color-bg-end: #0e4d64;
    --color-accent: #1abc9c;
    --color-text: #e8f6f3;
    --color-text-dark: #0a3d3f;
    --color-accent-secondary: #3498db;
    --color-highlight: #f1c40f;
    --color-green: #2ecc71;
    --color-blue: #2980b9;
    --color-error-text: #e74c3c;
    --color-panel-title: #1C5C4B;

    --color-accent-rgb: 26, 188, 156;
    --color-text-rgb: 232, 246, 243;
    --color-bg-start-rgb: 46, 139, 87;
    --color-bg-end-rgb: 14, 77, 100;

    --color-bg-logo-shadow: rgba(0, 0, 0, 0.8);
    --color-footer-guide-title: var(--color-text-dark);
    --color-footer-guide-text: var(--color-text);

    --logo-big-img: url('assets/img/logos/logo_medium_ocean.png');
    --logo-small-img: url('assets/img/logos/logo_ocean.png');
}

body.theme-gold {
    --color-bg-start: #d8ca4e;
    --color-bg-end: #1c1c1c;
    --color-accent: #bfa52f;
    --color-text: #fffad1;
    --color-text-dark: #1a1a1a;
    --color-accent-secondary: #8c7b1f;
    --color-highlight: #d4b200;
    --color-green: #7fbf4d;
    --color-blue: #4d82bf;
    --color-error-text: #e74c3c;
    --color-panel-title: #403C16;

    --color-accent-rgb: 191, 165, 47;
    --color-text-rgb: 255, 250, 209;
    --color-bg-start-rgb: 42, 42, 42;
    --color-bg-end-rgb: 28, 28, 28;

    --color-bg-logo-shadow: rgba(255, 215, 0, 0.2);
    --color-footer-guide-title:#413e27;
    --color-footer-guide-text:#686335;

    --logo-big-img: url('assets/img/logos/logo_medium_gold.png');
    --logo-small-img: url('assets/img/logos/logo_gold.png');
}

body.theme-blue {
    --color-bg-start: #69B8DA;       /* Celeste principal */
    --color-bg-end: #2C6C9D;         /* Azul principal */
    --color-accent: #3A8FB7;         /* Azul intermedio para botones/detalles */
    --color-text: #f0f6fa;           /* Texto claro */
    --color-text-dark: #233646;      /* Texto oscuro */
    --color-accent-secondary: #7FCFE8; /* Variante clara del celeste */
    --color-highlight: #FFD166;      /* Amarillo cálido para resaltar */
    --color-green: #6BCB77;          /* Verde de éxito */
    --color-blue: #4D96FF;           /* Azul extra de apoyo */
    --color-error-text: #E63946;     /* Rojo de error */
    --color-panel-title: #213B52;

    /* Formatos RGB */
    --color-accent-rgb: 58, 143, 183;
    --color-text-rgb: 240, 246, 250;
    --color-bg-start-rgb: 105, 184, 218;
    --color-bg-end-rgb: 44, 108, 157;

    --color-bg-logo-shadow: rgba(0, 0, 0, 0.8);
    --color-footer-guide-title: var(--color-text-dark);
    --color-footer-guide-text: var(--color-text);

    /* Logos */
    --logo-big-img: url('assets/img/logos/logo_medium_blue.png');
    --logo-small-img: url('assets/img/logos/logo_blue.png');
}



  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

body {
    background: linear-gradient(180deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
    color: var(--color-text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    min-height: 100vh;
    opacity: 0;
    animation: pageFadeIn 1s ease 0.5s forwards;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* Phosphor Icons */
.ph {
    font-size: 1.2em;   /* agranda/reduce */
    vertical-align: middle;  /* Alinea con el texto */
    display: inline-block;   /* Asegura que sea inline-block */
    line-height: 1;          /* Evita que la altura del font afecte */
}
.c-ph-info-small {
    font-size: 0.95em;
    cursor: pointer;
    color: var(--color-text);
}
.c-ph-cursor-white {
    cursor: pointer;
    color: var(--color-text);
}