/* Theme Overrides
 * Cascades on top of default.css and the Poseidon layout-blue.css theme.
 */

:root {
    --brand-navy: #1F558F; /* matches resources/images/iconoAzul.png and icono_V_valdez_1.png exactly */
    --brand-navy-dark: #173C64; /* derived: navy darkened ~30%, for hover/gradient only */
    --brand-navy-muted: #4F7AA8;
    --brand-panel-bg: #F1F5F9;
    --brand-border: #C3D2E2;
    --brand-row-divider: #DDE7F0;
    --brand-text-on-navy: #D7E2EE;
    --brand-placeholder-gray: #8AA6C4;

    /* Sidebar-only accent palette (GANO reference). Scoped to the sidebar/topbar-logo
       selectors only — everything else in the app (buttons, inputs, tables, the legacy
       per-module megaMenu) keeps using --brand-navy* above, untouched. */
    --sidebar-bg: #2d353c;
    --sidebar-primary: var(--brand-navy);
    --sidebar-primary-dark: var(--brand-navy-dark);
    --sidebar-item-hover-bg: var(--brand-navy-dark);
    --sidebar-item-hover-text: #e2e6ea;
    --sidebar-menu-text: #a8acb1;
    --sidebar-submenu-text: #8a9199;
    --sidebar-submenu-hover-text: #d0d5db;
    --sidebar-active-nested: var(--brand-navy-muted);
    --sidebar-active-nested-bg: rgba(31, 85, 143, .10);
    --sidebar-tree-line: rgba(31, 85, 143, .20);
    --sidebar-search-bg: #3a4450;
    --sidebar-search-border: #4a5560;
    --sidebar-search-placeholder: #5f6870;
}

/* ─── Icons ───
   PrimeFaces' base .ui-icon class uses the classic jQuery-UI sprite-icon
   technique: text-indent:-99999px + overflow:hidden, so any text/content is
   shoved off-screen and the icon is shown via background-image instead.
   FA6 icons draw their glyph as ::before generated content on the same
   element, so that same hiding technique blanks them out (confirmed via
   DevTools Computed panel — font loads fine, glyph is just clipped/indented
   away). Only affects icon="fa-solid ..." on p:commandButton, which renders
   as <span class="ui-icon ... fa-solid fa-xxx">; hand-authored <i class="fa-solid
   fa-xxx"> elsewhere never had the .ui-icon class so were never affected.
   Also strip the app's global `body { text-transform: uppercase !important; }`
   from icon glyphs, since it applies to generated content too and could mangle
   the Unicode PUA codepoints some icons use. */
body .ui-icon.fa-solid, body .ui-icon.fa-regular, body .ui-icon.fa-brands {
    text-indent: 0 !important;
    overflow: visible !important;
}
body .fa-solid, body .fa-regular, body .fa-brands {
    text-transform: none !important;
}

/* ─── Inputs ─── */
body .ui-inputfield { padding: 8px 12px; border-radius: 4px; border-color: var(--brand-border); }
body .ui-inputfield:focus { border-color: var(--brand-navy) !important; box-shadow: 0 0 0 2px rgba(31, 85, 143, 0.15); }
body .ui-selectonemenu label.ui-selectonemenu-label { padding-left: 10px; } /* known gotcha: default theme has no left padding once .ui-inputfield padding changes above */

/* ─── Buttons ─── */
body .ui-button {
    border-radius: 4px;
    border-color: var(--brand-border);
    background: #ffffff;
    color: var(--brand-navy);
}
body .ui-button .ui-button-text { color: inherit; }
body .ui-button .ui-button-icon-left,
body .ui-button .ui-button-icon-right { color: inherit; }
body .ui-button.ui-button-text-only .ui-button-text { padding: 8px 16px; }
body .ui-button.ui-button-text-icon-left .ui-button-text { padding: 8px 16px 8px 30px; }
body .ui-button.ui-button-text-icon-right .ui-button-text { padding: 8px 30px 8px 16px; }
body .ui-button.ui-button-icon-only .ui-button-text { padding: 0; }
/* Base theme sizes icon-only buttons via padding on the hidden .ui-button-text span
   plus its own icon font-size/margin (poseidon-blue theme.css), which doesn't match a
   plain <a class="action-icon"> box run through the same math — force both to an
   identical fixed square instead of relying on two different auto-sizing models. */
