/*
============================================================
==           GUÍA DE COLORES Y FUENTES GLOBALES           ==
============================================================
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
    --color-fondo-pagina: #fdfaf5;
    --color-fondo-celda-vacia: rgba(209, 215, 224, 0.5);
    --color-fondo-cabecera: #e8e4d8;
    --color-texto-principal: #2c2c2c;
    --color-texto-domingo: #d9534f;
    --color-seleccion-dia: #2117b7a5; /* Azul índigo */
    --color-borde-calendario: #d4b283;
    --opacidad-marca-agua: 0.08;
    --color-boton-fondo: #887a68;
    --color-boton-texto: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 18px;
    background-color: var(--color-fondo-pagina);
    color: var(--color-texto-principal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

/*
============================================================
==                    VISTA DE ESCRITORIO                 ==
============================================================
*/
#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto 20px auto;
    padding: 0 10px;
}
.action-buttons { display: flex; gap: 10px; }
.btn { padding: 10px 16px; font-family: 'Linux Libertine', serif; font-size: 1.2em; border: 1.2px solid var(--color-borde-calendario); background-color: var(--color-boton-fondo); color: var(--color-boton-texto); cursor: pointer; border-radius: 4px; transition: background-color 0.2s; }
.btn:hover { background-color: #6d6051; }

#calendar-container { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); max-width: 1600px; margin: 0 auto; border: 2px solid var(--color-borde-calendario); z-index: 1; }
#calendar-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image:url('assets/aspects/Home.png'); background-position: center; background-repeat: no-repeat; background-size: contain; opacity: var(--opacidad-marca-agua); z-index: -1; }
.calendar-cell { position: relative; border: 1px solid var(--color-borde-calendario); background-color: transparent; min-height: 180px; padding: 8px; display: flex; flex-direction: column; overflow: hidden; }
.day-header { background-color: var(--color-fondo-cabecera); font-weight: bold; text-align: center; padding: 10px; min-height: auto; }
.empty-cell { background-color: var(--color-fondo-celda-vacia); }
.day-title-container { display: flex; align-items: center; justify-content: left; gap: 8px; margin-bottom: 8px; }
.date-number { font-size: 2.2em; font-weight: bold; color: var(--color-texto-principal); }
.date-number.sunday { color: var(--color-texto-domingo); }
.astro-events { display: flex; flex-direction: column; gap: 8px; }
.event-row { display: flex; align-items: center; gap: 5px; height: 32px; margin-bottom: 6px; }
.event-arrow { font-weight: bold; margin: 0 4px; font-size: 2.2em; position: relative; top: -5px; }
.day-event-icon { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 50px; height: 40px; object-fit: contain; z-index: 1; }
.warning-icon {
    position: absolute;
    top: 5px;   /* Un poco de espacio desde arriba */
    right: 5px; /* Un poco de espacio desde la derecha */
    width: 35px;
    height: 35px;
    object-fit: contain;
    pointer-events: none; /* Para que no interfiera con el clic en la celda */
    z-index: 2; /* Para que esté por encima de otros elementos de la celda */
}
.planets-icon, .signs-icon, .aspects-icon { width: 35px; height: 35px; object-fit: contain; }
.sign-icon-small { width: 30px; height: 30px; object-fit: contain; position: relative; top: 1px; }
.calendar-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; }
.nav-button { background-color: #887458; border: none; color: white; font-size: 1.2rem; padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s, background-color 0.3s; }
.nav-button:hover { background-color: #a68b6a; transform: scale(1.05); }
.nav-select { background-color: #f7f2e7; color: #333; border: 1px solid #a68b6a; border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 1rem; box-shadow: inset 0 0 2px rgba(0,0,0,0.1); }
#calendar-container > .day-header:nth-child(7) { color: var(--color-texto-domingo); }
.calendar-cell.highlight:hover { transform: scale(1.02); border: 2px solid #c0922f; box-shadow: 0 0 10px rgba(192, 146, 47, 0.7); cursor: pointer; transition: all 0.2s ease-in-out; }

/*
============================================================
==                   MODALES Y OTROS                      ==
============================================================
*/
    .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 1000; }

    .modal-content {
        background-color: var(--color-fondo-pagina);
        padding: 30px;
        border-radius: 10px;
        
        /* Asegura que no sea más ancho que la pantalla en móviles */
        width: 90%;
        max-width: 700px; 
        
        /* --- CAMBIOS CLAVE AQUÍ --- */
        /* 1. Limitamos la altura máxima del modal al 85% de la ventana */
        max-height: 85vh; 
        
        /* 2. Le decimos al contenido que se desplace si no cabe */
        overflow-y: auto; 

        box-shadow: 0 0 20px rgba(0,0,0,0.3);
        position: relative;
        font-size: 1.15em;
        display: flex;
        flex-direction: column;
        box-sizing: border-box; /* Importante para que el padding no desborde */
    }

    #modal-explanation .modal-content img {
        max-width: 100%; /* Asegura que la imagen nunca sea más ancha que el modal */
        height: auto;    /* Mantiene la proporción de la imagen */
        display: block;  /* Previene márgenes extraños */
    }
.close-button { position: absolute; top: 27px; right: 30px; font-size: 20px; cursor: pointer; color: #d9534f; z-index: 10; }
.modal-content h1 { font-size: 1.9em; margin-bottom: 10px; }
.modal-content h2 { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 1.4em; }
.modal-home-button-container { display: flex; justify-content: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-borde-calendario); }
.modal-home-btn { display: flex; align-items: center; gap: 10px; font-size: 1.1em; }
.modal-home-btn img { width: 24px; height: 24px; object-fit: contain; }
.loader { text-align: center; padding: 40px; font-size: 1.2em; color: var(--color-texto-principal); }
#modal-detail .header-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle; /* Ayuda a alinear el icono con el texto */
}
#modal-symbol-content h1,
#modal-aspects-content h1 {
    /* Esta es la línea dorada, usando la variable de color que ya tienes */
    border-bottom: 2px solid var(--color-borde-calendario);
    
    /* Añadimos un poco de espacio entre el texto y la línea */
    padding-bottom: 15px; 
    
    /* Añadimos un poco de espacio entre la línea y el contenido de abajo */
    margin-bottom: 25px; 
}

