/* ========================================================================== UIX SIE - DESIGN SYSTEM (SCOPED / ENCAPSULADO) Convive perfectamente con UI.css ========================================================================== */ /* ===== 1. TARJETAS Y CABECERAS (Solo afectan donde uses las clases 'um-') ===== */ .um-title { display: flex; align-items: center; gap: 16px; padding: 4px 2px 18px; border-bottom: 2px solid #eef0f5; margin-bottom: 20px; } .um-title .um-ic { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, var(--sie-marca, #2563EB), #4F46E5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; flex-shrink: 0; box-shadow: 0 6px 16px color-mix(in srgb, var(--sie-marca, #2563EB) 28%, transparent); } .um-title .um-t { margin: 0; font-size: 21px; font-weight: 800; color: #1f2937; letter-spacing: -.02em; } .um-title .um-s { margin: 2px 0 0; font-size: 13px; color: #9ca3af; } .um-card { background: #ffffff; border: 1px solid #e8e8ef; border-radius: 12px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); } .um-head { display: flex; align-items: center; gap: 13px; padding: 15px 20px; background: color-mix(in srgb, var(--sie-marca, #2563EB) 8%, white); border-bottom: 1px solid #dbe3ef; } .um-head .um-hic { width: 38px; height: 38px; border-radius: 10px; background: var(--sie-marca, #2563EB); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .um-head .um-ht { margin: 0; font-size: 16px; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black); font-weight: 700; letter-spacing: -.01em; } .um-head .um-hs { margin: 2px 0 0; font-size: 12px; color: #475569; } .um-cbody { padding: 18px; } /* ===== 2. SEPARADORES VISUALES Y SUB-BLOQUES ===== */ .um-sep { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; } .um-sep.mt { margin-top: 24px; padding-top: 20px; border-top: 1px dashed #c7d0dd; } .um-sep .si { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; } .um-sep .st { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; } .um-sep .cnt { margin-left: auto; background: #E4F5EE; color: #059669; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 20px; } .sep-blue .si { background: var(--sie-marca, #2563EB); } .sep-blue .st { color: color-mix(in srgb, var(--sie-marca, #2563EB) 73%, black); } .sep-green .si { background: #059669; } .sep-green .st { color: #065F46; } .um-subblock { padding: 14px; background: #FFF9F0; border: 1px dashed #f0d9b5; border-radius: 12px; } .um-subblock-title { font-size: 12.5px; font-weight: 800; color: #92400E; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } /* ===== 2b. TARJETA PASTEL DE UN SOLO TONO (reemplaza p:panel para paneles informativos agrupados) ===== */ .um-soft-card { background: #F6FAFF; border: 1px solid #DCEAFB; border-radius: 12px; overflow: hidden; margin-bottom: 18px; } .um-soft-card-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: color-mix(in srgb, var(--sie-marca, #2563EB) 16%, white); border-bottom: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 19%, white); font-size: 14.5px; font-weight: 800; color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); } .um-soft-card-head i { font-size: 15px; color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black); } .um-soft-card-body { padding: 18px 20px; background: #F9FCFF; } /* ========================================================================================= ENCAPSULAMIENTO: Todo lo de abajo SOLO se aplica si está dentro de una tarjeta ".um-card" ========================================================================================= */ /* ===== 3. CAMPOS DE TEXTO (Aislados al um-card) ===== */ html body .um-card .ui-inputfield, html body .um-card input.ui-inputtext, html body .um-card textarea.ui-inputtextarea { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; padding: 8px 13px !important; color: #334155 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; } html body .um-card .ui-inputfield:focus, html body .um-card input.ui-inputtext:focus, html body .um-card textarea.ui-inputtextarea:focus { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } /* ===== 4. AUTOCOMPLETE (Aislado al um-card) ===== */ html body .um-card .ui-autocomplete { display: flex !important; align-items: stretch !important; width: 100% !important; } html body .um-card .ui-autocomplete input.ui-inputfield { background-color: #FFFFFF !important; border: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; border-radius: 10px 0 0 10px !important; border-right: none !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; font-weight: 600 !important; width: calc(100% - 32px) !important; margin: 0 !important; } /* AutoComplete sin boton desplegable (dropdown="false"): el input ocupa todo el ancho y va cerrado por ambos lados */ html body .um-card .ui-autocomplete:not(:has(.ui-autocomplete-dropdown)) input.ui-inputfield { width: 100% !important; border-right: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; border-radius: 10px !important; } html body .um-card .ui-autocomplete input.ui-inputfield:focus { border-style: solid !important; border-color: var(--sie-marca, #2563EB) !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 15%, transparent) !important; } html body .um-card .ui-autocomplete .ui-button { background-color: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; border: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; border-left: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 19%, white) !important; border-radius: 0 10px 10px 0 !important; width: 32px !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; } html body .um-card .ui-autocomplete input.ui-inputfield:focus + .ui-button, html body .um-card .ui-autocomplete .ui-button:hover { border-style: solid !important; border-color: var(--sie-marca, #2563EB) !important; background-color: #ffffff !important; } html body .um-card .ui-autocomplete .ui-button .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='12' height='12'%3E%3Cpath fill='%2364748B' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; width: 12px !important; height: 12px !important; margin: 0 !important; position: static !important; display: block !important; text-indent: -9999px !important; } html body .um-card .ui-autocomplete input.ui-inputfield:focus + .ui-button .ui-icon, html body .um-card .ui-autocomplete .ui-button:hover .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='12' height='12'%3E%3Cpath fill='%232563EB' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") !important; } /* Panel de menús para AutoComplete y SelectOneMenu (Global, porque PrimeFaces los pinta fuera del contenedor en el DOM) */ html body .ui-autocomplete-panel, html body .ui-selectonemenu-panel { border-radius: 12px !important; border: 1px solid #e8e8ef !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; padding: 4px !important; background: #ffffff !important; } html body .ui-autocomplete-panel .ui-autocomplete-item, html body .ui-selectonemenu-panel .ui-selectonemenu-item { color: #475569 !important; font-size: 13px !important; padding: 8px 12px !important; border-radius: 6px !important; margin: 2px 0 !important; transition: background 0.2s ease !important; } html body .ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight, html body .ui-autocomplete-panel .ui-autocomplete-item:hover, html body .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight, html body .ui-selectonemenu-panel .ui-selectonemenu-item:hover { background: #F4EFFA !important; background-color: #F4EFFA !important; color: #7A5A9C !important; font-weight: bold !important; text-shadow: none !important; } /* ===== 5. COMBOS (Aislado al um-card) ===== */ html body .um-card .ui-selectonemenu { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; display: flex !important; align-items: center !important; padding: 0 !important; width: 100% !important; min-height: 38px !important; } html body .um-card .ui-selectonemenu.ui-state-focus, html body .um-card .ui-selectonemenu.ui-state-hover { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .um-card .ui-selectonemenu .ui-selectonemenu-label { color: #334155 !important; padding: 8px 13px !important; background: transparent !important; border: none !important; box-shadow: none !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body .um-card .ui-selectonemenu .ui-selectonemenu-trigger { background: transparent !important; border: none !important; width: 32px !important; padding: 0 !important; border-left: 1px solid #eef2f7 !important; border-radius: 0 10px 10px 0 !important; } html body .um-card .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon { color: #64748b !important; margin-top: 8px !important; } /* ===== 5b. SELECT CHECKBOX MENU (Aislado al um-card) — chips en tono azul suave ===== */ /* Contenedor visible (multiple = lista de tokens) */ html body .um-card .ui-selectcheckboxmenu { position: relative !important; background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; display: flex !important; align-items: stretch !important; padding: 0 !important; width: 100% !important; min-height: 38px !important; } html body .um-card .ui-selectcheckboxmenu.ui-state-focus, html body .um-card .ui-selectcheckboxmenu.ui-state-hover { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .um-card .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container { flex: 1 1 auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 5px 8px !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; gap: 5px !important; min-height: 0 !important; } /* Chips (tokens) — azul suave, reemplaza el naranja del tema PrimeFaces */ html body .um-card .ui-selectcheckboxmenu-token, html body .um-card .ui-selectcheckboxmenu-token.ui-state-active { background: color-mix(in srgb, var(--sie-marca, #2563EB) 5%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black) !important; border: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 15%, white) !important; border-radius: 7px !important; padding: 3px 9px 3px 10px !important; margin: 0 !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } html body .um-card .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-label { color: inherit !important; } html body .um-card .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-icon { position: static !important; margin: 0 !important; color: var(--sie-marca, #2563EB) !important; font-size: 11px !important; opacity: .8 !important; transition: opacity .12s ease, color .12s ease !important; } html body .um-card .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-icon:hover { opacity: 1 !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } /* Trigger (flecha) — mismo criterio que el combo (§5): divisor a altura completa, icono centrado. Se neutraliza el position:absolute + margenes negativos del tema PrimeFaces que dejaban la flecha "movida". */ html body .um-card .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger { position: static !important; right: auto !important; top: auto !important; bottom: auto !important; left: auto !important; flex: 0 0 32px !important; width: 32px !important; height: auto !important; align-self: stretch !important; background: transparent !important; border: none !important; border-left: 1px solid #eef2f7 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 10px 10px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body .um-card .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon { position: static !important; top: auto !important; left: auto !important; margin: 0 !important; width: 16px !important; height: 16px !important; line-height: 16px !important; color: #64748b !important; display: block !important; } /* Variante NO multiple (etiqueta + contador) */ html body .um-card .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label { color: #334155 !important; padding: 8px 13px !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Panel del selectCheckboxMenu (global: PrimeFaces lo pinta fuera del contenedor en el DOM) */ html body .ui-selectcheckboxmenu-panel { border-radius: 12px !important; border: 1px solid #e8e8ef !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; padding: 4px !important; background: #ffffff !important; } html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header { background: transparent !important; border: none !important; padding: 4px 6px 6px !important; } html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-filter-container .ui-inputfield { border: 1.5px solid #cbd5e1 !important; border-radius: 8px !important; padding: 6px 26px 6px 10px !important; font-size: 13px !important; width: 100% !important; } html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-filter-container .ui-icon { color: #94a3b8 !important; } html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items { padding: 0 !important; } html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item { color: #475569 !important; font-size: 13px !important; padding: 7px 10px !important; border-radius: 6px !important; margin: 2px 0 !important; transition: background .2s ease !important; display: flex !important; align-items: center !important; gap: 8px !important; } html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item.ui-state-highlight, html body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 5%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black) !important; font-weight: bold !important; text-shadow: none !important; } /* Casilla marcada -> azul (reemplaza el color del tema) */ html body .ui-selectcheckboxmenu-panel .ui-chkbox .ui-chkbox-box { border: 1.5px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; box-shadow: none !important; width: 18px !important; height: 18px !important; } html body .ui-selectcheckboxmenu-panel .ui-chkbox .ui-chkbox-box.ui-state-active { border-color: var(--sie-marca, #2563EB) !important; background: var(--sie-marca, #2563EB) !important; color: #ffffff !important; } html body .ui-selectcheckboxmenu-panel .ui-chkbox .ui-chkbox-box .ui-icon { color: #ffffff !important; } /* ===== 6. CALENDARIOS (Aislado al um-card) ===== */ html body .um-card .ui-calendar { display: flex !important; align-items: stretch !important; width: 100% !important; } html body .um-card .ui-calendar input.ui-inputfield { border-radius: 10px 0 0 10px !important; border-right: none !important; width: calc(100% - 35px) !important; margin: 0 !important; } /* DatePicker sin boton (showIcon="false"/omitido): el input ocupa todo el ancho y cierra por ambos lados */ html body .um-card .ui-calendar:not(:has(.ui-button)) input.ui-inputfield { width: 100% !important; border-right: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; } html body .um-card .ui-calendar .ui-button, html body .um-card .ui-trigger-calendar .ui-datepicker-trigger.ui-button { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-left: 1px solid #eef2f7 !important; border-radius: 0 10px 10px 0 !important; width: 35px !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; right: auto !important; left: auto !important; } html body .um-card .ui-calendar input.ui-inputfield:focus + .ui-button, html body .um-card .ui-calendar .ui-button:hover { border-color: var(--sie-marca, #2563EB) !important; background: #fcfdff !important; } html body .um-card .ui-calendar .ui-button .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='14' height='14'%3E%3Cpath fill='%2364748B' d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; width: 14px !important; height: 14px !important; margin: 0 !important; position: static !important; display: block !important; text-indent: -9999px !important; } html body .um-card .ui-calendar input.ui-inputfield:focus + .ui-button .ui-icon, html body .um-card .ui-calendar .ui-button:hover .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='14' height='14'%3E%3Cpath fill='%232563EB' d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z'/%3E%3C/svg%3E") !important; } /* ===== 6b. SPINNER (Aislado al um-card) — mismo lenguaje visual que combos/calendarios ===== */ html body .um-card .ui-spinner { display: flex !important; align-items: stretch !important; position: relative !important; width: 100% !important; background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; } html body .um-card .ui-spinner:focus-within { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .um-card .ui-spinner .ui-spinner-input { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 10px !important; width: 100% !important; min-width: 0 !important; padding: 8px 32px 8px 12px !important; margin: 0 !important; color: #334155 !important; text-align: left !important; } html body .um-card .ui-spinner .ui-spinner-button { position: absolute !important; right: 0 !important; width: 28px !important; height: 50% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; border: none !important; border-left: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; box-shadow: none !important; z-index: 1 !important; transition: background-color .15s ease, border-color .15s ease !important; } html body .um-card .ui-spinner .ui-spinner-up { top: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 19%, white) !important; border-radius: 0 8px 0 0 !important; } html body .um-card .ui-spinner .ui-spinner-down { bottom: 0 !important; border-radius: 0 0 8px 0 !important; } html body .um-card .ui-spinner .ui-spinner-button:hover { background-color: #ffffff !important; border-left-style: solid !important; border-left-color: var(--sie-marca, #2563EB) !important; } html body .um-card .ui-spinner .ui-spinner-button .ui-icon { background-image: none !important; background: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px !important; overflow: hidden !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; margin: 0 !important; padding: 0 !important; border: none !important; } html body .um-card .ui-spinner .ui-spinner-button .ui-icon svg, html body .um-card .ui-spinner .ui-spinner-button .ui-icon * { display: none !important; } html body .um-card .ui-spinner .ui-spinner-button .ui-icon::after { content: "" !important; display: block !important; text-indent: 0 !important; overflow: visible !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; border: solid #64748b !important; border-width: 0 1.6px 1.6px 0 !important; } html body .um-card .ui-spinner .ui-spinner-up .ui-icon::after { transform: rotate(-135deg) !important; margin-top: 3px !important; } html body .um-card .ui-spinner .ui-spinner-down .ui-icon::after { transform: rotate(45deg) !important; margin-bottom: 3px !important; } html body .um-card .ui-spinner .ui-spinner-button:hover .ui-icon::after { border-color: var(--sie-marca, #2563EB) !important; } html body .um-card .ui-spinner.ui-state-disabled { opacity: .55 !important; } /* Spinner dentro de columnas angostas de tabla (tblUIX): asegura ancho mínimo legible */ html body .um-card .tblUIX .ui-spinner { min-width: 84px !important; } /* ===== 6c. PANEL DEL CALENDARIO (overlay GLOBAL, no se aisla a .um-card/.ui-dialog) ===== PrimeFaces reparenta el panel .ui-datepicker directo a al abrirlo -- nunca queda colgado dentro de .um-card ni .ui-dialog (a diferencia del input .ui-calendar de arriba, que si vive dentro de la card). Por eso estas reglas van sin ancestro .um-card/.ui-dialog y aplican solas a cualquier p:calendar/p:datePicker de toda la app, igual que p:growl/ blockUI/p:confirmDialog (ver patron-uix.md §9/§10). Incluye el navigator (selects de mes/ año) -- ver patron-uix.md §5 sobre cuándo usar navigator="true" + yearRange. */ html body .ui-datepicker { border: 1px solid #E2E8F0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 20px 40px -16px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06) !important; padding: 0 !important; font-family: inherit !important; } html body .ui-datepicker .ui-datepicker-header { background: linear-gradient(135deg, var(--sie-marca, #2563EB), color-mix(in srgb, var(--sie-marca, #2563EB) 70%, black)) !important; border: none !important; border-radius: 0 !important; padding: 12px 14px !important; color: #ffffff !important; } html body .ui-datepicker .ui-datepicker-title { color: #ffffff !important; font-weight: 600 !important; font-size: 14px !important; } html body .ui-datepicker select.ui-datepicker-month, html body .ui-datepicker select.ui-datepicker-year { background: rgba(255, 255, 255, .16) !important; border: none !important; border-radius: 8px !important; color: #ffffff !important; padding: 4px 8px !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; font-weight: 600 !important; font-size: 13px !important; cursor: pointer !important; } html body .ui-datepicker select.ui-datepicker-month option, html body .ui-datepicker select.ui-datepicker-year option { color: #0F172A !important; } html body .ui-datepicker .ui-datepicker-prev, html body .ui-datepicker .ui-datepicker-next { background: rgba(255, 255, 255, .16) !important; border: none !important; border-radius: 50% !important; top: 12px !important; color: #ffffff !important; } html body .ui-datepicker .ui-datepicker-prev .ui-icon, html body .ui-datepicker .ui-datepicker-next .ui-icon { color: #ffffff !important; } html body .ui-datepicker .ui-datepicker-prev:hover, html body .ui-datepicker .ui-datepicker-next:hover { background: rgba(255, 255, 255, .3) !important; } html body .ui-datepicker .ui-datepicker-calendar { margin: 10px 14px 4px !important; } html body .ui-datepicker .ui-datepicker-calendar th { color: #94A3B8 !important; font-weight: 600 !important; font-size: 12px !important; border: none !important; } html body .ui-datepicker .ui-datepicker-calendar td { border: none !important; padding: 2px !important; } html body .ui-datepicker .ui-datepicker-calendar td a { border-radius: 50% !important; width: 32px !important; height: 32px !important; line-height: 32px !important; text-align: center !important; color: #1E293B !important; border: none !important; background: transparent !important; transition: background .12s ease, color .12s ease !important; } html body .ui-datepicker .ui-datepicker-calendar td a:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 10%, white) !important; color: var(--sie-marca, #2563EB) !important; } html body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a { color: #CBD5E1 !important; } html body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { box-shadow: inset 0 0 0 2px #F59E0B !important; font-weight: 700 !important; color: #0F172A !important; background: transparent !important; } html body .ui-datepicker .ui-datepicker-calendar td a.ui-state-active { background: var(--sie-marca, #2563EB) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--sie-marca, #2563EB) 60%, transparent) !important; } html body .ui-datepicker .ui-datepicker-buttonbar { border-top: 1px solid #E2E8F0 !important; padding: 10px 14px !important; margin: 0 !important; display: flex !important; justify-content: flex-end !important; gap: 8px !important; } html body .ui-datepicker .ui-datepicker-buttonbar button { border-radius: 999px !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; background: #ffffff !important; border: 1px solid #E2E8F0 !important; color: #64748B !important; } html body .ui-datepicker .ui-datepicker-buttonbar button:hover { background: #F8FAFC !important; } html body .ui-datepicker .ui-datepicker-buttonbar .ui-datepicker-current { border-color: var(--sie-marca, #2563EB) !important; color: var(--sie-marca, #2563EB) !important; } html body .ui-datepicker .ui-datepicker-buttonbar .ui-datepicker-current:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 8%, white) !important; } /* ========================================================================================= DUPLICADO PARA CONTENIDO DE p:dialog: mismas reglas de arriba (§3-§6b), pero con .ui-dialog como ancestro en vez de .um-card -- el contenido de un p:dialog NUNCA tiene un .um-card real (PrimeFaces reparenta el dialog bajo ). .ui-dialog es la clase que PrimeFaces agrega automaticamente al wrapper de TODO p:dialog renderizado. Las reglas de .um-card de arriba NO se tocan (se duplican, no se modifican) para que un cambio aqui nunca pueda afectar una pagina normal sin p:dialog. Ver patron-uix.md, "Nota -- grid ui-g", y docs/tasks/patron-uix-historial.md sesiones (7) a (15) del 2026-09-29 (probado, revertido por precaucion sin fallo tecnico confirmado, y reaplicado el mismo dia tras aislar y corregir los problemas no relacionados que motivaron los reverts). ========================================================================================= */ html body .ui-dialog .ui-inputfield, html body .ui-dialog input.ui-inputtext, html body .ui-dialog textarea.ui-inputtextarea { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; padding: 8px 13px !important; color: #334155 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; } html body .ui-dialog .ui-inputfield:focus, html body .ui-dialog input.ui-inputtext:focus, html body .ui-dialog textarea.ui-inputtextarea:focus { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .ui-dialog .ui-autocomplete { display: flex !important; align-items: stretch !important; width: 100% !important; } html body .ui-dialog .ui-autocomplete input.ui-inputfield { background-color: #FFFFFF !important; border: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; border-radius: 10px 0 0 10px !important; border-right: none !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; font-weight: 600 !important; width: calc(100% - 32px) !important; margin: 0 !important; } html body .ui-dialog .ui-autocomplete:not(:has(.ui-autocomplete-dropdown)) input.ui-inputfield { width: 100% !important; border-right: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; border-radius: 10px !important; } html body .ui-dialog .ui-autocomplete input.ui-inputfield:focus { border-style: solid !important; border-color: var(--sie-marca, #2563EB) !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 15%, transparent) !important; } html body .ui-dialog .ui-autocomplete .ui-button { background-color: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; border: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; border-left: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 19%, white) !important; border-radius: 0 10px 10px 0 !important; width: 32px !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; } html body .ui-dialog .ui-autocomplete input.ui-inputfield:focus + .ui-button, html body .ui-dialog .ui-autocomplete .ui-button:hover { border-style: solid !important; border-color: var(--sie-marca, #2563EB) !important; background-color: #ffffff !important; } html body .ui-dialog .ui-autocomplete .ui-button .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='12' height='12'%3E%3Cpath fill='%2364748B' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; width: 12px !important; height: 12px !important; margin: 0 !important; position: static !important; display: block !important; text-indent: -9999px !important; } html body .ui-dialog .ui-autocomplete input.ui-inputfield:focus + .ui-button .ui-icon, html body .ui-dialog .ui-autocomplete .ui-button:hover .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='12' height='12'%3E%3Cpath fill='%232563EB' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") !important; } html body .ui-dialog .ui-selectonemenu { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; display: flex !important; align-items: center !important; padding: 0 !important; width: 100% !important; min-height: 38px !important; } html body .ui-dialog .ui-selectonemenu.ui-state-focus, html body .ui-dialog .ui-selectonemenu.ui-state-hover { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .ui-dialog .ui-selectonemenu .ui-selectonemenu-label { color: #334155 !important; padding: 8px 13px !important; background: transparent !important; border: none !important; box-shadow: none !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body .ui-dialog .ui-selectonemenu .ui-selectonemenu-trigger { background: transparent !important; border: none !important; width: 32px !important; padding: 0 !important; border-left: 1px solid #eef2f7 !important; border-radius: 0 10px 10px 0 !important; } html body .ui-dialog .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon { color: #64748b !important; margin-top: 8px !important; } html body .ui-dialog .ui-selectcheckboxmenu { position: relative !important; background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; display: flex !important; align-items: stretch !important; padding: 0 !important; width: 100% !important; min-height: 38px !important; } html body .ui-dialog .ui-selectcheckboxmenu.ui-state-focus, html body .ui-dialog .ui-selectcheckboxmenu.ui-state-hover { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .ui-dialog .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container { flex: 1 1 auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 5px 8px !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; gap: 5px !important; min-height: 0 !important; } html body .ui-dialog .ui-selectcheckboxmenu-token, html body .ui-dialog .ui-selectcheckboxmenu-token.ui-state-active { background: color-mix(in srgb, var(--sie-marca, #2563EB) 5%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black) !important; border: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 15%, white) !important; border-radius: 7px !important; padding: 3px 9px 3px 10px !important; margin: 0 !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } html body .ui-dialog .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-label { color: inherit !important; } html body .ui-dialog .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-icon { position: static !important; margin: 0 !important; color: var(--sie-marca, #2563EB) !important; font-size: 11px !important; opacity: .8 !important; transition: opacity .12s ease, color .12s ease !important; } html body .ui-dialog .ui-selectcheckboxmenu-token .ui-selectcheckboxmenu-token-icon:hover { opacity: 1 !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } html body .ui-dialog .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger { position: static !important; right: auto !important; top: auto !important; bottom: auto !important; left: auto !important; flex: 0 0 32px !important; width: 32px !important; height: auto !important; align-self: stretch !important; background: transparent !important; border: none !important; border-left: 1px solid #eef2f7 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 10px 10px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body .ui-dialog .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon { position: static !important; top: auto !important; left: auto !important; margin: 0 !important; width: 16px !important; height: 16px !important; line-height: 16px !important; color: #64748b !important; display: block !important; } html body .ui-dialog .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label { color: #334155 !important; padding: 8px 13px !important; background: transparent !important; border: none !important; box-shadow: none !important; } html body .ui-dialog .ui-calendar { display: flex !important; align-items: stretch !important; width: 100% !important; } html body .ui-dialog .ui-calendar input.ui-inputfield { border-radius: 10px 0 0 10px !important; border-right: none !important; width: calc(100% - 35px) !important; margin: 0 !important; } html body .ui-dialog .ui-calendar:not(:has(.ui-button)) input.ui-inputfield { width: 100% !important; border-right: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; } html body .ui-dialog .ui-calendar .ui-button, html body .ui-dialog .ui-trigger-calendar .ui-datepicker-trigger.ui-button { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-left: 1px solid #eef2f7 !important; border-radius: 0 10px 10px 0 !important; width: 35px !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: static !important; right: auto !important; left: auto !important; } html body .ui-dialog .ui-calendar input.ui-inputfield:focus + .ui-button, html body .ui-dialog .ui-calendar .ui-button:hover { border-color: var(--sie-marca, #2563EB) !important; background: #fcfdff !important; } html body .ui-dialog .ui-calendar .ui-button .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='14' height='14'%3E%3Cpath fill='%2364748B' d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z'/%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; width: 14px !important; height: 14px !important; margin: 0 !important; position: static !important; display: block !important; text-indent: -9999px !important; } html body .ui-dialog .ui-calendar input.ui-inputfield:focus + .ui-button .ui-icon, html body .ui-dialog .ui-calendar .ui-button:hover .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='14' height='14'%3E%3Cpath fill='%232563EB' d='M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z'/%3E%3C/svg%3E") !important; } html body .ui-dialog .ui-spinner { display: flex !important; align-items: stretch !important; position: relative !important; width: 100% !important; background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; transition: border-color .15s ease, box-shadow .15s ease !important; } html body .ui-dialog .ui-spinner:focus-within { border-color: var(--sie-marca, #2563EB) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sie-marca, #2563EB) 12%, transparent) !important; background: #fcfdff !important; } html body .ui-dialog .ui-spinner .ui-spinner-input { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 10px !important; width: 100% !important; min-width: 0 !important; padding: 8px 32px 8px 12px !important; margin: 0 !important; color: #334155 !important; text-align: left !important; } html body .ui-dialog .ui-spinner .ui-spinner-button { position: absolute !important; right: 0 !important; width: 28px !important; height: 50% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; border: none !important; border-left: 1.5px dashed color-mix(in srgb, var(--sie-marca, #2563EB) 52%, white) !important; box-shadow: none !important; z-index: 1 !important; transition: background-color .15s ease, border-color .15s ease !important; } html body .ui-dialog .ui-spinner .ui-spinner-up { top: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 19%, white) !important; border-radius: 0 8px 0 0 !important; } html body .ui-dialog .ui-spinner .ui-spinner-down { bottom: 0 !important; border-radius: 0 0 8px 0 !important; } html body .ui-dialog .ui-spinner .ui-spinner-button:hover { background-color: #ffffff !important; border-left-style: solid !important; border-left-color: var(--sie-marca, #2563EB) !important; } html body .ui-dialog .ui-spinner .ui-spinner-button .ui-icon { background-image: none !important; background: none !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px !important; overflow: hidden !important; position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; margin: 0 !important; padding: 0 !important; border: none !important; } html body .ui-dialog .ui-spinner .ui-spinner-button .ui-icon svg, html body .ui-dialog .ui-spinner .ui-spinner-button .ui-icon * { display: none !important; } html body .ui-dialog .ui-spinner .ui-spinner-button .ui-icon::after { content: "" !important; display: block !important; text-indent: 0 !important; overflow: visible !important; width: 7px !important; height: 7px !important; box-sizing: border-box !important; border: solid #64748b !important; border-width: 0 1.6px 1.6px 0 !important; } html body .ui-dialog .ui-spinner .ui-spinner-up .ui-icon::after { transform: rotate(-135deg) !important; margin-top: 3px !important; } html body .ui-dialog .ui-spinner .ui-spinner-down .ui-icon::after { transform: rotate(45deg) !important; margin-bottom: 3px !important; } html body .ui-dialog .ui-spinner .ui-spinner-button:hover .ui-icon::after { border-color: var(--sie-marca, #2563EB) !important; } html body .ui-dialog .ui-spinner.ui-state-disabled { opacity: .55 !important; } html body .ui-dialog .tblUIX .ui-spinner { min-width: 84px !important; } html body .ui-dialog .ui-state-error.ui-inputfield, html body .ui-dialog input.ui-state-error.ui-inputtext { border-color: #EF4444 !important; background: #FEF2F2 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important; } /* Chrome/Windows pinta un fondo gris propio (UA stylesheet) sobre cualquier input[readonly], por defecto del navegador, no del tema -- se ve "antiguo" aunque el markup ya use el patron. */ html body .ui-dialog .ui-inputfield[readonly], html body .ui-dialog input.ui-inputtext[readonly] { background: #ffffff !important; } /* ===== 7. BOTONERA "SOFT" ===== */ .btn-bar { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: center; margin-top: 14px; width: 100%; } .btn-bar span { display: inline-block; } /* Contenido de p:dialog: sin .um-sep disponible como separador antes/despues de un btn-bar (el contenido de un p:dialog nunca usa el shell de pagina), asi que queda pegado a lo que viene antes o despues (tabla, otro bloque). Regla nueva y aislada, no modifica el .btn-bar de arriba. */ html body .ui-dialog .btn-bar { margin-top: 16px !important; margin-bottom: 16px !important; } .ui-button.btn-soft, .btn-soft .ui-button, .ui-button.btn-soft-primary, .btn-soft-primary .ui-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 38px !important; padding: 0 20px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 13px !important; box-shadow: none !important; width: auto !important; } .ui-button.btn-soft, .btn-soft .ui-button { background: color-mix(in srgb, var(--sie-marca, #2563EB) 5%, white) !important; color: var(--sie-marca, #2563EB) !important; border: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 15%, white) !important; } .ui-button.btn-soft:hover, .btn-soft .ui-button:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 13%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 73%, black) !important; } .ui-button.btn-soft-primary, .btn-soft-primary .ui-button { background: color-mix(in srgb, var(--sie-marca, #2563EB) 12%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black) !important; border: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 23%, white) !important; } .ui-button.btn-soft-primary:hover, .btn-soft-primary .ui-button:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 23%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } .btn-bar .ui-button .ui-button-text { padding: 0 !important; display: block !important; flex: none !important; color: inherit !important; } .btn-bar .ui-button .ui-icon { position: relative !important; margin: 0 !important; left: 0 !important; top: 0 !important; flex: none !important; display: block !important; font-size: 14px !important; width: auto !important; height: auto !important; color: inherit !important; } /* Microbotones de Tabla (una columna angosta por ícono, espacio mínimo) */ html body .tblUIX td.dtMtto-acc, html body .tblUIX th.dtMtto-acc { padding: 6px 3px !important; text-align: center !important; } .dtMtto-acc .ui-button { border: none !important; border-radius: 7px !important; width: 26px !important; height: 26px !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .dtMtto-acc .ui-button .ui-button-text { display: none !important; } .dtMtto-acc .ui-button .ui-icon { position: static !important; margin: 0 !important; color: inherit !important; font-size: 12px !important; } .acc-edit .ui-button { background: #E9F1FE !important; color: #2563EB !important; } .acc-vcode .ui-button { background: #E0F5F4 !important; color: #0D9488 !important; } .acc-pass .ui-button { background: #FEECEC !important; color: #DC2626 !important; } .acc-log .ui-button { background: #EFEBFE !important; color: #7C3AED !important; } .acc-edit .ui-button:hover { background: #DCE9FD !important; } .acc-vcode .ui-button:hover { background: #CDEEEC !important; } .acc-pass .ui-button:hover { background: #FBD9D9 !important; } .acc-log .ui-button:hover { background: #E1D9FC !important; } /* Acciones adicionales (contratos SIIFA) */ .acc-create .ui-button { background: #EAF3DE !important; color: #3B6D11 !important; } .acc-syncup .ui-button { background: #EAF3DE !important; color: #3B6D11 !important; } .acc-syncdown .ui-button { background: #E1F5EE !important; color: #085041 !important; } .acc-verif .ui-button { background: #EEEDFE !important; color: #3C3489 !important; } .acc-liq .ui-button { background: #FAEEDA !important; color: #633806 !important; } .acc-states .ui-button { background: #FAECE7 !important; color: #993C1D !important; } .acc-create .ui-button:hover { background: #DDEFC8 !important; } .acc-syncup .ui-button:hover { background: #DDEFC8 !important; } .acc-syncdown .ui-button:hover { background: #D2EFE6 !important; } .acc-verif .ui-button:hover { background: #E2E0FB !important; } .acc-liq .ui-button:hover { background: #F6E2C2 !important; } .acc-states .ui-button:hover { background: #F6DFD5 !important; } .acc-create .ui-button.ui-state-disabled, .acc-syncup .ui-button.ui-state-disabled, .acc-syncdown .ui-button.ui-state-disabled, .acc-verif .ui-button.ui-state-disabled, .acc-liq .ui-button.ui-state-disabled, .acc-states .ui-button.ui-state-disabled { background: #F1EFE8 !important; color: #b4b2a9 !important; opacity: 1 !important; } .acc-create .ui-button.ui-state-disabled .ui-icon, .acc-syncup .ui-button.ui-state-disabled .ui-icon, .acc-syncdown .ui-button.ui-state-disabled .ui-icon, .acc-verif .ui-button.ui-state-disabled .ui-icon, .acc-liq .ui-button.ui-state-disabled .ui-icon, .acc-states .ui-button.ui-state-disabled .ui-icon { color: #b4b2a9 !important; } /* Acciones adicionales (liquidación nómina) */ .acc-pdf .ui-button { background: #FDE7E7 !important; color: #B3261E !important; } .acc-excel .ui-button { background: #EAF3DE !important; color: #3B6D11 !important; } .acc-pdf .ui-button:hover { background: #FBD3D3 !important; } .acc-excel .ui-button:hover { background: #DDEFC8 !important; } /* Acciones adicionales (cierre/apertura de registros) */ .acc-cerrar .ui-button { background: #FDEEE3 !important; color: #C2410C !important; } .acc-abrir .ui-button { background: #E7F6EC !important; color: #15803D !important; } .acc-cerrar .ui-button:hover { background: #FBDCC5 !important; } .acc-abrir .ui-button:hover { background: #D2EEDC !important; } .acc-cerrar .ui-button.ui-state-disabled, .acc-abrir .ui-button.ui-state-disabled { background: #F1EFE8 !important; color: #b4b2a9 !important; opacity: 1 !important; } .acc-cerrar .ui-button.ui-state-disabled .ui-icon, .acc-abrir .ui-button.ui-state-disabled .ui-icon { color: #b4b2a9 !important; } /* Acción adicional (gestión de soportes/adjuntos desde tabla, ej. conciliacion_bancaria) */ .acc-soporte .ui-button { background: #E0F2FE !important; color: #0369A1 !important; } .acc-soporte .ui-button:hover { background: #C7E7FB !important; } /* Acción adicional (ajuste administrativo de un detalle, ej. accountant/saldo) */ .acc-ajuste .ui-button { background: #EEF2F6 !important; color: #475569 !important; } .acc-ajuste .ui-button:hover { background: #DDE4EC !important; } /* Acción adicional (navegar a sub-vista/iterador relacionado, ej. distribucion_gasto) */ .acc-detalles .ui-button { background: #E6F1FB !important; color: #0C6E8C !important; } .acc-detalles .ui-button:hover { background: #D2E7F5 !important; } /* Acción adicional (documento de cruce relacionado, ej. accountant/saldo) */ .acc-movimiento .ui-button { background: #E0E7FF !important; color: #4338CA !important; } .acc-movimiento .ui-button:hover { background: #CBD5FB !important; } /* Acción adicional (gráfica/estadística asociada a un registro, ej. usuarios_auditores) */ .acc-graf .ui-button { background: #E7F5F0 !important; color: #0F766E !important; } .acc-graf .ui-button:hover { background: #D3ECE3 !important; } /* Acciones adicionales (consulta de solo lectura / inactivar registro, ej. health_declaration) */ .acc-ver .ui-button { background: #E0F7FA !important; color: #0E7490 !important; } .acc-anular .ui-button { background: #FCE4EC !important; color: #9D174D !important; } .acc-ver .ui-button:hover { background: #C7EFF5 !important; } .acc-anular .ui-button:hover { background: #F8CFE0 !important; } .acc-ver .ui-button.ui-state-disabled, .acc-anular .ui-button.ui-state-disabled { background: #F1EFE8 !important; color: #b4b2a9 !important; opacity: 1 !important; } .acc-ver .ui-button.ui-state-disabled .ui-icon, .acc-anular .ui-button.ui-state-disabled .ui-icon { color: #b4b2a9 !important; } /* Badges Píldoras */ .badge-estado { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700; text-align: center; } .badge-si { background: #D1FAE5 !important; color: #065F46 !important; } .badge-no { background: #FEE2E2 !important; color: #991B1B !important; } .badge-warn { background: #FEF3C7 !important; color: #92400E !important; } .badge-info { background: #E6F1FB !important; color: #0C447C !important; } .badge-mute { background: #F1EFE8 !important; color: #888780 !important; } .badge-estado i { font-size: 10px; margin-right: 5px; } /* ===== 8. TABLA UIX ===== */ .tblUIX.ui-datatable { border: 1px solid #eef1f6 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: none !important; } html body .tblUIX.ui-datatable thead th, html body .tblUIX.ui-datatable thead th.ui-state-default, html body .ui-widget-content .tblUIX.ui-datatable thead th, html body .ui-widget-content .tblUIX.ui-datatable thead th.ui-state-default, html body .um-subblock .tblUIX.ui-datatable thead th, html body .um-subblock .tblUIX.ui-datatable thead th.ui-state-default { background: color-mix(in srgb, var(--sie-marca, #2563EB) 16%, white) !important; background-color: color-mix(in srgb, var(--sie-marca, #2563EB) 16%, white) !important; background-image: none !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 73%, black) !important; font-size: 11px !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: .04em !important; border: none !important; border-right: 1px solid rgba(30, 64, 175, .12) !important; padding: 10px 14px !important; } html body .tblUIX.ui-datatable thead th:first-child { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; } html body .tblUIX.ui-datatable thead th:last-child { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; border-right: none !important; } /* table-layout es "auto" (no "fixed"): si la suma del ancho natural de las columnas (texto de cada th) no llena el 100% de la tabla — muy común con la tabla vacía ("No existen datos para mostrar"), que no tiene filas de datos que le den ancho real a cada columna — queda un sobrante a la derecha SIN ningún th encima. Ese sobrante pinta el fondo blanco de la tabla/thead, no de una celda, así que ninguna regla sobre th lo cubre. Pintar el thead mismo del mismo azul tapa ese sobrante sea cual sea su ancho, SIEMPRE (sin condición — regla simple e intencionalmente sin `:has()`, que algunos navegadores de los usuarios de campo no soportan; confirmado en vivo que con `:has()` la regla no se aplicaba en al menos un equipo real aunque sí en Chrome moderno). Costo aceptado: una tabla cuya fila de encabezado no tiene NINGUNA columna con texto (ej. el detalle de un documento, un checkbox de selección + una sola columna ancha) queda con una franja azul lisa sin texto, en vez de transparente — más simple y sin sorpresas de soporte de navegador que intentar distinguir ese caso. */ html body .tblUIX.ui-datatable thead { background: color-mix(in srgb, var(--sie-marca, #2563EB) 16%, white) !important; } .tblUIX .ui-datatable-data tr { border: none !important; transition: background .12s ease; } .tblUIX .ui-datatable-data tr td { border: none !important; border-bottom: 1px solid #eef2f7 !important; border-right: 1px solid #f1f4f9 !important; padding: 8px 14px !important; } .tblUIX .ui-datatable-data tr td:last-child { border-right: none !important; } .tblUIX .ui-datatable-data tr.ui-datatable-even { background: #F9FBFD !important; } .tblUIX .ui-datatable-data tr.ui-datatable-odd { background: #ffffff !important; } html body .tblUIX.ui-datatable .ui-datatable-data tr:hover, html body .tblUIX.ui-datatable .ui-datatable-data tr:hover td { background: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; background-color: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; } html body .tblUIX.ui-datatable .ui-datatable-data tr.ui-state-highlight, html body .tblUIX.ui-datatable .ui-datatable-data tr.ui-state-highlight td, html body .um-subblock .tblUIX.ui-datatable .ui-datatable-data tr.ui-state-highlight, html body .um-subblock .tblUIX.ui-datatable .ui-datatable-data tr.ui-state-highlight td { background: #F4EFFA !important; background-color: #F4EFFA !important; background-image: none !important; color: #7A5A9C !important; font-weight: bold !important; } /* ===== 8b. TABLA UIX PLANA ( escrita a mano, sin p:dataTable -- para datos fijos por fila que no vienen de una lista real, ej. detalle de archivos de liquidacion por tipo). Mismo lenguaje visual que 8. arriba, aplicado directo a thead/tbody/tr/td nativos en vez de las clases ui-datatable-* que solo genera el renderer de PrimeFaces. */ html body table.tblUIX:not(.ui-datatable) { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid #eef1f6 !important; border-radius: 12px !important; overflow: hidden !important; } html body table.tblUIX:not(.ui-datatable) thead th { background: color-mix(in srgb, var(--sie-marca, #2563EB) 16%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 73%, black) !important; font-size: 11px !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: .04em !important; text-align: left !important; border: none !important; border-right: 1px solid rgba(30, 64, 175, .12) !important; padding: 10px 14px !important; } html body table.tblUIX:not(.ui-datatable) thead th:last-child { border-right: none !important; } html body table.tblUIX:not(.ui-datatable) tbody tr td { border: none !important; border-bottom: 1px solid #eef2f7 !important; border-right: 1px solid #f1f4f9 !important; padding: 8px 14px !important; } html body table.tblUIX:not(.ui-datatable) tbody tr td:last-child { border-right: none !important; } html body table.tblUIX:not(.ui-datatable) tbody tr:nth-child(even) { background: #F9FBFD !important; } html body table.tblUIX:not(.ui-datatable) tbody tr:nth-child(odd) { background: #ffffff !important; } html body table.tblUIX:not(.ui-datatable) tbody tr:hover, html body table.tblUIX:not(.ui-datatable) tbody tr:hover td { background: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; } /* PAGINADOR */ .tblUIX .ui-paginator, .dgUIX .ui-paginator { background: #ffffff !important; border: none !important; border-top: 1px solid #eef2f7 !important; padding: 10px !important; } .tblUIX .ui-paginator .ui-paginator-page, .dgUIX .ui-paginator .ui-paginator-page { min-width: 30px !important; height: 30px !important; line-height: 30px !important; border-radius: 8px !important; margin: 0 2px !important; color: #64748b !important; font-weight: 600 !important; border: none !important; background: transparent !important; } .tblUIX .ui-paginator .ui-paginator-page:hover, .dgUIX .ui-paginator .ui-paginator-page:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; color: var(--sie-marca, #2563EB) !important; } .tblUIX .ui-paginator .ui-paginator-page.ui-state-active, .dgUIX .ui-paginator .ui-paginator-page.ui-state-active { background: var(--sie-marca, #2563EB) !important; color: #ffffff !important; font-weight: 700 !important; } .tblUIX .ui-paginator .ui-paginator-first, .tblUIX .ui-paginator .ui-paginator-prev, .tblUIX .ui-paginator .ui-paginator-next, .tblUIX .ui-paginator .ui-paginator-last, .dgUIX .ui-paginator .ui-paginator-first, .dgUIX .ui-paginator .ui-paginator-prev, .dgUIX .ui-paginator .ui-paginator-next, .dgUIX .ui-paginator .ui-paginator-last { color: #94a3b8 !important; border-radius: 8px !important; background: transparent !important; } .tblUIX .ui-paginator .ui-paginator-first:hover, .tblUIX .ui-paginator .ui-paginator-prev:hover, .tblUIX .ui-paginator .ui-paginator-next:hover, .tblUIX .ui-paginator .ui-paginator-last:hover, .dgUIX .ui-paginator .ui-paginator-first:hover, .dgUIX .ui-paginator .ui-paginator-prev:hover, .dgUIX .ui-paginator .ui-paginator-next:hover, .dgUIX .ui-paginator .ui-paginator-last:hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 4%, white) !important; color: var(--sie-marca, #2563EB) !important; } /* ===== Estilo Premium para p:fileUpload ===== */ html body .ui-fileupload { border: 1px solid #cce3f0 !important; border-radius: 12px !important; overflow: hidden !important; background: #ffffff !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important; } /* 1. La Franja Azul (Con más vida y un degradado moderno) */ html body .ui-fileupload .ui-fileupload-buttonbar { border: none !important; border-bottom: 2px solid #bae6fd !important; background: linear-gradient(135deg, #e0f2fe 0%, color-mix(in srgb, var(--sie-marca, #2563EB) 12%, white) 100%) !important; /* Degradado azul vibrante */ padding: 1em 1.5em !important; display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; } /* 2. El Botón "Seleccionar" (El protagonista) */ html body .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose { background-color: #ecfdf5 !important; /* Fondo verde menta muy suave */ color: #047857 !important; /* Texto verde esmeralda elegante */ border: 1px solid #a7f3d0 !important; /* Borde verde sutil */ border-radius: 8px !important; font-weight: 600 !important; padding: 0.4em 1.2em !important; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.1) !important; transition: all 0.3s ease !important; } /* Hover del Botón Seleccionar (Para que se sienta interactivo) */ html body .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose:hover { background-color: #d1fae5 !important; /* Verde menta ligeramente más acentuado */ color: #064e3b !important; /* Texto verde más oscuro */ border-color: #6ee7b7 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important; } /* Ajuste del ícono interno del botón seleccionar */ html body .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose .ui-icon { color: #047857 !important; } /* 3. Botones Secundarios (Subir y Cancelar) - Se mantienen sutiles pero elegantes */ html body .ui-fileupload .ui-fileupload-buttonbar .ui-button:not(.ui-fileupload-choose) { background-color: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; font-weight: 500 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; transition: all 0.2s ease !important; } html body .ui-fileupload .ui-fileupload-buttonbar .ui-button:not(.ui-fileupload-choose):hover { background-color: #f8fafc !important; border-color: #94a3b8 !important; } /* 4. Zona de arrastre / contenido (Mantiene su elegancia limpia) */ html body .ui-fileupload .ui-fileupload-content { background: #f8fafc !important; border: 2px dashed #cbd5e1 !important; border-radius: 8px !important; margin: 12px !important; padding: 2.5em !important; text-align: center !important; color: #64748b !important; min-height: 120px !important; transition: border-color 0.2s ease !important; } html body .ui-fileupload .ui-fileupload-content:hover { border-color: #3b82f6 !important; background: #f1f5f9 !important; } /* ========================================================================== MENÚ CONTEXTUAL (p:contextMenu) EN TONOS LILA (TABLA PODEROSA) ========================================================================== */ html body .ui-contextmenu { background: #ffffff !important; border: 1px solid #e9d5ff !important; border-radius: 10px !important; padding: 6px !important; box-shadow: 0 10px 25px rgba(107, 33, 168, 0.12) !important; } html body .ui-contextmenu .ui-menuitem-link { border-radius: 6px !important; padding: 8px 12px !important; color: #334155 !important; transition: all 0.2s ease !important; } html body .ui-contextmenu .ui-menuitem-link.ui-state-hover, html body .ui-contextmenu .ui-menuitem-link.ui-state-active, html body .ui-contextmenu .ui-menuitem-link:hover { background-color: #f0ebf8 !important; color: #4a148c !important; border: none !important; box-shadow: none !important; } html body .ui-contextmenu .ui-menuitem-link.ui-state-hover .ui-menuitem-icon, html body .ui-contextmenu .ui-menuitem-link:hover .ui-menuitem-icon { color: #4a148c !important; } /* ========================================================================== 10. TOOLTIPS UIX (reemplazan el title nativo del navegador — ver uix-tooltip.js) ========================================================================== */ .uix-tooltip { position: absolute; z-index: 100000; pointer-events: none; background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; color: #f1f5f9 !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .01em; line-height: 1.35; padding: 7px 12px; border-radius: 8px; box-shadow: 0 10px 22px -6px rgba(15, 23, 42, .40), 0 2px 6px rgba(15, 23, 42, .18); opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; max-width: 240px; white-space: normal; text-align: center; } .uix-tooltip.uix-tooltip-visible { opacity: 1; transform: translateY(0); } .uix-tooltip::after { content: ''; position: absolute; left: 50%; margin-left: -6px; border: 6px solid transparent; } .uix-tooltip:not(.uix-tooltip-below)::after { top: 100%; border-top-color: #334155; } .uix-tooltip.uix-tooltip-below::after { bottom: 100%; border-bottom-color: #334155; } /* ========================================================================== 11. MENSAJES (p:growl y p:messages) — adaptado de docs/tasks (HCE) patron-uix-hce.md, decisión D13. Severidad = color: info verde (confirmaciones), advertencia ámbar, error rojo, fatal rojo oscuro. Iconos Font Awesome (self-hosted) via ::before, no PrimeIcons (SIE no lo carga por defecto). ========================================================================== */ body .ui-growl .ui-growl-item-container.ui-growl-info, body .ui-messages > .ui-messages-info { --m-bg: #E1F5EE; --m-ink: #085041; --m-solid: #1D9E75; --m-line: #9FE1CB; } body .ui-growl .ui-growl-item-container.ui-growl-warn, body .ui-messages > .ui-messages-warn { --m-bg: #FAEEDA; --m-ink: #633806; --m-solid: #EF9F27; --m-line: #FAC775; } body .ui-growl .ui-growl-item-container.ui-growl-error, body .ui-messages > .ui-messages-error { --m-bg: #FCEBEB; --m-ink: #791F1F; --m-solid: #E24B4A; --m-line: #F7C1C1; } body .ui-growl .ui-growl-item-container.ui-growl-fatal, body .ui-messages > .ui-messages-fatal { --m-bg: #FCEBEB; --m-ink: #501313; --m-solid: #A32D2D; --m-line: #F09595; } /* ----- 11.1 Growl: tarjeta blanca flotante con barra de color e icono en círculo pastel ----- */ body .ui-growl { top: 82px; width: 380px; max-width: calc(100vw - 32px); } body .ui-growl .ui-growl-item-container, body .ui-growl .ui-growl-item-container.ui-growl-info, body .ui-growl .ui-growl-item-container.ui-growl-warn, body .ui-growl .ui-growl-item-container.ui-growl-error, body .ui-growl .ui-growl-item-container.ui-growl-fatal { position: relative; overflow: hidden; margin: 0 0 10px 0 !important; background: #ffffff !important; color: #1f2937 !important; border: 1px solid #E5EAF1 !important; border-radius: 14px !important; box-shadow: 0 16px 34px -14px rgba(15, 23, 42, .32) !important; animation: uix-msg-entra .28s ease-out; } body .ui-growl .ui-growl-item-container::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--m-solid, #2563EB); } @keyframes uix-msg-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body .ui-growl .ui-growl-item-container { animation: none; } } body .ui-growl .ui-growl-item-container .ui-growl-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 38px 14px 20px !important; min-height: 0 !important; } body .ui-growl .ui-growl-item-container .ui-growl-image { flex: none; float: none !important; width: 38px !important; height: 38px !important; margin: 0 !important; border-radius: 50%; background: var(--m-bg) !important; color: var(--m-solid) !important; font-size: 16px !important; display: inline-flex !important; align-items: center; justify-content: center; } /* font-family/font-weight van en la MISMA regla ::before (no en .ui-growl-image de arriba): el tema base de PrimeFaces fija "font: 14px/1 primeicons !important" con un selector que incluye la clase de severidad (.ui-growl-warn .ui-growl-image, más específico que uno sin severidad) — si font-family quedara en una regla menos específica, pierde esa disputa aunque tenga !important, y el glifo de FontAwesome se vuelve invisible (se renderiza con la fuente/weight de PrimeIcons, que SIE no carga). Iguala la especificidad usando el mismo selector completo que el content. */ body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-image:before { content: "\f058"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-growl .ui-growl-item-container.ui-growl-warn .ui-growl-image:before { content: "\f071"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-growl .ui-growl-item-container.ui-growl-error .ui-growl-image:before { content: "\f057"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-growl .ui-growl-item-container.ui-growl-fatal .ui-growl-image:before { content: "\f05e"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-growl .ui-growl-item-container .ui-growl-message { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; } body .ui-growl .ui-growl-item-container .ui-growl-title { display: block; font-size: 13.5px; font-weight: 800; color: var(--m-ink) !important; margin: 1px 0 3px; padding: 0 !important; line-height: 1.3; } body .ui-growl .ui-growl-item-container .ui-growl-message p { margin: 0 !important; font-size: 12.5px; line-height: 1.45; color: #4b5563 !important; font-weight: 400; } body .ui-growl .ui-growl-item-container .ui-icon-closethick { top: 10px !important; right: 10px !important; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; display: inline-flex !important; align-items: center; justify-content: center; color: #9aa3b2 !important; cursor: pointer; transition: background .15s, color .15s; } body .ui-growl .ui-growl-item-container .ui-icon-closethick:hover { background: #F1F3F6; color: #4b5563 !important; } /* ----- 11.2 Messages (barra, normalmente al pie del formulario): fondo pastel, barra de color, icono en círculo blanco y una fila por mensaje ("Campo: detalle") ----- */ body .ui-messages { text-align: left; font-weight: 400; margin: 12px 0; } body .ui-messages > .ui-messages-info, body .ui-messages > .ui-messages-warn, body .ui-messages > .ui-messages-error, body .ui-messages > .ui-messages-fatal { position: relative; padding: 14px 44px 14px 70px !important; border-radius: 14px !important; background: var(--m-bg) !important; color: var(--m-ink) !important; border: 1px solid var(--m-line) !important; border-left: 5px solid var(--m-solid) !important; box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .35); } body .ui-messages > div > [class$="-icon"] { position: absolute; left: 18px; top: 14px; width: 38px; height: 38px; margin: 0 !important; border-radius: 50%; background: #ffffff !important; color: var(--m-solid) !important; font-size: 16px !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15, 23, 42, .08); } /* font-family/font-weight en la MISMA regla ::before que el content — mismo motivo que en 11.1 Growl: el tema base de PrimeFaces fija el icono a PrimeIcons con un selector más específico (incluye la severidad), y si quedara en una regla menos específica pierde esa disputa pese al !important. */ body .ui-messages > .ui-messages-info > .ui-messages-info-icon:before { content: "\f058"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-messages > .ui-messages-warn > .ui-messages-warn-icon:before { content: "\f071"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-messages > .ui-messages-error > .ui-messages-error-icon:before { content: "\f057"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-messages > .ui-messages-fatal > .ui-messages-fatal-icon:before { content: "\f05e"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body .ui-messages > div ul { list-style: none; margin: 0 !important; padding: 0 !important; } body .ui-messages > div ul > li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 6px 0; border-bottom: 1px dashed var(--m-line); font-size: 13px; line-height: 1.45; } body .ui-messages > div ul > li:last-child { border-bottom: none; } body .ui-messages > div ul [class$="-summary"] { font-weight: 800; color: var(--m-ink) !important; margin: 0 !important; } body .ui-messages > div ul [class$="-detail"] { color: #4b5563 !important; margin: 0 !important; } body .ui-messages > div > .ui-messages-close { top: 10px !important; right: 10px !important; width: 26px !important; height: 26px !important; line-height: 26px !important; background: transparent !important; color: var(--m-ink) !important; opacity: .6; border-radius: 50%; } body .ui-messages > div > .ui-messages-close:hover { opacity: 1; background: rgba(255, 255, 255, .7) !important; } /* Campo con error de validación dentro de um-card */ html body .um-card .ui-state-error.ui-inputfield, html body .um-card input.ui-state-error.ui-inputtext { border-color: #EF4444 !important; background: #FEF2F2 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important; } /* ========================================================================== 12. EXPORTAR TABLA (botón circular degradado) ========================================================================== */ .exp-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; } .exp-bar .ui-button { border: none !important; border-radius: 9px !important; width: 34px !important; height: 34px !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .10) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: transform .15s ease, box-shadow .15s ease !important; } .exp-bar .ui-button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(15, 23, 42, .16) !important; } .exp-bar .ui-button .ui-button-text { display: none !important; } .exp-bar .ui-button .ui-icon { position: static !important; margin: 0 !important; font-size: 14px !important; color: inherit !important; } .exp-xlsx .ui-button { background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%) !important; color: #15803D !important; } .exp-xlsx .ui-button:hover { background: linear-gradient(135deg, #BBF7D0 0%, #86EFAC 100%) !important; color: #14532D !important; } /* ========================================================================== 13. LÍNEA DE ESTADOS (timeline tipo seguimiento de paquete) Tonos pastel CDS: relleno 50 + texto 800 de la misma familia. Estaciones: is-done (verde) / is-current (azul) / is-pending (gris). ========================================================================== */ /* Datos de contexto (prestador, nit, contrato, estado) */ .um-tl-ctx { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0; margin: 2px auto 20px; max-width: 940px; background: #f8f9fb; border: 1px solid #eef0f3; border-radius: 12px; padding: 4px 0; overflow: hidden; } .um-tl-ctx > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 13px; flex: 1 1 auto; min-width: 150px; padding: 10px 22px; border-left: 1px solid #eef0f3; } .um-tl-ctx > div:first-child { border-left: 0; } .um-tl-ctx-k { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #9ca3af; } .um-tl-ctx-v { color: #1f2937; font-weight: 600; } .um-tl-ctx-badge { align-self: center; background: color-mix(in srgb, var(--sie-marca, #2563EB) 13%, white); color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 20px; } /* Leyenda */ .um-tl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; font-size: 12px; color: #6b7280; } .um-tl-legend span { display: inline-flex; align-items: center; gap: 6px; } .um-tl-legend i { font-size: 13px; } .um-tl-legend .lg-done i { color: #3B6D11; } .um-tl-legend .lg-current i { color: #185FA5; } .um-tl-legend .lg-pending i { color: #B4B2A9; } .um-tl-legend .lg-siifa i { color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); } /* Riel */ .um-tl { position: relative; } .um-tl-item { position: relative; padding-left: 48px; padding-bottom: 14px; } .um-tl-item:last-child { padding-bottom: 0; } .um-tl-line { position: absolute; left: 16px; top: 30px; bottom: -4px; width: 2px; background: #E5E3DB; } .um-tl-item.is-done > .um-tl-line { background: #C0DD97; } .um-tl-item.is-current > .um-tl-line, .um-tl-item.is-pending > .um-tl-line { background: transparent; background-image: linear-gradient(#D3D1C7 40%, transparent 0); background-size: 2px 9px; background-repeat: repeat-y; } .um-tl-item:last-child > .um-tl-line { display: none; } /* Nodo */ .um-tl-node { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; box-sizing: border-box; } .um-tl-item.is-done > .um-tl-node { background: #EAF3DE; border: 1px solid #C0DD97; color: #27500A; } .um-tl-item.is-current > .um-tl-node { background: var(--sie-marca, #2563EB); color: #ffffff; } .um-tl-item.is-pending > .um-tl-node { background: #F1EFE8; border: 1px solid #D3D1C7; color: #888780; } .um-tl-node .um-tl-dot { font-size: 9px; } .um-tl-ring { position: absolute; left: -3px; top: -3px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #B5D4F4; box-sizing: border-box; } /* Tarjeta de estación */ .um-tl-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; } .um-tl-item.is-current > .um-tl-card { border-color: #B5D4F4; box-shadow: 0 4px 12px color-mix(in srgb, var(--sie-marca, #2563EB) 10%, transparent); } .um-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 14px; } .um-tl-item.is-done > .um-tl-card .um-tl-head { background: #F4F9EE; } .um-tl-item.is-current > .um-tl-card .um-tl-head { background: color-mix(in srgb, var(--sie-marca, #2563EB) 13%, white); } .um-tl-name { font-size: 14px; font-weight: 700; color: #1f2937; } .um-tl-item.is-pending > .um-tl-card .um-tl-name { color: #888780; font-weight: 500; } .um-tl-item.is-current > .um-tl-card .um-tl-name { color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); } .um-tl-date { font-size: 12px; color: #6b7280; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .um-tl-item.is-done > .um-tl-card .um-tl-date { color: #3B6D11; } .um-tl-item.is-current > .um-tl-card .um-tl-date { color: #185FA5; } .um-tl-tag-actual { background: var(--sie-marca, #2563EB); color: #ffffff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 8px; } .um-tl-tag-siifa { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); background: color-mix(in srgb, var(--sie-marca, #2563EB) 13%, white); padding: 2px 9px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .um-tl-body { padding: 10px 14px; } .um-tl-note { font-size: 12px; color: #475569; margin: 0 0 10px; } .um-tl-liq { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; } .um-tl-obs { font-size: 12px; color: #6b7280; margin: 0; line-height: 1.45; } .um-tl-obs i { color: #9ca3af; margin-right: 6px; } /* Rama de rechazo (fuera de la secuencia lineal) */ .um-tl-branch { position: relative; padding-left: 48px; padding-bottom: 14px; margin-left: 26px; } .um-tl-branch-elbow { position: absolute; left: -10px; top: -6px; width: 26px; height: 22px; border-left: 2px dashed #F09595; border-bottom: 2px dashed #F09595; border-radius: 0 0 0 8px; } .um-tl-branch-card { background: #FCEBEB; border: 1px dashed #F09595; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .um-tl-branch.is-reached .um-tl-branch-card { background: #F7C1C1; border-style: solid; } .um-tl-branch-card > i { color: #A32D2D; font-size: 15px; } .um-tl-branch-name { font-size: 13px; font-weight: 700; color: #791F1F; } .um-tl-branch-note { font-size: 12px; color: #A32D2D; margin-left: auto; } /* ========================================================================== 14. TARJETAS DE ÍTEMS (servicios / medicamentos / población del contrato u otro sí) Reemplazan el p:dataTable por un p:dataGrid con tarjetas. Linea de color por tipo: is-serv (teal) / is-med (ambar) / um-pob (por cobertura). Rampas CDS. ========================================================================== */ .um-datagrid .ui-datagrid-content { background: transparent; border: 0; padding: 0; } .um-datagrid .ui-datagrid-column { padding: 7px !important; vertical-align: top; } .um-item { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .um-item:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .08); transform: translateY(-2px); border-color: #d1d5db; } .um-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; } .um-item.is-serv .um-item-head { background: #E1F5EE; } .um-item.is-med .um-item-head { background: #FAEEDA; } .um-item-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .um-item-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .um-item.is-serv .um-item-ic { background: #9FE1CB; color: #085041; } .um-item.is-med .um-item-ic { background: #FAC775; color: #633806; } .um-item-code { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .um-item.is-serv .um-item-code { color: #0d3d33; } .um-item.is-med .um-item-code { color: #5a3406; } .um-item-badge { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .um-item-badge.on { background: #EAF3DE; color: #27500A; } .um-item-badge.off { background: #F1EFE8; color: #444441; } .um-item-desc { flex: 1; padding: 10px 13px; margin: 0; font-size: 12.5px; color: #374151; line-height: 1.45; word-break: break-word; overflow-wrap: break-word; } .um-item-foot { padding: 8px 13px; border-top: 1px solid #eef1f6; font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 6px; } .um-item-foot i { font-size: 12px; } /* Poblacion cubierta: un tono por cobertura. Municipal (azul) / Departamental (indigo) / Nacional (durazno) */ .um-item.um-pob.is-mun .um-item-head { background: #E9F1FE; } .um-item.um-pob.is-mun .um-item-ic { background: #B5D4F4; color: #0C447C; } .um-item.um-pob.is-mun .um-item-code { color: #0C447C; } .um-item.um-pob.is-mun .um-item-badge { background: #D7E7FB; color: #0C447C; } .um-item.um-pob.is-dep .um-item-head { background: #EEEDFE; } .um-item.um-pob.is-dep .um-item-ic { background: #CECBF6; color: #26215C; } .um-item.um-pob.is-dep .um-item-code { color: #26215C; } .um-item.um-pob.is-dep .um-item-badge { background: #E2E0FB; color: #3C3489; } .um-item.um-pob.is-nal .um-item-head { background: #FAECE7; } .um-item.um-pob.is-nal .um-item-ic { background: #F6C7B5; color: #7A2E13; } .um-item.um-pob.is-nal .um-item-code { color: #7A2E13; } .um-item.um-pob.is-nal .um-item-badge { background: #F6DFD5; color: #993C1D; } .um-pob-meta { display: flex; align-items: baseline; gap: 6px; } .um-pob-meta + .um-pob-meta { margin-top: 5px; } .um-pob-meta .k { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #9ca3af; } .um-pob-meta .v { color: #374151; font-weight: 600; font-variant-numeric: tabular-nums; } .um-pob-nota { margin-top: 5px; font-size: 12px; color: #9ca3af; font-style: italic; } /* ========================================================================== 15. PESTAÑAS SEGMENTADAS (p:tabView con styleClass="um-tabs") ========================================================================== */ .um-tabs.ui-tabs { background: transparent !important; border: 0 !important; } .um-tabs .ui-tabs-nav { background: #F1EFE8 !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 4px !important; display: inline-flex !important; flex-wrap: wrap; gap: 4px; margin: 0 0 18px !important; } .um-tabs .ui-tabs-nav > .ui-tabs-header { background: transparent !important; border: 0 !important; margin: 0 !important; border-radius: 9px !important; top: 0 !important; transition: background .15s ease, box-shadow .15s ease; } .um-tabs .ui-tabs-nav > .ui-tabs-header > a { color: #6b7280 !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center; gap: 7px; } .um-tabs .ui-tabs-nav > .ui-tabs-header.ui-state-hover { background: rgba(255, 255, 255, .55) !important; } .um-tabs .ui-tabs-nav > .ui-tabs-header.ui-state-hover > a { color: #374151 !important; } .um-tabs .ui-tabs-nav > .ui-tabs-header.ui-tabs-selected { background: #ffffff !important; box-shadow: 0 1px 3px rgba(16, 24, 40, .12) !important; } .um-tabs .ui-tabs-nav > .ui-tabs-header.ui-tabs-selected > a { color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } .um-tabs .ui-tabs-nav > .ui-tabs-header .um-tab-ttl { display: inline-flex; align-items: center; gap: 7px; } .um-tabs .ui-tabs-nav > .ui-tabs-header .um-tab-ic { font-size: 15px; flex-shrink: 0; } .um-tabs .ui-tabs-panels { background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 18px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .um-tabs .ui-tabs-panels > .ui-tabs-panel { padding: 0 !important; } /* ========================================================================== 15a. PESTAÑAS SEGMENTADAS CON ENLACES (bandeja / Mi tablero) Mismo aspecto que um-tabs, para pestañas que cambian de vista en el servidor (p:commandLink):
Orden de los tableros: la bandeja a la izquierda y "Mi tablero" a la derecha. ========================================================================== */ .um-seg { background: #F1EFE8; border: 1px solid #e5e7eb; border-radius: 12px; padding: 4px; display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; } .um-seg .um-seg-tab, .um-seg .um-seg-tab:visited { color: #6b7280 !important; padding: 8px 16px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; text-decoration: none !important; transition: background .15s ease, box-shadow .15s ease; } .um-seg .um-seg-tab i { font-size: 15px; flex-shrink: 0; } .um-seg .um-seg-tab:hover { background: rgba(255, 255, 255, .55); color: #374151 !important; } .um-seg .um-seg-tab.um-seg-on { background: #ffffff; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } /* pestaña bloqueada (drill-down desde un tablero con la cinta "Volver"): PrimeFaces pinta un span.ui-state-disabled */ .um-seg .um-seg-tab.ui-state-disabled { opacity: .45; cursor: not-allowed; background: transparent !important; box-shadow: none; } /* ========================================================================== 15b. TOGGLE DE DOS OPCIONES (p:selectOneButton con styleClass="um-toggle") ========================================================================== */ .um-toggle.ui-selectonebutton { display: inline-flex !important; background: #F1F5FB !important; border: 1px solid #E2E8F5 !important; border-radius: 999px !important; padding: 4px !important; gap: 2px !important; } .um-toggle.ui-selectonebutton .ui-button { background: transparent !important; border: none !important; border-radius: 999px !important; padding: 9px 22px !important; font-size: 13.5px !important; font-weight: 700 !important; color: #64748B !important; box-shadow: none !important; transition: background .15s ease, color .15s ease !important; } .um-toggle.ui-selectonebutton .ui-button .ui-button-text { padding: 0 !important; } .um-toggle.ui-selectonebutton .ui-button.ui-state-hover { background: #E7EEFB !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } .um-toggle.ui-selectonebutton .ui-button.ui-state-active { background: color-mix(in srgb, var(--sie-marca, #2563EB) 12%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black) !important; } .um-toggle.ui-selectonebutton .ui-button.ui-state-active.ui-state-hover { background: color-mix(in srgb, var(--sie-marca, #2563EB) 23%, white) !important; color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black) !important; } /* ========================================================================== 16. TARJETA DE OTRO SÍ (lista de otros sí del contrato) Familia violeta CDS: #EEEDFE / #CECBF6 / #3C3489 / #26215C. ========================================================================== */ .um-osi { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .um-osi:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .08); transform: translateY(-2px); border-color: #d1d5db; } .um-osi-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #EEEDFE; } .um-osi-ic { width: 32px; height: 32px; border-radius: 50%; background: #CECBF6; color: #26215C; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .um-osi-hd { min-width: 0; } .um-osi-name { margin: 0; font-size: 14px; font-weight: 500; color: #26215C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .um-osi-val { margin: 1px 0 0; font-size: 12px; color: #534AB7; } .um-osi-body { padding: 11px 14px; flex: 1; display: flex; flex-direction: column; gap: 9px; } .um-osi-meta { display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; } .um-osi-meta .k { color: #9ca3af; } .um-osi-meta .v { color: #374151; } .um-osi-meta .est { margin-left: auto; } .um-osi-badge { background: color-mix(in srgb, var(--sie-marca, #2563EB) 13%, white); color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 20px; } .um-osi-chips { display: flex; gap: 6px; flex-wrap: wrap; } .um-osi-chip { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; } .um-osi-chip.on { background: #EAF3DE; color: #27500A; } .um-osi-chip.off { background: #F1EFE8; color: #9ca3af; } .um-osi-foot { padding: 10px 14px; border-top: 1px solid #eef1f6; margin-top: 0 !important; justify-content: flex-start !important; gap: 8px !important; } /* Botón "soft" deshabilitado */ .btn-soft .ui-button.ui-state-disabled, .btn-soft-primary .ui-button.ui-state-disabled { background: #F1EFE8 !important; color: #9ca3af !important; border-color: #e5e7eb !important; opacity: 1 !important; } /* ========================================================================== 16b. ÁRBOL DE JERARQUÍA (p:tree con styleClass="um-tree") Por defecto PrimeFaces renderiza .ui-tree como inline-block (no llena su columna) y sin ningún lenguaje visual propio — esto lo trae a la tarjeta blanca + fila redondeada + acento azul del resto del sistema. ========================================================================== */ .um-tree.ui-tree { width: 100% !important; box-sizing: border-box; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .um-tree .ui-tree-container { padding: 0 !important; width: 100% !important; } .um-tree .ui-treenode { width: 100% !important; } .um-tree .ui-treenode-connector-table { width: auto !important; } .um-tree .ui-treenode-content { display: flex !important; align-items: center; width: 100% !important; box-sizing: border-box; border-radius: 8px !important; padding: 8px 10px !important; margin: 1px 0; white-space: nowrap; box-shadow: inset 0 0 0 0 transparent; transition: background .15s ease, box-shadow .15s ease; } .um-tree .ui-treenode-content.ui-state-hover { background: #F5F8FF !important; } .um-tree .ui-treenode-content.ui-state-highlight { background: linear-gradient(90deg, color-mix(in srgb, var(--sie-marca, #2563EB) 8%, white) 0%, #F4F9FF 100%) !important; box-shadow: inset 3px 0 0 var(--sie-marca, #2563EB), inset 0 0 0 1px color-mix(in srgb, var(--sie-marca, #2563EB) 13%, white) !important; } .um-tree .ui-treenode-content.ui-state-highlight.ui-state-hover { background: linear-gradient(90deg, #DCEAFE 0%, #EEF5FF 100%) !important; } .um-tree .ui-treenode-icon { color: #D97706; margin-right: 8px; font-size: 14px; flex-shrink: 0; transition: color .15s ease; } .um-tree .ui-treenode-content.ui-state-highlight .ui-treenode-icon { color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black); } .um-tree .ui-treenode-label { font-size: 13.5px; color: #374151; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease; } .um-tree .ui-treenode-content.ui-state-highlight .ui-treenode-label { color: color-mix(in srgb, var(--sie-marca, #2563EB) 83%, black); font-weight: 700; } .um-tree .ui-treenode-content.ui-state-disabled { opacity: .6 !important; cursor: not-allowed; } .um-tree .ui-treenode-content.ui-state-disabled .ui-treenode-label { color: #9ca3af !important; font-style: italic; font-weight: 400 !important; } .um-tree .ui-treenode-content.ui-state-disabled .ui-treenode-icon { color: #cbd0d6 !important; } .um-tree .ui-tree-toggler { color: #94a3b8; width: 22px !important; height: 22px !important; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; transition: background .13s ease, color .13s ease; } .um-tree .ui-treenode-content:not(.ui-state-disabled):hover .ui-tree-toggler { background: color-mix(in srgb, var(--sie-marca, #2563EB) 8%, white); color: var(--sie-marca, #2563EB); } .um-tree .ui-treenode-children { padding-left: 10px !important; margin-left: 11px; width: calc(100% - 11px) !important; border-left: 1px dashed #e2e8f0; } /* ========================================================================== 17. GRID LEGACY ui-g / ui-md / ui-lg — SHIM DE COMPATIBILIDAD PrimeFaces 15 no solo dejo de traer el CSS del grid legacy `ui-g` (float + width %): components.css ahora define `.ui-g { display:flex; flex-wrap:wrap; }` (grid propio basado en flexbox). Sin el `display:block` de abajo, un `.ui-g` que ADEMAS traiga `max-width` + `margin:0 auto` (patron de columna unica centrada, ver patron-uix.md S1b/S7) colapsa a `width:0` — el contenido (floats width:100% dentro de un contenedor flex) se renderea apilado verticalmente pero empujado fuera de la tarjeta, al borde derecho del viewport (confirmado en vivo: load_sivigila_edit.xhtml, sesion 2026-10-15). Forzar `display:block` restaura el layout float-based historico de PrimeFaces, acotado a `.um-card` (todo el markup migrado vive dentro de un `.um-card`; los includes de tab renderean dentro del `.um-card` del contenedor). ========================================================================== */ .um-card .ui-g { box-sizing: border-box; display: block !important; } .um-card .ui-g::before, .um-card .ui-g::after { content: ""; display: table; } .um-card .ui-g::after { clear: both; } .um-card [class*="ui-g-"]:not(.ui-g-nopad), .um-card [class*="ui-sm-"], .um-card [class*="ui-md-"], .um-card [class*="ui-lg-"], .um-card [class*="ui-xl-"] { box-sizing: border-box !important; float: left !important; } .um-card .ui-g-nopad { float: none !important; } .um-card .ui-g-1 { width: 8.3333% !important; } .um-card .ui-g-2 { width: 16.6667% !important; } .um-card .ui-g-3 { width: 25% !important; } .um-card .ui-g-4 { width: 33.3333% !important; } .um-card .ui-g-5 { width: 41.6667% !important; } .um-card .ui-g-6 { width: 50% !important; } .um-card .ui-g-7 { width: 58.3333% !important; } .um-card .ui-g-8 { width: 66.6667% !important; } .um-card .ui-g-9 { width: 75% !important; } .um-card .ui-g-10 { width: 83.3333% !important; } .um-card .ui-g-11 { width: 91.6667% !important; } .um-card .ui-g-12 { width: 100% !important; } @media screen and (min-width: 768px) { .um-card .ui-md-1 { width: 8.3333% !important; } .um-card .ui-md-2 { width: 16.6667% !important; } .um-card .ui-md-3 { width: 25% !important; } .um-card .ui-md-4 { width: 33.3333% !important; } .um-card .ui-md-5 { width: 41.6667% !important; } .um-card .ui-md-6 { width: 50% !important; } .um-card .ui-md-7 { width: 58.3333% !important; } .um-card .ui-md-8 { width: 66.6667% !important; } .um-card .ui-md-9 { width: 75% !important; } .um-card .ui-md-10 { width: 83.3333% !important; } .um-card .ui-md-11 { width: 91.6667% !important; } .um-card .ui-md-12 { width: 100% !important; } } @media screen and (min-width: 992px) { .um-card .ui-lg-1 { width: 8.3333% !important; } .um-card .ui-lg-2 { width: 16.6667% !important; } .um-card .ui-lg-3 { width: 25% !important; } .um-card .ui-lg-4 { width: 33.3333% !important; } .um-card .ui-lg-5 { width: 41.6667% !important; } .um-card .ui-lg-6 { width: 50% !important; } .um-card .ui-lg-7 { width: 58.3333% !important; } .um-card .ui-lg-8 { width: 66.6667% !important; } .um-card .ui-lg-9 { width: 75% !important; } .um-card .ui-lg-10 { width: 83.3333% !important; } .um-card .ui-lg-11 { width: 91.6667% !important; } .um-card .ui-lg-12 { width: 100% !important; } } /* §17b. Criterio de consulta UNICO (una sola columna ui-md-N/ui-lg-N dentro de .cmd_consulta, sin hermanos que llenen el resto de la fila) — queda flotando pegado a la izquierda en vez de centrado, porque el shim de arriba fuerza float:left a TODO [class*="ui-md-"]/[class*="ui-lg-"] sin importar si tiene hermanos o no. Con :only-child detectamos ese caso puntual (una sola columna de criterio, patron muy comun en paginas "_query"/"_consulta" con un solo campo de busqueda) y la centramos quitandole el float (el ancho % que ya trae la regla de arriba, al no estar flotada, se puede centrar con margin:auto como cualquier bloque normal). No toca filas con 2+ columnas de criterio (esas ya se ven bien repartidas con el float). */ .um-card .cmd_consulta > [class*="ui-md-"]:only-child, .um-card .cmd_consulta > [class*="ui-lg-"]:only-child { float: none !important; margin-left: auto !important; margin-right: auto !important; } /* ============ §18 Paneles clave/valor (encabezados de prescripción / detalle de ítem MIPRES) ============ */ /* Reemplaza los antiguos .colorEncabezado (tan #fbe6b9) y .datosMipres/.datosMipresDetalle (azul oscuro #809cb8 + texto blanco) definidos localmente en ~28 .xhtml de pages/mipres. Misma estructura de fila (ui-g-12 ui-md-4 label + ui-g-12 ui-md-8 valor) — solo cambia la clase de color por una pastel, y se agrega altura mínima para que una celda de valor vacía no se vea "cortada". */ .um-kv-label { background: color-mix(in srgb, var(--sie-marca, #2563EB) 8%, white); color: color-mix(in srgb, var(--sie-marca, #2563EB) 66%, black); font-weight: 700; font-size: 13px; padding: 4px 14px; min-height: 26px; box-sizing: border-box; display: flex; align-items: center; border-bottom: 1px solid #ffffff; } .um-kv-value { background: #FBFDFF; color: #334155; font-size: 13px; padding: 4px 14px; min-height: 26px; box-sizing: border-box; display: flex; align-items: center; border-bottom: 1px solid #EEF3FA; word-break: break-word; } .um-kv-value:empty::before, .um-kv-value > *:only-child:empty::before { content: "Sin información"; color: #A9B4C3; font-style: italic; font-weight: 400; } /* Variantes de color para agrupar sub-secciones dentro de un mismo panel clave/valor (reemplazan los antiguos .datosMipresCaqui/Amarillo/Verde en tonos saturados). */ .um-kv-label--amber { background: #FAEEDA; color: #633806; } .um-kv-label--yellow { background: #FEF6DC; color: #7A5B00; } .um-kv-label--green { background: #EAF3DE; color: #3B6D11; } .um-kv-value--danger { background: #FEECEC; color: #DC2626; font-weight: 700; } /* Título de sección de ancho completo dentro de un panel clave/valor (ej. "Producto Medicamento"). */ .um-kv-title { background: color-mix(in srgb, var(--sie-marca, #2563EB) 16%, white); color: color-mix(in srgb, var(--sie-marca, #2563EB) 51%, black); font-weight: 800; font-size: 14.5px; text-align: center; justify-content: center; padding: 6px 14px; min-height: 30px; box-sizing: border-box; display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--sie-marca, #2563EB) 19%, white); } /* ============ §19 p:confirmDialog: botones centrados ============ */ /* El tema base (UI.css) fija text-align:left en .ui-dialog-buttonpane/.ui-dialog-footer, dejando los botones "No"/"Sí" pegados a la izquierda. Se centra solo para el confirmDialog (no afecta el footer de p:dialog normales, que sí usan btn-bar alineado a la izquierda). */ .ui-confirm-dialog .ui-dialog-buttonpane, .ui-confirm-dialog .ui-dialog-footer { text-align: center !important; } /* Los botones "No"/"Sí" se renderizan muy pequeños (icon-only ~30px) con el tema base. Se agrandan y se separan entre sí para que sean fáciles de tocar/leer. */ .ui-confirm-dialog .ui-dialog-buttonpane .ui-button, .ui-confirm-dialog .ui-dialog-footer .ui-button { min-width: 110px !important; height: 40px !important; font-size: 14px !important; margin: 0 8px !important; } /* ============ §20 Leyenda "Convenciones x Estado" en una sola fila ============ */ /* Convierte una lista de
apilados verticalmente en una fila que envuelve (wrap) cuando no cabe, ahorrando espacio vertical. El separador "|" se marca en el propio markup (span.conv-sep) en vez de generarlo por CSS, para que siempre sea visible. */ .convenciones-estado-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; } .convenciones-estado-row > span { white-space: nowrap; } .convenciones-estado-row > .conv-sep { color: #cbd5e1; font-weight: 400; } /* ============ §20b Fila de filtros centrada (modificador .row-center-fields) ============ */ /* Para una fila de ui-g que no llena las 12 columnas (ej. 3 campos ui-md-2 = 50% de ancho), centra el grupo de campos en vez de dejarlos pegados a la izquierda por el float del grid. */ .row-center-fields { display: flex; flex-wrap: wrap; justify-content: center; } /* ============ §21 Tabla UIX compacta (modificador .tbl-compact) ============ */ /* Para tablas con muchas columnas (ej. dtMttoAuthorizations) donde el contenido se corta. Se aplica junto a tblUIX vía styleClass="tblUIX tbl-compact"; no afecta las demás tablas. */ html body .tblUIX.tbl-compact.ui-datatable thead th { font-size: 9px !important; padding: 6px 8px !important; white-space: normal !important; letter-spacing: 0 !important; } .tblUIX.tbl-compact .ui-datatable-data tr td { font-size: 11px !important; padding: 5px 8px !important; } /* ============ §22 Wizard de pasos circular (p:steps styleClass="custom-steps") ============ */ /* Reemplaza los cuadrados naranja/beige por defecto de PrimeFaces por circulos en el azul del patron UIX. Estados segun lo que p:steps ya emite: pendiente (sin marca), activo (.ui-state-highlight), completado (cualquier item con un .ui-state-highlight como hermano siguiente — PrimeFaces no emite clase propia para "completado", se detecta con :has()). Compatible con el