/* 
 * Modern WordPress jQuery UI Override
 * Utiliza las variables nativas de WordPress para unificar el diseño.
 */

:root {
    /* 
     * ESTRATEGIA HÍBRIDA 
     * Intenta usar la variable de WordPress. 
     * Si no existe (ej. en frontend sin tema bloque), usa el fallback (valor por defecto).
     */

    /* Colores Principales */
    --jui-wp-primary: #2271b1;
    --jui-wp-primary-hover: #135e96;
    
    /* Colores Secundarios (Tu ejemplo) */
    --jui-wp-secondary: #eba501;
    
    /* Fondos y Texto */
    --jui-wp-bg: #fff;
    --jui-wp-bg-alt: #f0f0f1;
    --jui-wp-text: #3c434a;
    
    /* Bordes y UI */
    --jui-wp-border: #8c8f94;
    --jui-wp-radius: 4px;
    --jui-wp-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --jui-wp-shadow-modal: 0 3px 6px rgba(0,0,0,0.15);
}
/* :root {
    --jui-wp-primary: var(--wp--preset--color--primary, var(--wp-admin-theme-color, #2271b1));
    --jui-wp-primary-hover: var(--wp--preset--color--primary, var(--wp-admin-theme-color-darker-10, #135e96));
    
    --jui-wp-secondary: var(--wp--preset--color--secondary, #eba501);
    
    --jui-wp-bg: var(--wp--preset--color--base, var(--wp-admin-page-background-color, #fff));
    --jui-wp-bg-alt: var(--wp--preset--color--tertiary, var(--wp-admin-page-background-alt, #f0f0f1));
    --jui-wp-text: var(--wp--preset--color--contrast, var(--wp-admin-body-text, #3c434a));
    
    --jui-wp-border: var(--wp--preset--color--contrast-2, #8c8f94);
    --jui-wp-radius: 4px;
    --jui-wp-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --jui-wp-shadow-modal: 0 3px 6px rgba(0,0,0,0.15);
} */

/* --- Reset General y Tipografía --- */
.ui-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 13px !important;
    color: var(--jui-wp-text);
    background-color: var(--jui-wp-bg);
}

/* Eliminar degradados antiguos en todos los estados */
.ui-widget, .ui-widget-content, .ui-widget-header {
    background-image: none !important;
    background-color: var(--jui-wp-bg);
    border: 1px solid var(--jui-wp-border);
}

/* --- Botones (Buttons) --- */
.ui-button {
    background: var(--jui-wp-bg) !important;
    color: var(--jui-wp-text) !important;
    border: 1px solid #2271b1 !important; /* Borde azul WP */
    border-radius: var(--jui-wp-radius) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.1s ease-in-out;
    padding: 6px 12px !important;
    cursor: pointer;
}

.ui-button:hover {
    background: var(--jui-wp-primary-hover) !important;
    border-color: var(--jui-wp-primary-hover) !important;
    color: #fff !important;
    text-decoration: none;
}

.ui-button.ui-state-active, 
.ui-button.ui-state-focus {
    background: var(--jui-wp-primary) !important;
    border-color: var(--jui-wp-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px var(--jui-wp-primary) !important; /* Anillo de foco WP */
}

/* Botón Primario (Clase helper) */
.ui-button-primary {
    background: var(--jui-wp-primary) !important;
    color: #fff !important;
    border-color: var(--jui-wp-primary) !important;
}
.ui-button-primary:hover {
    background: var(--jui-wp-primary-hover) !important;
    border-color: var(--jui-wp-primary-hover) !important;
}

/* --- Encabezados de Widgets (Headers) --- */
.ui-widget-header {
    background-color: var(--jui-wp-bg-alt) !important; /* Gris suave WP */
    color: var(--jui-wp-text) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--jui-wp-border) !important;
    border-radius: var(--jui-wp-radius) var(--jui-wp-radius) 0 0 !important;
}

/* --- Diálogos (Modals) --- */
.ui-dialog {
    padding: 0 !important;
    border: 1px solid #c3c4c7 !important;
    border-radius: var(--jui-wp-radius) !important;
    box-shadow: var(--jui-wp-shadow-modal) !important;
    background: var(--jui-wp-bg) !important;
}

.ui-dialog-titlebar {
    background: var(--jui-wp-bg) !important;
    border-bottom: 1px solid #dcdcde !important;
    border-radius: var(--jui-wp-radius) var(--jui-wp-radius) 0 0 !important;
    padding: 12px 16px !important;
}

