/**
 * Estilos del frontend — Botón shortcode y modal de solicitud.
 *
 * Paleta de colores del proyecto:
 *   --wpft-green-dark  : #155728  (principal — botones, acentos)
 *   --wpft-green-light : #669F30  (secundario — hover, badges)
 *   --wpft-white       : #FFFFFF  (fondos, texto sobre verde)
 *
 * Metodología: BEM simplificado con prefijo wpft- para evitar
 * colisiones con los estilos del tema de WordPress.
 * Se usa !important y alta especificidad en selectores críticos
 * para prevenir sobreescritura por temas de WooCommerce.
 *
 * @package WPFichasTecnicas
 * @since   1.0.0
 */

/* ============================================================
   VARIABLES CSS — SSOT de la paleta del proyecto
   ============================================================ */
:root {
    --wpft-green-dark  : #155728;
    --wpft-green-light : #669F30;
    --wpft-white       : #ffffff;
    --wpft-green-hover : #0f3d1c;
    --wpft-green-focus : rgba(21, 87, 40, 0.25);
    --wpft-radius      : 0.5rem;
    --wpft-transition  : 0.2s ease-in-out;
}

/* ============================================================
   BOTÓN TRIGGER DEL SHORTCODE
   Alta especificidad para ganarle al tema del sitio.
   ============================================================ */

body .wpft-shortcode-wrap .wpft-btn-trigger,
body .wpft-btn-trigger {
    display          : inline-flex !important;
    align-items      : center !important;
    gap              : 0.5rem !important;
    padding          : 0.65rem 1.4rem !important;
    background-color : #155728 !important;
    color            : #ffffff !important;
    border           : 2px solid #155728 !important;
    border-radius    : 0.5rem !important;
    font-size        : 2.2rem !important;
    font-weight      : 600 !important;
    cursor           : pointer !important;
    text-decoration  : none !important;
    line-height      : 1.2 !important;
    box-shadow       : none !important;
    transition       : background-color 0.2s ease-in-out,
                       border-color 0.2s ease-in-out,
                       transform 0.2s ease-in-out,
                       box-shadow 0.2s ease-in-out !important;
}

body .wpft-shortcode-wrap .wpft-btn-trigger:hover,
body .wpft-shortcode-wrap .wpft-btn-trigger:focus-visible,
body .wpft-btn-trigger:hover,
body .wpft-btn-trigger:focus-visible {
    background-color : #0f3d1c !important;
    border-color     : #0f3d1c !important;
    color            : #ffffff !important;
    transform        : translateY(-1px) !important;
    box-shadow       : 0 4px 12px rgba(21, 87, 40, 0.3) !important;
    text-decoration  : none !important;
}

body .wpft-btn-trigger:active {
    transform  : translateY(0) !important;
    box-shadow : none !important;
}

body .wpft-btn-trigger:disabled,
body .wpft-btn-trigger[disabled] {
    opacity        : 0.65 !important;
    cursor         : not-allowed !important;
    transform      : none !important;
    box-shadow     : none !important;
    pointer-events : none !important;
}

body .wpft-btn-trigger .wpft-btn-icon {
    font-size   : 1rem !important;
    flex-shrink : 0 !important;
}

/* ============================================================
   MODAL DE SOLICITUD — Resetear estilos del tema
   ============================================================ */

/* Ocultar el modal por defecto — el tema puede interferir */
body div.modal.fade:not(.show)#wpft-modal,
body div[id^="wpft-modal-"].modal.fade:not(.show) {
    display    : none !important;
    visibility : hidden !important;
    opacity    : 0 !important;
}

/* Cabecera del modal */
body div[id^="wpft-modal-"] .modal-header,
body #wpft-modal .modal-header {
    background-color : #155728 !important;
    color            : #ffffff !important;
    border-radius    : 0.5rem 0.5rem 0 0 !important;
    padding          : 1rem 1.25rem !important;
    border-bottom    : none !important;
}

body div[id^="wpft-modal-"] .modal-header .modal-title,
body #wpft-modal .modal-header .modal-title {
    font-weight : 600 !important;
    font-size   : 1.05rem !important;
    display     : flex !important;
    align-items : center !important;
    gap         : 0.5rem !important;
    color       : #ffffff !important;
}