/* Modal de instalación */
#modal-install-content h1 { text-align: center; margin-bottom: 5px; }
.install-subtitle { text-align: center; margin-top: 0; margin-bottom: 30px; font-size: 0.9em; opacity: 0.8; }
.install-instructions-container { display: flex; gap: 25px; }
.install-column { flex: 1; padding: 20px; border: 1px solid var(--color-borde-calendario); border-radius: 8px; text-align: center; background-color: rgba(255, 255, 255, 0.2); }
.os-icon { width: 50px; height: 50px; margin-bottom: 10px; }
.install-column ul { list-style: none; padding: 0; text-align: left; }
.install-column li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; font-size: 0.95em; text-align: left; }
.install-column li > span:first-child { background-color: var(--color-boton-fondo); color: white; border-radius: 50%; min-width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; font-weight: bold; }
.step-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-left: 4px; }


/*
============================================================
==              ESTILOS PARA VISTA MÓVIL UNIFICADOS       ==
============================================================
*/

/* Ocultar vistas móviles por defecto en escritorio */
#mobile-landing-container,
#mobile-view-container {
    display: none;
}

/* Aplicar solo en pantallas de móvil/tablet */
@media (max-width: 768px) {
    /* 1. OCULTAR VISTA DE ESCRITORIO */
    #calendar-header,
    #calendar-container {
        display: none;
    }

    /* 2. MOSTRAR LA VISTA DE ATERRIZAJE (LANDING) */
    #mobile-landing-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        
        /* ALTURA DE RESPALDO: Usamos 100% para que intente llenar su contenedor padre (el body) */
        height: 100vh;
        
        position: fixed; /* Lo fijamos a la ventana para asegurar el tamaño */
        top: 0;
        left: 0;

        overflow: hidden; 
        box-sizing: border-box;
        background-color: var(--color-fondo-pagina);
    }
    
    /* VISTA DE DETALLE DIARIA (OCULTA HASTA QUE SE LLAME POR JS) */
    #mobile-view-container {
        display: flex;/* display: none; -> Ya está por defecto, se activa a 'flex' con JS */
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
        padding: 10px;
        box-sizing: border-box;
        /*background-image: url('assets/aspects/Fondo_2.png');*/
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding-bottom: 100px;
    }

    /* --- ESTILOS DE LA VISTA LANDING --- */
    .landing-header {
        display: flex;
        justify-content: center; /* Centra el contenido horizontalmente */
        align-items: center;
        padding: 10px 15px;      /* Un poco menos de padding vertical */
        margin: 0 10px;
        border-bottom: 2px solid var(--color-borde-calendario);
        text-align: center;      /* Asegura que el texto dentro esté centrado */
    }
    #landing-title-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #landing-month-year {
        color: var(--color-texto-principal);
        font-size: 1.6em; /* Un poco más pequeño para dar espacio */
        font-weight: 400;
        letter-spacing: 0.5px;
        font-family: 'Linux Libertine', serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0; /* Limpiamos márgenes por defecto */
        padding: 0;
    }
    #landing-selected-date {
        font-size: 0.95em;
        font-weight: 500;
        color: var(--color-texto-principal);
        opacity: 0.8;
        margin-top: 4px; /* Pequeño espacio entre los títulos */
        font-family: 'Inter', sans-serif;
        height: 1.2em; /* Altura fija para evitar saltos al cargar */
    }
    .header-actions {
        display: flex;         /* El grupo de botones también usa flex. */
        align-items: center;
        gap: 8px;              /* Espacio entre el botón "Hoy" y el menú "...". */
        /* IMPORTANTE: No necesita 'flex-shrink: 0' porque el título ya es el flexible. */
    }

    /* Estilo para el nuevo botón "Hoy" */
    .btn-today {
        background: none;
        border: 1.5px solid #d4b283;
        color: #4a4520;
        padding: 6px 12px;
        border-radius: 20px; /* Botón tipo "píldora" */
        font-size: 0.8em;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-today:active {
        background-color: #e0e0e0;
        transform: scale(0.95);
    }
    .landing-menu-container { position: relative; }
    #landing-menu-btn {
        /* Quitamos el estilo de botón por defecto */
        background: none;
        border: none;
        padding: 0;
        margin: 0;

        /* Estilo del círculo */
        width: 38px;
        height: 38px;
        border: 1.5px solid var(--color-borde-calendario); /* Borde dorado */
        border-radius: 50%; /* Lo hace redondo */
        
        /* Color de los puntos y centrado */
        color: var(--color-borde-calendario); /* Puntos dorados */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Ajustes de fuente y animación */
        font-size: 1.6em; /* Tamaño de los puntos */
        cursor: pointer;
        transition: background-color 0.2s;
    }
    #landing-menu-btn:hover, #landing-menu-btn:active {
        background-color: rgba(212, 178, 131, 0.1); /* Un sutil brillo dorado al tocar */
    }
    
    .special-day-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        font-size: 1.1em;
        font-weight: bold;
    }
    .special-day-row img {
        width: 24px;
        height: 24px;
    }

    /* AÑADE ESTAS NUEVAS CLASES PARA LOS COLORES */
    .special-day-row.day-intense span,
    .special-day-row.day-friction span,
    .special-day-row.day-tension span {
        color: var(--color-texto-domingo); /* Rojo */
    }

    .special-day-row.day-harmonic span {
        color: #228B22; /* Verde Bosque */
    }

    .special-day-row.day-creative span {
        color: #008B8B; /* Cian Oscuro (legible) */
    }

    .special-day-row.day-revelation span,
    .special-day-row.day-change span {
        color: #000080; /* Azul Marino */
    }
    .intense-day-row span {
        color: var(--color-texto-domingo);
        font-weight: bold;
        font-size: 1.1em;
    }
    .intense-day-row img {
        width: 24px;
        height: 24px;
    }
    .special-day-row.day-love span {
        color: #d6507c; /* Rosa */
    }

    .special-day-row.day-lucky span {
        color: #4CAF50; /* Verde */
    }

    .special-day-row.day-bad-luck span {
        color: #212121; /* Negro/Gris Oscuro */
    }

        /* === AÑADE ESTA NUEVA REGLA PARA LAS LÍNEAS DE SEPARACIÓN === */
    .details-separator {
        width: 90%;
        height: 1px;
        background-color: var(--color-borde-calendario); /* Color dorado del borde */
        margin: 15px auto; /* Espaciado vertical y centrado horizontal */
    }


    /* === AÑADE ESTA NUEVA REGLA PARA LOS PUNTOS DE ASPECTOS === */
    .aspect-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 12px; /* Espacio entre el punto y el primer icono */
        flex-shrink: 0; /* Evita que el punto se encoja si no hay espacio */
    }
    #landing-menu-dropdown { position: absolute; top: 100%; right: 0; background: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; display: none; flex-direction: column; width: 180px; }
    #landing-menu-dropdown a { padding: 12px 15px; color: var(--color-texto-principal); text-decoration: none; display: flex; align-items: center; gap: 8px; }
    #landing-menu-dropdown a:hover { background-color: #f0f0f0; }

    /* === AÑADE ESTA NUEVA REGLA PARA EL BOTÓN === */
    .menu-button {
        /* Quitamos todos los estilos de botón por defecto */
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        
        /* Le aplicamos EXACTAMENTE los mismos estilos que a los enlaces <a> */
        padding: 14px 18px;
        color: var(--color-texto-principal);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        
        /* Aseguramos que el texto se alinee a la izquierda y la fuente sea correcta */
        text-align: left;
        font-family: inherit; /* Hereda la fuente del sistema */
        font-size: 1rem;      /* Tamaño de fuente estándar */
        width: 100%;          /* Ocupa todo el ancho del menú */
        cursor: pointer;
    }

    .menu-button:hover {
        background-color: #f0f0f0;
    }

    .landing-week-headers {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        /* CORRECCIÓN: Unificamos el padding lateral a 5px */
        padding: 10px 5px 10px 5px; 
        font-size: 0.7em;
        font-weight: 600;
        color: #8e8e93;
        flex-shrink: 0;
        border-bottom: 1px solid var(--color-borde-calendario);
    }
    .landing-week-headers span:last-child { color: var(--color-texto-domingo); }

    #landing-calendar-grid {
        display: grid;       
        grid-template-columns: repeat(7, calc((100% - 6px) / 7));
        gap: 1px;
        /* --- CAMBIOS CLAVE AQUÍ --- */
        /* 1. Usamos 'flex' para controlar el crecimiento y encogimiento de forma robusta. */
        flex-shrink: 0;
        /* 2. ¡La magia! Permite el scroll vertical SÓLO dentro de este elemento si es necesario. */
        overflow-y: auto;
        padding: 8px 5px 20px 5px; /* 3. Añadimos más padding abajo para que haya espacio al final del scroll. */
        background-color: #f1f1f1;
        border-top: none;
        border-bottom: 1px solid #e0e0e0;
    }
    .landing-day-cell { 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        aspect-ratio: 1 / 1; 
        cursor: pointer; 
        background-color: var(--color-fondo-pagina); 
        position: relative; 
    }   
    .landing-day-cell.empty { background-color: transparent; pointer-events: none; }
    
    
    .date-text {
        position: relative; 
        font-size: 1.1em;
        z-index: 3;
    }    
    .landing-day-cell.holiday .date-text { color: var(--color-texto-domingo); }

    .landing-day-cell.selected {
        background-color:white; /* Usa el color del tema para el fondo */
        border-radius: 33%; /* Lo convierte en un círculo perfecto */
        color: white; /* Hace que todo el texto dentro sea blanco por defecto */
    }

    /* 2. Estilo para el número dentro de la burbuja */
    .landing-day-cell.selected .date-text { 
        color: rgb(22, 0, 192); /* Asegura que el número sea blanco */
        font-weight: bold; /* Mantenemos el texto en negrita para destacarlo */
        -webkit-text-stroke: 0.5px rgb(64, 0, 255);   
        /* Las propiedades 'transform' y el color morado han sido eliminadas */
    }

    .dots-container {
        position: absolute;
        bottom: 15%;
        display: flex;
        gap: 3px;
        z-index: 1; 
        flex-wrap: wrap; /* Permite que los puntos pasen a la siguiente línea si no caben */
        justify-content: center; /* Centra los puntos en su contenedor */
        padding: 0 1px; /* Añade un mínimo espacio lateral para que no se peguen al borde */
    }
    .event-dot { width: 5px; height: 5px; border-radius: 50%; }
    .dot-conjunction { background-color: #0101ff; }
    .dot-opposition  { background-color: #FFD700; }
    .dot-square      { background-color: #ff0033; }
    .dot-trine       { background-color: #19c319; }
    .dot-sextile     { background-color: #00adf1; }
    .intense-day-marker {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 15px;
        height: 15px;
        z-index: 2;
    }
    .event-day-marker {
        position: absolute;
        top: 0.1px;
        left: 0.1px;
        width: 22px;
        height: 22px;
        z-index: 2;
        
        /* 1. AUMENTAMOS EL TAMAÑO DEL ECLIPSE */
        width: 20px;  /* <-- Lo hacemos notablemente más grande */
        height: 20px;
        
        z-index: 2;
        
        /* 2. ELIMINAMOS EL CUADRADO DE FONDO */
        background-color: transparent; /* <-- Esta es la línea clave */
    }

    #landing-day-details { flex: 1;; padding: 15px; display: flex; height: 33vh; flex-direction: column; overflow-y: auto; background-color: rgb(255, 255, 255); width: 100%; box-sizing: border-box; }
    .initial-prompt { color: #888888; text-align: center; padding-top: 20px; }
    .day-details-header { 
        margin-bottom: 15px; 
        padding-bottom: 10px; 
        border-bottom: 1px solid #ddd; 
    }

    /* Regla para el CONTENEDOR de la fila (el div) */
    .special-event-row { 
        display: flex; 
        align-items: center; 
        gap: 10px; 
        font-weight: 600; 
        margin-bottom: 8px;
        /* No necesitamos el background-color aquí, lo quitamos para limpiar */
    }

    /* REGLA CORREGIDA Y ESPECÍFICA PARA LA IMAGEN (el icono) */
    .special-event-row img { 
        width: 50px; 
        height: 50px;
        /* ESTA ES LA LÍNEA CLAVE QUE SOLUCIONA EL PROBLEMA */
        background-color: transparent !important; 
    }

    .intense-day-warning { 
        color: var(--color-texto-domingo); 
        font-weight: bold; 
        text-align: center; 
        font-size: 1.1em; 
    }
    .interpretation-btn {
        display: block;
        width: 80%;
        margin: 25px auto 10px auto; /* Más espacio superior */
        padding: 12px;
        font-size: 1em;
        font-weight: 400;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease-in-out; /* Animación suave */

        /* --- ¡AQUÍ PUEDES CAMBIAR EL ESTILO! --- */
        
        /* Estilo "Outline" (solo borde) */
        background-color: transparent; /* 1. Fondo transparente */
        border: 2px solid #d4b283; /* 2. Borde con el color del tema */
        color: #3a3834; /* 3. Texto con el color del tema */
    }

    /* Efecto al pasar el mouse (o tocar en móvil) */
    .interpretation-btn:hover {
        background-color: var(--color-boton-fondo); /* El fondo se rellena */
        color: var(--color-boton-texto); /* El texto se vuelve blanco */
    }
    
    /* ESTILOS PARA LA NUEVA BARRA DE BOTONES DE ACCIÓN */
    .details-actions-container {
        display: flex;
        justify-content: space-around; /* Asegura un espaciado equilibrado */
        align-items: center;
        width: 100%;
        padding: 15px; /* Espaciado vertical */
        margin-top: 20px; 
        margin-top: auto;
        border-top: 1px solid var(--color-borde-calendario);
        flex-shrink: 0;
    }

    .details-action-btn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding:8px;
        /* Quitamos el borde redondo para que se adapte al contenido */
        border-radius: 8px;
        display: flex;
        /* Ordena el icono y el texto en una columna vertical */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: background-color 0.2s, transform 0.2s;
        /* Espacio entre el icono y el texto */
        gap: 4px;
    }

    .details-action-btn span {
        font-size: 1em; /* Texto pequeño y discreto */
        color: var(--color-texto-principal);
        font-weight: 500;
        white-space: nowrap; /* Evita que el texto se parta en dos líneas */
    }

    .details-action-btn img {
        width: 35px; /* Tamaño de los iconos */
        height: 35px;
    }

    .details-action-btn:hover {
        background-color: rgba(212, 178, 131, 0.15); /* Brillo dorado sutil */
    }

    .details-action-btn:active {
        transform: scale(0.92); /* Efecto de clic */
    }

    /* --- ESTILOS DE LA VISTA DE DETALLE DIARIA --- */
    .mobile-header { padding-bottom: 10px; border-bottom: 2px solid var(--color-borde-calendario); flex-shrink: 0; }
    .mobile-nav { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
    .mobile-nav .btn { padding: 8px 6px; font-size: 0.85em; flex-grow: 1; text-align: center; white-space: nowrap; }
    .modal { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background-color: rgba(0,0,0,0.6); 
        display: none; /* Se activa a 'flex' con JS */
        justify-content: center; 
        align-items: center; 
        z-index: 1000; 
    }

    
    .modal-content {
        /* Color de fondo base y textura */
        background-color: var(--color-fondo-pagina);
        /*background-image: url('assets/aspects/Fondo_2.png');*/
        background-size: contain;
        background-repeat: repeat;
        background-position: center;
        
        /* Dimensiones y espaciado */
        padding: 30px;
        border-radius: 10px;
        max-width: 700px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
        
        /* Posicionamiento y tipografía */
        position: relative;
        font-size: 1.15em;
        
        /* Aseguramos que se comporte como un bloque flexible */
        display: flex;
        flex-direction: column;
    }
    .clickable-title {
        cursor: pointer;
        transition: transform 0.2s ease-out;
    }

    .clickable-title:hover {
        transform: scale(1.03); /* Un sutil efecto de crecimiento al pasar el mouse */
    }
    /* ========================================================================= */

    .close-button { 
        position: absolute; 
        top: 27px; 
        right: 30px; 
        font-size: 20px; 
        cursor: pointer; 
        color: #d9534f; 
        z-index: 10; 
    }
        
    #mobile-day-content h1 { font-size: 1.5em; text-align: center; margin-bottom: 15px; }
    #mobile-day-content h2 { font-size: 1.2em; margin-top: 15px; display: flex; align-items: center; gap: 8px; }
    #mobile-day-content 
    .header-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
        vertical-align: middle; /* Ayuda a alinear el icono con el texto */
        margin: 0 5px; /* Añade un pequeño espacio a los lados */
        
        flex-grow: 1;
        
    }
    /* --- Estilos para el nuevo modal de confirmación --- */
    .confirm-dialog {
        max-width: 320px; /* Un tamaño más pequeño, típico de diálogos */
        padding: 25px;
        text-align: center;
    }
    #confirm-message-text {
        font-size: 1.1em;
        margin: 0 0 25px 0;
    }
    .confirm-dialog-actions {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }
    .btn-confirm {
        flex-grow: 1;
        padding: 12px;
        font-size: 1em;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: bold;
    }
    .btn-confirm.primary {
        background-color: var(--color-boton-fondo);
        color: var(--color-boton-texto);
    }
    .btn-confirm.secondary {
        background-color: #e0e0e0;
        color: #333;
    }

    /* --- BOTÓN FLOTANTE DE VOLVER --- */
#back-to-landing-btn,
#modal-back-btn {
    position: fixed;
    bottom: 70px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(142, 121, 93, 0.7);
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
    z-index: 1001; /* Asegúrate de que este z-index es correcto */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: none;
    transition: transform 0.2s;
}

/* ESTILOS ESPECÍFICOS PARA EL BOTÓN DE "VOLVER AL CALENDARIO" */
    #back-to-landing-btn {
        /* 1. Ponemos tu imagen de fondo */
        background-image: url('assets/aspects/calendario.png'); /* (he corregido la errata de "aspets") */

        /* 2. Ajustamos la imagen para que se vea bien */
        background-size: 60%; /* El icono ocupará el 60% del tamaño del botón */
        background-position: center;
        background-repeat: no-repeat;
    }

    /* ESTILOS PARA EL OTRO BOTÓN DE VOLVER (el del modal) */
    #modal-back-btn {
        color: white;
        font-size: 28px;
        font-weight: bold;
        display: none; /* Se mantiene oculto por defecto */
        justify-content: center;
        align-items: center;
        line-height: 1;
    }

    
    /* Modal de instalación en móvil */
    .install-instructions-container { flex-direction: column; }
    .mobile-nav .btn {
        padding: 8px 6px;
        font-size: 0.9em;
        flex-grow: 1;
        text-align: center;
        white-space: nowrap;
        transition: transform 0.1s ease-out; /* Añadimos una transición suave */
        font-family: 'Linux Libertine', sans-serif;
        font-weight: 350;
    }

    .mobile-nav .btn:active {
        transform: scale(0.95); /* El botón se encoge un 5% al presionarlo */
        filter: brightness(0.9); /* Se oscurece ligeramente */
    }

    /* Para el botón de "Ver Interpretación" */

    .interpretation-btn:active {
        transform: scale(0.98); /* Un efecto un poco más sutil */
        filter: brightness(0.95);
    }
    #back-to-landing-btn,
    #modal-back-btn { /* <-- Añadimos el nuevo selector aquí */
        position: fixed;
        bottom: 70px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-color: rgba(136, 122, 104, 0.7);
        color: white;
        border-radius: 50%;
        border: 1px solid white;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        z-index: 1001; /* Un z-index más alto para estar sobre el modal */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        display: none; /* Oculto por defecto */
        justify-content: center;
        align-items: center;
        line-height: 1;
        transition: transform 0.2s;
    }

    #back-to-landing-btn:hover,
    #modal-back-btn:hover { /* <-- Y también aquí */
        transform: scale(1.1);
    }

    /* --- ESTILOS PARA EL MODAL DE AÑADIR EVENTO --- */
    .event-modal-subtitle {
        text-align: center;
        font-size: 0.9em;
        opacity: 0.7;
        margin-top: -10px;
        margin-bottom: 25px;
    }


    #event-name-input {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
        font-size: 1em;
        margin-bottom: 25px;
        text-align: center;
    }
    #event-name-input:focus {
        border-color: var(--color-borde-calendario);
        outline: none;
        box-shadow: 0 0 5px rgba(212, 178, 131, 0.5);
    }

    .event-modal-actions {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }
    .btn-event-modal {
        flex-grow: 1;
        padding: 12px;
        font-size: 1em;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        font-weight: bold;
    }
    .btn-event-modal.primary {
        background-color: var(--color-boton-fondo);
        color: var(--color-boton-texto);
    }
    .btn-event-modal.secondary {
        background-color: #e0e0e0;
        color: #333;
    }


    /* --- ESTILOS PARA EVENTOS PERSONALES VISIBLES --- */

    /* Icono pequeño en la grilla del calendario mensual */
    .personal-event-icon-grid {
        position: absolute;
        top: 1px;
        right: 1px; /* <- Cambio clave */
        /* Se elimina 'left' y 'transform' */
        width: 18px;
        height: 18px;
        z-index: 4;
    }

    /* Fila del evento en el panel de detalles del día */
    .personal-event-details-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0; /* Un poco menos de padding vertical */
    }

    /* NUEVAS REGLAS */
    .personal-events-container {
        width: 100%;
        margin-top: 15px;      /* Espacio entre los aspectos y la nueva línea */
        padding-top: 15px;     /* Espacio entre la nueva línea y el primer evento */
        margin-bottom: 10px;
        border-top: 1px solid var(--color-borde-calendario); /* <- LA LÍNEA SEPARADORA */
    }
    .personal-events-separator {
        width: 90%;
        height: 1px;
        background-color: var(--color-borde-calendario); /* Línea dorada */
        margin: 0 auto 10px auto; /* Centrada y con espacio abajo */
    }
    .delete-event-btn {
        margin-left: auto; /* ¡Magia! Empuja el botón al extremo derecho */
        cursor: pointer;
        font-size: 50em; /* Tamaño de la 'X' */
        color: var(--color-texto-domingo); /* Rojo de advertencia */
        padding: 5px;
    }

    .personal-event-details-row img {
        width: 40px;
        height: 40px;
    }

    .personal-event-details-row span {
        font-weight: bold;
        font-size: 1.1em;
    }



    /* Hacer la 'X' de cerrar más grande */
    .modal .close-button {
        font-size: 26px; /* Aumenta el tamaño */
        top: 22px; /* Ajuste para que se vea bien */
        right: 25px;
    }

    /* ---- 2. LISTA DESPLEGABLE MÁS ELEGANTE ---- */
    #event-type-select {
        width: 100%;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: white;
        font-size: 1em; /* <- TAMAÑO DE LETRA REDUCIDO */
        /* FUENTE ESTILO IPHONE (fuente del sistema de Apple) */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23887a68%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-13z%22/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: right 15px top 50%;
        background-size: 10px auto;
        margin-bottom: 20px;
    }

    /* ---- 3. NUEVO BOTÓN DE GUARDAR Y SIN EL DE CANCELAR ---- */
    .event-modal-actions {
        justify-content: center; /* Centra el único botón que queda */
        margin-top: 15px; /* Espacio antes del botón */
    }

    /* Elimina la regla del botón de cancelar */
    .btn-event-modal.secondary { display: none; }

    /* Nuevo estilo para el botón de guardar con icono */
    .btn-event-modal.primary-icon-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex; /* Permite organizar el icono y el texto */
        flex-direction: column; /* Pone el texto debajo del icono */
        align-items: center; /* Centra todo horizontalmente */
        gap: 6px; /* Espacio entre el icono y el texto */
        transition: all 0.2s ease-in-out;
    }
    .btn-event-modal.primary-icon-btn img {
        width: 45px; /* <- TAMAÑO REDUCIDO */
        height: 45px;
        display: block;
    }
    .btn-event-modal.primary-icon-btn span {
        color: var(--color-boton-fondo); /* Usa el color del tema */
        font-weight: bold;
        font-size: 0.8em;
        text-transform: uppercase; /* Le da un estilo más de "acción" */
    }
    .btn-event-modal.primary-icon-btn:hover {
        background-color: rgba(136, 122, 104, 0.15); /* Brillo sutil al pasar el cursor */
        transform: scale(1.08);
    }
    #modal-select-event-type h2 {
        text-align: center;
        font-family: 'Linux Libertine', serif;
    }

    #event-type-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Una grilla de 3x3 */
        gap: 20px;
        padding: 20px 0;
    }

    .event-type-option {
        background-color: rgb(255, 255, 255); /* Fondo sutil del color del tema */
        border: 1px solid transparent; /* Borde invisible por defecto */
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-radius: 12px; /* Un poco más redondeado para un look más suave */
        transition: all 0.2s ease-in-out;
    }

    .event-type-option:hover {
        transform: scale(1.05); /* Ligeramente más grande al pasar el cursor */
        border-color: var(--color-borde-calendario); /* El borde se vuelve dorado */
        background-color: rgb(255, 255, 255);
    }
    .event-type-option img {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }
    .event-type-option span {
        font-size: 0.8em;
        font-weight: 500;
    }

    /* --- 2. Modal de Detalles del Evento (el segundo paso) --- */
    #selected-event-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 25px;
    }
    #selected-event-header img {
        width: 40px;
        height: 40px;
    }
    #selected-event-header span {
        font-size: 1.2em;
        font-weight: bold;
        font-family: 'Linux Libertine', serif;
    }

    #event-time-select {
        width: 100%;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: white;
        font-size: 1em;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        -webkit-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23887a68%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-13z%22/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: right 15px top 50%;
        background-size: 10px auto;
    }
    /* ===== ESTILOS PARA LA NUEVA VENTANA DE INFORMACIÓN DINÁMICA ===== */

    #modal-explanation .modal-content h2 {
        text-align: center;
        font-family: 'Linux Libertine', serif;
        font-size: 1.6em;
        color: var(--color-texto-principal);
    }

    #modal-explanation .modal-content p.intro {
        text-align: center;
        font-size: 0.9em;
        opacity: 0.8;
        margin-top: -10px;
        margin-bottom: 25px;
    }

    .info-accordion-item {
        border-bottom: 1px solid var(--color-borde-calendario);
    }

    .info-accordion-btn {
        width: 100%;
        background-color: transparent;
        border: none;
        padding: 18px 5px;
        font-size: 0.8em;
        text-align: left;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
    }

    /* Indicador de flecha para el acordeón */
    .info-accordion-btn::after {
        content: '▼';
        font-size: 0.6em;
        color: var(--color-borde-calendario);
        transition: transform 0.3s ease;
    }

    .info-accordion-btn.active::after {
        transform: rotate(180deg);
    }

    .info-accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        font-size: 0.75em;
        line-height: 1.6;
    }

    .info-accordion-panel p {
        padding: 0 5px 18px 5px;
    }
    #mobile-action-bar {
        position: fixed; /* La clave para que siempre esté visible */
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(247, 245, 237, 0.85); /* El color base que pediste */
        backdrop-filter: blur(10px);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 2px 0 4px 0; /* Controla qué tan "delgada" es la barra */
        box-shadow: 0 -1px 1px rgba(0,0,0,0.1); /* Sombra sutil para darle profundidad */
        z-index: 999;
    }

    #mobile-action-bar .action-item {
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 2px;
        border-radius: 8px;
        transition: background-color 0.2s;
        flex: 1; /* Asegura que los botones compartan el espacio equitativamente */
    }

    #mobile-action-bar .action-item:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    #mobile-action-bar .action-item img {
        width: 28px;
        height: 28px;
    }

    #mobile-action-bar .action-item span {
        font-size: 0.7em;
        color: var(--color-texto-principal);
        font-weight: 500;
    }

    /* MUY IMPORTANTE: Evitar que el último evento quede OCULTO detrás de la nueva barra */
    #mobile-landing-container {
        /* Le añadimos un relleno inferior igual a la altura de nuestra nueva barra */
        padding-bottom: 55px; 
    }
    /* ===== ESTILOS PARA LA FUNCIÓN DE TEXTO DE SÍMBOLOS ===== */
    .astro-events-container {
        display: flex;
        flex-direction: column;
        gap: 4px; /* Espacio vertical por defecto entre las filas de eventos */
    }

    /* Cuando los textos están activos, aumenta el espacio entre las filas */
    #landing-day-details.show-labels .astro-events-container {
        gap: 12px; 
    }

    /* El botón de toggle para mostrar/ocultar texto */
    #symbol-text-toggle {
        background-color: transparent;
        border: 1px solid var(--color-borde-calendario);
        border-radius: 8px;
        padding: 8px;
        cursor: pointer;
        flex-shrink: 0; /* Evita que el botón se encoja */
    }
    #symbol-text-toggle img {
        width: 24px;
        height: 24px;
        display: block;
    }
    #symbol-text-toggle.active {
        background-color: var(--color-boton-fondo);
        border-color: var(--color-boton-fondo);
    }

    /* Estructura para cada símbolo y su etiqueta */
    .event-row {
        display: flex;
        align-items: center; /* Alinea los items arriba */
        gap: 10px;
        /* Un pequeño espacio entre cada fila */
    }

    /* Estructura para cada símbolo y su etiqueta */
    .symbol-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px; /* Reduce el espacio entre el icono y la etiqueta */
    }

    /* Añade un poco de espacio extra debajo de las filas de eventos cuando los textos están activos */
    #landing-day-details.show-labels .event-row {
        margin-bottom: 8px;
    }

    /* La etiqueta de texto, oculta por defecto */
    .symbol-label {
        display: none; 
        font-size: 0.65em;
        font-family: 'Inter', sans-serif;
        color: var(--color-texto-principal);
        white-space: nowrap;
    }

    /* Regla Mágica: Muestra la etiqueta SOLO si el contenedor tiene la clase 'show-labels' */
    #landing-day-details.show-labels .symbol-label {
        display: block;
    }
}

