/* Estilos personalizados para PrimeFaces con colores SUCAMEC */

/* ============================================
   COLORES PRINCIPALES SUCAMEC:
   - Azul principal: #0066CC
   - Azul oscuro: #0052A3
   - Gris oscuro: #333333
   - Gris claro: #E5E5E5
   - Rojo: #DC143C (elementos críticos)
   - Blanco: #FFFFFF
   ============================================ */

/* ========== PANELS ========== */
.ui-panel-titlebar {
    background-color: #0066CC !important;
    background: linear-gradient(to bottom, #0066CC, #0052A3) !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: none !important;
    padding: 10px 15px !important;
}

.ui-panel-titlebar .ui-panel-title {
    color: #FFFFFF !important;
    font-weight: bold !important;
}

.ui-panel-titlebar * {
    color: #FFFFFF !important;
}

.ui-panel {
    border-color: #E5E5E5 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.ui-panel-content {
    background-color: #FFFFFF !important;
    padding: 15px !important;
}

/* ========== BOTONES (p:commandButton) - PrimeFaces 6 ========== */
.ui-button,
.ui-button.ui-state-default,
.ui-button.ui-widget.ui-state-default.ui-corner-all,
p:commandButton.ui-button,
p:commandButton.ui-button.ui-state-default {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%) !important;
    border: 2px solid #0052A3 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 20px !important;
    min-height: 38px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0,102,204,0.25) !important;
    cursor: pointer !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.ui-button:hover,