/* Resetear color de íconos y enlaces dentro del header */
body div[id^="wpft-modal-"] .modal-header i,
body div[id^="wpft-modal-"] .modal-header a,
body #wpft-modal .modal-header i,
body #wpft-modal .modal-header a {
    color : #ffffff !important;
}

/* Botón de cierre — blanco sobre verde */
body div[id^="wpft-modal-"] .modal-header .btn-close,
body #wpft-modal .modal-header .btn-close {
    filter  : invert(1) grayscale(100%) brightness(200%) !important;
    opacity : 0.85 !important;
    background-color: transparent !important;
    border-style: none !important;
}

/* Cuerpo del modal — resetear estilos del tema */
body div[id^="wpft-modal-"] .modal-body,
body #wpft-modal .modal-body {
    padding          : 1.5rem 1.25rem !important;
    background-color : #ffffff !important;
    color            : #212529 !important;
}

/* Footer del modal */
body div[id^="wpft-modal-"] .modal-footer,
body #wpft-modal .modal-footer {
    border-top       : 1px solid #e9ecef !important;
    padding          : 0.875rem 1.25rem !important;
    gap              : 0.5rem !important;
    background-color : #ffffff !important;
}

/* ============================================================
   CAMPO DE EMAIL — Resetear estilos del tema
   ============================================================ */

body div[id^="wpft-modal-"] #wpft-email,
body #wpft-modal #wpft-email {
    border-radius    : 0.5rem !important;
    border           : 1.5px solid #ced4da !important;
    padding          : 0.6rem 0.875rem !important;
    font-size        : 0.95rem !important;
    background-color : #ffffff !important;
    color            : #212529 !important;
    box-shadow       : none !important;
    width            : 100% !important;
    transition       : border-color 0.2s ease-in-out,
                       box-shadow 0.2s ease-in-out !important;
}

body div[id^="wpft-modal-"] #wpft-email:focus,
body #wpft-modal #wpft-email:focus {
    border-color : #155728 !important;
    box-shadow   : 0 0 0 0.2rem rgba(21, 87, 40, 0.25) !important;
    outline      : none !important;
}

body div[id^="wpft-modal-"] #wpft-email.is-valid,
body #wpft-modal #wpft-email.is-valid {
    border-color : #669F30 !important;
}

body div[id^="wpft-modal-"] #wpft-email.is-invalid,
body #wpft-modal #wpft-email.is-invalid {
    border-color : #dc3545 !important;
}

/* Label del campo email */
body div[id^="wpft-modal-"] label[for^="wpft-email"],
body #wpft-modal label[for="wpft-email"] {
    font-weight   : 500 !important;
    font-size     : 0.9rem !important;
    color         : #495057 !important;
    margin-bottom : 0.4rem !important;
}

/* ============================================================
   BOTÓN DE ENVÍO — Resetear estilos del tema
   ============================================================ */

body div[id^="wpft-modal-"] #wpft-submit-btn,
body #wpft-modal #wpft-submit-btn {
    background-color : #155728 !important;
    border-color     : #155728 !important;
    color            : #ffffff !important;
    font-weight      : 600 !important;
    font-size        : 1.4rem !important;
    padding          : 0.6rem 1.5rem !important;
    border-radius    : 0.5rem !important;
    min-width        : 140px !important;
    display          : inline-flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    gap              : 0.4rem !important;
    transition       : background-color 0.2s ease-in-out,
                       border-color 0.2s ease-in-out,
                       opacity 0.2s ease-in-out !important;
}

body div[id^="wpft-modal-"] #wpft-submit-btn:hover:not(:disabled),
body #wpft-modal #wpft-submit-btn:hover:not(:disabled) {
    background-color : #0f3d1c !important;
    border-color     : #0f3d1c !important;
}

body div[id^="wpft-modal-"] #wpft-submit-btn:disabled,
body #wpft-modal #wpft-submit-btn:disabled {
    opacity        : 0.75 !important;
    cursor         : not-allowed !important;
    pointer-events : none !important;
}

