/**
 * Estilos del Sistema de Confirmación - Frontend
 * 
 * @package ObjetecaPuntos
 * @version 2.1.9
 * @since 2.0.0
 * 
 * Estructura:
 * 1. Variables y Reset
 * 2. Notificaciones Toast
 * 3. Confirmaciones Inline
 * 4. Sistema de Códigos
 * 5. Sistema de Email
 * 6. Shortcode: Marcar Completado
 * 7. Shortcode: Confirmar Recepción
 * 8. Utilidades y Responsive
 * 9. Loading Overlay
 * 
 * Nota: Este archivo se complementa con CSS dinámico para personalizaciones
 */

/* =====================================================
   VARIABLES Y RESET
   ===================================================== */

.objeteca-confirmacion {
    /* Los colores personalizados se cargan dinámicamente */
    box-sizing: border-box;
}

.objeteca-confirmacion *,
.objeteca-confirmacion *:before,
.objeteca-confirmacion *:after {
    box-sizing: inherit;
}

/* Fix específico para el fondo azul del párrafo inicial */
.objeteca-marcar-completado > p:first-child {
    background: transparent !important;
    background-color: transparent !important;
}

/* =====================================================
   NOTIFICACIONES TOAST
   ===================================================== */

#objeteca-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

.objeteca-toast {
    background: #333;
    color: white;
    padding: 16px 24px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 300px;
    max-width: 500px;
    pointer-events: all;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

.objeteca-toast.show {
    transform: translateX(0);
}

.objeteca-toast-message {
    flex: 1;
    margin-right: 10px;
}

.objeteca-toast-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.objeteca-toast-close:hover {
    opacity: 1;
}

/* Tipos de toast */
.objeteca-toast-success {
    background: #4caf50;
}

.objeteca-toast-error {
    background: #f44336;
}

.objeteca-toast-warning {
    background: #ff9800;
}

.objeteca-toast-info {
    background: #2196f3;
}

/* =====================================================
   CONFIRMACIONES INLINE
   ===================================================== */

.objeteca-inline-confirmation {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
    color: #856404;
}

.objeteca-inline-confirmation p {
    margin: 0 0 15px 0;
    font-weight: 500;
}

.objeteca-confirmation-buttons {
    display: flex;
    gap: 10px;
}

.objeteca-confirmation-buttons button {
    margin: 0;
}

/* Confirmación simple para marcar completado */
.objeteca-simple-confirm {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    color: #856404;
    text-align: center;
}

.objeteca-simple-confirm p {
    margin: 0 0 15px 0;
    font-weight: 500;
    background: transparent;
    padding: 0;
}

.objeteca-simple-confirm button {
    margin: 0 5px;
}

/* =====================================================
   SISTEMA DE CÓDIGOS
   ===================================================== */

.objeteca-codigo-box {
    background: #f0f8ff;
    border: 2px solid #4a90e2;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.objeteca-codigo-box h4 {
    margin: 0 0 15px 0;
    color: #2c5282;
    font-size: 18px;
}

.objeteca-codigo-display {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.objeteca-codigo-display code {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    color: #1a73e8;
    letter-spacing: 2px;
    flex: 1;
}

.objeteca-codigo-display button {
    background: #1a73e8;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.objeteca-codigo-display button:hover {
    background: #1557b0;
}



/* =====================================================
   BLOQUES DE EXPLICACIÓN
   ===================================================== */

/* Contenedor de explicación con estilo por defecto */
.objeteca-explicacion {
    background-color: #e7f3ff; /* Azul claro por defecto */
    border-left: 4px solid #2271b1; /* Borde azul oscuro */
    padding: 15px 40px;
    margin: 0 0 20px 0;
    border-radius: 4px 4px 4px 4px;
    /* Evitar transiciones que causen el retraso */
    transition: none !important;
}

/* Párrafo dentro de la explicación */
.objeteca-explicacion p {
    margin: 0;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: #1d2327;
    /* Evitar que herede cualquier fondo */
    background-image: none !important;
}

/* Prevenir parpadeo en la carga */
.objeteca-marcar-completado .objeteca-explicacion {
    opacity: 1 !important;
    visibility: visible !important;
}


/* =====================================================
   SISTEMA DE EMAIL
   ===================================================== */

.objeteca-email-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.objeteca-email-section h4 {
    margin: 0 0 10px 0;
    color: #263238;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.objeteca-email-section h4::before {
    content: "📧";
    font-size: 18px;
}

.objeteca-email-section .email-explicacion {
    margin: 0 0 15px 0;
    color: #455a64;
    font-size: 13px;
    line-height: 1.4;
}

/* Formulario de email */
.objeteca-email-form {
    display: block;
}

.objeteca-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.objeteca-field {
    display: flex;
    flex-direction: column;
}

.objeteca-field label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #37474f;
    font-size: 13px;
}

.objeteca-field input {
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.objeteca-field input:focus {
    border-color: #00bcd4;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
}

.objeteca-field input.error {
    border-color: #f44336;
    background: #fff5f5;
}

.objeteca-field input.error:focus {
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

/* Botón de envío de email */
.objeteca-form-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.objeteca-btn-enviar-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px !important;
    background: #00bcd4;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.objeteca-btn-enviar-email:hover:not(:disabled) {
    background: #00acc1;
    color: white;
    /* transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 188, 212, 0.3);*/
}

.objeteca-btn-enviar-email:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.objeteca-btn-enviar-email .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Estados del envío de email */
.objeteca-email-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #607d8b;
    font-size: 13px;
}

.objeteca-email-loading .spinner {
    float: none;
    margin: 0;
}

/* Resultado del envío de email */
.objeteca-email-resultado {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 4px;
    border: 1px solid;
    display: none;
}

.objeteca-email-resultado p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.objeteca-email-resultado strong {
    font-weight: bold;
}

/* Estados de resultado */
.objeteca-email-resultado.objeteca-email-success {
    background: #e8f5e8;
    border-color: #4caf50;
    color: #2e7d32;
}

.objeteca-email-resultado.objeteca-email-error {
    background: #ffebee;
    border-color: #f44336;
    color: #c62828;
}

/* Botón después de envío exitoso */
.objeteca-btn-enviar-email.button-primary {
    background: #4caf50;
    border-color: #4caf50;
}

.objeteca-btn-enviar-email.button-primary:hover {
    background: #45a049;
    border-color: #45a049;
}

/* Instrucciones del código */
.objeteca-instrucciones-codigo {
    margin: 20px 0;
}

.objeteca-instrucciones-codigo .instruccion-principal {
    font-weight: bold;
    margin-bottom: 10px;
    color: #1d2327;
}

.objeteca-instrucciones-codigo .instruccion-detalle {
    font-size: 14px;
    color: #646970;
    margin: 0;
}

/* Estados de transacción */
.objeteca-confirmado-ok {
    color: var(--objeteca-confirmado-text, #00a32a);
    font-weight: bold;
    margin-top: 20px;
    padding: 15px;
    background: var(--objeteca-confirmado-bg, #f0f9ff);
    border: 1px solid var(--objeteca-confirmado-border, #00a32a);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.objeteca-esperando-confirmacion {
    color: var(--objeteca-esperando-text, #f56e28);
    font-weight: bold;
    margin-top: 20px;
    padding: 15px;
    background: var(--objeteca-esperando-bg, #fff8e1);
    border: 1px solid var(--objeteca-esperando-border, #f56e28);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón principal */
.objeteca-accion-completar {
    text-align: center;
}

.objeteca-btn-completar {
    font-size: 16px;
    padding: 12px 30px;
}

.objeteca-loading {
    margin-top: 15px;
    color: #646970;
}

/* =====================================================
   SHORTCODE: CONFIRMAR RECEPCIÓN
   ===================================================== */

.objeteca-confirmar-recepcion {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Header del formulario */
.objeteca-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}

.objeteca-header h2 {
    color: #343a40;
    margin: 0 0 10px 0;
    font-size: 28px;
    font-weight: 600;
}

.objeteca-header p {
    color: #6c757d;
    margin: 0;
    font-size: 16px;
}

/* Formulario de código */
#objeteca-form-codigo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.objeteca-form-group {
    display: flex;
    flex-direction: column;
}

.objeteca-form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
    font-size: 16px;
}

#objeteca-codigo {
    padding: 15px;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid #ced4da;
    border-radius: 6px;
    background: white;
    transition: all 0.3s;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

#objeteca-codigo:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

#objeteca-codigo::placeholder {
    color: #adb5bd;
    font-weight: normal;
    letter-spacing: normal;
}

/* Botón de confirmación */
.objeteca-btn-confirmar {
    background: #007cba;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.objeteca-btn-confirmar:hover:not(:disabled) {
    background: #005a87;
    transform: translateY(-2px);
    /*box-shadow: 0 4px 8px rgba(0,0,0,0.15);*/
}

.objeteca-btn-confirmar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Resultado de confirmación */
.objeteca-resultado {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 6px;
    display: none;
    animation: fadeIn 0.3s ease;
}

.objeteca-resultado.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.objeteca-resultado.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.objeteca-resultado.info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.objeteca-resultado strong {
    display: block;
    margin-bottom: 5px;
}

/* =====================================================
   SHORTCODE: MARCAR COMPLETADO
   ===================================================== */

.objeteca-marcar-completado {
    text-align: center;
    margin: 20px 0;
}

.objeteca-btn-marcar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--objeteca-boton-bg, #0073aa);
    color: var(--objeteca-boton-text, #ffffff) !important;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none !important;
}

.objeteca-btn-marcar:hover {
    background: var(--objeteca-boton-hover, #005177);
    transform: translateY(-2px);
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.15);*/
    color: var(--objeteca-boton-text, #ffffff) !important;
}

.objeteca-btn-marcar .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* =====================================================
   UTILIDADES Y RESPONSIVE
   ===================================================== */

/* Spinner de WordPress */
.spinner {
    float: left;
    margin: 0;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    #objeteca-toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .objeteca-toast {
        min-width: auto;
        max-width: none;
    }
    
    .objeteca-form-row {
        grid-template-columns: 1fr;
    }
    
    .objeteca-confirmar-recepcion {
        margin: 20px;
        padding: 20px;
    }
    
    .objeteca-header h2 {
        font-size: 24px;
    }
    
    #objeteca-codigo {
        font-size: 18px;
        padding: 12px;
    }
    
    .objeteca-confirmation-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .objeteca-confirmation-buttons button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .objeteca-email-section {
        padding: 15px;
    }
    
    .objeteca-btn-enviar-email {
        font-size: 13px;
        padding: 8px 16px !important;
    }
    
    .objeteca-codigo-display {
        flex-direction: column;
        text-align: center;
    }
    
    .objeteca-codigo-display button {
        width: 100%;
    }
}

/* =====================================================
   LOADING OVERLAY
   ===================================================== */

#objeteca-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

#objeteca-loading-overlay > div {
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#objeteca-loading-overlay .spinner {
    float: none;
    margin: 0;
    visibility: visible;
}

#objeteca-loading-overlay .spinner.is-active {
    animation: spin 1s linear infinite;
}

#objeteca-loading-message {
    font-size: 16px;
    font-weight: normal;
}

/* Animación del spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive para overlay */
@media (max-width: 768px) {
    #objeteca-loading-overlay {
        font-size: 16px;
    }
    
    #objeteca-loading-overlay > div {
        padding: 15px;
        margin: 20px;
    }
    
    #objeteca-loading-message {
        font-size: 14px;
    }
}

