/*
 * theme.css — Custom Style Dark Orange: layout + overrides
 * Los estilos de componentes PrimeFaces están en custom-style-theme.css
 * web.xml: primefaces.THEME=none
 */

/* ===================================================================
   1. VARIABLES (valores exactos del tema Custom Style Orange Dark)
   =================================================================== */
:root {
    --primary-color:         #FFA858;
    --primary-light-color:   #FFC591;
    --primary-dark-color:    #FF810E;
    --primary-darker-color:  #F17606;
    --primary-color-text:    #3E4754;
    --primary-lighter-color: rgba(255, 168, 88, 0.15);
}

/* ===================================================================
   2. FIXES DE COMPONENTES
   =================================================================== */

/* Password: ícono del ojo — el tema arya define el caracter vía ::before;
   sin tema debemos definirlo nosotros con los codepoints de PrimeIcons */
.ui-password { display: block; position: relative; width: 100%; }
.ui-password .ui-inputfield { padding-right: 2.5rem !important; width: 100%; }

.ui-password .ui-password-icon {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 1rem !important;
    z-index: 2;
    transition: color .2s;
    /* PrimeIcons font para renderizar el caracter */
    font-family: "primeicons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    background: none !important;
}
.ui-password .ui-password-icon:hover { color: var(--primary-color) !important; }

/* masked = contraseña oculta → mostrar ícono "ojo" para revelarla (\e966 = pi-eye) */
.ui-password.ui-password-masked .ui-password-icon:before { content: "\e966"; }

/* unmasked = contraseña visible → mostrar ícono "ojo tachado" para ocultarla (\e965 = pi-eye-slash) */
.ui-password.ui-password-unmasked .ui-password-icon:before { content: "\e965"; }

body .ui-outputlabel { display: block; font-weight: 500; margin-bottom: .4rem; }
.form-group .ui-inputfield,
.form-group .ui-inputtext { width: 100%; }

/* ===================================================================
   3. CUSTOM STYLE DARK LAYOUT
   =================================================================== */

/* --- Animations --- */
@-webkit-keyframes fadeInDown {
    from { opacity:0; -webkit-transform:translate3d(0,-20px,0); transform:translate3d(0,-20px,0) }
    to   { opacity:1; -webkit-transform:none; transform:none }
}
@keyframes fadeInDown {
    from { opacity:0; transform:translate3d(0,-20px,0) }
    to   { opacity:1; transform:none }
}
@-webkit-keyframes fadeOutUp {
    from { opacity:1 }
    to   { opacity:0; -webkit-transform:translate3d(0,-20px,0); transform:translate3d(0,-20px,0) }
}
@keyframes fadeOutUp {
    from { opacity:1 }
    to   { opacity:0; transform:translate3d(0,-20px,0) }
}
@keyframes fadeinmask { from{opacity:0} to{opacity:.8} }

.fadeInDown { -webkit-animation-name:fadeInDown; animation-name:fadeInDown }
.fadeOutUp  { -webkit-animation-name:fadeOutUp;  animation-name:fadeOutUp  }