.symbol-highlight {
    background-color: rgba(249, 249, 114, 0.347); /* Color marrón del tema con baja opacidad */
    border-radius: 15px;
    transition: background-color 2.5s ease;
    margin-left: -15px;
    margin-right: -15px;
    padding: 10px 15px;
}

/*
============================================================
==                   ESTILOS DE IMPRESIÓN                 ==
============================================================
*/
@media print {
    body { background-color: #ffffff; }
    #calendar-header, #mobile-view-container, #mobile-landing-container { display: none; }
    #calendar-container { display: grid !important; border: none; }
    #calendar-container::before { display: none; }
    .calendar-cell { border: 1px solid #ccc; page-break-inside: avoid; }
    * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
}

/*
============================================================
==                    ESTILOS PARA ICONOS CLICKABLES        ==
============================================================
*/

/* Estilos generales para los iconos que representan elementos del calendario (planetas, signos, aspectos) */
.planets-icon,
.signs-icon,
.aspects-icon,
.day-event-icon /* También los iconos de día como eclipses y fases lunares */
{
    cursor: pointer; /* Indica que el elemento es clickeable */
    transition: transform 0.2s ease-in-out; /* Añade una transición suave para el efecto de escala */
}

/* Efecto al pasar el ratón por encima (hover) o al tocar/activar (active) */
.planets-icon:hover,
.signs-icon:hover,
.aspects-icon:hover,
.day-event-icon:hover,
.planets-icon:active,
.signs-icon:active,
.aspects-icon:active,
.day-event-icon:active
{
    transform: scale(1.15); /* Aumenta el tamaño un 15% */
    z-index: 5; /* Asegura que el icono clickeado esté por encima de otros elementos */
}

/* Si quieres que el efecto sea más pronunciado en el 'active' (cuando se hace clic) */
.planets-icon:active,
.signs-icon:active,
.aspects-icon:active,
.day-event-icon:active {
    transform: scale(1.25); /* Un poco más grande al hacer clic */
}

/* Si quieres que el efecto sea sutil para los puntos de aspectos */


/* ESTILOS PARA EL MODAL "ACERCA DE" */
#modal-about-content h2 {
    text-align: center;
    font-family: 'Linux Libertine', serif;
    font-size: 1.6em;
    color: var(--color-boton-fondo);
    margin-bottom: 20px;
}
#modal-about-content p {
    text-align: center;
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 30px;
}
#modal-about-content h3 {
    text-align: center;
    border-bottom: 1px solid var(--color-borde-calendario);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.2em;
}
.credits-list {
    list-style: none;
    padding: 0;
    font-size: 0.9em;
}
.credits-list li {
    margin-bottom: 12px;
}
.credits-list a {
    color: var(--color-texto-principal);
    text-decoration: none;
    transition: color 0.2s;
}
.credits-list a:hover {
    color: var(--color-borde-calendario); /* Se pone dorado al pasar el ratón */
    text-decoration: underline;
}


#modal-about .modal-content h2 {
    font-family: 'Linux Libertine', serif;
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 25px;
}

#about-buttons-container {
    display: grid;
    gap: 15px;
}

.about-button {
    background-color: transparent;
    border: 1px solid var(--color-borde-calendario);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: left;
}
.about-button:hover {
    background-color: rgba(232, 228, 216, 0.4);
    transform: scale(1.03);
}

.about-button .icon-container {
    background-color: white;
    border-radius: 8px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.about-button .icon-container img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.about-button .text-container {
    font-family: 'Linux Libertine', serif;
}
.about-button .title {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--color-texto-principal);
}
.about-button .subtitle {
    font-size: 0.9em;
    color: #555;
    opacity: 0.8;
}

/* Estilos para el contenido interno */
.about-internal-content {
    animation: fadeIn 0.3s ease-in-out;
}
.about-internal-content h3 {
    font-family: 'Linux Libertine', serif;
    font-size: 1.5em;
    text-align: center;
}
.about-internal-content p {
    line-height: 1.6;
}
.back-to-about-btn {
    margin-top: 20px;
    font-family: 'Linux Libertine', serif;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}