.ui-button.ui-state-hover,
p:commandButton.ui-button:hover,
p:commandButton.ui-button.ui-state-hover {
    background: linear-gradient(135deg, #0052A3 0%, #004080 100%) !important;
    border-color: #004080 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,102,204,0.35) !important;
}

.ui-button:active,
.ui-button:focus,
.ui-button.ui-state-active,
p:commandButton.ui-button:active,
p:commandButton.ui-button:focus {
    background: linear-gradient(135deg, #004080 0%, #003366 100%) !important;
    border-color: #003366 !important;
    color: #FFFFFF !important;
    transform: translateY(0px) !important;
    box-shadow: 0 2px 4px rgba(0,102,204,0.3) !important;
    outline: none !important;
}

.ui-button.ui-state-disabled,
p:commandButton.ui-button.ui-state-disabled {
    background: #CCCCCC !important;
    border-color: #AAAAAA !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Iconos dentro de los botones - PrimeFaces 6 */
.ui-button .ui-icon,
.ui-button.ui-button-text-icon-left .ui-icon,
.ui-button.ui-button-text-icon-right .ui-icon,
.ui-button.ui-button-icon-only .ui-icon,
p:commandButton .ui-icon {
    color: #FFFFFF !important;
    font-size: 14px !important;
    margin: 0 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.ui-button:hover .ui-icon,
.ui-button.ui-state-hover .ui-icon,
p:commandButton:hover .ui-icon {
    color: #FFFFFF !important;
}

/* Texto dentro de los botones - PrimeFaces 6 */
.ui-button-text,
.ui-button .ui-button-text,
p:commandButton .ui-button-text {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

/* Botones con solo icono - PrimeFaces 6 */
.ui-button.ui-button-icon-only,
p:commandButton.ui-button-icon-only {
    padding: 10px !important;
    min-width: 38px !important;
    width: auto !important;
}

/* Botones con texto e icono a la izquierda - PrimeFaces 6 */
.ui-button.ui-button-text-icon-left,
p:commandButton.ui-button-text-icon-left {
    padding-left: 16px !important;
    padding-right: 20px !important;
}

.ui-button.ui-button-text-icon-left .ui-icon,
p:commandButton.ui-button-text-icon-left .ui-icon {
    margin-right: 6px !important;
    margin-left: 0 !important;
}

/* Botones con texto e icono a la derecha - PrimeFaces 6 */
.ui-button.ui-button-text-icon-right,
p:commandButton.ui-button-text-icon-right {
    padding-left: 20px !important;
    padding-right: 16px !important;
}

.ui-button.ui-button-text-icon-right .ui-icon,
p:commandButton.ui-button-text-icon-right .ui-icon {
    margin-left: 6px !important;
    margin-right: 0 !important;
}

/* Botones de acción principal (Enviar, Guardar, etc.) */
button[type="submit"],
input[type="submit"] {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%) !important;
    border: 2px solid #0052A3 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    min-height: 38px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0,102,204,0.25) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    outline: none !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
    background: linear-gradient(135deg, #0052A3 0%, #004080 100%) !important;
    border-color: #004080 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,102,204,0.35) !important;
}

button[type="submit"]:active,
input[type="submit"]:active,
button[type="submit"]:focus,
input[type="submit"]:focus {
    background: linear-gradient(135deg, #004080 0%, #003366 100%) !important;
    border-color: #003366 !important;
    color: #FFFFFF !important;
    transform: translateY(0px) !important;
    box-shadow: 0 2px 4px rgba(0,102,204,0.3) !important;
    outline: none !important;
}

button[type="submit"]:disabled,
input[type="submit"]:disabled {
    background: #CCCCCC !important;
    border-color: #AAAAAA !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    transform: none !important;
}

button[type="button"] {
    background: linear-gradient(135deg, #666666 0%, #555555 100%) !important;
    border: 2px solid #555555 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    min-height: 38px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    outline: none !important;
}

button[type="button"]:hover {
    background: linear-gradient(135deg, #555555 0%, #444444 100%) !important;
    border-color: #444444 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

button[type="button"]:active,
button[type="button"]:focus {
    background: linear-gradient(135deg, #444444 0%, #333333 100%) !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
    transform: translateY(0px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    outline: none !important;
}

button[type="button"]:disabled {
    background: #CCCCCC !important;
    border-color: #AAAAAA !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Estilos específicos para botón cancelar dentro de p:link */
p\\:link button[type="button"],
p\\:link > button[type="button"] {
    width: 100% !important;
    max-width: 200px !important;
}

p\\:link:hover button[type="button"] {
    text-decoration: none !important;
}

/* ========== INPUTS Y FORMULARIOS ========== */
.ui-inputfield,
.ui-inputtext,
.ui-inputtextarea {
    border: 2px solid #E5E5E5 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #333333 !important;
    font-size: 13px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    height: 38px !important;
    line-height: 22px !important;
}

.ui-inputtextarea {
    min-height: auto !important;
    height: auto !important;
    line-height: 1.6 !important;
}

/* Selector con mismo ancho que inputs */
.ui-selectonemenu {
    width: 100% !important;
    box-sizing: border-box !important;
}

.ui-inputfield:focus,
.ui-inputtext:focus,
.ui-inputtextarea:focus,
.ui-selectonemenu:focus {
    border-color: #0066CC !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1) !important;
}

.ui-inputfield.ui-state-error,
.ui-inputtext.ui-state-error {
    border-color: #DC143C !important;
}

/* Labels */
.ui-outputlabel,
.ui-label {
    color: #333333 !important;
    font-weight: 500 !important;
}

/* Labels con estilo inline de color rojo (Es opcional y campos requeridos con (*)) */
.ui-outputlabel[style*="color: #DC143C"],
.ui-outputlabel[style*="color:#DC143C"],
.ui-outputlabel[style*="color:#DC143C;"],
.ui-outputlabel[style*="color: #DC143C;"],
.ui-outputlabel[style*="DC143C"],
#lblCorreoOpcional,
#lblTelMovilOpcional {
    color: #DC143C !important;
    font-weight: bold !important;
}

/* Asegurar que los labels con valor "(*)" se muestren en rojo */
.ui-outputlabel[style*="DC143C"],
span.ui-outputlabel[style*="DC143C"],
label.ui-outputlabel[style*="DC143C"] {
    color: #DC143C !important;
    font-weight: bold !important;
}

/* Campos requeridos */
.ui-outputlabel-required:after {
    color: #DC143C !important;
}

/* ========== SELECTORES (DROPDOWNS) - PrimeFaces 6 ========== */
.ui-selectonemenu,
.ui-selectonemenu.ui-state-default,
.ui-selectonemenu.ui-corner-all {
    background-color: #FFFFFF !important;
    border: 2px solid #E5E5E5 !important;
    border-radius: 6px !important;
    min-height: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    position: relative !important;
    vertical-align: top !important;
    overflow: hidden !important;
}

/* Excepción para selectOneMenu con filtro - permitir overflow para el input de filtro */
.ui-selectonemenu[filter] .ui-selectonemenu-panel {
    overflow: visible !important;
}

.ui-selectonemenu:hover,
.ui-selectonemenu.ui-state-hover {
    border-color: #0066CC !important;
    box-shadow: 0 4px 12px rgba(0,102,204,0.2) !important;
    background-color: #FAFBFC !important;
}

.ui-selectonemenu.ui-state-focus,
.ui-selectonemenu:focus {
    border-color: #0066CC !important;
    box-shadow: 0 0 0 4px rgba(0,102,204,0.15) !important;
    outline: none !important;
    background-color: #FFFFFF !important;
}

/* Estilo específico para el input de filtro con sufijo _focus */
input[id$="_focus"].ui-inputfield,
input[id*="_focus"],
input[role="combobox"].ui-inputfield,
input[aria-haspopup="true"].ui-inputfield {
    border: 2px solid #E5E5E5 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #333333 !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    height: 38px !important;
    line-height: 22px !important;
    background-color: #FFFFFF !important;
}

input[id$="_focus"]:focus,
input[role="combobox"].ui-inputfield:focus {
    border-color: #0066CC !important;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1) !important;
    outline: none !important;
}

.ui-selectonemenu-label,
.ui-selectonemenu-label.ui-corner-all {
    color: #333333 !important;
    padding: 9px 14px !important;
    padding-right: 50px !important;
    font-size: 13px !important;
    line-height: 22px !important;
    display: block !important;
    min-height: 22px !important;
    font-weight: 400 !important;
    width: 100% !important;
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
}

/* Excepción para el label cuando el selector tiene filtro - NO aplicar overflow hidden */
.ui-selectonemenu[filter="true"] .ui-selectonemenu-label,
.ui-selectonemenu[filter] .ui-selectonemenu-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.ui-selectonemenu-label-empty {
    color: #999999 !important;
    font-style: italic !important;
    font-weight: 300 !important;
}

.ui-selectonemenu-trigger,
.ui-selectonemenu-trigger.ui-state-default,
.ui-selectonemenu-trigger.ui-corner-right {
    border: none !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 100% !important;
    min-height: 36px !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 2px !important;
    top: 0px !important;
    bottom: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.ui-selectonemenu-trigger:active,
.ui-selectonemenu-trigger.ui-state-active {
    background: linear-gradient(135deg, #004080 0%, #003366 100%) !important;
    transform: scale(0.98) !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.2) !important;
}

.ui-selectonemenu-trigger .ui-icon,
.ui-selectonemenu-trigger .ui-icon-triangle-1-s,
.ui-selectonemenu-trigger .ui-icon-triangle-1-s.ui-c,
.ui-selectonemenu-trigger .ui-icon.ui-icon-triangle-1-s.ui-c,
.ui-selectonemenu-trigger .ui-state-default .ui-icon,
.ui-state-default .ui-icon {
    color: #FFFFFF !important;
    font-size: 16px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
}

/* Asegurar que todos los iconos dentro del trigger sean blancos */
.ui-selectonemenu-trigger .ui-icon::before,
.ui-selectonemenu-trigger .ui-icon-triangle-1-s::before,
.ui-selectonemenu-trigger .ui-icon-triangle-1-s.ui-c::before,
.ui-selectonemenu-trigger .ui-icon.ui-icon-triangle-1-s.ui-c::before,
.ui-selectonemenu-trigger .ui-state-default .ui-icon::before,
.ui-state-default .ui-icon::before {
    color: #FFFFFF !important;
}

.ui-selectonemenu-trigger.ui-state-disabled {
    background: #CCCCCC !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Panel del dropdown (items) - PrimeFaces 6 */
.ui-selectonemenu-panel,
.ui-selectonemenu-panel.ui-widget-content {
    border: 2px solid #0066CC !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,102,204,0.15) !important;
    background-color: #FFFFFF !important;
    padding: 8px 4px !important;
    max-height: 350px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-top: 6px !important;
    z-index: 10000 !important;
}

/* Scrollbar personalizado para el panel */
.ui-selectonemenu-panel::-webkit-scrollbar {
    width: 8px !important;
}

.ui-selectonemenu-panel::-webkit-scrollbar-track {
    background: #F5F5F5 !important;
    border-radius: 4px !important;
}

.ui-selectonemenu-panel::-webkit-scrollbar-thumb {
    background: #0066CC !important;
    border-radius: 4px !important;
}

.ui-selectonemenu-panel::-webkit-scrollbar-thumb:hover {
    background: #0052A3 !important;
}

/* Items dentro del dropdown - PrimeFaces 6 */
.ui-selectonemenu-items-wrapper .ui-selectonemenu-item,
.ui-selectonemenu-panel .ui-selectonemenu-item,
.ui-selectonemenu-items .ui-selectonemenu-item {
    padding: 12px 18px !important;
    margin: 2px 6px !important;
    color: #333333 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border: none !important;
    background-color: transparent !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 5px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
}

.ui-selectonemenu-items-wrapper .ui-selectonemenu-item:hover,
.ui-selectonemenu-panel .ui-selectonemenu-item:hover,
.ui-selectonemenu-items .ui-selectonemenu-item:hover,
.ui-selectonemenu-items-wrapper .ui-selectonemenu-item.ui-state-hover,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover,
.ui-selectonemenu-items .ui-selectonemenu-item.ui-state-hover {
    background: linear-gradient(90deg, #E3F2FD 0%, #BBDEFB 100%) !important;
    color: #0066CC !important;
    font-weight: 500 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 6px rgba(0,102,204,0.15) !important;
}

.ui-selectonemenu-items-wrapper .ui-selectonemenu-item.ui-state-highlight,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight,
.ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
    background: linear-gradient(90deg, #0066CC 0%, #0052A3 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 8px rgba(0,102,204,0.4) !important;
    transform: translateX(2px) !important;
}

/* Item seleccionado dentro del dropdown */
.ui-selectonemenu-items-wrapper .ui-selectonemenu-item.ui-state-active,
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-active,
.ui-selectonemenu-items .ui-selectonemenu-item.ui-state-active {
    background: linear-gradient(90deg, #0066CC 0%, #0052A3 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 8px rgba(0,102,204,0.4) !important;
    transform: translateX(2px) !important;
}

/* Texto dentro de los items */
.ui-selectonemenu-item label {
    color: inherit !important;
    font-weight: inherit !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: block !important;
    padding: 0 !important;
}

.ui-selectonemenu-item.ui-state-highlight label,
.ui-selectonemenu-item.ui-state-active label {
    color: #FFFFFF !important;
}

/* Grupo de items */
.ui-selectonemenu-items-group {
    padding: 8px 16px !important;
    font-weight: 700 !important;
    color: #0066CC !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(to right, #F0F7FF, #E3F2FD) !important;
    border-bottom: 2px solid #0066CC !important;
    margin: 4px 4px 2px 4px !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Para items deshabilitados */
.ui-selectonemenu-item.ui-state-disabled,
.ui-selectonemenu-item[disabled] {
    color: #CCCCCC !important;
    cursor: not-allowed !important;
    background-color: #F9F9F9 !important;
    opacity: 0.6 !important;
}

.ui-selectonemenu-item.ui-state-disabled:hover {
    background-color: #F9F9F9 !important;
    color: #CCCCCC !important;
    transform: none !important;
}

/* Estilo para el contenedor del selector cuando tiene error */
.ui-selectonemenu.ui-state-error {
    border-color: #DC143C !important;
    box-shadow: 0 0 0 3px rgba(220,20,60,0.1) !important;
}

/* Separador entre items */
.ui-selectonemenu-items-wrapper .ui-selectonemenu-item + .ui-selectonemenu-item {
    margin-top: 0 !important;
}

/* Input de filtro - PrimeFaces 6 */
.ui-selectonemenu-filter-container {
    padding: 8px 12px !important;
    background-color: #FFFFFF !important;
    border-bottom: 2px solid #E5E5E5 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

.ui-selectonemenu-filter-container .ui-inputtext,
.ui-selectonemenu-filter-container input,
.ui-selectonemenu-filter-container input.ui-inputfield {
    width: 100% !important;
    border: 2px solid #E5E5E5 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: #333333 !important;
    background-color: #FFFFFF !important;
    min-height: 32px !important;
    height: 32px !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.ui-selectonemenu-filter-container .ui-inputtext:focus,
.ui-selectonemenu-filter-container input:focus {
    border-color: #0066CC !important;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1) !important;
    outline: none !important;
}

/* Wrapper de items - PrimeFaces 6 */
.ui-selectonemenu-items-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    height: auto !important;
}

.ui-selectonemenu-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Mejoras adicionales para PrimeFaces 6 */
.ui-selectonemenu.ui-state-disabled {
    background-color: #F5F5F5 !important;
    border-color: #DDDDDD !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.ui-selectonemenu.ui-state-disabled .ui-selectonemenu-label {
    color: #999999 !important;
    cursor: not-allowed !important;
}

/* Asegurar que el icono se vea correctamente */
.ui-selectonemenu-trigger .ui-icon-triangle-1-s::before {
    content: "\25BC" !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
}

/* Estilo para cuando el selector está abierto */
.ui-selectonemenu-open .ui-selectonemenu-trigger .ui-icon {
    transform: rotate(180deg) !important;
    transition: transform 0.3s ease !important;
}

/* Mejora para el contenedor del selector */
.ui-selectonemenu .ui-selectonemenu-label-container {
    width: 100% !important;
    position: relative !important;
}

/* ========== RADIO BUTTONS Y CHECKBOXES ========== */
.ui-radiobutton .ui-radiobutton-box.ui-state-active {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
}

.ui-chkbox .ui-chkbox-box.ui-state-active {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
}

/* ========== MENSAJES Y NOTIFICACIONES ========== */
.ui-messages-info,
.ui-message-info {
    background-color: #E3F2FD !important;
    border-color: #0066CC !important;
    color: #0052A3 !important;
}

.ui-messages-error,
.ui-message-error {
    background-color: #FFEBEE !important;
    border-color: #DC143C !important;
    color: #C62828 !important;
}

.ui-messages-warn,
.ui-message-warn {
    background-color: #FFF3E0 !important;
    border-color: #FF9800 !important;
    color: #E65100 !important;
}

.ui-messages-success,
.ui-message-success {
    background-color: #E8F5E9 !important;
    border-color: #4CAF50 !important;
    color: #2E7D32 !important;
}

/* Growl notifications */
.ui-growl-item {
    border-radius: 4px !important;
}

.ui-growl-item-container {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ========== TABS ========== */
.ui-tabs-nav li.ui-state-default {
    background-color: #F5F5F5 !important;
    border-color: #E5E5E5 !important;
}

.ui-tabs-nav li.ui-state-active {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
}

.ui-tabs-nav li.ui-state-active a {
    color: #FFFFFF !important;
}

.ui-tabs-nav li.ui-state-default a {
    color: #333333 !important;
}

.ui-tabs-nav li.ui-state-default:hover {
    background-color: #E5E5E5 !important;
}

/* ========== TABLES ========== */
.ui-datatable thead th {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border-color: #0052A3 !important;
}

.ui-datatable tbody tr.ui-state-highlight,
.ui-datatable tbody tr.ui-widget-content.ui-state-highlight {
    background-color: #E3F2FD !important;
}

.ui-datatable tbody tr:hover {
    background-color: #F5F5F5 !important;
}

.ui-paginator {
    background-color: #F5F5F5 !important;
    border-color: #E5E5E5 !important;
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

/* ========== DIALOGS ========== */
.ui-dialog-titlebar {
    background-color: #0066CC !important;
    background: linear-gradient(to bottom, #0066CC, #0052A3) !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    border: none !important;
    padding: 10px 15px !important;
}

.ui-dialog-titlebar .ui-dialog-title {
    color: #FFFFFF !important;
}

.ui-dialog-titlebar * {
    color: #FFFFFF !important;
}

/* ========== FILE UPLOAD ========== */
.ui-fileupload-buttonbar,
.ui-fileupload-buttonbar.ui-widget-header.ui-corner-top {
    background: linear-gradient(to bottom, #0066CC, #0052A3) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border-color: #E5E5E5 !important;
    border-radius: 6px !important;
    padding: 8px !important;
}

.ui-fileupload-buttonbar .ui-button {
    background-color: #0066CC !important;
}

/* Botón de adjuntar PDF - Estilo mejorado */
.ui-fileupload-choose,
.ui-button.ui-fileupload-choose,
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left.ui-fileupload-choose {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%) !important;
    border: 2px solid #FFF !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 20px !important;
    min-height: 2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0,102,204,0.25) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.ui-fileupload-choose:hover,
.ui-button.ui-fileupload-choose:hover,
.ui-button.ui-fileupload-choose.ui-state-hover,
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left.ui-fileupload-choose:hover {
    background: linear-gradient(135deg, #0052A3 0%, #004080 100%) !important;
    border-color: #004080 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,102,204,0.35) !important;
}

.ui-fileupload-choose:active,
.ui-button.ui-fileupload-choose:active,
.ui-button.ui-fileupload-choose.ui-state-active {
    background: linear-gradient(135deg, #004080 0%, #003366 100%) !important;
    border-color: #003366 !important;
    transform: translateY(0px) !important;
    box-shadow: 0 2px 4px rgba(0,102,204,0.3) !important;
}

.ui-fileupload-choose.ui-state-disabled,
.ui-button.ui-fileupload-choose.ui-state-disabled {
    background: #CCCCCC !important;
    border-color: #AAAAAA !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
}

/* Icono dentro del botón de fileupload */
.ui-fileupload-choose .ui-icon,
.ui-button.ui-fileupload-choose .ui-icon,
.ui-button-text-icon-left .ui-icon {
    color: #FFFFFF !important;
    font-size: 16px !important;
    margin-right: 6px !important;
}

.ui-fileupload-choose:hover .ui-icon,
.ui-button.ui-fileupload-choose:hover .ui-icon {
    color: #FFFFFF !important;
}

/* Ocultar icono + en el botón de fileUpload específico */
#txf_DocumentoOpcional_AIP .ui-fileupload-choose .ui-icon,
#txf_DocumentoOpcional_AIP .ui-button .ui-icon,
#txf_DocumentoOpcional_AIP .ui-icon-plus,
#txf_DocumentoOpcional_AIP .ui-button-text-icon-left .ui-icon {
    display: none !important;
    visibility: hidden !important;
}

/* Texto del botón */
.ui-button-text-icon-left .ui-button-text {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 0 !important;
}

/* Área de drag and drop */
.ui-fileupload-content {
    border: 2px dashed #E5E5E5 !important;
    border-radius: 6px !important;
    background-color: #FAFBFC !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
}

.ui-fileupload-content:hover {
    border-color: #0066CC !important;
    background-color: #F0F7FF !important;
}

/* Mensajes de error del fileupload */
.ui-fileupload-messages {
    margin-top: 10px !important;
}

.ui-fileupload-messages .ui-message-error {
    background-color: #FFEBEE !important;
    border-color: #DC143C !important;
    color: #DC143C !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}

/* ========== CAPTCHA ========== */
/* Imagen del captcha */
#imgCaptcha,
#formAccesoInfoPublica\\:imgCaptcha,
p\\:graphicImage#imgCaptcha,
.ui-graphicimage,
img[src*="captcha"] {
    border: 2px solid #E5E5E5 !important;
    border-radius: 6px !important;
    padding: 4px !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

#imgCaptcha:hover,
#formAccesoInfoPublica\\:imgCaptcha:hover,
img[src*="captcha"]:hover {
    border-color: #0066CC !important;
    box-shadow: 0 4px 12px rgba(0,102,204,0.2) !important;
    transform: scale(1.02) !important;
}

/* Contenedor del captcha */
#gridCaptcha {
    background-color: transparent !important;
    border: none !important;
    padding: 10px !important;
}

#gridCaptcha td {
    padding: 5px 10px !important;
    vertical-align: middle !important;
}

/* Input del texto del captcha */
#textoCaptcha,
#formAccesoInfoPublica\\:textoCaptcha {
    border: 2px solid #E5E5E5 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

#textoCaptcha:focus,
#formAccesoInfoPublica\\:textoCaptcha:focus {
    border-color: #0066CC !important;
    box-shadow: 0 0 0 4px rgba(0,102,204,0.15) !important;
    outline: none !important;
}

#textoCaptcha:hover,
#formAccesoInfoPublica\\:textoCaptcha:hover {
    border-color: #0066CC !important;
}

/* Label del captcha */
#gridCaptcha label,
#gridCaptcha .ui-outputlabel {
    color: #333333 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* ========== MENU ========== */
.ui-menu {
    border-color: #E5E5E5 !important;
}

.ui-menu .ui-menuitem-link.ui-state-active {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

.ui-menu .ui-menuitem-link:hover {
    background-color: #E3F2FD !important;
    color: #0052A3 !important;
}

/* ========== TOOLTIP ========== */
.ui-tooltip {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
}

/* ========== PROGRESS BAR ========== */
.ui-progressbar {
    background-color: #E5E5E5 !important;
    border-color: #E5E5E5 !important;
}

.ui-progressbar-value {
    background-color: #0066CC !important;
    background: linear-gradient(to bottom, #0066CC, #0052A3) !important;
}

/* ========== CALENDAR ========== */
.ui-datepicker-header {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

.ui-datepicker-calendar .ui-state-active {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

.ui-datepicker-calendar .ui-state-hover {
    background-color: #E3F2FD !important;
    color: #0052A3 !important;
}

/* ========== GENERAL ========== */
.ui-widget-header {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

.ui-widget-content {
    background-color: #FFFFFF !important;
    color: #333333 !important;
    border-color: #E5E5E5 !important;
}

/* Links */
a {
    color: #0066CC !important;
}

a:hover {
    color: #0052A3 !important;
    text-decoration: underline !important;
}

/* Separadores */
hr {
    border-color: #E5E5E5 !important;
    border-width: 2px !important;
}

/* ========== DISEÑO RESPONSIVO ========== */

/* Viewport meta para móviles */
@viewport {
    width: device-width;
    initial-scale: 1.0;
}

/* Contenedor principal responsivo */
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Grid responsivo mejorado */
.ui-g {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.ui-g > div {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
}

/* En móviles, todos los campos ocupan 100% */
@media screen and (max-width: 640px) {
    /* Inputs y selects al 100% en móviles */
    .ui-inputfield,
    .ui-inputtext,
    .ui-inputtextarea,
    .ui-selectonemenu,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Labels apilados arriba en móviles */
    .ui-g > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 10px !important;
    }
    
    /* Paneles con padding reducido */
    .ui-panel {
        margin: 5px !important;
        width: calc(100% - 10px) !important;
    }
    
    .ui-panel-content {
        padding: 10px !important;
    }
    
    /* Botones al 100% en móviles */
    .ui-button,
    button[type="submit"],
    button[type="button"],
    input[type="submit"] {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Títulos más pequeños */
    .ui-panel-titlebar {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }
    
    /* Texto más pequeño pero legible */
    body {
        font-size: 14px !important;
    }
    
    /* Labels más compactos */
    .ui-outputlabel,
    .ui-label {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 13px !important;
    }
    
    /* Grid stack vertical en móviles */
    .ui-g-12,
    .ui-g-6,
    .ui-g-4,
    .ui-g-3,
    .ui-g-2,
    .ui-g-1 {
        width: 100% !important;
        float: none !important;
    }
    
    /* Tablas responsivas */
    .ui-datatable {
        font-size: 12px !important;
    }
    
    .ui-datatable table {
        width: 100% !important;
    }
    
    /* Dialogs más pequeños */
    .ui-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 5px !important;
    }
    
    /* File upload responsivo */
    .ui-fileupload {
        width: 100% !important;
    }
    
    /* Tabs apilados */
    .ui-tabs-nav {
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    .ui-tabs-nav li {
        display: inline-block !important;
        float: none !important;
    }
}

/* Tablets */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .ui-inputfield,
    .ui-inputtext,
    .ui-inputtextarea,
    .ui-selectonemenu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ui-panel {
        width: 98% !important;
    }
    
    .ui-button,
    button[type="submit"],
    button[type="button"] {
        min-width: 120px !important;
    }
    
    /* Grid de 2 columnas en tablets cuando es apropiado */
    .ui-g-12.ui-md-6,
    .ui-g-6.ui-md-6 {
        width: 50% !important;
    }
}

/* Desktop - mantener estilos actuales pero con máximo width */
@media screen and (min-width: 1025px) {
    .ui-inputfield[style*="width: 80%"],
    .ui-inputtext[style*="width: 80%"],
    .ui-selectonemenu[style*="width: 80%"] {
        max-width: 300px !important;
    }
    
    .ui-inputfield[style*="width: 95%"],
    .ui-inputtext[style*="width: 95%"] {
        max-width: 100% !important;
    }
}

/* Clases helper para inputs responsivos */
.input-full-mobile {
    width: 100% !important;
}

@media screen and (min-width: 641px) {
    .input-full-mobile {
        width: 100% !important;
    }
}

/* Espaciado responsivo */
.mobile-spacing {
    margin-bottom: 15px !important;
}

@media screen and (min-width: 641px) {
    .mobile-spacing {
        margin-bottom: 0 !important;
    }
}

/* Paneles responsivos */
.responsive-panel {
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

@media screen and (min-width: 641px) {
    .responsive-panel {
        width: 99% !important;
    }
}

/* Contenedor principal responsivo */
.main-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

@media screen and (min-width: 641px) {
    .main-container {
        padding: 15px !important;
    }
}

@media screen and (min-width: 1025px) {
    .main-container {
        padding: 20px !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
}

/* ========== ESTILOS PARA IMPRESIÓN ========== */
@media print {
    @page {
        size: A4 portrait;
        margin: 1.5cm 1cm;
    }
    
    /* Ocultar todo excepto el contenido del modal */
    body * {
        visibility: hidden;
    }
    
    #dialogRespuesta,
    #dialogRespuesta * {
        visibility: visible;
    }
    
    #dialogRespuesta {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 21cm;
        border: none !important;
        box-shadow: none !important;
    }
    
    .ui-widget-overlay,
    .ui-dialog-mask,
    .no-print,
    .ui-growl {
        display: none !important;
    }
}