body .ui-button.ui-button-icon-only {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body .ui-button.ui-button-icon-only .ui-icon {
    margin: 0 !important;
    position: static !important;
    font-size: 15px;
}
body .ui-button:not(.ui-state-disabled):not(.ui-priority-primary):not(.ui-confirmdialog-yes):hover {
    background: var(--brand-panel-bg);
    border-color: var(--brand-navy-muted);
}
body .ui-button.ui-priority-primary,
body .ui-button.ui-confirmdialog-yes {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #ffffff !important;
}
body .ui-button.ui-priority-primary:hover,
body .ui-button.ui-priority-primary:focus,
body .ui-button.ui-priority-primary:active,
body .ui-button.ui-priority-primary.ui-state-hover,
body .ui-button.ui-priority-primary.ui-state-focus,
body .ui-button.ui-priority-primary.ui-state-active,
body .ui-button.ui-confirmdialog-yes:hover,
body .ui-button.ui-confirmdialog-yes:focus,
body .ui-button.ui-confirmdialog-yes:active,
body .ui-button.ui-confirmdialog-yes.ui-state-hover,
body .ui-button.ui-confirmdialog-yes.ui-state-focus,
body .ui-button.ui-confirmdialog-yes.ui-state-active {
    background: var(--brand-navy-dark) !important;
    border-color: var(--brand-navy-dark) !important;
    color: #ffffff !important;
    outline: none !important;
}
/* Base poseidon-blue theme.css defines its own .ui-button.ui-state-disabled dimming;
   pin it to a readable lighter navy instead of whatever the base theme falls back to,
   since the base rule has no !important and our .ui-priority-primary rule above does,
   so without this the disabled state would just stay full-navy-and-look-clickable. */
body .ui-button.ui-priority-primary.ui-state-disabled,
body .ui-button.ui-confirmdialog-yes.ui-state-disabled {
    background: var(--brand-navy-muted) !important;
    border-color: var(--brand-navy-muted) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
body .ui-button.btn-icon-danger {
    color: #C0392B !important;
    border-color: #E0B4AE;
}
body .ui-button.btn-icon-danger:hover {
    background: #FBEAE8;
    border-color: #C0392B;
}
body .ui-button.btn-icon-success {
    color: #2E8B57 !important;
    border-color: #B7D9C4;
}
body .ui-button.btn-icon-success:hover {
    background: #E9F5EE;
    border-color: #2E8B57;
}
.action-icon.action-icon-danger { color: #C0392B; border-color: #E0B4AE; }
.action-icon.action-icon-danger:hover { color: #A93226; background: #FBEAE8; border-color: #C0392B; }

/* ─── Checkboxes ───
   Base theme's tick sprite depends on the primefaces-aristo resource library
   (the same one that 404s for icon="ui-icon-*" — see the module rollout commits),
   so the check glyph is drawn with our own FA6 icon instead of relying on it. */
body .ui-chkbox-box {
    border: 1px solid var(--brand-border);
    border-radius: 4px;
    background: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body .ui-chkbox-box .ui-chkbox-icon {
    background-image: none !important;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
body .ui-chkbox-box.ui-state-active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
}
body .ui-chkbox-box.ui-state-active .ui-chkbox-icon:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body .ui-chkbox-box:not(.ui-state-active):hover {
    border-color: var(--brand-navy-muted);
}

/* ─── Radio buttons ─── same rationale as checkboxes above */
body .ui-radiobutton-box {
    border: 1px solid var(--brand-border);
    border-radius: 50%;
    background: #ffffff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body .ui-radiobutton-box .ui-radiobutton-icon {
    background-image: none !important;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
body .ui-radiobutton-box.ui-state-active {
    border-color: var(--brand-navy);
}
body .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-navy);
    transform: translate(-50%, -50%);
}
body .ui-radiobutton-box:not(.ui-state-active):hover {
    border-color: var(--brand-navy-muted);
}

/* ─── Checkbox/radio vertical alignment ───
   Was scoped to .ui-panelgrid only; broadened to every context (dataTable
   columns, standalone form fields) after a 2026-08-18 survey found 6 instances
   outside any panelGrid with no alignment help at all — e.g. config/usuarios.xhtml's
   "Activado" datatable column, facturacion/procedencia-edit.xhtml's 3 "servicios
   pactados" table checkboxes, and 2 standalone radios (facturacion/cjp.xhtml,
   facturacion/concertacion-feria.xhtml) that sit before their page's panelGrid. */
body .ui-chkbox,
body .ui-radiobutton {
    vertical-align: middle;
    margin-top: 7px;
}

/* ─── Shared radio-group width (filter/edit forms) ───
   Was 3 ad-hoc inline widths (90%, 280px, 400px) for the same "radio group next
   to a label" pattern across 12 instances. Usage: styleClass="field-radio-group"
   on p:selectOneRadio, replacing its inline style="width:...". */
.field-radio-group {
    width: 280px;
}

/* ─── Data Tables ─── */
body .ui-datatable .ui-datatable-data tr td { padding: 10px 14px; border-bottom: 1px solid var(--brand-row-divider); }
body .ui-datatable .ui-datatable-data tr.ui-datatable-even { background-color: var(--brand-panel-bg); }
body .ui-datatable .ui-datatable-data tr.ui-state-hover { background-color: var(--brand-panel-bg); border-color: var(--brand-border); }
body .ui-datatable thead th { background-color: var(--brand-navy) !important; color: #ffffff !important; border-color: var(--brand-navy) !important; }

/* ─── Panel / Fieldset headers ─── */
body .ui-panel .ui-panel-titlebar,
body .ui-fieldset .ui-fieldset-legend { border-radius: 4px 4px 0 0; }

/* ─── Legacy horizontal per-module megaMenu (recolor only — structure/items untouched) ───
   Overrides the inline style="background:#4e5966" set by each module's menu.xhtml (higher
   specificity than the stylesheet alone requires !important to win over an inline style). */
body .ui-megamenu,
body .ui-megamenu .ui-menu-list,
body ul.ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow,
body .ui-megamenu .ui-submenu-list {
    background: var(--brand-navy) !important;
}
body .ui-megamenu .ui-menuitem-link:hover { background: var(--brand-navy-dark) !important; }

/* ─── Filters panel grid (borderless search bar, shared across list pages) ───
   Usage: add styleClass="filters-grid" to any p:panelGrid used for search filters */
body .ui-panelgrid.filters-grid,
body .ui-panelgrid.filters-grid .ui-panelgrid-content,
body .ui-panelgrid.filters-grid .ui-panelgrid-cell,
body .ui-panelgrid.filters-grid tr.ui-widget-content,
body .ui-panelgrid.filters-grid td { border: none !important; background: transparent !important; }

/* ─── Export icons sitting in adjacent panelGrid cells (e.g. Excel + PDF row-action
   pair) look far apart because each cell keeps its own default padding on top of
   any inline margin between the icons — tighten just those cells' padding instead
   of touching the grid's cell count/markup. */
body .ui-panelgrid td:has(> .action-icon) { padding-left: 3px !important; padding-right: 3px !important; }

/* ─── Page header (icon + title, shared across all pages) ───
   Usage: see Phase 2 markup below */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--brand-border); }
.page-header-left { display: flex; align-items: center; gap: 12px; }
.page-header-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-panel-bg); display: flex; align-items: center; justify-content: center; color: var(--brand-navy); font-size: 18px; flex-shrink: 0; }
.page-header-title { font-size: 18px; font-weight: 700; color: var(--brand-navy); margin: 0; display: flex; align-items: center; gap: 8px; }

/* ─── Action icons (replaces PNG row-action / export image icons) ───
   Usage: see Phase 2 markup below */
.action-icon {
    box-sizing: border-box;
    color: var(--brand-navy-muted);
    font-size: 15px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--brand-border);
    border-radius: 4px;
    background: #ffffff;
}
.action-icon:hover { color: var(--brand-navy); background: var(--brand-panel-bg); border-color: var(--brand-navy-muted); }

