/* Assign color to classes with sun, moon or nutrition without dark*/
.sun {
    color: var(--sun-dark);
}

.moon {
    color: var(--moon-dark);
}

.nutrition {
    color: var(--nutrition-dark);
}

.property {
    color: var(--property-dark);
}

.vegetal {
    color: var(--vegetal);
}

.vegetal-dark {
    color: var(--vegetal-dark);
}

.wood {
    color: var(--wood);
}

.positive {
    color: var(--positive);
}

.negative {
    color: var(--negative);
}

.neutral {
    color: var(--dark-gray);
}

.access-warning {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
    padding: 1em;
    border-radius: 1.25em;
    border: 4px solid var(--background-middle);
    width: -webkit-fill-available;
    background-image: repeating-linear-gradient(45deg,
            var(--background-middle),
            var(--background-middle) 10px,
            var(--background-light) 10px,
            var(--background-light) 20px);
}

.access-warning>span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.5em 1em;
    border-radius: 0.75em;
    border: 4px solid var(--background-light);
}

.access-warning span .button {
    white-space: nowrap
}

.access-warning a {
    font-weight: bold;
}

/* Estilo general para .toggle-btn */
.toggle-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 4px solid var(--background-light);
    border-radius: 2em;
}

.toggle-btn .toggle-switch {
    width: 3.1em;
    height: 1.7em;
    border-radius: 20px;
    position: relative;
    transition: background-color 0.3s ease;
    background-color: white;
}