.ui-dialog-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #1d2327 !important;
}

.ui-dialog-content {
    padding: 16px !important;
    color: var(--jui-wp-text);
}

.ui-dialog-buttonpane {
    background: var(--jui-wp-bg-alt) !important;
    border-top: 1px solid #dcdcde !important;
    padding: 12px 16px !important;
    border-radius: 0 0 var(--jui-wp-radius) var(--jui-wp-radius) !important;
}

/* Icono de cerrar (X) moderno */
.ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    top: 50% !important;
    margin-top: -15px !important;
    right: 0 !important;
    opacity: 0.6;
}
.ui-dialog-titlebar-close:hover {
    opacity: 1;
    background: #f0f0f1 !important;
}
.ui-dialog-titlebar-close .ui-icon-closethick {
    /* Truco para centrar el sprite antiguo si es necesario, 
       idealmente reemplazar con SVG o Dashicon */
    top: 50% !important; 
    left: 50% !important;
    margin: -8px 0 0 -8px !important; 
}

/* --- Pestañas (Tabs) --- */
.ui-tabs {
    border: none !important;
    background: transparent !important;
}

.ui-tabs-nav {
    border-bottom: 1px solid #dcdcde !important;
    background: transparent !important;
    padding-left: 0 !important;
}

.ui-tabs-nav li {
    border: none !important;
    background: transparent !important;
    margin: 0 4px -1px 0 !important;
    top: 1px !important;
}

.ui-tabs-nav li a {
    color: var(--jui-wp-text) !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: var(--jui-wp-radius) var(--jui-wp-radius) 0 0 !important;
    padding: 8px 12px !important;
}

.ui-tabs-nav li.ui-tabs-active a {
    background: var(--jui-wp-bg) !important;
    color: var(--jui-wp-primary) !important;
    border-color: #dcdcde #dcdcde var(--jui-wp-bg) #dcdcde !important;
    border-bottom: 2px solid var(--jui-wp-bg) !important; /* Truco visual */
}

.ui-tabs-nav li a:hover {
    background: var(--jui-wp-bg-alt) !important;
    border-color: #dcdcde !important;
    color: var(--jui-wp-primary-hover) !important;
}

.ui-tabs-panel {
    border: 1px solid #dcdcde !important;
    border-top: none !important;
    border-radius: 0 0 var(--jui-wp-radius) var(--jui-wp-radius) !important;
    background: var(--jui-wp-bg) !important;
    padding: 16px !important;
}

/* --- Inputs y Formularios --- */
.ui-widget input, 
.ui-widget select, 
.ui-widget textarea {
    font-family: inherit !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 transparent !important;
    transition: box-shadow 0.1s linear;
    background: #fff !important;
    color: #2c3338 !important;
}

.ui-widget input:focus, 
.ui-widget select:focus, 
.ui-widget textarea:focus {
    border-color: var(--jui-wp-primary) !important;
    box-shadow: 0 0 0 1px var(--jui-wp-primary) !important;
    outline: 2px solid transparent !important;
}

/* --- Tooltip --- */
.ui-tooltip {
    padding: 8px 12px !important;
    background: #1d2327 !important; /* Fondo oscuro WP */
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: var(--jui-wp-shadow) !important;
    font-size: 13px !important;
    z-index: 999999 !important;
}
.ui-tooltip-content {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* --- Acordeón (Accordion) --- */
.ui-accordion-header {
    background: var(--jui-wp-bg-alt) !important;
    border: 1px solid #dcdcde !important;
    color: var(--jui-wp-text) !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}
.ui-accordion-header:first-child {
    border-top-left-radius: var(--jui-wp-radius) !important;
    border-top-right-radius: var(--jui-wp-radius) !important;
}
.ui-accordion-header.ui-state-active {
    background: var(--jui-wp-bg) !important;
    border-bottom: 1px solid #dcdcde !important;
    color: var(--jui-wp-primary) !important;
}
.ui-accordion-content {
    border: 1px solid #dcdcde !important;
    border-top: none !important;
    background: var(--jui-wp-bg) !important;
    padding: 12px 16px !important;
}
.ui-accordion-content:last-child {
    border-bottom-left-radius: var(--jui-wp-radius) !important;
    border-bottom-right-radius: var(--jui-wp-radius) !important;
}