img{border:none;}
ul,li{list-style:none;margin:0;padding:0;}
#divtop{position:absolute;top:0;left:0;}
#BloqueCabecera{position:absolute;top:5px;left:2px;width:250mm;min-width:250mm;background-color:#f0f8ff;}
#EncabezadoPrincipalCabeceraDeberiaHacerlo{position:absolute;left:3px;text-align:center;margin-top:10px;color:#1c0ebe;font-family:"Lucida Grande",Verdana,Geneva,Helvetica,san-serif;font-size:29pt;font-weight:bold;}
#aNumeroMagico{text-decoration:none;color:#ff7536;cursor:hand,pointer;}
#EncabezadoNumeroMagico{display:none;position:absolute;left:92mm;top:-2mm;text-align:center;margin-top:15px;color:#ff7536;font-family:"Lucida Grande",Verdana,Geneva,Helvetica,san-serif;font-size:20pt;font-weight:bold;}
#NumeroMagico{display:none;position:absolute;top:-2mm;left:192mm;text-align:center;margin-top:7px;color:#1c0ebe;font-family:"Lucida Grande",Verdana,Geneva,Helvetica,san-serif;font-size:30pt;font-weight:bold;}
#BloqueBoton{position:absolute;top:5mm;left:780mm;width:45mm;min-width:45mm;}
#BloqueFechas{position:absolute;top:1mm;left:150mm;}

.BloqueEstadosZodiaco{height:15mm;}
.BloqueEstadosZodiaco h4{position:relative;top:6mm;text-align:center;color:#7569a6;font-family:"Monotype Corsiva",fantasiy,Verdana,Geneva,Helvetica,san-serif;font-size:15pt;font-weight:bold;}
.EstadosZodiacoSuerte{position:absolute;top:-9mm;left:2.5mm;}
.EstadosZodiacoSalud{position:absolute;top:-9mm;left:29mm;}
.EstadosZodiacoDinero{position:absolute;top:-9mm;left:56mm;}
.EstadosZodiacoAmor{position:absolute;top:-9mm;left:82.5mm;}
.Signo{position:absolute;top:3mm;left:108mm;}
#BloqueSeguimientoAforismos{display:none;position:absolute;top:167mm;left:81mm;text-align:left;color:#0c0808;font-family:"Trebuchet MS","Lucida Grande",Verdana,Geneva,Helvetica,san-serif;font-size:8pt;font-weight:bold;width:195mm;min-width:195mm;}
.Control_Escala{color:navy;height:80px;width:6px;min-width:6px;font-size:6px;font-family:monospace;text-align:center;vertical-align:middle;border:solid 1px black;}

/* ==========================================================================
   PREVENCIÓN DE FOUC EN EL ACORDEÓN ZODIACAL (REGLAS CORREGIDAS)
   ========================================================================== */

#BloqueZodiaco {
    position: absolute;
    top: 3mm;
    left: 5mm;
    text-align: left;
    font-family: "Monotype Corsiva", fantasiy, Verdana, Geneva, Helvetica, san-serif;
    font-size: 17pt;
    font-weight: bold;
    color: green;
    width: 135mm;
    min-width: 135mm;

    /* Ocultación inicial hasta inicializar el acordeón */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}

/* Transición a estado visible cuando JS añade la clase */
#BloqueZodiaco.zodiaco-inicializado {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   MÓDULO GRÁFICO TRIMESTRAL DE EVOLUCIÓN ZODIACAL (JS VANILLA / CANVAS)
   ========================================================================== */
#ContenedorGraficoHoroscopo {
    position: absolute;
    top: 14mm;                /* Mantiene despejada la caja 'Fecha:' superior */
    left: 142mm;              /* Inicia justo a la derecha del tablero */
    width: 176mm;             /* Ampliado para alcanzar la mayor parte derecha */
    height: 150mm;            /* Ampliado para alcanzar la mayor parte inferior */
    background-color: rgba(240, 248, 255, 0.95);
    border: 1px solid #b0c4de;
    border-radius: 8px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 10;              /* Permite al calendario desplegable solaparse */
}

#canvasGraficoHoroscopo {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   REGLA DE PRIORIDAD PARA EL CALENDARIO DESPLEGABLE (JQUERY UI DATEPICKER)
   --------------------------------------------------------------------------
   Garantiza que la ventana flotante del calendario aparezca SIEMPRE por
   encima del lienzo Canvas sin quedar oculta por las capas adyacentes.
   ========================================================================== */
#ui-datepicker-div {
    z-index: 9999 !important;
}