/* Asegurar que el overlay esté por encima de todo */
body.objeteca-loading-active {
    overflow: hidden;
}


/* =====================================================
   ESTILOS GLOBALES PARA BOTONES CORPORATIVOS
   ===================================================== */

/* Todos los botones del plugin */
.objeteca-btn-marcar,
.objeteca-btn-completar,
.objeteca-btn-confirmar,
.objeteca-codigo-display button,
.objeteca-input-group button[type="submit"],
.objeteca-simple-confirm button.button-primary,
.objeteca-confirmation-buttons button.button-primary,
button[class*="objeteca-btn"],
.objeteca-confirmacion button[type="submit"],
.objeteca-confirmacion .button-primary {
    background: var(--objeteca-boton-bg, #000000) !important;
    background-color: var(--objeteca-boton-bg, #000000) !important;
    color: var(--objeteca-boton-text, #FFFFFF) !important;
    border: none !important;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none !important;
    border-radius: 4px;
}

/* Hover para todos los botones */
.objeteca-btn-marcar:hover,
.objeteca-btn-completar:hover,
.objeteca-btn-confirmar:hover,
.objeteca-codigo-display button:hover,
.objeteca-input-group button[type="submit"]:hover,
.objeteca-simple-confirm button.button-primary:hover,
.objeteca-confirmation-buttons button.button-primary:hover,
button[class*="objeteca-btn"]:hover,
.objeteca-confirmacion button[type="submit"]:hover,
.objeteca-confirmacion .button-primary:hover {
    background: var(--objeteca-boton-hover-bg, #AFE0E8) !important;
    background-color: var(--objeteca-boton-hover-bg, #AFE0E8) !important;
    color: var(--objeteca-boton-hover-text, #000000) !important;
}

/* Estados deshabilitados */
.objeteca-btn-marcar:disabled,
.objeteca-btn-completar:disabled,
.objeteca-btn-confirmar:disabled,
.objeteca-codigo-display button:disabled,
.objeteca-input-group button[type="submit"]:disabled,
button[class*="objeteca-btn"]:disabled,
.objeteca-confirmacion button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: var(--objeteca-boton-disabled-bg, #666666) !important;
    color: var(--objeteca-boton-disabled-text, #CCCCCC) !important;
}

/* Botones secundarios (cancelar, etc) */
.objeteca-simple-confirm button.button-secondary,
.objeteca-confirmation-buttons button.button-secondary,
.objeteca-confirmacion .button-secondary {
    background: var(--objeteca-gris-claro, #F8F7F6) !important;
    color: var(--objeteca-boton-bg, #000000) !important;
    border: 1px solid var(--objeteca-boton-bg, #000000) !important;
}

.objeteca-simple-confirm button.button-secondary:hover,
.objeteca-confirmation-buttons button.button-secondary:hover,
.objeteca-confirmacion .button-secondary:hover {
    background: var(--objeteca-gris-oscuro, #F1F0EE) !important;
    color: var(--objeteca-boton-bg, #000000) !important;
    border-color: var(--objeteca-boton-bg, #000000) !important;
}

/* =====================================================
   TOAST CON COLORES CORPORATIVOS
   ===================================================== */

/* Reemplazar los estilos de toast existentes */
.objeteca-toast-success {
    background: var(--objeteca-toast-success-bg, #B4D0AE) !important;
    color: var(--objeteca-toast-success-text, #000000) !important;
    border-left: 4px solid var(--objeteca-toast-success-border, #22543d) !important;
}

.objeteca-toast-error {
    background: var(--objeteca-toast-error-bg, #F7C7B6) !important;
    color: var(--objeteca-toast-error-text, #000000) !important;
    border-left: 4px solid var(--objeteca-toast-error-border, #9b2c2c) !important;
}

.objeteca-toast-warning {
    background: var(--objeteca-toast-warning-bg, #FDD687) !important;
    color: var(--objeteca-toast-warning-text, #000000) !important;
    border-left: 4px solid var(--objeteca-toast-warning-border, #744210) !important;
}

.objeteca-toast-info {
    background: var(--objeteca-toast-info-bg, #AFE0E8) !important;
    color: var(--objeteca-toast-info-text, #000000) !important;
    border-left: 4px solid var(--objeteca-toast-info-border, #2c5282) !important;
}

/* Asegurar que el botón de cerrar sea visible */
.objeteca-toast-close {
    color: currentColor !important;
    opacity: 0.7;
}

.objeteca-toast-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
}

/* =====================================================
   AJUSTES ESPECÍFICOS PARA FORMULARIOS
   ===================================================== */

/* Botón de enviar email */
#objeteca-email-form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
}

/* Botón de copiar código */
.objeteca-codigo-display button {
    background: var(--objeteca-boton-bg, #000000) !important;
    color: var(--objeteca-boton-text, #FFFFFF) !important;  /* AÑADIR ESTA LÍNEA */
    min-width: 120px;
}

.objeteca-codigo-display button:hover {
    background: var(--objeteca-boton-hover-bg, #AFE0E8) !important;
    color: var(--objeteca-boton-hover-text, #000000) !important;
}

/* =====================================================
   MEJORAS DE ACCESIBILIDAD
   ===================================================== */

/* Focus visible para todos los botones */
.objeteca-confirmacion button:focus,
.objeteca-confirmacion .button:focus,
button[class*="objeteca-btn"]:focus {
    outline: 2px solid var(--objeteca-boton-hover-bg, #AFE0E8) !important;
    outline-offset: 2px;
}

/* Contraste mejorado en hover */
.objeteca-confirmacion button:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* =====================================================
   RESPONSIVE PARA BOTONES
   ===================================================== */

@media (max-width: 480px) {
    .objeteca-confirmacion button,
    .objeteca-confirmacion .button {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .objeteca-confirmation-buttons {
        flex-direction: column;
    }
    
    .objeteca-confirmation-buttons button {
        width: 100%;
    }
}

/* =====================================================
   FIXES ADICIONALES - AÑADIR AL FINAL DE confirmacion.css
   ===================================================== */

/* Fix: X de cierre en los toast - MÁS GRANDE Y NEGRA */
.objeteca-toast-close {
    background: rgba(255,255,255,0.8) !important;
    color: #000000 !important;
    border: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: all 0.2s !important;
    padding: 0 !important;
    margin: 0 0 0 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.objeteca-toast-close:hover {
    background: rgba(255,255,255,1) !important;
    transform: scale(1.1) !important;
}

/* Asegurar que la X sea SIEMPRE negra y grande */
.objeteca-toast-success .objeteca-toast-close,
.objeteca-toast-error .objeteca-toast-close,
.objeteca-toast-warning .objeteca-toast-close,
.objeteca-toast-info .objeteca-toast-close,
.objeteca-toast .objeteca-toast-close {
    color: #000000 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* Mejorar el contenedor del toast para mejor alineación */
.objeteca-toast {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    padding: 16px 20px 16px 24px !important;
    min-height: 60px !important;
}

.objeteca-toast-message {
    flex: 1;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* FORZAR estilo correcto del botón de copiar código */
.objeteca-codigo-box .objeteca-codigo-display button,
.objeteca-confirmacion .objeteca-codigo-display button,
div.objeteca-codigo-display button[type="button"],
.objeteca-codigo-display > button {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 8px 16px !important;
    min-width: 120px !important;
}

.objeteca-codigo-box .objeteca-codigo-display button:hover,
.objeteca-confirmacion .objeteca-codigo-display button:hover,
div.objeteca-codigo-display button[type="button"]:hover,
.objeteca-codigo-display > button:hover {
    background: #AFE0E8 !important;
    background-color: #AFE0E8 !important;
    color: #000000 !important;
}


/* =====================================================
   ESTILO SIMPLE para [objeteca_confirmar_recepcion estilo="simple"]
   Versión FINAL con todos los ajustes
   ===================================================== */

/* =====================================================
   FIX: Forzar ancho 100% del shortcode
   Añade esto al principio de tu CSS del estilo simple
   ===================================================== */

/* Contenedor principal - ancho completo */
.objeteca-confirmar-recepcion {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Específico para estilo simple */
.objeteca-confirmar-recepcion.objeteca-estilo-simple {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Asegurar que el formulario también use el ancho completo */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-form-confirmacion {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Para móviles, extra seguridad */
@media (max-width: 768px) {
    .objeteca-confirmar-recepcion,
    .objeteca-confirmar-recepcion.objeteca-estilo-simple {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* FORZAR fondos transparentes con mayor especificidad */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-explicacion,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-beneficios,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-pasos {
    background: transparent !important;
    background-color: transparent !important;
    border-left: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    border-radius: 0 !important;
}

/* TODOS los párrafos con el mismo estilo */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-explicacion p,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-beneficios p,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-pasos p,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .instruccion-principal,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .explicacion-codigo,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .pasos-lista p {
    background: transparent !important;
    background-color: transparent !important;
    color: #1d2327 !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    font-size: 1.125rem !important; /* Mismo tamaño para todos */
    font-weight: normal !important; /* Sin negritas */
    line-height: 1.6 !important;
    opacity: 1 !important;
}

/* H4 más grandes como solicitado */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-explicacion h4,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-beneficios h4,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-pasos h4 {
    margin: 0 0 15px 0 !important;
    color: #1d2327 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Añadir margen superior al formulario para separarlo */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-form-confirmacion {
    margin-top: 30px !important;
}



/* Añadir más espacio entre el input y el botón */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-input-group {
    gap: 40px !important; /* Doblado de 20px a 40px */
}

/* Botón con estilo corporativo corregido */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-btn-confirmar,
.objeteca-confirmar-recepcion.objeteca-estilo-simple button[type="submit"].objeteca-btn-confirmar {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 15px 30px !important;
    font-size: 18px !important;
    font-weight: normal !important; /* Cambiado de 600 a normal */
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important; /* Cambiado de uppercase a none */
    letter-spacing: normal !important; /* Cambiado de 1px a normal */
    display: inline-block !important;
    margin-top: 20px !important; /* Doblado de 10px a 20px */
}

/* Hover del botón - Sin sombra */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-btn-confirmar:hover,
.objeteca-confirmar-recepcion.objeteca-estilo-simple button[type="submit"].objeteca-btn-confirmar:hover,
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-btn-confirmar:hover:not(:disabled),
.objeteca-confirmar-recepcion.objeteca-estilo-simple button.objeteca-btn-confirmar:hover {
    background: #AFE0E8 !important; /* Azul corporativo */
    background-color: #AFE0E8 !important;
    color: #000000 !important; /* Letra negra */
    transform: translateY(-2px) !important;
    box-shadow: none !important; /* ELIMINADA la sombra */
}

/* Fix adicional para asegurar el hover del botón funcione */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-input-group button:hover,
.objeteca-confirmar-recepcion.objeteca-estilo-simple form button[type="submit"]:hover {
    background: #AFE0E8 !important;
    background-color: #AFE0E8 !important;
    color: #000000 !important;
    box-shadow: none !important; /* ELIMINADA la sombra */
}

/* Estado focus del botón */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-btn-confirmar:focus {
    outline: 2px solid #AFE0E8 !important;
    outline-offset: 2px !important;
}

/* Estado deshabilitado del botón */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-btn-confirmar:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    background: #666666 !important;
    color: #CCCCCC !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    
    .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-btn-confirmar {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 14px 20px !important;
    }
    
    /* H4 un poco más pequeños en móvil */
    .objeteca-confirmar-recepcion.objeteca-estilo-simple h4 {
        font-size: 18px !important;
    }
}

/* MÁXIMA ESPECIFICIDAD para asegurar que funcione */
body .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-explicacion,
body .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-beneficios,
body .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-pasos,
#page .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-explicacion,
#page .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-beneficios,
#page .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-pasos,
.entry-content .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-explicacion,
.entry-content .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-beneficios,
.entry-content .objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-pasos {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* Debug: Forzar que cualquier variable CSS sea ignorada */
.objeteca-confirmar-recepcion.objeteca-estilo-simple {
    --objeteca-explicacion-bg: transparent !important;
    --objeteca-beneficios-bg: transparent !important;
    --objeteca-pasos-bg: transparent !important;
    --objeteca-explicacion-border: transparent !important;
    --objeteca-beneficios-border: transparent !important;
    --objeteca-pasos-border: transparent !important;
}

/* Fix adicional para asegurar el hover del botón funcione */
.objeteca-confirmar-recepcion.objeteca-estilo-simple .objeteca-input-group button:hover,
.objeteca-confirmar-recepcion.objeteca-estilo-simple form button[type="submit"]:hover {
    background: #AFE0E8 !important;
    background-color: #AFE0E8 !important;
    color: #000000 !important;
}
/* FIN ESTILO SIMPLE FINAL */