/* TIRADA ASTROLÓGICA - ESTILOS ESPECÍFICOS */
/* La mayoría de los estilos se heredan de tiradas-interactivas.css */

/* LAYOUT ASTROLÓGICO CIRCULAR */
#layoutContainer.layout-astrologico {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 15px;
    margin-bottom: 40px;
    padding: 40px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-items: center;
    min-height: 850px;
}

/* Posicionamiento de las 12 casas (Zodiaco) */
.pos-10 { grid-area: 1 / 4 / 2 / 5; }
.pos-9  { grid-area: 2 / 6 / 3 / 7; }
.pos-8  { grid-area: 3 / 7 / 4 / 8; }
.pos-7  { grid-area: 4 / 7 / 5 / 8; }
.pos-6  { grid-area: 5 / 7 / 6 / 8; }
.pos-5  { grid-area: 6 / 6 / 7 / 7; }
.pos-4  { grid-area: 7 / 4 / 8 / 5; }
.pos-3  { grid-area: 6 / 2 / 7 / 3; }
.pos-2  { grid-area: 5 / 1 / 6 / 2; }
.pos-1  { grid-area: 4 / 1 / 5 / 2; }
.pos-12 { grid-area: 3 / 1 / 4 / 2; }
.pos-11 { grid-area: 2 / 2 / 3 / 3; }

#layoutContainer.layout-astrologico .posicion {
    width: 100%;
    max-width: 110px;
    margin: 0;
}

@media (max-width: 600px) {
    #layoutContainer.layout-astrologico {
        padding: 5px;
        gap: 5px; /* Espacio mínimo para ganar tamaño */
        aspect-ratio: 1 / 1.1;
        min-height: auto;
        width: 100%;
    }

    #layoutContainer.layout-astrologico .posicion {
        max-width: none; /* Permitir que ocupen todo el espacio del grid */
        width: 100%;
        padding: 2px;
        border-radius: 6px;
    }

    /* Ajustar el tamaño del icono/emoji para que no desborde */
    #layoutContainer.layout-astrologico .posicion-carta {
        font-size: 1.8em;
    }
}