/* 
 * 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: var(--wp--preset--color--primary, #2271b1);
    --jui-wp-primary-hover: var(--wp--preset--color--secondary, #135e96);
    
    /* Colores Secundarios (Tu ejemplo) */
    --jui-wp-secondary: var(--wp--preset--color--secondary, #eba501);
    
    /* Fondos y Texto */
    --jui-wp-bg: var(--wp--preset--color--lightbg, #fff);
    --jui-wp-bg-alt: var(--wp--preset--color--lightgrey, #f0f0f1);
    --jui-wp-text: var(--wp--preset--color--textonprimary, #3c434a);
    --jui-wp-textinput: var(--wp--preset--color--inputtext, #2c3338);
    
    /* Bordes y UI */
    --jui-wp-border: var(--wp--preset--color--cyan-bluish-gray, #8c8f94);
    --jui-wp-radius: 4px;
    --jui-wp-shadow: var(--wp--preset--shadow--outlined, 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06));
    --jui-wp-shadow-modal: var(--wp--preset--shadow--sharp, 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: var(--wp--preset--font-size--small, 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);
}

/* spinner customization */
.ui-spinner{
  display: inline-flex !important;
  width: 100% !important;
  align-items: center;
  border: none !important;
  flex-grow: 1;
}

.ui-spinner-input{
  border: 1px solid  #bf9e56;
  background: white;
  height: 20px;
  min-height: 30px;
  min-width:30px !important;
  max-width: 50px;
  width: 20px;
  order:2;
  text-align:inherit;
  margin: 0 2px;
  box-sizing: border-box;
}

.ui-spinner-input:focus{
  outline:none;
}

.ui-spinner-button{
  position:relative;
  width: 30px;
  height: 30px;
  min-width: 30px !important;
  min-height: 30px;
  max-width: 30px;
  border: 1px solid #c1c190;
  border-radius: 15px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  outline: none;
  color: #bf9e56 !important;
  margin-left: 3px;
  margin-right: 3px;
}
.ui-spinner-button:focus,
.ui-spinner-button:hover{  
  border: 1px solid #cdb398 !important;
  background: #cdc098 !important;
  color: #f7f4ee !important;  
}

.ui-spinner-up{
  order:3;
}

.ui-spinner-down{
  order: 1;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button{
     -webkit-appearance: none; 
     margin: 0;
}

/* --- Botones (Buttons) --- */
.ui-button {
    background: var(--jui-wp-primary) !important;
    color: var(--jui-wp-text) !important;
    border: 1px solid var(--jui-wp-secondary) !important; /* Borde azul WP */
    border-radius: var(--jui-wp-radius);
    font-weight: 500 !important;
    text-shadow: none !important;
    box-shadow: none;
    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: var(--jui-wp-text) !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: var(--jui-wp-text) !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: var(--jui-wp-text) !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-textinput);
    font-size: var(--wp--preset--font-size--medium);
}

.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;
    color: var(--wp--preset--color--inputtext, #1d2327);
}
.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;
    color: var(--wp--preset--color--lightgrey, #1d2327);
}

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

.ui-tabs-nav {
    border-bottom: 1px solid var(--jui-wp-border, #b6b6b6) !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; */
    margin-right: o.5rem;
}

.ui-tabs-nav li a {
    /* border: 1px solid var(--jui-wp-bg, #8c8f94) !important; */
    border: none;
    color: var(--jui-wp-bg-alt) !important;
    font-weight: 500 !important;
    /* padding: 8px 12px !important; */
    padding: 0.8rem 1.2rem !important;
    /* border-bottom: none !important;
    border-radius: var(--jui-wp-radius) var(--jui-wp-radius) 0 0 !important; */
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
}

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

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

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

/* --- Inputs y Formularios --- */
.ui-widget input {
        font-family: inherit !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--jui-wp-border, #8c8f94) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 transparent !important;
    transition: box-shadow 0.1s linear;
    background: var(--jui-wp-bg, #fff) !important;
    color: var(--jui-wp-textinput, #2c3338) !important;
} 
.ui-widget input[type="button"] {
        font-family: inherit !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--jui-wp-secondary, #8c8f94) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 transparent !important;
    transition: box-shadow 0.1s linear;
    background: var(--jui-wp-primary, #44320c) !important;
    color: var(--jui-wp-text, #818486) !important;
} 

.ui-widget input[type="button"]:hover {
    background: var(--jui-wp-primary-hover, #135e96) !important;
    border-color: var(--jui-wp-primary-hover, #135e96) !important;
    color: var(--jui-wp-text, #fff) !important;
}

.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: var(--jui-wp-primary, #fff) !important;
    color: var(--jui-wp-text, #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;
}

.ui-widget-overlay {
    background: rgba(170, 170, 170, 0.5);
    
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); 
    
    opacity: 1; 
}