:focus-visible {
    outline: 0;
}

body,
.color-background {
    background-color: var(--color-background);
}

.card {
    background-color: var(--color-card);
}


/* Colores personalizables en el customizador */
/* Menu A */
.header-a-color-background {
    background-color: var(--header-a-color-background);
}

.header-a-color-text {
    color: var(--header-a-color-text);
}

.header-a-color-text a:hover {
    color: var(--header-a-color-text-hover);
}

/* Menu B */
.header-b-color-background {
    background-color: var(--header-b-color-background);
}

.header-b-color-text {
    color: var(--header-b-color-text);
}

.header-b-color-text a:hover {
    color: var(--header-b-color-text-hover);
}

/* Menu C */
.header-c-color-background {
    background-color: var(--header-c-color-background);
}

.header-c-color-text {
    color: var(--header-c-color-text);
}

.header-c-color-text a:hover {
    color: var(--header-c-color-text-hover);
}

/* Body */
.background-notification {
    background-color: var(--color-primary);
}

.background-primary {
    background-color: var(--color-primary);
}

.background-primary-100 {
    background-color: var(--color-primary);
}

.background-primary-100:hover {
    background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.background-primary-50 {
    background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.background-primary-25 {
    background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

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

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

.color-text a:hover {
    color: var(--color-primary);
}

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

.color-border-text {
    border-color: var(--color-text);
}

.color-border-text-80 {
    border-color: color-mix(in srgb, var(--color-text), transparent 80%);
}

.color-border-primary {
    border-color: var(--color-primary);
}

.color-border-80 {
    border-color: color-mix(in srgb, var(--color-text), transparent 80%);
}

.divide-color-80> :not([hidden])~ :not([hidden]) {
    border-color: color-mix(in srgb, var(--color-text), transparent 80%);
}

/* Campo texto personalizado */
.tab-content-text {
    * {
        margin-bottom: 10px;
        line-height: 2;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: bold;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18.7px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 12px;
    }

    a {
        color: var(--color-primary);
    }

    ul {
        list-style: disc;
        margin-left: 20px;
    }

    ol {
        list-style: decimal;
        margin-left: 20px;
    }

    li {
        margin-bottom: 5px;
    }

    blockquote {
        font-style: italic;
    }
}

/* Footer */
.footer-color-background {
    background-color: var(--footer-color-background);
}

.footer-color-background-hover:hover {
    background-color: var(--footer-color-text);
}

.footer-color-text {
    color: var(--footer-color-text);
}

.footer-color-text a:hover {
    color: var(--footer-color-text-hover);
}

.footer-color-icon svg {
    color: var(--footer-color-text);
}

.footer-color-icon:hover svg {
    color: var(--footer-color-background);
}

.footer-color-border {
    border-color: var(--footer-color-text);
}

.footer-color-border-80 {
    border-color: color-mix(in srgb, var(--footer-color-text), transparent 80%);
}

/* Card */
.custom_card:hover .list_image_post {
    filter: brightness(.5);
    transform: scale(1.1)
}

.design-1 .card_estado,
.design-1 .card_clase {
    border-color: var(--color-primary);
}

.design-2 .card_clase {
    color: var(--color-primary);
}

.design-2 .card_estado {
    background-color: var(--color-primary);
}

/* Navegation */
.navegation_card_1 .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--color-text);
    margin-top: 24px;
}

.navegation_card_1 .page-numbers {
    padding: 12px;

}

.navegation_card_2 .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    color: var(--color-text);
    margin-top: 24px;
}

.navegation_card_2 .page-numbers {
    background-color: var(--color-card);
    padding: 12px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border-radius: 12px;
    text-align: center;
    align-content: center;
}

span.page-numbers.current {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 10px;
}

/* Main */
main p {
    margin-bottom: 10px;
}

main img {
    margin-bottom: 20px;
}

#post-background {
    --tw-gradient-from: var(--color-background) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}


/* Sistema de calificacion */
.estrellas-contenedor {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.estrellas-contenedor input {
    display: none;
}

.estrellas-contenedor label {
    font-size: 25px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}

.estrellas-contenedor label:hover,
.estrellas-contenedor label:hover~label,
.estrellas-contenedor input:checked~label {
    color: #f5b301;
}

/* Galeria de imagenes */
#gallery-container::-webkit-scrollbar {
    display: none;
    /* Oculta en Chrome, Safari, Opera */
}

#gallery-container {
    -ms-overflow-style: none;
    /* Oculta en IE and Edge */
    scrollbar-width: none;
    /* Oculta en Firefox */
}

/* Comment */
ul.children {
    margin-left: 55px;
}

#submit {
    background-color: var(--color-primary);
    color: #fff;
}

#submit:hover {
    cursor: pointer;
}

/* Sidebar */
#secondary a:hover svg path {
    fill: var(--color-primary)
}

#secondary ul {
    list-style: disc;
    padding-left: 20px;
    font-size: 14px;
    line-height: 2;
}

#secondary ol {
    list-style: square;
    padding-left: 20px;
    font-size: 14px;
    line-height: 2;
}

.wp-block-latest-comments__comment {
    list-style: inherit !important;
}

.widget-title,
.entry-title,
.page-title,
.comments-title,
.comment-reply-title,
#secondary .wp-block-heading,
.wp-block-search__label,
.wp-block-categories__label {
    padding-left: 1rem;
    border-left: 3px solid var(--color-primary);
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.wp-block-search__input {
    border-radius: 8px;
    padding: 10px 13px;
    border-width: 0px;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.card .wp-block-search__input {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.wp-block-search__input:focus-visible {
    outline: none;
}

.wp-block-search__button {
    border: none;
}

.widget_nav_menu,
.wp-block-search,
.wp-block-group-is-layout-constrained,
.wp-block-categories-dropdown {
    display: grid;
    gap: 15px;
}

.wp-block-categories-dropdown select {
    border: 0px;
    color: var(--color-text);
    padding: 10px 16px;
    border-radius: 50px;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Categories Widget */
.category-item {
    background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.category-item:hover {
    background-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Estilos estándar de editor WordPress */
.mensajeHtml {
    .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .alignleft {
        float: left;
        margin: 0 20px 20px 0;
    }

    .alignright {
        float: right;
        margin: 0 0 20px 20px;
    }

    p {
        margin-bottom: 1.2rem;
    }

    p:last-child {
        margin-bottom: 0;
    }

    /* Títulos dentro del editor */
    h1,
    h2,
    h3 {
        margin: 1.5rem 0 1rem;
        line-height: 1.2;
        color: inherit;
    }

    h1 {
        font-size: 25px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    /* Listas */
    ul,
    ol {
        margin: 1rem 0 1.5rem 1.5rem;
    }

    li {
        margin-bottom: 0.5rem;
    }

    /* Enlaces */
    a {
        color: inherit;
        text-decoration: underline;
        opacity: 0.8;
    }

    a:hover {
        opacity: 1;
    }
}