/* ─── Collapsible sidebar (icons-only, hover-to-expand) ───
   Scoped to the Poseidon shell only (currently rendered by main.xhtml). Desktop-only
   by design — mobile keeps the classic always-labeled menu, do not make this responsive
   down to mobile widths. */
@media (min-width: 1025px) {
  .layout-wrapper.menu-layout-static .layout-menu-container {
    width: 64px !important;
    height: calc(100vh - 75px) !important;
    overflow: hidden !important;
    transition: width 0.25s ease, box-shadow 0.25s ease, margin-left 0.3s ease !important;
    will-change: width !important;
    z-index: 999 !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover {
    width: 300px !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.22) !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container > .nano { height: 100% !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container > .nano > .nano-content.menu-scroll-content {
    overflow-y: auto !important; overflow-x: hidden !important; height: 100% !important;
    /* layout.js sets an inline margin-right:-17px here — nanoScroller's classic trick
       to hide the native scrollbar behind the edge while it draws its own (.nano-pane).
       We disabled .nano-pane and rely on native overflow-y:auto instead, so that
       negative margin has nothing left to hide and just silently widens this box
       17px past the sidebar's real visible edge — every width:100%/centered/gutter
       calculation inside then resolves against that wider phantom box, dragging
       icons and content toward the right. Neutralize the inline style with !important. */
    margin-right: 0 !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container .nano-pane { display: none !important; }

  .layout-wrapper.menu-layout-static .layout-main { margin-left: 64px !important; }
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-menu-container { margin-left: -64px !important; }
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-main { margin-left: 0 !important; }

  .layout-wrapper.menu-layout-static .topbar .topbar-left {
    width: 64px !important; padding: 0 !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    transition: width 0.25s ease, background-color 0.25s ease !important;
    background-color: rgb(241, 245, 249) !important;
    overflow: hidden !important;
  }
  .layout-wrapper.menu-layout-static .topbar .topbar-left .logo-icon-collapsed {
    display: block !important; width: 36px !important; height: 36px !important;
    object-fit: contain !important; flex-shrink: 0 !important;
  }
  .layout-wrapper.menu-layout-static .topbar .topbar-left .logo { display: none !important; }

  .layout-wrapper.menu-layout-static .topbar .topbar-left.sidebar-hovered {
    width: 300px !important; padding: 0 20px !important; justify-content: flex-start !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
  }
  .layout-wrapper.menu-layout-static .topbar .topbar-left.sidebar-hovered .logo-icon-collapsed { display: none !important; }
  .layout-wrapper.menu-layout-static .topbar .topbar-left.sidebar-hovered .logo {
    display: inline-block !important; width: 260px !important; height: 52px !important;
    /* iconoAzul.png has a lot of transparent margin baked in around the actual logo
       (confirmed via its alpha bbox) — background-size:contain was respecting that
       margin, so growing the box barely grew the visible logo. iconoAzul-topbar.png
       is a tightly-cropped copy (~5:1 aspect) made just for this box; iconoAzul.png
       itself is untouched since nothing else references it. */
    background-image: url("../images/iconoAzul-topbar.png") !important;
    background-size: contain !important; background-position: left center !important; background-repeat: no-repeat !important;
  }
  .layout-wrapper.menu-layout-static .topbar .topbar-right { padding-left: 84px !important; }
}

/* "Cerrar sesión" renders as a bare p:commandLink — nothing gave it the same
   icon-link look as the profile item next to it, so it fell back to the app's
   global `a:link { text-decoration: underline }` default (default.css) and looked
   like a plain blue hyperlink. Match it to the vendor .topbar-items > li > a look. */
.topbar-items .topbar-logout-link {
  color: #5f666c !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.topbar-items .topbar-logout-link:hover { color: var(--brand-navy) !important; }
.topbar-items .topbar-logout-link i { font-size: 18px; }
@media (min-width: 1025px) {

  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .layout-menu { padding: 0 4px !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .layout-menu li {
    margin: 0 !important; width: 100% !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .layout-menu li > a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 12px 0 !important; margin: 0 !important; border-radius: 8px !important;
    width: 100% !important; box-sizing: border-box !important; text-align: center !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .layout-menu li > a > i:first-child {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; font-size: 17px !important; width: auto !important; flex: 0 0 auto !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .layout-menu li > a > span { display: none !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .layout-menu li > a > i:last-child { display: none !important; }

  /* Collapsed: magnifying-glass icon in place of the search input, not display:none (loses the affordance otherwise) */
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .menu-search-wrapper {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 15px 0px !important; cursor: pointer;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .menu-search-wrapper .ui-inputtext { display: none !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container:not(:hover) .menu-search-wrapper::before {
    content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 17px; color: var(--brand-placeholder-gray);
  }

  .layout-wrapper.menu-layout-static .layout-menu-container:hover .layout-menu { padding: 0 8px !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover .layout-menu li > a {
    display: block !important; padding: 10px 14px 10px 16px !important; border-radius: 8px !important; line-height: 18px !important;
    font-size: 14px !important; box-sizing: border-box !important; width: 100% !important; overflow: hidden !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover .layout-menu li > a > i:first-child { margin-right: 10px !important; font-size: 15px !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover .layout-menu li > a > i:last-child { margin-right: 0 !important; margin-top: 3px !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover .layout-menu li > a > span {
    display: inline-block !important; white-space: normal !important; word-break: break-word !important;
    max-width: calc(100% - 46px) !important; vertical-align: top !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover .menu-search-wrapper {
    display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
  }
  .layout-wrapper.menu-layout-static .layout-menu-container:hover .menu-search-wrapper .ui-inputtext {
    display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
  }

  #menu-button { display: none !important; }
}

@media (max-width: 1024px) {
  .layout-wrapper .topbar .topbar-left .logo-icon-collapsed { display: none !important; }
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .topbar .topbar-left .logo { display: none !important; }
  .layout-wrapper.menu-layout-static .layout-menu-container { width: 300px !important; }
  .layout-wrapper.menu-layout-static .topbar .topbar-left { width: 300px !important; }
}

/* Safety net so long Spanish labels wrap instead of clipping, and the chevron
   never sits on the vendor's default negative margin-right (which, combined
   with the anchor's overflow:hidden, made it look sliced off at the edge). */
.layout-wrapper .layout-menu li > a > span { white-space: normal !important; word-break: break-word !important; }
.layout-wrapper .layout-menu li > a > i:last-child { margin-right: 0 !important; }

/* Base sidebar surface + idle text (vendor's own layout-blue.css already ships
   #2d353c here, but we pin it via the theme variable so it's not an accidental
   coincidence and it survives a future vendor theme swap). */
.layout-wrapper .layout-menu-container { background-color: var(--sidebar-bg) !important; }
.layout-wrapper .layout-menu li > a { color: var(--sidebar-menu-text) !important; }
.layout-wrapper .layout-menu li > a > i { color: var(--sidebar-menu-text) !important; }

/* Gate against the load-time "group flashes open, then snaps shut" glitch: layout.js
   auto-expands whichever group contains the current page (adds active-menuitem +
   shows its <ul> via jQuery .show()), and WEB-INF/menu.xhtml's own script strips that
   back off — but only once the DOM is ready. Until then, force every group's children
   hidden regardless of what class the widget put on them, so nothing is ever visible
   to flash. The script adds .oyd-menu-ready to .layout-menu-container in the very same
   pass where it strips active-menuitem, so lifting this gate never reveals an open group. */
.layout-menu-container:not(.oyd-menu-ready) .layout-menu > li.active-menuitem > ul {
  display: none !important;
}

.layout-wrapper .layout-menu li > a:hover { background-color: var(--sidebar-item-hover-bg) !important; color: var(--sidebar-item-hover-text) !important; }
.layout-wrapper .layout-menu li > a:hover > i { color: var(--sidebar-item-hover-text) !important; }
.layout-wrapper .layout-menu > li.active-menuitem > a {
  background: linear-gradient(135deg, var(--sidebar-primary-dark) 0%, var(--sidebar-primary) 100%) !important; color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(31, 85, 143, 0.28) !important;
}
.layout-wrapper .layout-menu > li.active-menuitem > a > i { color: #ffffff !important; }
.layout-wrapper .layout-menu li.active-menuitem > a { color: var(--sidebar-item-hover-text) !important; }
.layout-wrapper .layout-menu li.active-menuitem > a > i { color: var(--sidebar-item-hover-text) !important; }
.layout-wrapper .layout-menu li > ul li.active-menuitem > a { color: var(--sidebar-active-nested) !important; background-color: var(--sidebar-active-nested-bg) !important; }
.layout-wrapper .layout-menu li > ul li.active-menuitem > a > i { color: var(--sidebar-active-nested) !important; }
.layout-wrapper .layout-menu li > ul { background-color: transparent !important; padding: 4px 0 6px 0 !important; margin: 0 0 0 24px !important; border-left: 2px solid var(--sidebar-tree-line) !important; }
.layout-wrapper .layout-menu li > ul li > a { font-size: 13px !important; padding: 8px 14px !important; color: var(--sidebar-submenu-text) !important; border-radius: 6px !important; }
.layout-wrapper .layout-menu li > ul li > a > i { color: var(--sidebar-submenu-text) !important; font-size: 13px !important; }
.layout-wrapper .layout-menu li > ul li > a:hover { color: var(--sidebar-submenu-hover-text) !important; background-color: var(--sidebar-item-hover-bg) !important; }
.layout-wrapper .layout-menu li > ul li > a:hover > i { color: var(--sidebar-submenu-hover-text) !important; }
.layout-wrapper .layout-menu li > ul .ui-separator { border-top: 1px solid rgba(255,255,255,0.06) !important; margin: 4px 8px !important; height: 0 !important; background: transparent !important; }

.layout-menu-container .ui-inputtext {
  background-color: var(--sidebar-search-bg) !important; border: 1px solid var(--sidebar-search-border) !important; border-radius: 8px !important;
  color: var(--sidebar-item-hover-text) !important; padding: 8px 14px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  margin: 0 !important; transition: border-color 0.2s, box-shadow 0.2s !important;
}
.layout-menu-container .ui-inputtext::placeholder { color: var(--sidebar-search-placeholder) !important; }
.layout-menu-container .ui-inputtext:focus { border-color: var(--sidebar-primary) !important; box-shadow: 0 0 0 3px rgba(31, 85, 143, 0.15) !important; outline: none !important; }

.layout-menu-container:hover .layout-menu > li.active-menuitem > a {
  position: sticky !important; top: 65px !important; z-index: 6 !important;
  background: linear-gradient(135deg, var(--sidebar-primary-dark) 0%, var(--sidebar-primary) 100%) !important;
  transform: translateZ(0) !important;
}
/* Not sticky anymore: two rounds of sticky-positioning fixes (box-sizing/margin
   reset, then forcing a compositing layer) didn't resolve the clipped-until-you-type
   look, which points at the sticky containing-block calculation itself rather than
   a timing glitch. A plain block sidesteps the whole class of bug — trade-off is the
   search box scrolls away with the list instead of staying pinned, which matters less
   now that groups start collapsed (see the JS at the bottom of WEB-INF/menu.xhtml). */
.layout-wrapper.menu-layout-static .layout-menu-container:hover .menu-search-wrapper {
  position: relative !important; background-color: var(--sidebar-bg) !important;
  padding: 12px 10px 8px !important; margin: 0 !important; box-sizing: border-box !important;
}

/* ─── Row-action spacing safety net ───
   Action buttons/icons in a datatable column have historically relied on
   ad-hoc inline style="margin-left: 10px;" per button, applied inconsistently
   (see facturacion-emisores.xhtml — Anular/PDF had none, sat flush against
   the button before them). This rule guarantees a minimum gap regardless of
   whether a page remembered to set one. */
body .ui-datatable .ui-datatable-data td > .action-icon,
body .ui-datatable .ui-datatable-data td > .ui-button.ui-button-icon-only {
    margin-left: 6px;
}
body .ui-datatable .ui-datatable-data td > .action-icon:first-child,
body .ui-datatable .ui-datatable-data td > .ui-button.ui-button-icon-only:first-child {
    margin-left: 0;
}

/* ─── "Exportar a Excel" icon (p:commandButton variant) ───
   User wants every "Exportar a Excel" trigger showing the same recognizable
   green Excel icon (resources/images/excel.png), not the FA6 fa-file-excel
   glyph. h:commandLink-based export links get p:graphicImage swapped in
   directly in markup; p:commandButton-based ones (which need to keep the
   icon="fa-solid fa-file-excel" attribute so PrimeFaces still classifies
   them as .ui-button-icon-only and picks up the 32x32 box sizing above)
   get this class instead, which blanks the FA glyph and paints the PNG
   as a background image on the same icon span. */
body .ui-button.excel-export-icon .ui-icon {
    width: 20px !important;
    height: 20px !important;
    background-image: url("../images/excel.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
body .ui-button.excel-export-icon .ui-icon:before {
    content: "" !important;
}