/*
Theme Name:      Academia Lenor
Theme URI:       https://www.ingenima.com/
Author:          Ingenima
Description:     Block theme para Academia Lenor
Version:         1.1.5
Text Domain:     Academia Lenor
*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

:root {
    /* Colors */
    --petroleo:    #174047;
    --verde:       #00ab92;
    --verdedark:   #008077;
    --grisclaro:   #eeeff1;
    --gris:        #555555;
    --placeholder: #b2b2b2;
    --teja:        #a95844;
    --blanco:      #ffffff;
    --negro:       #000000;

    /* Layout */
    --max-width: 1200px;
    --wide-width: 1440px;

    /* Transitions */
    --transition-base: all 0.3s ease;

    /* Fonts */
    --ffamily: 'Manrope', sans-serif;
    --fsize: 1rem;
    --fsize--1: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);    /* ~12–14px — footer nav, etiquetas pequeñas */
    --fsize-0:  clamp(0.875rem, 0.84rem + 0.18vw, 1rem);        /* ~14–16px — p, body text */
    --fsize-1:  clamp(1.0625rem, 1.01rem + 0.27vw, 1.25rem);    /* ~17–20px — h3, labels de cards, áreas */
    --fsize-2:  clamp(1.875rem, 1.77rem + 0.54vw, 2.25rem);     /* ~30–36px — h2, títulos de sección */
    --fsize-3:  clamp(2.5rem, 2.36rem + 0.71vw, 3rem);          /* ~40–48px — h1, hero title */
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--ffamily, sans-serif);
    background-color: var(--blanco, #ffffff);
    color: var(--negro, #000000);
}

/* Admin bar offset — cuando WP admin bar está visible, baja el header fixed */
.admin-bar .acl-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .acl-header {
        top: 46px;
    }
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/*
  ### Main Colors
*/

/*******
## BG Colors
*******/

.acl-bg--petroleo {
    background-color: var(--petroleo, #174047);
}

.acl-bg--verde {
    background-color: var(--verde, #00ab92);
}

.acl-bg--verdedark {
    background-color: var(--verdedark, #008077);
}

.acl-bg--grisclaro {
    background-color: var(--grisclaro, #eeeff1);
}

.acl-bg--gris {
    background-color: var(--gris, #555555);
}

.acl-bg--teja {
    background-color: var(--teja, #a95844);
}

.acl-bg--blanco {
    background-color: var(--blanco, #ffffff);
}

.acl-bg--negro {
    background-color: var(--negro, #000000);
}

/*******
## Text Colors
*******/

.acl--petroleo {
    color: var(--petroleo, #174047) !important;
}

.acl--verde {
    color: var(--verde, #00ab92) !important;
}

.acl--verdedark {
    color: var(--verdedark, #008077) !important;
}

.acl--grisclaro {
    color: var(--grisclaro, #eeeff1) !important;
}

.acl--gris {
    color: var(--gris, #555555) !important;
}

.acl--placeholder {
    color: var(--placeholder, #b2b2b2) !important;
}

.acl--teja {
    color: var(--teja, #a95844) !important;
}

.acl--blanco {
    color: var(--blanco, #ffffff) !important;
}

.acl--negro {
    color: var(--negro, #000000) !important;
}

/*
## Font Sizes
*/

.fsize--1 {
    font-size: var(--fsize--1) !important;
}

.fsize-0,
p {
    font-size: var(--fsize-0) !important;
    font-weight: 400 !important;
}

.fsize-1,
h3 {
    font-size: var(--fsize-1) !important;
    font-weight: 500 !important;
}

.fsize-2,
h2 {
    font-size: var(--fsize-2) !important;
    font-weight: 700 !important;
}

.fsize-3,
h1 {
    font-size: var(--fsize-3) !important;
    font-weight: 800 !important;
}

/*******
## Nav Links — reserva ancho bold para evitar layout shift en hover
*******/

.acl-nav-link span {
    display: inline-grid;
}
.acl-nav-link span::after {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/*******
## Buttons
*******/

.acl-btn,
.gform_button,
.acl-order-summary .acl-btn#place_order {
    font-size: var(--fsize-0, 16px) !important;
    font-family: var(--ffamily, sans-serif) !important;
    color: var(--blanco, #ffffff) !important;
    background-color: var(--verde, #00ab92) !important;
    min-height: 44px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-block !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    padding: 12px 28px !important;
    text-align: center !important;
    align-content: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-transition: var(--transition-base) !important;
    transition: var(--transition-base) !important;
}

.acl-btn:hover,
.gform_button:hover {
    background-color: var(--verdedark, #008077) !important;
    color: var(--blanco, #ffffff) !important;
}

.acl-btn-secondary {
    font-size: var(--fsize-0, 16px) !important;
    font-family: var(--ffamily, sans-serif) !important;
    color: var(--negro, #000000) !important;
    background-color: var(--grisclaro, #eeeff1) !important;
    min-height: 44px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-block !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    padding: 12px 28px !important;
    text-align: center !important;
    align-content: center !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-transition: var(--transition-base) !important;
    transition: var(--transition-base) !important;
}

.acl-btn-secondary:hover {
    background-color: #dcdde0 !important;
    color: var(--negro, #000000) !important;
}

/*******
## Select (flecha propia, con espacio configurable a su derecha)
*******/

.acl-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* La distancia "18px" = espacio entre la flecha y el borde derecho. Subila para más espacio. */
    background-position: right 18px center;
    background-size: 14px;
    /* Espacio entre el texto y la flecha. */
    padding-right: 46px !important;
    cursor: pointer;
}

/*******
## Selector de moneda (carrito/checkout — WPML Multi-Currency)
*******/

.acl-currency-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--grisclaro, #eeeff1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    border: 1px solid #555555 !important;
    border-radius: 8px !important;
    min-width: 150px;
    padding: 8px 40px 8px 16px !important;
    font-size: var(--fsize--1, 14px) !important;
    font-family: var(--ffamily, sans-serif) !important;
    color: var(--negro, #000) !important;
    cursor: pointer !important;
}

.acl-currency-select:focus {
    outline: 2px solid var(--verde, #00ab92) !important;
    outline-offset: -2px !important;
}

.acl-currency-select:disabled {
    opacity: 0.6 !important;
    cursor: wait !important;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

.acl-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.acl-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes acl-hero-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.acl-hero-el {
    opacity: 0;
    animation: acl-hero-fadein 0.9s ease-out forwards;
}
.acl-hero-el--1 { animation-delay: 0.15s; }
.acl-hero-el--2 { animation-delay: 0.45s; }
.acl-hero-el--3 { animation-delay: 0.70s; }
.acl-hero-el--4 { animation-delay: 0.95s; }

/*--------------------------------------------------------------
# Hero — corte de imagen
--------------------------------------------------------------*/

/*
 * Corte hexagonal de las imágenes de los heros: recorta la esquina
 * superior izquierda y la esquina inferior derecha en diagonal.
 * Es la fuente única para ambos heros (home y single capacitación):
 * cambiar el polígono acá afecta a los dos. Solo en desktop (md+);
 * en mobile la imagen se muestra completa.
 */
@media (min-width: 768px) {
    .acl-hero-img-clip {
        -webkit-clip-path: polygon(28% 0, 100% 0, 100% 74%, 72% 100%, 0 100%, 0 26%);
        clip-path: polygon(28% 0, 100% 0, 100% 74%, 72% 100%, 0 100%, 0 26%);
    }
}

/*--------------------------------------------------------------
# Nosotros — Banner / Sobre / Sedes
--------------------------------------------------------------*/

/* Banner verde con el título de la página */
.acl-banner h1 {
    line-height: 1.1 !important;
}

/* Sobre la empresa — título a dos colores */
.acl-sobre__titulo {
    line-height: 1.15 !important;
}

/* Cuerpo de texto: párrafos aireados, negritas reales */
.acl-sobre__contenido p {
    margin: 0 !important;
    line-height: 1.7 !important;
    color: var(--negro, #000000) !important;
}

.acl-sobre__contenido strong,
.acl-sobre__contenido b {
    font-weight: 700 !important;
}

.acl-sobre__media img {
    display: block;
}

/* Nuestras sedes — panel gris con el mapa */
.acl-sedes__titulo {
    line-height: 1.15 !important;
}

/*--------------------------------------------------------------
# Gravity Forms
--------------------------------------------------------------*/

.gform-theme--foundation .gform_fields {
    row-gap: 12px !important;
}

.acl-contacto .gform_wrapper {
    max-width: 100% !important;
}

.acl-contacto .gfield {
    margin-bottom: 16px !important;
}

.acl-contacto .gfield_label {
    font-size: var(--fsize-0) !important;
    font-weight: 400 !important;
    color: var(--negro) !important;
    margin-bottom: 6px !important;
}

.acl-contacto .gfield_required {
    color: var(--teja) !important;
}

.acl-contacto .gform_heading {
    display: none;
}

.acl-contacto .acl-gform-legend-bottom {
    font-size: var(--fsize--1) !important;
    color: var(--gris, #555555) !important;
    margin-bottom: 0 !important;
}

.acl-contacto input[type="text"],
.acl-contacto input[type="email"],
.acl-contacto input[type="tel"],
.acl-contacto input[type="number"],
.acl-contacto textarea,
.acl-contacto select {
    width: 100% !important;
    height: 50px !important;
    background-color: var(--grisclaro, #eeeff1) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: var(--fsize-0) !important;
    font-family: var(--ffamily) !important;
    color: var(--negro, #000000) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: var(--transition-base) !important;
}

.acl-contacto input[type="text"]::placeholder,
.acl-contacto input[type="email"]::placeholder,
.acl-contacto input[type="tel"]::placeholder,
.acl-contacto input[type="number"]::placeholder,
.acl-contacto textarea::placeholder {
    color: var(--placeholder, #b2b2b2) !important;
}

.acl-contacto input[type="text"]:focus,
.acl-contacto input[type="email"]:focus,
.acl-contacto input[type="tel"]:focus,
.acl-contacto textarea:focus {
    background-color: #e2e4e8 !important;
}

.acl-contacto textarea {
    resize: vertical !important;
    min-height: 150px !important;
}

.acl-contacto .gform_footer,
.acl-contacto .gform_page_footer {
    justify-content: right !important;
    margin-top: 12px !important;
}

.acl-contacto .validation_error {
    background: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: var(--fsize-0) !important;
    color: var(--teja) !important;
    margin-bottom: 16px !important;
}

.acl-contacto .gfield_validation_message {
    color: var(--teja) !important;
    font-size: var(--fsize--1) !important;
    margin-top: 4px !important;
}

.acl-contacto .gform-footer {
    margin-top: 0 !important;
}

/*--------------------------------------------------------------
# Acordeón
--------------------------------------------------------------*/

.acl-acordeon-body {
    overflow: hidden;
    transition: max-height 0.55s ease;
}

/* Contenido WYSIWYG dentro de los acordeones — restaura listas que Tailwind preflight resetea */
.acl-richtext p {
    margin-bottom: 0.75rem;
}
.acl-richtext p:last-child {
    margin-bottom: 0;
}
.acl-richtext ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 0.75rem;
}
.acl-richtext ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0 0 0.75rem;
}
.acl-richtext li {
    margin-bottom: 0.4rem;
}

/*--------------------------------------------------------------
# Artículo (single del blog)
--------------------------------------------------------------*/

.acl-articulo-contenido p {
    margin-bottom: 1.5rem;
}
.acl-articulo-contenido p:last-child {
    margin-bottom: 0;
}
.acl-articulo-contenido h3 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600 !important;
}
.acl-richtext ul:last-child,
.acl-richtext ol:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.acl-footer__col h1,
.acl-footer__col h2,
.acl-footer__col h3,
.acl-footer__col h4,
.acl-footer__col h5,
.acl-footer__col h6 {
    margin-bottom: 1rem !important;
}

.acl-footer__col p {
    line-height: 2.1 !important;
    margin-bottom: 0 !important;
    font-size: var(--fsize--1) !important;
}

.acl-footer__col span.footer_title {
    font-weight: 600;
    font-size: var(--fsize-0);
}

.acl-footer__col a {
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

.acl-footer__col a:hover {
    opacity: 1 !important;
}

.acl-footer__col.col-span-1 p {
    margin-bottom: 8px !important;
}

/*--------------------------------------------------------------
# Archive — Capacitaciones
--------------------------------------------------------------*/

.acl-search-input {
    font-family: var(--ffamily, sans-serif) !important;
    font-size: var(--fsize-0, 1rem) !important;
    color: var(--negro, #000000) !important;
}

.acl-search-input::placeholder {
    color: var(--gris, #555555) !important;
}

.acl-select-filter {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 44px !important;
    font-family: var(--ffamily, sans-serif) !important;
    font-size: var(--fsize-0, 1rem) !important;
    color: var(--negro, #000000) !important;
    min-width: 240px;
}

/* Pagination */
.acl-pagination a,
.acl-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 4px;
    font-family: var(--ffamily, sans-serif) !important;
    font-size: var(--fsize-0, 1rem) !important;
    color: var(--negro, #000000);
    text-decoration: none;
    transition: color 0.2s;
}

.acl-pagination span.current {
    font-weight: 700 !important;
    color: var(--verde, #00ab92) !important;
}

.acl-pagination a:hover {
    color: var(--verde, #00ab92) !important;
}

.acl-pagination .dots {
    color: var(--gris, #555555);
    pointer-events: none;
}

/*--------------------------------------------------------------
# Auth Pages — Login / Register
--------------------------------------------------------------*/

/* .acl-auth-page wrapper + image column layout moved to Tailwind in form-login.php */

.acl-auth-label {
    display: block;
    font-size: var(--fsize-0) !important;
    color: var(--negro, #000000) !important;
    margin-bottom: 6px;
}

.acl-auth-input {
    background-color: var(--grisclaro, #eeeff1) !important;
    border: none !important;
    border-radius: 1px !important;
    padding: 13px 16px !important;
    font-size: var(--fsize-0) !important;
    font-family: var(--ffamily, sans-serif) !important;
    color: var(--negro, #000) !important;
    width: 100% !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: block !important;
    -webkit-appearance: none;
    appearance: none;
}

.acl-auth-input:focus {
    outline: 2px solid var(--verde, #00ab92) !important;
    outline-offset: -2px !important;
}

/*******
## Input de archivo (comprobante de pago, etc.) — el navegador no deja
## estilar el <input type="file"> entero, pero sí su botón interno vía
## ::file-selector-button (estándar) / ::-webkit-file-upload-button (Safari viejo).
*******/

.acl-file-input {
    background-color: transparent !important;
    font-size: var(--fsize--1, 14px) !important;
    font-family: var(--ffamily, sans-serif) !important;
    color: var(--gris, #555555) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    min-width: 460px !important;
}

.acl-file-input::file-selector-button,
.acl-file-input::-webkit-file-upload-button {
    font-family: var(--ffamily, sans-serif) !important;
    font-size: var(--fsize--1, 14px) !important;
    font-weight: 600 !important;
    color: var(--blanco, #ffffff) !important;
    background-color: var(--verde, #00ab92) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 9px 20px !important;
    margin: 0 14px 0 0 !important;
    cursor: pointer !important;
    -webkit-transition: var(--transition-base) !important;
    transition: var(--transition-base) !important;
}

.acl-file-input::file-selector-button:hover,
.acl-file-input::-webkit-file-upload-button:hover {
    background-color: var(--verdedark, #008077) !important;
}

.acl-coupon input,
.acl-coupon button {
    background-color: var(--blanco, #fff) !important;
}

/* Restablecer contraseña: la card es gris, así que el input va en blanco para contrastar */
.acl-pass-reset .acl-auth-input {
    background-color: var(--blanco, #fff) !important;
}

/* Remove WooCommerce default card/border on form-login and form-register */
.acl-auth-page .woocommerce-form-login,
.acl-auth-page .woocommerce-form-register {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove form-row bottom margin that WC adds, use our own mb-* instead */
.acl-auth-page .woocommerce-form-row,
.acl-auth-page .form-row {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Hide WooCommerce privacy policy paragraph in registration form */
.acl-auth-page .woocommerce-privacy-policy-text {
    display: none !important;
}

/* WooCommerce notices inside auth form column */
.acl-auth-inner .woocommerce-error,
.acl-auth-inner .woocommerce-message,
.acl-auth-inner .woocommerce-info {
    margin-bottom: 1.5rem;
    padding: 12px 16px;
    border-radius: 8px;
    list-style: none;
    font-size: var(--fsize-0) !important;
}

.acl-auth-inner .woocommerce-error {
    background-color: #fff2f2;
    border-left: 4px solid #e53e3e;
    color: #c53030 !important;
}

.acl-auth-inner .woocommerce-message {
    background-color: #f0fdf4;
    border-left: 4px solid var(--verde, #00ab92);
    color: var(--negro) !important;
}

/*--------------------------------------------------------------
# Login Modal / Pop-up
--------------------------------------------------------------*/

.acl-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.acl-modal.is-open {
    display: flex;
}

.acl-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
}

.acl-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    background-color: var(--blanco, #fff);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.acl-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--negro, #000);
    padding: 4px;
    line-height: 0;
    transition: var(--transition-base);
}

.acl-modal__close:hover {
    opacity: 0.6;
}

/* Links de pie del modal (olvidé contraseña, crear cuenta, ya tengo cuenta) */
.acl-modal__link {
    transition: var(--transition-base);
}

.acl-modal__link:hover {
    color: var(--verde, #00ab92) !important;
}

.acl-modal__error {
    background-color: #fff2f2;
    border-left: 4px solid #e53e3e;
    color: #c53030 !important;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: var(--fsize-0) !important;
}

.acl-modal__pane--success {
    text-align: center;
}

.acl-modal__check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--verde, #00ab92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Checkout / Carrito (WooCommerce restyle)
--------------------------------------------------------------*/

/* Grid de columnas para los campos de facturación */
.acl-checkout-fields .acl-col-12 { width: 100%; }
.acl-checkout-fields .acl-col-6  { width: 100%; }
.acl-checkout-fields .acl-col-4  { width: 100%; }

@media (min-width: 640px) {
    .acl-checkout-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .acl-checkout-fields .acl-col-12 { width: 100%; }
    .acl-checkout-fields .acl-col-6  { width: calc(50% - 10px); }
    .acl-checkout-fields .acl-col-4  { width: calc(33.333% - 14px); }
    .acl-checkout-fields .form-row { margin-bottom: 0 !important; }
}

.acl-checkout-fields .form-row {
    margin-bottom: 20px;
    padding: 0 !important;
}

/* Inputs y selects del checkout con el mismo estilo que .acl-auth-input */
.acl-checkout-fields input.input-text,
.acl-checkout-fields textarea,
.acl-checkout-fields select,
.acl-checkout-left input.input-text {
    background-color: var(--grisclaro, #eeeff1) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 13px 16px !important;
    font-size: var(--fsize-0) !important;
    font-family: var(--ffamily, sans-serif) !important;
    color: var(--negro, #000) !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Chevron custom para los selects (reemplaza el del navegador, ya quitado con appearance:none) */
.acl-checkout-fields select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 44px !important;
    cursor: pointer;
}

.acl-checkout-fields input.input-text:focus,
.acl-checkout-fields textarea:focus,
.acl-checkout-fields select:focus,
.acl-checkout-left input.input-text:focus {
    outline: 2px solid var(--verde, #00ab92) !important;
    outline-offset: -2px !important;
}

/* Select2 (país, si está activo) — igualar al estilo gris claro */
.acl-checkout-fields .select2-container .select2-selection--single {
    background-color: var(--grisclaro, #eeeff1) !important;
    border: none !important;
    border-radius: 8px !important;
    height: 50px !important;
}
.acl-checkout-fields .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 50px !important;
    padding: 0px;
    padding-left: 16px !important;
    color: var(--negro, #000) !important;
}
.acl-checkout-fields .select2-container .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 12px !important;
}

/* Select2 — lista desplegable (se renderiza a nivel body): fondo gris, seleccionado en blanco */
.select2-container--default .select2-dropdown {
    background-color: var(--grisclaro, #eeeff1) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown {
    padding: 10px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--blanco, #fff) !important;
    border: 1px solid #d9dbe0 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    outline: none !important;
    font-family: var(--ffamily, sans-serif) !important;
    font-size: var(--fsize-0) !important;
}
.select2-container--default .select2-results__option {
    background-color: var(--grisclaro, #eeeff1) !important;
    color: var(--negro, #000) !important;
    padding: 10px 16px !important;
    font-size: var(--fsize-0) !important;
}
/* Resaltado (hover/teclado) y el actualmente seleccionado → blanco */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: var(--blanco, #fff) !important;
    color: var(--negro, #000) !important;
}


/* .acl-checkout-fields label {
    display: block;
    font-size: var(--fsize--1) !important;
    color: var(--gris, #555) !important;
    margin-bottom: 6px;
} */

.acl-checkout-fields .required {
    color: var(--verde, #00ab92);
    text-decoration: none;
    border: none;
}

/* Resumen de compra (sidebar) */
.acl-order-summary {
    background-color: var(--grisclaro, #eeeff1);
    border-radius: 12px;
}

/* Ícono circular de marca (carrito vacío, restablecer contraseña, etc.) */
.acl-empty-cart-icon,
.acl-auth-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--blanco, #fff);
    color: var(--verde, #00ab92);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 404 — número grande decorativo (usa el mayor tamaño definido de la escala) */
.acl-404__code {
    font-size: var(--fsize-2, 2.25rem) !important;
    font-weight: 700 !important;
    color: var(--verde, #00ab92) !important;
    letter-spacing: 0.12em;
    line-height: 1;
}

/* Ocultar el "(opcional)" automático de WC (el diseño solo lo quiere en "Piso") */
.acl-checkout-fields .optional {
    display: none !important;
}

/* Ocultar el asterisco de campo requerido (el diseño no lo muestra) */
.acl-checkout-left .required,
.acl-checkout-left abbr[title] {
    display: none !important;
}

/* Email + paragraph de login arriba del bloque de facturación */
.acl-checkout-left .woocommerce-input-wrapper {
    display: block;
}
.acl-checkout-left > .form-row,
.acl-checkout-left .acl-checkout-email .form-row {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Botón de finalizar compra — usa .acl-btn .acl-btn-full (clases agregadas vía filtro).
   Solo reseteamos el contenedor de pago y forzamos full width + margen. */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}
.woocommerce-checkout #payment #place_order,
.acl-order-summary #place_order {
    width: 100% !important;
    margin-top: 8px !important;
    float: none !important;
}

/* Texto de política de privacidad dentro del resumen — oculto (no está en el diseño) */
.acl-order-summary .woocommerce-privacy-policy-text {
    display: none !important;
}

/*******
## Métodos de pago (checkout) — MercadoPago / Transferencia bancaria (BACS)
## El título/descripción de cada gateway se edita en WooCommerce → Ajustes → Pagos,
## no acá — esto solo estila el <ul>/<li> que renderiza WooCommerce por defecto.
*******/

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    border: 1px solid #555555 !important;
    border-radius: 12px !important;
    background: var(--grisclaro, #eeeff1) !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    overflow: hidden;

    & .mp-checkout-pro-content {
        background: var(--grisclaro, #eeeff1) !important;
    }
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 18px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid #9a9a9a;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child {
    border-bottom: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #555555 !important;
    border-radius: 50% !important;
    background: var(--blanco, #fff) !important;
    margin: 0 12px 0 0 !important;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio:checked {
    background: #d9d9d9 !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3a3a;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
    font-size: var(--fsize-0) !important;
    font-weight: 400 !important;
    color: var(--negro, #000) !important;
    cursor: pointer;
    margin: 0 !important;
    display: flex;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box {
    flex-basis: 100%;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px 0 0 32px !important;
    margin: 0 !important;
    font-size: var(--fsize--1, 14px) !important;
    color: var(--gris, #555555) !important;
}

/* WC pinta una flechita CSS apuntando al radio arriba del payment_box — no está en el diseño */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box::before {
    content: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box p:last-child {
    margin-bottom: 0 !important;
}

/*--------------------------------------------------------------
# My Account Dashboard
--------------------------------------------------------------*/

/* .acl-myaccount-page layout (min-height, max-width, centering) moved to Tailwind in my-account.php */

/* Sidebar — vertical stacked list on mobile, vertical column on desktop */
.acl-myaccount-sidebar {
    background-color: var(--grisclaro, #eeeff1);
    position: relative;
    z-index: 0;
    /* Mobile: full-width stacked */
    flex-direction: column;
    padding: 24px 24px 20px;
}

@media (min-width: 768px) {
    .acl-myaccount-sidebar:not(.acl-myaccount-sidebar--lg) {
        flex-shrink: 0;
        padding: 60px 35px 60px 60px;
    }
}

/* Detalle de capacitación: el sidebar pasa a desktop en lg (1024px), no en md */
@media (min-width: 1024px) {
    .acl-myaccount-sidebar--lg {
        flex-shrink: 0;
        padding: 60px 35px 60px 60px;
    }
}

/* Full-bleed: extiende el fondo gris hasta el borde izquierdo del viewport (solo desktop) */
@media (min-width: 768px) {
    .acl-myaccount-sidebar:not(.acl-myaccount-sidebar--lg)::before {
        content: '';
        position: absolute;
        inset: 0 0 0 -100vw;
        background-color: var(--grisclaro, #eeeff1);
        z-index: -1;
    }
}

@media (min-width: 1024px) {
    .acl-myaccount-sidebar--lg::before {
        content: '';
        position: absolute;
        inset: 0 0 0 -100vw;
        background-color: var(--grisclaro, #eeeff1);
        z-index: -1;
    }
}

/* Vertical divider, avatar-wrap, avatar base & badge base layout moved to Tailwind
   (my-account.php, form-edit-account.php). Avatar/badge hover states kept below. */

/* Username */
.acl-myaccount-username {
    font-size: var(--fsize-0) !important;
    font-weight: 400 !important;
    color: var(--negro, #1a1a1a) !important;
    text-align: center;
    margin-bottom: 24px !important;
}

/* Nav links, logout link — layout moved to Tailwind (!list-none, block, hover:!text-[...], etc.)
   in woocommerce/myaccount/navigation.php */

/* Content area */
.acl-myaccount-content .woocommerce-MyAccount-content {
    max-width: 560px;
}
.acl-myaccount-content h1 {
    margin-bottom: 40px;
}

/* Reset WC form wrappers inside account */
.acl-myaccount-content .woocommerce-EditAccountForm {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.acl-myaccount-content .woocommerce-form-row,
.acl-myaccount-content .form-row {
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.acl-myaccount-content fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* WooCommerce notices inside account content */
.acl-myaccount-content .woocommerce-error,
.acl-myaccount-content .woocommerce-message,
.acl-myaccount-content .woocommerce-info {
    margin-bottom: 24px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    list-style: none !important;
    font-size: var(--fsize-0) !important;
}
.acl-myaccount-content .woocommerce-error {
    background-color: #fff2f2 !important;
    border-left: 4px solid #e53e3e !important;
    color: #c53030 !important;
}
.acl-myaccount-content .woocommerce-message {
    background-color: #f0fdf4 !important;
    border-left: 4px solid var(--verde, #00ab92) !important;
    color: var(--negro, #1a1a1a) !important;
}

/* Capacitaciones cards */
.acl-cap-card {
    background-color: var(--grisclaro, #eeeff1);
    border-radius: 10px;
    padding: 20px;
    transition: box-shadow 0.2s;
}
.acl-cap-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* Account form wrapper max-width moved to Tailwind in form-edit-account.php */

/* Datos personales: los campos scrollean en su propio contenedor (max-h-[520px] en Tailwind);
   el avatar y el botón "Guardar cambios" quedan siempre visibles fuera del scroll. */
.acl-account-fields-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--verde, #00ab92) transparent;
}
.acl-account-fields-scroll::-webkit-scrollbar {
    width: 6px;
}
.acl-account-fields-scroll::-webkit-scrollbar-thumb {
    background-color: var(--verde, #00ab92);
    border-radius: 10px;
}
.acl-account-fields-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Edit-account: remove outer horizontal padding — inner columns manage their own */
body.woocommerce-edit-account .acl-myaccount-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Avatar column (middle column on edit-account) — padding moved to Tailwind (px-5) */
.acl-account-avatar-col .acl-myaccount-username {
    margin-bottom: 0 !important;
}

/* Clickable avatar label */
.acl-avatar-label {
    cursor: pointer;
    display: block;
}
.acl-avatar-label:hover .acl-myaccount-avatar {
    opacity: 0.85;
    transition: opacity 0.2s;
}
.acl-avatar-label:hover .acl-myaccount-avatar-badge {
    background-color: var(--verdedark, #008077) !important;
}

/* Crop modal overlay */
.acl-crop-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
}
.acl-crop-modal-box {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Circular cropbox */
.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}
.cropper-view-box {
    outline: 2px solid var(--verde, #00ab92);
    outline-color: var(--verde, #00ab92);
}

/*--------------------------------------------------------------
# WooCommerce Overrides
--------------------------------------------------------------*/

/* WC blocktheme CSS impone max-width: 1000px en account pages — lo eliminamos
   para que .acl-myaccount-page maneje el centrado con max-w-[1440px] */
.woocommerce-account main .woocommerce,
.woocommerce-edit-account main .woocommerce {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*--------------------------------------------------------------
# WordPress Core Resets
--------------------------------------------------------------*/

.wp-block-group {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}