/* --- Tipografía --- */
h1,h2,h3,h4,h5,h6 { margin:1.5rem 0 1rem 0; font-family:inherit; font-weight:600; line-height:1.2; color:inherit }
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child { margin-top:0 }
h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.75rem}
h4{font-size:1.5rem} h5{font-size:1.25rem} h6{font-size:1rem}
mark { background:#fff8e1; padding:.25rem .4rem; border-radius:24px; font-family:monospace }
blockquote { margin:1rem 0; padding:0 2rem; border-left:4px solid #90a4ae }
hr { border-top:solid #383838; border-width:1px 0 0 0; margin:1rem 0 }
p { margin:0 0 1rem 0; line-height:1.5 }
p:last-child { margin-bottom:0 }

/* --- Base --- */
html { height:100%; font-size:14px }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    font-weight: 400;
    color: #eaebec;
    padding: 0; margin: 0;
    min-height: 100%;
    background-color: #3E4754;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.blocked-scroll { overflow:auto }
a { text-decoration:none; color:var(--primary-color) }
a:hover { color:var(--primary-light-color) }

/* --- Layout principal --- */
.layout-main {
    display:-ms-flexbox; display:flex;
    -ms-flex-direction:column; flex-direction:column;
    -ms-flex-pack:justify; justify-content:space-between;
    min-height:100vh;
    padding-top:82px;
    padding-left:248px;
    -moz-transition:padding-left .2s; -o-transition:padding-left .2s;
    -webkit-transition:padding-left .2s; transition:padding-left .2s;
}
.layout-mask {
    display:none; position:fixed; top:0; left:0; z-index:998;
    width:100%; height:100%;
    animation-duration:.2s;
    animation-timing-function:cubic-bezier(.05,.74,.2,.99);
    animation-fill-mode:forwards;
}
.layout-content { padding:30px 36px; flex:1 1 auto }
@media (max-width:991px) { .layout-content { padding:32px 14px } }

/* --- Topbar Dark --- */
.layout-topbar-dark .layout-topbar {
    position:fixed; top:0; z-index:1000; width:100%; height:62px;
    background-color:#293241; box-shadow:none;
    -moz-transition:width .2s; -o-transition:width .2s;
    -webkit-transition:width .2s; transition:width .2s;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper {
    height:100%; display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-left {
    height:100%; padding:0 16px;
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; z-index:999;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-left .menu-button {
    padding:6px; margin-right:16px; border-radius:4px; cursor:pointer; border:none; background:transparent;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-left .menu-button i {
    font-size:18px; width:18px; height:18px; color:#e9e9e9;
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    -ms-flex-pack:center; justify-content:center;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-left .menu-button:hover {
    background-color:rgba(255,255,255,.08); transition:background-color .2s;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-right {
    height:100%; flex-grow:1; padding:0 16px 0 12px;
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    -ms-flex-pack:justify; justify-content:space-between;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions {
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    -ms-flex-pack:end; justify-content:flex-end; flex-grow:1;
    list-style-type:none; margin:0; padding:0; height:100%;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li {
    position:relative; display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; height:100%;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > a {
    width:100%; padding:6px; display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    color:#e9e9e9; text-decoration:none;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > a > .topbar-icon {
    font-size:18px; border-radius:6px; width:30px; height:30px; background-color:transparent;
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    -ms-flex-pack:center; justify-content:center; color:#e9e9e9;
}
.layout-topbar-dark .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > a:hover > .topbar-icon {
    background-color:rgba(255,255,255,.08); transition:background-color .2s;
}
/* JSF: h:form dentro de li en topbar */
.layout-topbar-actions > li > form {
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; height:100%;
}
.layout-topbar-actions > li > form > a {
    padding:6px; display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center; color:#e9e9e9;
}
.layout-topbar-actions > li > form > a > i.topbar-icon {
    font-size:18px; border-radius:6px; width:30px; height:30px;
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    -ms-flex-pack:center; justify-content:center;
}
.layout-topbar-actions > li > form > a:hover { color:var(--primary-light-color) }
.layout-topbar-actions > li > form > a:hover > i.topbar-icon { background-color:rgba(255,255,255,.08) }

/* --- Sidebar (menu-wrapper) Dark --- */
.menu-wrapper {
    position:fixed; top:0; left:0; height:100%; z-index:999;
    width:248px;
    background-color:#293241; overflow:hidden;
    -moz-transition:width .2s; -o-transition:width .2s;
    -webkit-transition:width .2s; transition:width .2s;
}
.menu-wrapper .sidebar-logo {
    height:62px;
    -ms-flex-pack:start; justify-content:flex-start;
    -ms-flex-align:center; align-items:center;
    padding:0 22px; border-bottom:1px solid rgba(255,255,255,.06);
}
.menu-wrapper .layout-menu-container {
    height:calc(100% - 62px); overflow-y:auto; overflow-x:hidden;
}
.menu-wrapper .layout-menu-container::-webkit-scrollbar { width:4px }
.menu-wrapper .layout-menu-container::-webkit-scrollbar-thumb { background:rgba(255,168,88,.3); border-radius:2px }
.menu-wrapper .layout-menu-container::-webkit-scrollbar-thumb:hover { background:rgba(255,168,88,.5) }

.menu-wrapper .layout-menu-container .layout-menu {
    list-style-type:none; margin:0; padding:0;
    overflow:hidden;
    -moz-transition:max-width .2s; -o-transition:max-width .2s; -webkit-transition:max-width .2s; transition:max-width .2s;
}
.menu-wrapper .layout-menu-container .layout-menu > li > a { position:relative }
.menu-wrapper .layout-menu-container .layout-menu > li > a::before {
    content:""; width:4px; height:12px; display:block;
    border-radius:0 3px 3px 0; position:absolute; left:0;
}
.menu-wrapper .layout-menu-container .layout-menu li { padding:6px 0 }
.menu-wrapper .layout-menu-container .layout-menu li > a {
    display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;
    border-radius:8px; font-size:13px; padding:8px 20px;
    user-select:none; cursor:pointer; color:#e9e9e9; text-decoration:none;
    -moz-transition:background-color .2s,color .2s; -o-transition:background-color .2s,color .2s;
    -webkit-transition:background-color .2s,color .2s; transition:background-color .2s,color .2s;
}
.menu-wrapper .layout-menu-container .layout-menu li > a:hover { background-color:rgba(255,255,255,.07) }
.menu-wrapper .layout-menu-container .layout-menu li > a > i {
    font-size:20px; min-width:20px; color:#e9e9e9;
}
.menu-wrapper .layout-menu-container .layout-menu li > a > span {
    margin-left:14px; font-weight:600; font-size:12px; line-height:14px;
    visibility:visible; white-space:nowrap; opacity:1;
    transition:opacity .15s,visibility .15s;
}
.menu-wrapper .layout-menu-container .layout-menu li > a > i.layout-submenu-toggler {
    transition:transform .2s; margin-left:auto; font-size:12px; visibility:hidden;
}
.menu-wrapper .layout-menu-container .layout-menu li.active-menuitem > a.rotated-icon i { transform:rotate(-180deg) }

/* Active */
.menu-wrapper .layout-menu-container .layout-menu li.active-menuitem > a,
.menu-wrapper .layout-menu-container .layout-menu li.active-menuitem > a > i { color:var(--primary-color) }
.menu-wrapper .layout-menu-container .layout-menu > li.active-menuitem > a::before { background-color:var(--primary-color) }

/* Submenú */
.menu-wrapper .layout-menu-container .layout-menu li > ul {
    display:none; list-style-type:none; overflow:hidden; padding:0; margin:0;
}
.menu-wrapper .layout-menu-container .layout-menu li.active-menuitem > ul { display:block }
.menu-wrapper .layout-menu-container .layout-menu li > ul > li { padding:0; margin-left:6px; border-radius:8px }
.menu-wrapper .layout-menu-container .layout-menu li > ul > li > a { padding:8px 14px; font-size:12px }
.menu-wrapper .layout-menu-container .layout-menu li > ul > li > a > i { font-size:14px }

/* ============================================================
   p:menu como navegación del sidebar (clase styleClass="sidebar-nav")
   ============================================================ */

/* Logo del sidebar */
.menu-wrapper .sidebar-logo {
    display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center;
    gap:.75rem; overflow:hidden;
}
.menu-wrapper .sidebar-logo-icon {
    font-size:1.4rem; color:var(--primary-color); flex-shrink:0;
}
.menu-wrapper .sidebar-logo-text {
    font-weight:700; font-size:.95rem; color:var(--primary-color);
    white-space:nowrap; visibility:visible; opacity:1;
    transition:opacity .15s,visibility .15s;
}

/* Contenedor del p:menu */
.menu-wrapper .sidebar-nav.ui-menu {
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    width:100% !important;
}
.menu-wrapper .sidebar-nav .ui-menu-list {
    padding:0; margin:0; list-style:none;
}

/* Cada ítem del menú */
.menu-wrapper .sidebar-nav .ui-menuitem {
    padding:4px 0; margin:0; border:none !important;
    border-radius:0 !important; position:relative;
}
/* Barra naranja izquierda en ítem activo */
.menu-wrapper .sidebar-nav .ui-menuitem::before {
    content:""; width:4px; height:12px; display:block;
    border-radius:0 3px 3px 0; position:absolute; left:0; top:50%;
    transform:translateY(-50%); background-color:transparent;
    transition:background-color .2s;
}
.menu-wrapper .sidebar-nav .ui-menuitem.active-menuitem::before {
    background-color:var(--primary-color);
}

/* Link del ítem */
.menu-wrapper .sidebar-nav .ui-menuitem-link {
    display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center;
    border-radius:8px; font-size:13px; padding:8px 20px;
    color:#e9e9e9 !important; text-decoration:none !important;
    background:transparent !important; border:none !important;
    -moz-transition:background-color .2s,color .2s;
    -o-transition:background-color .2s,color .2s;
    -webkit-transition:background-color .2s,color .2s;
    transition:background-color .2s,color .2s;
}
.menu-wrapper .sidebar-nav .ui-menuitem-link:hover {
    background-color:rgba(255,255,255,.07) !important;
}

/* Ícono del ítem */
.menu-wrapper .sidebar-nav .ui-menuitem-icon {
    font-size:20px; min-width:20px; color:#e9e9e9; margin-right:0;
}

/* Texto del ítem */
.menu-wrapper .sidebar-nav .ui-menuitem-text {
    margin-left:14px; font-weight:600; font-size:12px;
    line-height:14px; white-space:nowrap;
    visibility:visible; opacity:1;
    -moz-transition:opacity .15s,visibility .15s;
    -o-transition:opacity .15s,visibility .15s;
    -webkit-transition:opacity .15s,visibility .15s;
    transition:opacity .15s,visibility .15s;
}

/* Ítem activo */
.menu-wrapper .sidebar-nav .ui-menuitem.active-menuitem .ui-menuitem-link { color:var(--primary-color) !important }
.menu-wrapper .sidebar-nav .ui-menuitem.active-menuitem .ui-menuitem-icon { color:var(--primary-color) !important }

/* ============================================================
   Modo layout-sidebar: colapsado por defecto, hover para expandir
   ============================================================ */

/* Estado colapsado: oculta textos y logo-text */
.layout-wrapper.layout-sidebar .menu-wrapper .sidebar-nav .ui-menuitem-text,
.layout-wrapper.layout-sidebar .menu-wrapper .sidebar-logo-text {
    visibility:hidden; opacity:0;
}

/* Hover: expande el sidebar → muestra textos */
.layout-wrapper.layout-sidebar .menu-wrapper:hover .sidebar-nav .ui-menuitem-text,
.layout-wrapper.layout-sidebar .menu-wrapper:hover .sidebar-logo-text {
    visibility:visible; opacity:1;
}

/* --- Sidebar colapsado: botón toggle activa layout-static-inactive --- */
.layout-wrapper.layout-static-inactive .menu-wrapper {
    width:62px;
}
.layout-wrapper.layout-static-inactive .layout-main {
    padding-left:62px;
}
.layout-wrapper.layout-static-inactive .menu-wrapper .layout-menu-container .layout-menu li > a > span {
    visibility:hidden; opacity:0;
}
.layout-wrapper.layout-static-inactive .menu-wrapper .layout-menu-container .layout-menu li > a > i.layout-submenu-toggler {
    visibility:hidden;
}
.layout-wrapper.layout-static-inactive .menu-wrapper .sidebar-logo {
    justify-content:center;
}

/* --- Modo layout-sidebar: 62px siempre, hover para expandir --- */
.layout-wrapper.layout-sidebar .menu-wrapper { width:62px }
.layout-wrapper.layout-sidebar .layout-main  { padding-left:62px }
.layout-wrapper.layout-sidebar .menu-wrapper .layout-menu-container .layout-menu li > a > span { visibility:hidden; opacity:0 }
.layout-wrapper.layout-sidebar .menu-wrapper:hover { width:248px }
.layout-wrapper.layout-sidebar .menu-wrapper:hover .layout-menu-container .layout-menu li > a > span { visibility:visible; opacity:1 }

/* --- Mobile: sidebar se desliza fuera de pantalla --- */
@media (max-width:991px) {
    .menu-wrapper { transform:translate3d(-100%,0,0); transition:transform .2s }
    .layout-wrapper.layout-mobile-active .menu-wrapper { transform:translate3d(0,0,0) }
    .layout-main { padding-left:0 !important }
}

/* --- Footer --- */
.layout-footer {
    padding:20px 36px; font-size:.8rem;
    color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.06);
}

/* ===================================================================
   4. BADGES
   =================================================================== */
.order-badge,.product-badge,.customer-badge {
    border-radius:2px; padding:.25em .5rem;
    text-transform:uppercase; font-weight:700; font-size:12px; letter-spacing:.3px; text-align:center;
}
.order-badge.order-delivered,.product-badge.status-instock,.customer-badge.status-qualified   { background:#acebb4; color:#348861 }
.order-badge.order-cancelled,.product-badge.status-outofstock,.customer-badge.status-unqualified { background:#fabd9a; color:#ad342b }
.order-badge.order-pending,.product-badge.status-lowstock,.customer-badge.status-negotiation  { background:#f8d895; color:#a76927 }
.order-badge.order-returned,.customer-badge.status-renewal                                    { background:#efb8e5; color:#833f91 }
.customer-badge.status-new      { background:#9bf2f7; color:#2b7aa4 }
.customer-badge.status-proposal { background:#ffd8b2; color:#805b36 }

/* ===================================================================
   4b. CARD
   =================================================================== */
.card {
    background: #293241;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(41,50,65,.06);
    border-radius: 24px;
    margin-bottom: 2rem;
}

body .ui-card {
    background: #293241 !important;
    box-shadow: 0 10px 40px rgba(41,50,65,.06) !important;
    border-radius: 24px !important;
    border: none !important;
}
body .ui-card .ui-card-body  { padding: 20px }
body .ui-card .ui-card-title { font-size: 1.25rem; font-weight: 600; color: #eaebec; margin-bottom: 0.5rem }
body .ui-card .ui-card-subtitle { color: #bfc2c6 }
body .ui-card .ui-card-content { padding: 0 }
body .ui-card .ui-card-footer { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06) }

/* ===================================================================
   5. LOGIN PAGE
   =================================================================== */
body.login-page {
    display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.login-container { width:100%; max-width:450px; padding:1.5rem }
.login-header { text-align:center; margin-bottom:2rem }
.login-header h1 {
    font-size:2.5rem; margin:0 0 .5rem 0; color:var(--primary-color);
    font-weight:700; display:flex; align-items:center; justify-content:center; gap:.75rem;
}
.login-header p { margin:0; color:#bfc2c6; font-size:.9rem }
.login-form  { display:flex; flex-direction:column; gap:1.5rem }
.form-group  { display:flex; flex-direction:column; gap:.5rem }
.login-button { width:100% !important; margin-top:.5rem !important }
.login-footer { text-align:center; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1) }
.login-footer p { margin:0; color:rgba(255,255,255,.38); font-size:.75rem }
@media (max-width:480px) { .login-header h1 { font-size:2rem } }

/* ===================================================================
   6. UTILIDADES
   =================================================================== */
.w-full       { width:100% !important }
.text-primary { color:var(--primary-color) !important }
.text-muted   { color:rgba(255,255,255,.6) !important }

/* ===================================================================
   7. AUDITORÍA — FILTROS Y COMPARACIÓN DE DIFERENCIAS
   =================================================================== */
.audit-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    border-radius: 20px;
    background: rgba(255,168,88,.12);
    color: var(--primary-color);
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid rgba(255,168,88,.25);
}
.diff-row-changed td { background: rgba(255,168,88,.05) !important; }
.diff-old       { color: #ef9a9a; font-weight: 500; }
.diff-new       { color: #a5d6a7; font-weight: 500; }
.diff-unchanged { color: #bfc2c6; }

/* ===================================================================
   8. VISTA DE DETALLE (solo lectura)
   =================================================================== */
.detail-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
}
.detail-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #bfc2c6;
}
.detail-value {
    font-size: .95rem;
    color: #eaebec;
    word-break: break-word;
}

/* ===================================================================
   8. FORMULARIOS DE EDICIÓN
   =================================================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.form-full { grid-column: 1 / -1; }
.form-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.form-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #bfc2c6;
}
.form-field .p-inputtext,
.form-field .p-inputtextarea,
.form-field .p-inputnumber-input,
.form-field .p-dropdown { width: 100%; }

/* ===================================================================
   9. BREADCRUMB DE PÁGINA
   =================================================================== */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: #bfc2c6;
    font-size: .88rem;
}
.page-breadcrumb .p-link {
    color: var(--primary-color);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .88rem;
}
.page-breadcrumb .p-link:hover { text-decoration: underline; }

/* ===================================================================
   10. ACCIONES DEL ENCABEZADO
   =================================================================== */
.header-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===================================================================
   11. ÍCONO TOOLTIP DE CAMPO
   =================================================================== */
.field-tooltip-icon {
    color: var(--primary-color);
    font-size: .85em;
    vertical-align: middle;
    margin-left: .3rem;
    cursor: help;
    opacity: .65;
    display: inline-block;
    transition: opacity .18s ease, transform .18s ease;
}
.field-tooltip-icon:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* ===================================================================
   12. BLOQUES DE CÓDIGO (trazabilidad API y campos LOB)
   =================================================================== */
.code-block {
    margin: 0;
    padding: .85rem 1rem;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    font-family: "Consolas", "Fira Code", "Courier New", monospace;
    font-size: .82rem;
    line-height: 1.65;
    color: #c8d3e0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,168,88,.35) transparent;
}
.code-block::-webkit-scrollbar         { width: 6px; }
.code-block::-webkit-scrollbar-track   { background: transparent; }
.code-block::-webkit-scrollbar-thumb   { background: rgba(255,168,88,.35); border-radius: 3px; }
.code-block::-webkit-scrollbar-thumb:hover { background: rgba(255,168,88,.6); }

.code-block-error {
    background: rgba(239,154,154,.05);
    border-color: rgba(239,154,154,.2);
    color: #ef9a9a;
}

/* ===================================================================
   p:spinner — botones de incremento/decremento
   =================================================================== */

/* Contenedor: input + botones apilados a la derecha */
.ui-spinner {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    width: 100% !important;
}
.ui-spinner .ui-spinner-input {
    border-radius: 6px 0 0 6px !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    width: auto !important;
}

/* Botones */
.ui-spinner-button {
    background: rgba(255,168,88,.12) !important;
    border: 1px solid rgba(255,168,88,.35) !important;
    color: var(--primary-color) !important;
    cursor: pointer !important;
    width: 2rem !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    transition: background .2s !important;
    padding: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}
.ui-spinner-up {
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 6px 0 0 !important;
}
.ui-spinner-down {
    border-left: none !important;
    border-radius: 0 0 6px 0 !important;
}
.ui-spinner-button:hover {
    background: rgba(255,168,88,.25) !important;
}

/* Ícono: ocultar sprite JQueryUI con font-size:0, mostrar PrimeIcon via ::before */
.ui-spinner-button .ui-icon {
    font-family: "primeicons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    color: var(--primary-color) !important;
    font-size: 0 !important;
}
.ui-spinner-up .ui-icon::before {
    content: "\e933"; /* pi-angle-up */
    font-size: .75rem;
    display: inline-block;
}
.ui-spinner-down .ui-icon::before {
    content: "\e930"; /* pi-angle-down */
    font-size: .75rem;
    display: inline-block;
}

/* ===================================================================
   p:calendar — trigger, panel, navegación y días
   =================================================================== */

/* Contenedor (input + botón trigger en línea) */
.ui-calendar.ui-calendar-w-btn {
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100% !important;
}
.ui-calendar.ui-calendar-w-btn .ui-inputtext {
    border-radius: 6px 0 0 6px !important;
    flex: 1 !important;
    width: auto !important;
}

/* Botón trigger */
.ui-datepicker-trigger {
    background: rgba(255,168,88,.12) !important;
    border: 1px solid rgba(255,168,88,.35) !important;
    border-left: none !important;
    border-radius: 0 6px 6px 0 !important;
    color: var(--primary-color) !important;
    cursor: pointer !important;
    padding: 0 .7rem !important;
    min-width: 2.4rem !important;
    transition: background .2s !important;
}
.ui-datepicker-trigger:hover {
    background: rgba(255,168,88,.25) !important;
}
/* Reemplazar sprite JQueryUI por PrimeIcons en el ícono del trigger */
.ui-datepicker-trigger .ui-icon.ui-icon-calendar {
    font-family: "primeicons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    color: var(--primary-color) !important;
    font-size: 1rem !important;
}
.ui-datepicker-trigger .ui-icon.ui-icon-calendar::before {
    content: "\e927"; /* pi-calendar */
}

/* Panel del calendario */
.ui-datepicker {
    background: #293241 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    padding: .75rem !important;
    color: #eaebec !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
    z-index: 9999 !important;
}

/* Cabecera: posicionamiento relativo para que prev/next absolutos no escapen */
.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    color: #eaebec !important;
    padding: .3rem 2.4rem .65rem !important;
    position: relative !important;
    text-align: center !important;
}
.ui-datepicker .ui-datepicker-title {
    color: #eaebec !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 2rem !important;
    display: block !important;
}
.ui-datepicker .ui-datepicker-title select {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 4px !important;
    color: #eaebec !important;
    padding: .1rem .3rem !important;
    font-size: .85rem !important;
    margin: 0 .15rem !important;
}

/* Botones de navegación: mantener position absolute de JQueryUI, solo reposicionar */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute !important;
    top: .3rem !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    width: 2rem !important;
    height: 2rem !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    transition: background .2s, border-color .2s !important;
}
.ui-datepicker .ui-datepicker-prev { left: .3rem !important; }
.ui-datepicker .ui-datepicker-next { right: .3rem !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: rgba(255,168,88,.15) !important;
    border-color: rgba(255,168,88,.3) !important;
}

/* Ícono dentro del botón: ocultar el texto "Prev"/"Next" con font-size:0,
   mostrar el icono via ::before con font-size explícito */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    font-family: "primeicons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    color: var(--primary-color) !important;
    font-size: 0 !important;
}
.ui-datepicker .ui-datepicker-prev .ui-icon::before {
    content: "\e900"; /* pi-chevron-left */
    font-size: .95rem;
    display: inline-block;
}
.ui-datepicker .ui-datepicker-next .ui-icon::before {
    content: "\e901"; /* pi-chevron-right */
    font-size: .95rem;
    display: inline-block;
}

/* Tabla de días */
.ui-datepicker table {
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: .85rem !important;
}
.ui-datepicker .ui-datepicker-calendar thead th {
    color: #bfc2c6 !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    padding: .3rem .4rem !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
}
.ui-datepicker .ui-datepicker-calendar td {
    padding: 2px !important;
    border: none !important;
    background: transparent !important;
}
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    color: #eaebec !important;
    text-align: center !important;
    padding: .3rem .35rem !important;
    display: block !important;
    transition: background .15s;
    cursor: pointer;
    line-height: 1.3 !important;
}
.ui-datepicker .ui-datepicker-calendar td a:hover {
    background: rgba(255,168,88,.18) !important;
    color: var(--primary-color) !important;
}
/* Día de hoy */
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a {
    background: rgba(255,168,88,.12) !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}
/* Día seleccionado */
.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background: var(--primary-color) !important;
    color: #3E4754 !important;
    font-weight: 700 !important;
}
/* Días deshabilitados / fuera del mes */
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-unselectable span,
.ui-datepicker .ui-datepicker-calendar .ui-state-disabled {
    color: rgba(255,255,255,.22) !important;
    cursor: default !important;
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-other-month a {
    color: rgba(255,255,255,.3) !important;
}

/* p:steps del asistente de procesos -- el tema base de PrimeFaces distingue el paso activo con un
   contraste demasiado sutil sobre este fondo oscuro (bug real reportado: "hay que esforzarse para
   ver cuál es"). El paso activo (.ui-state-highlight) pasa a fondo sólido; el resto queda
   visiblemente atenuado, sin depender de un matiz de color casi igual. */
.wizard-steps .ui-steps-item {
    opacity: .5 !important;
}
.wizard-steps .ui-steps-item .ui-steps-number {
    background: transparent !important;
    border: 2px solid #5a5d62 !important;
    color: #9aa0a6 !important;
}
.wizard-steps .ui-steps-item .ui-steps-title {
    color: #9aa0a6 !important;
}
.wizard-steps .ui-steps-item.ui-state-highlight {
    opacity: 1 !important;
}
.wizard-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
}
.wizard-steps .ui-steps-item.ui-state-highlight .ui-steps-title {
    color: #eaebec !important;
    font-weight: 600 !important;
}

/* Red de seguridad: si un p:selectOneMenu queda como <select> nativo sin envolver (widget de
   PrimeFaces todavía no inicializado, ej. dentro de un p:dialog recién poblado por ajax), el
   fondo por defecto del navegador es blanco -- combinado con el color de texto claro que este
   tema fuerza en casi todo, queda texto blanco sobre fondo blanco, invisible. Esto no afecta al
   dropdown ya widgetizado (ese usa las reglas de SELECTONEMENU de arriba, sobre divs, nunca
   toca un <select> visible). Bug real reportado en el asistente de procesos. */
select {
    background-color: #3e4754 !important;
    color: #eaebec !important;
    border: 1px solid #545b67 !important;
    border-radius: 6px !important;
}
select option {
    background-color: #3e4754 !important;
    color: #eaebec !important;
}

/* Bug real reportado: el p:selectOneMenu SÍ queda envuelto por el widget de PrimeFaces (tiene la
   flecha y el borde correctos), pero el fondo oscuro de custom-style-theme.css no le ganaba al
   tema base "saga-blue" -- sin !important, pierde el empate de especificidad aunque cargue
   después. Repetido acá, en el archivo que sí gana siempre. */
body .ui-selectonemenu {
    background: #3e4754 !important;
    border-color: #545b67 !important;
}
body .ui-selectonemenu .ui-selectonemenu-label {
    background: transparent !important;
    color: #eaebec !important;
}
body .ui-selectonemenu .ui-selectonemenu-label.ui-placeholder {
    color: #9aa0a6 !important;
}
body .ui-selectonemenu-panel {
    background: #293241 !important;
    border-color: #545b67 !important;
}
body .ui-selectonemenu-panel .ui-selectonemenu-list-item {
    background: transparent !important;
    color: #eaebec !important;
}
body .ui-selectonemenu-panel .ui-selectonemenu-list-item.ui-state-highlight {
    background: #ffa858 !important;
    color: #3e4754 !important;
}