/* ============================================================
   TMLand Global Style Overrides — custom_rain1.css
   Target: consistent look across all pages (Rain/Chambray theme)
   ============================================================ */

/* ---- Utility dialog widths ---- */
.dialogo90 { width: 90% !important; }
.dialogo95 { width: 95% !important; }

/* ============================================================
   MODAL / DIALOG PAGES  (escoger_*.xhtml, loaded in iframe)
   Pages without .layout-wrapper are dialog pages
   ============================================================ */

/* Reset body so there's no default browser margin inside the iframe */
html, body {
	margin: 0 !important;
	padding: 0 !important;
}

/* Dialog page body background */
body:not(:has(.layout-wrapper)) {
	background: var(--surface-100, #f1f5f9);
	font-size: 14px;
	font-family: inherit;
}

/* Card fills the entire dialog area edge-to-edge, no extra shadow */
body:not(:has(.layout-wrapper)) .p-grid {
	margin: 0 !important;
}
body:not(:has(.layout-wrapper)) .p-col-12 {
	padding: 0 !important;
}
body:not(:has(.layout-wrapper)) .card {
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body:not(:has(.layout-wrapper)) .card > .ui-panel > .ui-panel-content {
	padding: 0 !important;
}

/* Inner form grid: full width with consistent padding */
body:not(:has(.layout-wrapper)) .p-formgrid.p-grid {
	margin: 0 !important;
	padding: 12px 16px !important;
	gap: 10px 0;
	width: 100%;
	box-sizing: border-box;
}
body:not(:has(.layout-wrapper)) .p-formgrid.p-grid > .p-field,
body:not(:has(.layout-wrapper)) .p-formgrid.p-grid > [class*="p-field"] {
	padding-left: 6px !important;
	padding-right: 6px !important;
	box-sizing: border-box;
}

/* ---- Blue accent bar at top of dialog card ---- */
/* Using border-top avoids z-index / overlap issues with child elements */
body:not(:has(.layout-wrapper)) .card {
	border-top: 4px solid var(--primary-color, #3161BA);
}

/* ---- Filter row (select/search fields at top) ---- */
body:not(:has(.layout-wrapper)) .p-field .ui-selectonemenu,
body:not(:has(.layout-wrapper)) .p-field .ui-inputtext,
body:not(:has(.layout-wrapper)) .p-field .ui-inputtextarea,
body:not(:has(.layout-wrapper)) .p-field .ui-selectcheckboxmenu {
	width: 100% !important;
}

/* ---- DataTable inside dialog — full width, clean ---- */
body:not(:has(.layout-wrapper)) .ui-scrollpanel {
	width: 100% !important;
}
body:not(:has(.layout-wrapper)) .ui-datatable-wrapper,
body:not(:has(.layout-wrapper)) .ui-datatable-scrollable-wrapper {
	width: 100% !important;
}
body:not(:has(.layout-wrapper)) .ui-datatable {
	width: 100% !important;
	font-size: 0.8125rem;
}

/* Header cells */
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-thead > tr > th {
	background: var(--surface-100, #f1f5f9) !important;
	color: var(--text-color, #334155) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 8px 10px !important;
	border-bottom: 2px solid var(--primary-color, #3161BA) !important;
	white-space: nowrap;
}
/* Column filter inputs inside the header */
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-thead > tr > th .ui-column-filter {
	width: 100% !important;
	margin-top: 5px;
	font-size: 0.75rem !important;
	padding: 4px 6px !important;
	border-radius: 4px !important;
	border: 1px solid var(--surface-border, #e2e8f0) !important;
	box-sizing: border-box;
}
/* Data rows */
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr > td {
	padding: 8px 10px !important;
	border-bottom: 1px solid var(--surface-100, #f1f5f9) !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	vertical-align: middle;
	font-size: 0.8125rem;
	color: var(--text-color, #334155);
}
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr:nth-child(even):not(.ui-state-highlight) {
	background: #ffffff !important;
}
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr.ui-state-highlight,
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr.ui-state-highlight:nth-child(even) {
	background: #dbeafe !important;
}
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr:not(.ui-state-highlight):hover {
	background: var(--surface-hover, #eef2fa) !important;
	cursor: pointer;
}

/* Select / check button in the first column */
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr > td:first-child {
	text-align: center;
	width: 48px !important;
	padding: 6px 4px !important;
}
body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-thead > tr > th:first-child {
	text-align: center;
	width: 48px !important;
}

/* ---- Action toolbar (borrar/guardar selección) — built by dialogo_toolbar.js ---- */
body:not(:has(.layout-wrapper)) .dialogo-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 16px;
	background: var(--surface-100, #f1f5f9);
	border-bottom: 1px solid var(--surface-border, #e2e8f0);
	width: 100%;
	box-sizing: border-box;
}
/* Strip PrimeFlex sizing from ALL child containers (direct and via display:contents) */
body:not(:has(.layout-wrapper)) .dialogo-toolbar > div,
body:not(:has(.layout-wrapper)) .dialogo-toolbar .p-field,
body:not(:has(.layout-wrapper)) .dialogo-toolbar [class*="p-col-"],
body:not(:has(.layout-wrapper)) .dialogo-toolbar [class*="p-md-"] {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}
/* 'Guardar selección' (success) pushed to left; trash (danger) stays right */
body:not(:has(.layout-wrapper)) .dialogo-toolbar .ui-button-success {
	order: -1;
	margin-right: auto !important;
}

/* ---- Rounded buttons inside dialogs — slightly more compact ---- */
body:not(:has(.layout-wrapper)) .rounded-button,
body:not(:has(.layout-wrapper)) .ui-button.rounded-button {
	padding: 6px 12px !important;
	font-size: 0.78rem !important;
	min-height: 30px;
}

/* ---- DataTable scroll body: fill available height in dialog ---- */
body:not(:has(.layout-wrapper)) .ui-datatable-scrollable-body {
	max-height: calc(100vh - 350px) !important;
	height: auto !important;
}

/* ---- Paginator inside dialog ---- */
body:not(:has(.layout-wrapper)) .ui-paginator {
	background: var(--surface-ground, #f8fafc) !important;
	border-top: 1px solid var(--surface-border, #e2e8f0) !important;
	font-size: 0.78rem;
	padding: 4px !important;
}
body:not(:has(.layout-wrapper)) .ui-paginator .ui-paginator-page.ui-state-active {
	background: var(--primary-color, #3161BA) !important;
	color: #fff !important;
	border-color: var(--primary-color, #3161BA) !important;
	border-radius: 4px;
}

/* ---- Autocomplete inside dialog ---- */
body:not(:has(.layout-wrapper)) .ui-autocomplete input {
	width: 100% !important;
}

/* ---- h:panelGrid inside dialogs — remove default table layout ---- */
body:not(:has(.layout-wrapper)) .p-field > table {
	width: 100%;
}
body:not(:has(.layout-wrapper)) .p-field > table td {
	vertical-align: middle;
	padding: 0 4px 0 0;
}

/* ---- Graphic images (status bullets) ---- */
body:not(:has(.layout-wrapper)) .ui-datatable img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* ---- Print: hide non-printable elements ---- */
@media print {
	.noimprimir, .noimprimir * { display: none !important; }
}

/* ---- Z-index fixes ---- */
.ui-autocomplete-list  { z-index: 1000; }
.ui-autocomplete-panel { z-index: 5000 !important; }
body .ui-progressbar .ui-progressbar-label { color: #000000; }

/* ============================================================
   TOPBAR — use Chambray blue instead of orange
   ============================================================ */
.layout-topbar {
	background: #3161BA !important;
}
.layout-topbar .topbar-logo img {
	height: 32px;
}
/* Topbar action icons */
.layout-topbar .layout-topbar-right .layout-topbar-actions > li > a,
.layout-topbar .layout-topbar-right .layout-topbar-actions > li > button {
	color: #ffffff !important;
}

/* ============================================================
   CARD — main content wrapper
   ============================================================ */
.card {
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
	padding: 1.25rem;
	background: #ffffff;
}

/* ============================================================
   SECTION HEADERS — h5 inside .card panels
   Acts as a styled section header bar (matches screenshots)
   ============================================================ */
.card .ui-panel-content > h5,
.card .ui-panel-content > h4,
.card > h5,
.card > h4 {
	display: flex;
	align-items: center;
	background: var(--surface-100, #f1f5f9);
	color: var(--text-color, #334155);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 9px 14px;
	margin: -1.25rem -1.25rem 1.25rem -1.25rem;
	border-bottom: 1px solid var(--surface-border, #e2e8f0);
	border-radius: 8px 8px 0 0;
}

/* p:panel inside .card — remove default panel chrome, inherit card */
.card > .ui-panel,
.card .ui-panel {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
.card > .ui-panel > .ui-panel-content,
.card .ui-panel > .ui-panel-content {
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* p:panel with a real header (toggleable) — style the header bar */
.card .ui-panel .ui-panel-titlebar,
.ui-panel .ui-panel-titlebar {
	background: var(--surface-100, #f1f5f9) !important;
	border-color: var(--surface-border, #e2e8f0) !important;
	color: var(--text-color, #334155) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 9px 14px !important;
	border-radius: 6px 6px 0 0;
}
.card .ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon,
.ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon {
	color: var(--text-color-secondary, #64748b) !important;
}

/* ============================================================
   TAB VIEW — cleaner tab bar
   ============================================================ */
.ui-tabview .ui-tabview-nav {
	background: transparent !important;
	border-bottom: 2px solid var(--surface-border, #e2e8f0) !important;
	padding: 0 !important;
	gap: 4px;
}
.ui-tabview .ui-tabview-nav li {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px !important;
}
.ui-tabview .ui-tabview-nav li a {
	color: var(--text-color-secondary, #64748b) !important;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 10px 16px !important;
	background: transparent !important;
	border: none !important;
}
.ui-tabview .ui-tabview-nav li.ui-state-active {
	border-bottom: 2px solid var(--primary-color, #3161BA) !important;
}
.ui-tabview .ui-tabview-nav li.ui-state-active a {
	color: var(--primary-color, #3161BA) !important;
	font-weight: 700 !important;
}
.ui-tabview .ui-tabview-nav li:not(.ui-state-active):hover {
	border-bottom: 2px solid var(--surface-border, #e2e8f0) !important;
}
.ui-tabview .ui-tabview-nav li:not(.ui-state-active):hover a {
	color: var(--text-color, #334155) !important;
}
.ui-tabview .ui-tabview-panels {
	border: none !important;
	padding: 1rem 0 0 0 !important;
	background: transparent !important;
}

/* ============================================================
   DATA TABLE — clean rows, no zebra, tight headers
   ============================================================ */
.ui-datatable .ui-datatable-thead > tr > th {
	background: var(--surface-ground, #f8fafc) !important;
	color: var(--text-color, #334155) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 2px solid var(--surface-border, #e2e8f0) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	padding: 10px 12px !important;
}
.ui-datatable .ui-datatable-thead > tr > th .ui-column-filter {
	margin-top: 6px;
	font-size: 0.8125rem;
}
.ui-datatable .ui-datatable-data > tr > td {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px solid var(--surface-100, #f1f5f9) !important;
	padding: 10px 12px !important;
	font-size: 0.875rem;
	color: var(--text-color, #334155);
	vertical-align: middle;
}
/* Stripe — solo filas pares NO seleccionadas */
.ui-datatable .ui-datatable-data > tr:nth-child(even):not(.ui-state-highlight) {
	background: var(--surface-ground, #f8fafc) !important;
}
/* Hover — solo filas NO seleccionadas */
.ui-datatable .ui-datatable-data > tr:not(.ui-state-highlight):hover {
	background: var(--surface-border, #e2e8f0) !important;
}
/* Selección múltiple — gana sobre stripe y hover */
.ui-datatable .ui-datatable-data > tr.ui-state-highlight,
.ui-datatable .ui-datatable-data > tr.ui-state-highlight:nth-child(even) {
	background: #dbeafe !important;
}
.ui-datatable .ui-datatable-data > tr.ui-state-highlight > td {
	color: #1e40af !important;
	border-bottom-color: #bfdbfe !important;
}
.ui-datatable .ui-datatable-data > tr.ui-state-highlight:hover {
	background: #bfdbfe !important;
}
/* Sort icons */
.ui-datatable .ui-sortable-column-icon {
	color: #94a3b8 !important;
	font-size: 0.7rem;
}
.ui-datatable .ui-state-active .ui-sortable-column-icon {
	color: var(--primary-color, #3161BA) !important;
}
/* Scrollable table body */
.ui-datatable .ui-datatable-scrollable-body {
	border-bottom: 1px solid var(--surface-border, #e2e8f0);
}

/* ============================================================
   FORM FIELDS — labels and inputs
   ============================================================ */
.p-field > label,
.p-field > .ui-outputlabel,
.p-field > .ui-outputlabel.ui-widget {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: var(--text-color, #334155) !important;
	margin-bottom: 4px !important;
	display: block;
}
/* Input text */
.ui-inputtext,
.ui-inputtextarea {
	border: 1px solid var(--surface-border, #e2e8f0) !important;
	border-radius: 5px !important;
	padding: 7px 10px !important;
	font-size: 0.875rem !important;
	color: var(--text-color, #334155) !important;
	transition: border-color .15s;
}
.ui-inputtext:focus,
.ui-inputtextarea:focus {
	border-color: var(--primary-color, #3161BA) !important;
	box-shadow: 0 0 0 3px rgba(33,150,243,0.2) !important;
	outline: none !important;
}
.ui-inputtext.ui-state-error,
.ui-inputtextarea.ui-state-error {
	border-color: #ef4444 !important;
}
/* Select menus */
.ui-selectonemenu {
	border: 1px solid var(--surface-border, #e2e8f0) !important;
	border-radius: 5px !important;
}
.ui-selectonemenu .ui-selectonemenu-label {
	padding: 7px 10px !important;
	font-size: 0.875rem !important;
}
.ui-selectonemenu .ui-selectonemenu-trigger {
	border-left: 1px solid var(--surface-border, #e2e8f0) !important;
	background: var(--surface-ground, #f8fafc) !important;
}

/* ---------------------------------------------------------------
 * Fix Chrome + PrimeFaces 13: panel del selectOneMenu con
 * appendTo="@(body)" se cerraba inmediatamente al abrirse porque
 * el evento mousedown que lo abre burbujea al document y dispara
 * el handler de "outside click". Chrome es más estricto que
 * Firefox con event bubbling, por eso el síntoma era browser-
 * specific.
 *
 * Forzar pointer-events y z-index alto en el panel garantiza
 * que reciba los eventos correctamente antes de que el handler
 * outside se dispare.
 * --------------------------------------------------------------- */
.ui-selectonemenu-panel,
.ui-selectonemenu-panel.ui-shadow,
body > .ui-selectonemenu-panel {
	pointer-events: auto !important;
	z-index: 100000 !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-items,
.ui-selectonemenu-panel .ui-selectonemenu-item,
.ui-selectonemenu-panel .ui-selectonemenu-filter-container,
.ui-selectonemenu-panel .ui-selectonemenu-filter {
	pointer-events: auto !important;
}

/* ---------------------------------------------------------------
 * Ancho FIJO del panel del selectOneMenu + ellipsis para items
 * largos. Evita que el panel desborde el viewport (origen del bug
 * "se cierra solo en Chrome" cuando appendTo='@(body)' calcula mal
 * la posición).
 *
 * Notas técnicas:
 *  - PrimeFaces 13 setea `style="width: NNNpx"` inline en el panel
 *    según el contenido más ancho. Para sobreescribirlo necesitamos
 *    `width: ... !important` (inline style tiene MAYOR especificidad
 *    que reglas externas, !important es la única manera).
 *  - `overflow: hidden` corta cualquier contenido que aún logre
 *    escapar (defensa adicional).
 *  - `min()` con 95vw garantiza que en pantallas <420px el panel
 *    nunca exceda el viewport.
 *
 * Las opciones largas se truncan con '...' y muestran tooltip nativo
 * via title attribute (agregado en pf-chrome-fixes.js).
 * --------------------------------------------------------------- */
.ui-selectonemenu-panel {
	width: 450px !important;
	max-width: 95vw !important;
	overflow: hidden !important;
	box-sizing: border-box;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper,
.ui-selectonemenu-panel .ui-selectonemenu-items,
.ui-selectonemenu-panel .ui-selectonemenu-list {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
.ui-selectonemenu-panel .ui-selectonemenu-item {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
/* El input de filtro tampoco debe desbordar */
.ui-selectonemenu-panel .ui-selectonemenu-filter-container,
.ui-selectonemenu-panel .ui-selectonemenu-filter {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
/* Trigger del select (lo que se muestra cuando hay opción seleccionada):
   también truncar para que no fuerce el ancho del formulario. */
.ui-selectonemenu .ui-selectonemenu-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
   BUTTONS — color/tamaño los pinta el tema Saga (severity, primario).
   ÚNICO ajuste de forma: 'rounded-button' es una clase NATIVA de Saga
   que convierte el botón en píldora (border-radius:2rem) o círculo
   (icon-only). La app la usa en ~3745 botones, lo que los hacía verse
   "muy redondos" frente a los demás "cuadrados" (4px de Saga).
   La neutralizamos al radio estándar de Saga (4px) para que TODOS los
   botones se vean uniformes.
   ============================================================ */
.ui-button.rounded-button,
body .ui-button.rounded-button.ui-button-icon-only {
	border-radius: 4px !important;
}

/* ITEMS del dropdown del menuButton (items de menu, no botones) — reset de clases de
   botón (ui-button-danger, etc.) que el script de migración copió de los p:commandButton
   originales a los p:menuitem. */
.ui-menubutton .ui-menu .ui-menuitem {
	background: transparent !important;
	border: none !important;
}
.ui-menubutton .ui-menu .ui-menuitem .ui-menuitem-link {
	color: var(--text-color, #334155) !important;
	background: transparent !important;
	padding: 8px 14px !important;
	font-size: 0.8125rem !important;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ui-menubutton .ui-menu .ui-menuitem .ui-menuitem-link:hover {
	background: var(--surface-100, #f1f5f9) !important;
	color: var(--text-color, #334155) !important;
}
/* Items de eliminar/borrar — icono y texto en rojo */
.ui-menubutton .ui-menu .ui-menuitem.ui-button-danger .ui-menuitem-link,
.ui-menubutton .ui-menu .ui-menuitem.ui-button-danger .ui-menuitem-link .ui-menuitem-icon,
.ui-menubutton .ui-menu .ui-menuitem.ui-button-danger .ui-menuitem-link .ui-menuitem-text {
	color: #dc2626 !important;
}
.ui-menubutton .ui-menu .ui-menuitem.ui-button-danger .ui-menuitem-link:hover {
	background: #fee2e2 !important;
}

/* ============================================================
   h:commandLink as export link
   ============================================================ */
h\:commandLink.export-link,
.export-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #16a34a;
	padding: 5px 12px;
	border: 1px solid #bbf7d0;
	border-radius: 6px;
	background: #f0fdf4;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s;
}
.export-link:hover { background: #dcfce7; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.layout-breadcrumb {
	padding: 8px 20px;
	background: var(--surface-ground, #f8fafc);
	border-bottom: 1px solid var(--surface-border, #e2e8f0);
}

/* ============================================================
   MESSAGES / GROWL
   ============================================================ */
.ui-messages .ui-messages-info  { border-left: 4px solid #3b82f6; }
.ui-messages .ui-messages-warn  { border-left: 4px solid #f59e0b; }
.ui-messages .ui-messages-error { border-left: 4px solid #ef4444; }
.ui-messages .ui-messages-fatal { border-left: 4px solid #7c3aed; }

/* ============================================================
   DIALOG — consistent with card style
   ============================================================ */
.ui-dialog .ui-dialog-titlebar {
	background: #3161BA !important; /* mismo azul que el topbar (.layout-topbar) */
	color: #fff !important;
	border-radius: 8px 8px 0 0;
	font-weight: 700;
	font-size: 0.9rem;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
	color: #fff !important;
}
.ui-dialog .ui-dialog-content {
	padding: 1.25rem;
}

/* ============================================================
   PAGINATOR
   ============================================================ */
.ui-paginator {
	background: var(--surface-ground, #f8fafc) !important;
	border-top: 1px solid var(--surface-border, #e2e8f0) !important;
	border-bottom: none !important;
	padding: 6px !important;
}
.ui-paginator .ui-paginator-page.ui-state-active {
	background: var(--primary-color, #3161BA) !important;
	color: #fff !important;
	border-color: var(--primary-color, #3161BA) !important;
}

/* ============================================================
   STATUS DOTS (used in tables)
   ============================================================ */
.status-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}
.dot-green  { background: #22c55e; }
.dot-yellow { background: #f59e0b; }
.dot-red    { background: #ef4444; }
.dot-gray   { background: #94a3b8; }
.dot-blue   { background: #3b82f6; }

/* ============================================================
   TAB FILTER BAR (used in venta_tiquetes and similar)
   ============================================================ */
.tab-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 12px 16px;
	background: var(--surface-ground, #f8fafc);
	border-radius: 8px;
	border: 1px solid var(--surface-border, #e2e8f0);
	margin-bottom: 16px;
}
.tab-filter-bar .p-field { margin: 0; }
.tab-filter-bar .p-field > label,
.tab-filter-bar .p-field > .ui-outputlabel {
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--text-color-secondary, #64748b) !important;
}

/* Saldo badge */
.saldo-badge-wrap { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }
.saldo-badge-lbl  { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-color-secondary, #64748b); letter-spacing: .06em; }
.saldo-badge {
	display: inline-flex; align-items: center;
	background: #dcfce7; color: #166534;
	padding: 4px 14px; border-radius: 20px;
	font-size: 14px; font-weight: 700;
}

/* Tab section header */
.tab-section-head {
	display: flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--text-color-secondary, #64748b);
	padding: 8px 0 6px;
	border-bottom: 1px solid var(--surface-border, #e2e8f0);
	margin-bottom: 12px;
}

/* Status legend */
.status-legend {
	display: flex; flex-wrap: wrap; gap: 14px;
	padding: 8px 12px;
	background: var(--surface-ground, #f8fafc); border-radius: 6px; border: 1px solid var(--surface-border, #e2e8f0);
}
.status-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }

/* ============================================================
   MOBILE  (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

	/* --- Diálogos dinámicos: pantalla completa en móvil --- */
	.ui-dialog.dialogo90,
	.ui-dialog.dialogo95,
	.ui-dialog {
		width:  100vw !important;
		max-width: 100vw !important;
		left:   0    !important;
		top:    0    !important;
		margin: 0    !important;
		height: 100dvh !important;    /* dvh = dynamic viewport height (descuenta barra del navegador) */
		border-radius: 0 !important;
		transform: none !important;
	}
	.ui-dialog .ui-dialog-titlebar {
		border-radius: 0 !important;
		padding: 10px 14px !important;
		font-size: 0.85rem !important;
	}
	.ui-dialog .ui-dialog-content {
		width:   100% !important;
		height:  calc(100dvh - 44px) !important;  /* 44px = barra de título */
		padding: 0 !important;
		overflow: hidden !important;
		box-sizing: border-box;
	}
	/* el iframe que carga los diálogos de selección debe ocupar todo el content */
	.ui-dialog .ui-dialog-content > iframe {
		width:  100% !important;
		height: 100% !important;
		border: none;
		display: block;
	}

	/* --- Tabla dentro del iframe de diálogo: altura dinámica --- */
	/* El iframe tiene height=100dvh-44px; dentro, la tabla scrollable debe llenar lo que quede
	   descontando: borde azul (4px) + toolbar (~52px) + cabecera columnas (~36px) + paginador (~44px) */
	body:not(:has(.layout-wrapper)) .ui-datatable-scrollable-body {
		max-height: calc(100dvh - 180px) !important;
		height:     auto !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	/* Si no hay toolbar (algunos diálogos no tienen botones de guardar) */
	body:not(:has(.layout-wrapper)) .ui-datatable-scrollable-body:first-child {
		max-height: calc(100dvh - 130px) !important;
	}

	/* Botón de selección: área de toque mínimo 44×44 px (Apple HIG) */
	body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr > td:first-child .ui-button,
	body:not(:has(.layout-wrapper)) .ui-datatable .ui-datatable-data > tr > td:first-child .rounded-button {
		min-width:  44px !important;
		min-height: 44px !important;
		font-size:  1rem !important;
	}

	/* --- Tablas en la aplicación principal: scroll horizontal --- */
	.layout-main-content .ui-datatable-wrapper,
	.layout-main-content .ui-datatable-scrollable-wrapper,
	.layout-content .ui-datatable-wrapper,
	.layout-content .ui-datatable-scrollable-wrapper {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	/* Filas y celdas más compactas para que quepan más datos */
	.layout-main-content .ui-datatable .ui-datatable-data > tr > td,
	.layout-content .ui-datatable .ui-datatable-data > tr > td {
		padding: 6px 8px !important;
		font-size: 0.8rem !important;
		white-space: nowrap;
	}
	.layout-main-content .ui-datatable .ui-datatable-thead > tr > th,
	.layout-content .ui-datatable .ui-datatable-thead > tr > th {
		padding: 6px 8px !important;
		font-size: 0.68rem !important;
		white-space: nowrap;
	}

	/* --- Paginador: ocultar el reporte de texto en móvil --- */
	/* "mostrando X - Y de Z, páginas A/B" ocupa todo el ancho */
	.ui-paginator .ui-paginator-current {
		display: none !important;
	}
	/* Rows-per-page dropdown también ocupa demasiado en pantallas pequeñas */
	.ui-paginator .ui-paginator-rpp-options {
		display: none !important;
	}
	/* Botones del paginador: área de toque mayor */
	.ui-paginator .ui-paginator-page,
	.ui-paginator .ui-paginator-first,
	.ui-paginator .ui-paginator-prev,
	.ui-paginator .ui-paginator-next,
	.ui-paginator .ui-paginator-last {
		min-width:  36px !important;
		height:     36px !important;
		line-height: 36px !important;
		padding:    0    !important;
		font-size:  0.8rem !important;
	}

	/* --- Botones generales: área de toque mínima --- */
	.rounded-button:not(.ui-menubutton),
	.ui-button.rounded-button {
		min-height: 40px !important;
	}

	/* ---------------------------------------------------------------------
	 * responsive-stack: apila las filas verticalmente como cards en móvil.
	 * Solo se aplica a dataTables que tengan styleClass="responsive-stack".
	 * Reemplaza el comportamiento de reflow="true" cuando éste no es
	 * compatible con scrollWidth (PF13).
	 * --------------------------------------------------------------------- */
	.responsive-stack .ui-datatable-scrollable-header,
	.responsive-stack .ui-datatable-thead {
		display: none !important;
	}
	.responsive-stack .ui-datatable-scrollable-body,
	.responsive-stack .ui-datatable-scrollable-wrapper,
	.responsive-stack .ui-datatable-wrapper {
		overflow-x: hidden !important;
		max-height: none !important;
	}
	.responsive-stack table,
	.responsive-stack .ui-datatable-data {
		display: block !important;
		width: 100% !important;
	}
	.responsive-stack .ui-datatable-data > tr {
		display: block !important;
		width: 100% !important;
		border: 1px solid #d0d0d0 !important;
		border-radius: 4px !important;
		margin-bottom: 0.5rem !important;
		padding: 0.5rem !important;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	}
	.responsive-stack .ui-datatable-data > tr > td {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		border: none !important;
		border-bottom: 1px dashed #eee !important;
		padding: 4px 0 !important;
		white-space: normal !important;
	}
	.responsive-stack .ui-datatable-data > tr > td:last-child {
		border-bottom: none !important;
	}
}