.toggle-btn .toggle-switch:not(.blocked)::before {
    content: '';
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 6px;
    background-color: transparent;
    border: 4px solid var(--background-light);
    transition: left 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.toggle-btn .toggle-switch.blocked {
    padding: 0.6em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: -1.25em;
}

.sun .toggle-btn .toggle-switch:not(.blocked)::before,
.toggle-btn .sun .toggle-switch::before {
    border-color: var(--sun-dark);
}

.moon .toggle-btn .toggle-switch:not(.blocked)::before,
.toggle-btn .moon .toggle-switch::before {
    border-color: var(--moon-dark);
}

.nutrition .toggle-btn .toggle-switch:not(.blocked)::before,
.toggle-btn .nutrition .toggle-switch::before {
    border-color: var(--nutrition-dark);
}

.property .toggle-btn .toggle-switch:not(.blocked)::before,
.toggle-btn .property .toggle-switch::before {
    border-color: var(--property-dark);
}

.toggle-btn .toggle-switch.active {
    background-color: var(--background-light);
}

.toggle-btn .toggle-switch.active::before {
    width: 1.4em;
    height: 1.4em;
    top: 3px;
    left: 1.5em;
    border-color: var(--background-light) !important;
}

.sun .toggle-btn .toggle-switch.active::before {
    background-color: var(--sun);
}

.moon .toggle-btn .toggle-switch.active::before {
    background-color: var(--moon);
}

.nutrition .toggle-btn .toggle-switch.active::before {
    background-color: var(--nutrition);
}

.property .toggle-btn .toggle-switch.active::before {
    background-color: var(--property);
}

.toggle-btn .subscription-name {
    display: flex;
    align-items: center;
    font-weight: bold;
    background: white;
    gap: 0.75em;
    padding: 0.2em 1.5em;
    text-align: center;
    border-radius: 2em;
    z-index: 2;
}


.toggle-btn .subscription-name svg {
    height: 1.25em;
    width: 1em;
}

.toggle-btn.little {
    border: 2px solid var(--background-middle);
}

.toggle-btn.little .toggle-switch.blocked {
    padding: 0.4em;
    margin-left: -1.25em;
    width: 2.35em;
    height: 1.25em;
}

.toggle-btn.little .subscription-name {
    padding: 0.2em .5em;
    gap: 0.2em;
    font-size: 0.8em;
}

.toggle-btn.little .toggle-switch.dark {
    background-color: var(--front-middle);
}

.toggle-btn.little svg:not(.fa-lock) {
    fill: var(--front-middle);
    color: var(--front-middle);
}

.toggle-btn.little .fa-lock {
    font-size: 0.75em;
}

.circle.sun,
a.button.sun:hover {
    background-color: var(--sun);
}

.circle.moon,
a.button.moon:hover {
    background-color: var(--moon);
}

.circle.nutrition,
a.button.nutrition:hover {
    background-color: var(--nutrition);
}

.circle.property,
a.button.property:hover {
    background-color: var(--property);
}

.circle.vegetal {
    background-color: var(--vegetal);
}

.circle.wood {
    background-color: var(--wood);
}

.circle.neutral {
    background-color: var(--gray);
}

/* Assign background color to classes with sun, moon or nutrition and dark class */
.dark {
    color: white;
}

.sun.dark {
    background-color: var(--sun);
}

.moon.dark {
    background-color: var(--moon);
}

.nutrition.dark {
    background-color: var(--nutrition);
}

.property.dark {
    background-color: var(--property);
}

.vegetal.dark {
    background-color: var(--vegetal);
}

.wood.dark {
    background-color: var(--wood);
}

.neutral.dark {
    color: #9d9d9d;
    background-color: var(--gray);
}

.sun:not(.active) {
    fill: var(--sun-dark);
}

.moon:not(.active) {
    fill: var(--moon-dark);
}

.property:not(.active) {
    fill: var(--property-dark);
}

.nutrition:not(.active) {
    fill: var(--nutrition-dark);
}

.circle {
    display: inline-block;
    border-radius: 50%;
    height: 14px;
    width: 14px;
}

a.button.sun,
a.button.moon,
a.button.nutrition,
a.button.property,
a.button.vegetal,
a.button.wood {
    transition: background-color 0.3s ease, fill 0.3s ease;
}

.active,
a.button:hover svg {
    fill: white;
}

/* El container parent de .semicircle debe alinear el contenido a la derecha */
.semicircle-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.semicircle {
    width: 14px;
    height: 14px;
    border-radius: 1em;
    border-width: 2px;
    border-style: solid;
    overflow: hidden;
    position: relative;
}

.semicircle::before,
.semicircle::after {
    content: '';
    display: block;
    position: absolute;
}

.semicircle.sembrar::before {
    width: 100%;
    height: 50%;
    bottom: 0;
}

.semicircle.cosechar::after {
    width: 100%;
    height: 50%;
    top: 0;
    /* Posiciona el semicírculo en la parte superior */
}

.semicircle.plantar::before {
    width: 50%;
    height: 100%;
    right: 0;
    /* Posiciona el semicírculo a la derecha */
    border-radius: 0 50% 50% 0;
    /* Redondea solo las esquinas correctas */
}

.semicircle.moon::before,
.semicircle.moon::after {
    background-color: var(--moon);
    border-color: var(--moon);
}

.semicircle.sun::before,
.semicircle.sun::after {
    background-color: var(--sun);
    border-color: var(--sun);
}

.semicircle.nutrition::before,
.semicircle.nutrition::after {
    background-color: var(--nutrition);
    border-color: var(--nutrition);
}

.semicircle.moon.sembrar.plantar,
.semicircle.moon.cosechar.plantar,
.semicircle.moon.cosechar.plantar.cosechar {
    background-color: var(--moon);
}

.semicircle.sun.sembrar.plantar,
.semicircle.sun.cosechar.plantar,
.semicircle.sun.cosechar.plantar.cosechar {
    background-color: var(--sun);
}

.semicircle.nutrition.sembrar.plantar,
.semicircle.nutrition.cosechar.plantar,
.semicircle.nutrition.cosechar.plantar.cosechar {
    background-color: var(--nutrition);
}

.semicircle.sembrar.plantar::before {
    width: 50%;
    height: 50%;
    border-radius: 50% 0 0 50%;
    /* Redondea las esquinas inferior izquierda y superior derecha */
    left: 0;
    top: 0;
    background-color: white;
}

.semicircle.cosechar.plantar::after {
    width: 50%;
    height: 50%;
    border-radius: 50% 0 0 50%;
    /* Redondea las esquinas inferior izquierda y superior derecha */
    left: 0;
    background-color: white;
}

.semicircle.sembrar.plantar.cosechar::before,
.semicircle.sembrar.plantar.cosechar::after {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

div.section:has(.label_plan) {
    position: relative;
}

.label_plan {
    position: absolute;
    right: 0em;
    top: -0.5em;
}

.label_plan svg {
    width: 1.6em;
}

.label_plan svg.sun {
    fill: var(--sun);
}

.label_plan svg.moon {
    fill: var(--moon);
}

.label_plan svg.nutrition {
    fill: var(--nutrition);
}

.label_plan svg.property {
    fill: var(--property);
}

.label_plan:not(.active) svg {
    fill: var(--background-dark) !important;
    opacity: 0.75;
}