/* Botón cancelar */
body div[id^="wpft-modal-"] .modal-footer .btn-outline-secondary,
body #wpft-modal .modal-footer .btn-outline-secondary {
    color        : #6c757d !important;
    border-color : #6c757d !important;
    background   : transparent !important;
    border-radius: 0.5rem !important;
    font-sze: 1rem !important;
}

body div[id^="wpft-modal-"] .modal-footer .btn-outline-secondary:hover,
body #wpft-modal .modal-footer .btn-outline-secondary:hover {
    background-color : #6c757d !important;
    color            : #ffffff !important;
}

body button.btn-close-alert {
    background-color: transparent !important;
    border: none !important;
    top: 5px !important;
    right: 5px !important;
}

/* ============================================================
   SPINNER DE CARGA
   ============================================================ */

body div[id^="wpft-modal-"] .wpft-spinner,
body #wpft-modal .wpft-spinner {
    width        : 1rem !important;
    height       : 1rem !important;
    border-width : 0.15em !important;
}

/* ============================================================
   TEXTO INFORMATIVO DEL MODAL
   ============================================================ */

body div[id^="wpft-modal-"] .wpft-modal-info,
body #wpft-modal .wpft-modal-info {
    font-size   : 0.85rem !important;
    color       : #6c757d !important;
    margin-top  : 0.5rem !important;
    line-height : 1.5 !important;
}

body div[id^="wpft-modal-"] .wpft-modal-info i,
body #wpft-modal .wpft-modal-info i {
    color : #669F30 !important;
}

/* ============================================================
   SECCIÓN DE FICHA TÉCNICA
   ============================================================ */

body .wpft-ficha-section {
    display          : flex !important;
    flex-direction   : column !important;
    align-items      : center !important;
    justify-content  : center !important;
    text-align       : center !important;
    gap              : 1.25rem !important;
    background-color : #f8faf5 !important;
    border-radius    : 0.5rem !important;
    padding          : 2rem 1.5rem !important;
    margin           : 1.5rem 0 !important;
    width            : 100% !important;
}

body .wpft-ficha-section__header {
    display        : flex !important;
    flex-direction : column !important;
    align-items    : center !important;
    gap            : 1rem !important;
    width          : 100% !important;
}

body .wpft-ficha-section__icon {
    display          : flex !important;
    align-items      : center !important;
    justify-content  : center !important;
    width            : 64px !important;
    height           : 64px !important;
    background-color : #155728 !important;
    border-radius    : 50% !important;
    flex-shrink      : 0 !important;
    margin           : 0 auto !important;
}

body .wpft-ficha-section__icon i {
    font-size : 1.75rem !important;
    color     : #ffffff !important;
}

body .wpft-ficha-section__text {
    display        : flex !important;
    flex-direction : column !important;
    align-items    : center !important;
    gap            : 0.5rem !important;
}

body .wpft-ficha-section__title {
    font-size   : 2.5rem !important;
    font-weight : 700 !important;
    color       : #155728 !important;
    margin      : 0 !important;
    padding     : 0 !important;
    line-height : 1.2 !important;
}

body .wpft-ficha-section__desc {
    font-size   : 0.95rem !important;
    color       : #6c757d !important;
    margin      : 0 !important;
    padding     : 0 !important;
    line-height : 1.5 !important;
}

body .wpft-ficha-section__action {
    flex-shrink : 0 !important;
    margin-top  : 0.25rem !important;
}
/* ============================================================
   RESPONSIVE — Ajustes para móviles
   ============================================================ */

@media ( max-width: 576px ) {
    body .wpft-btn-trigger {
        width           : 100% !important;
        justify-content : center !important;
    }

    body div[id^="wpft-modal-"] .modal-footer,
    body #wpft-modal .modal-footer {
        flex-direction : column-reverse !important;
    }

    body div[id^="wpft-modal-"] .modal-footer .btn,
    body #wpft-modal .modal-footer .btn {
        width : 100% !important;
    }
    
    body .wpft-ficha-section__title {
        font-size : 1.35rem !important;
    }

    body .wpft-ficha-section__action .wpft-btn-trigger {
        width           : 100% !important;
        justify-content : center !important;
    }
}