/* ==========================================================================
   SAJA POS — hoja de estilos de marca
   Se carga al final de todo (ver css.blade.php) para tener prioridad de
   cascada sobre Bootstrap 3 / AdminLTE / select2 / DataTables / SweetAlert
   (vendor.css) y sobre las utilidades Tailwind/DaisyUI ya compiladas
   (header, menú lateral, login) sin necesitar recompilar nada.
   ========================================================================== */

/* ---------- Tipografía: Inter autoalojada ---------- */
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* El sistema es solo modo claro por ahora (modo oscuro real queda fuera de
   esta pasada, ver notas de la Etapa 6). Sin esto, un usuario con el modo
   oscuro activado en su navegador/SO recibe los controles NATIVOS del
   navegador (campos de texto transparentes, checkboxes, scrollbars, etc.)
   pintados en oscuro por el propio navegador, aunque el resto de la página
   siga clara -- ej.: el cuadro de búsqueda de un select2 (fondo transparente)
   se veía negro con letra invisible. Forzar color-scheme:light evita que el
   navegador mezcle su tema oscuro con nuestra página, que es clara siempre. */
:root {
	color-scheme: light;
}

/* ---------- Paleta y tokens ---------- */
:root {
	--saja-bg: #FAF9F7;
	--saja-surface: #FFFFFF;
	--saja-surface-2: #F3F1EE;
	--saja-border: #E6E2DC;
	--saja-text: #2A2733;
	--saja-text-muted: #6B6675;

	--saja-primary: #383474;
	--saja-primary-strong: #2A2758;
	--saja-accent: #5B54D6;
	--saja-accent-hover: #4A44BE;
	--saja-accent-soft: #ECEAFB;

	/* Barra de marca: fija, no invierte con modo oscuro del SO */
	--saja-header-bg: #2A2758;
	--saja-header-bg-soft: #383474;
	--saja-header-text: #FFFFFF;

	--saja-success: #2F9E63;
	--saja-success-soft: #E4F5EC;
	--saja-warning: #C7871F;
	--saja-warning-soft: #FBF0DD;
	--saja-danger: #C64545;
	--saja-danger-soft: #FBE9E9;
	--saja-info: #3970C4;
	--saja-info-soft: #E7EFFB;

	--saja-radius-sm: 6px;
	--saja-radius: 10px;
	--saja-radius-lg: 14px;
	--saja-shadow-sm: 0 1px 2px rgba(42,39,51,0.06);
	--saja-shadow: 0 1px 2px rgba(42,39,51,0.06), 0 4px 14px rgba(42,39,51,0.08);
	--saja-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Selector de color preferido (por usuario, menú de perfil) ----------
   Preferencia guardada en localStorage, ver el script inline en
   layouts/app.blade.php (window.SAJA_THEME_PRESETS) y el handler en
   layouts/partials/header.blade.php. Cambia los mismos --saja-* de arriba,
   así que recolorea TODO el sistema (ya deriva de estas variables), sin
   tocar ninguna otra regla de este archivo. */
.saja-theme-swatch {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--saja-border);
	cursor: pointer;
	padding: 0;
	display: inline-block;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.saja-theme-swatch:hover {
	transform: scale(1.1);
}
.saja-theme-swatch.active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--saja-accent);
}

/* ==========================================================================
   Base
   ========================================================================== */
body,
.wrapper,
.content-wrapper {
	background: var(--saja-bg) !important;
	color: var(--saja-text);
	font-family: var(--saja-font);
}
body, input, button, select, textarea, .form-control, table {
	font-family: var(--saja-font) !important;
}
h1, h2, h3, h4, h5, h6, .box-title, .modal-title {
	color: var(--saja-primary-strong);
	font-weight: 700;
	letter-spacing: -0.01em;
}
a { color: var(--saja-accent); }
a:hover, a:focus { color: var(--saja-accent-hover); }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
	border-radius: var(--saja-radius-sm);
	font-weight: 600;
	font-size: 13px;
	padding: 7px 16px;
	border: 1px solid transparent;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-primary,
.btn-info {
	background-color: var(--saja-accent);
	border-color: var(--saja-accent);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
	background-color: var(--saja-accent-hover);
	border-color: var(--saja-accent-hover);
	color: #fff;
}
.btn-default {
	background-color: var(--saja-surface);
	border-color: var(--saja-border);
	color: var(--saja-text);
}
.btn-default:hover, .btn-default:focus {
	background-color: var(--saja-surface-2);
	border-color: var(--saja-border);
	color: var(--saja-text);
}
.btn-success { background-color: var(--saja-success); border-color: var(--saja-success); }
.btn-warning { background-color: var(--saja-warning); border-color: var(--saja-warning); }
.btn-danger  { background-color: var(--saja-danger);  border-color: var(--saja-danger); }
.btn-success:hover, .btn-success:focus { filter: brightness(0.92); }
.btn-warning:hover, .btn-warning:focus { filter: brightness(0.92); }
.btn-danger:hover, .btn-danger:focus   { filter: brightness(0.92); }
.btn-flat { border-radius: var(--saja-radius-sm) !important; }
.btn-link { color: var(--saja-accent); }

/* Botones/inputs de DaisyUI ya usados en login/header */
.tw-dw-btn {
	border-radius: var(--saja-radius-sm) !important;
	font-family: var(--saja-font);
	text-transform: none;
	font-weight: 600;
	border: none;
	/* Sin esto, dos tw-dw-btn uno al lado del otro pueden quedar a
	   distinta altura si uno usa un ícono SVG y el otro un ícono de
	   fuente (ej. Font Awesome): el navegador alinea por "línea base"
	   del contenido interno, que varía según el tipo de ícono, aunque
	   los dos botones midan exactamente lo mismo. */
	vertical-align: middle;
}
.tw-dw-btn-primary,
.tw-dw-btn.tw-bg-gradient-to-r {
	background: linear-gradient(90deg, var(--saja-accent), var(--saja-primary)) !important;
	border: none !important;
	color: #fff !important;
}
.tw-dw-btn-neutral {
	background: var(--saja-primary) !important;
	border: none !important;
	color: #fff !important;
}
.tw-dw-btn-neutral:hover, .tw-dw-btn-neutral:focus {
	background: var(--saja-primary-strong) !important;
	color: #fff !important;
}

/* ==========================================================================
   Tarjetas / paneles (.box AdminLTE, .panel Bootstrap)
   ========================================================================== */
.box, .panel {
	background: var(--saja-surface);
	border: 1px solid var(--saja-border);
	border-radius: var(--saja-radius);
	box-shadow: var(--saja-shadow-sm);
}
.box-header, .panel-heading {
	background: transparent;
	border-bottom: 1px solid var(--saja-border);
	border-radius: var(--saja-radius) var(--saja-radius) 0 0 !important;
	padding: 16px 18px;
}
.box-body, .panel-body { padding: 18px; }
.box.box-solid > .box-header { background: var(--saja-surface-2); }

/* Las variantes de color de AdminLTE (.box-primary/.box-info/.box-danger/
   .box-warning/.box-success) traen su propio header celeste/rojo/naranja/
   verde "de fábrica" con mayor especificidad que la regla genérica de
   arriba — sin esto, cualquier tarjeta que use una de estas clases (ej.
   las tarjetas de Proyectos) se ve con colores ajenos a la paleta de marca. */
.box.box-primary { border-top-color: var(--saja-accent) !important; border-color: var(--saja-border) !important; }
.box.box-primary > .box-header, .box.box-primary.box-solid > .box-header {
	background: linear-gradient(90deg, var(--saja-accent), var(--saja-primary)) !important;
	color: #fff !important;
}
.box.box-primary > .box-header a { color: #fff !important; }

.box.box-info { border-top-color: var(--saja-info) !important; border-color: var(--saja-border) !important; }
.box.box-info > .box-header, .box.box-info.box-solid > .box-header {
	background: var(--saja-info) !important;
	color: #fff !important;
}
.box.box-info > .box-header a { color: #fff !important; }

.box.box-danger { border-top-color: var(--saja-danger) !important; border-color: var(--saja-border) !important; }
.box.box-danger > .box-header, .box.box-danger.box-solid > .box-header {
	background: var(--saja-danger) !important;
	color: #fff !important;
}
.box.box-danger > .box-header a { color: #fff !important; }

.box.box-warning { border-top-color: var(--saja-warning) !important; border-color: var(--saja-border) !important; }
.box.box-warning > .box-header, .box.box-warning.box-solid > .box-header {
	background: var(--saja-warning) !important;
	color: #fff !important;
}
.box.box-warning > .box-header a { color: #fff !important; }

.box.box-success { border-top-color: var(--saja-success) !important; border-color: var(--saja-border) !important; }
.box.box-success > .box-header, .box.box-success.box-solid > .box-header {
	background: var(--saja-success) !important;
	color: #fff !important;
}
.box.box-success > .box-header a { color: #fff !important; }

/* ==========================================================================
   Tablas
   ========================================================================== */
.table { color: var(--saja-text); }
.table > thead > tr > th {
	border-bottom: 1px solid var(--saja-border);
	color: var(--saja-text-muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 700;
	background: transparent;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
	border-top: 1px solid var(--saja-border);
	vertical-align: middle;
}
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
	border: 1px solid var(--saja-border);
}
/* Encabezados azules del libro mayor de Contactos (Formato 1 y 3): color viejo
   pre-rediseño actualizado al color de marca, y el texto forzado a blanco --
   la regla ".table > thead > tr > th" de arriba lo pisaba a gris tenue,
   dejando el texto casi invisible sobre el fondo de color. */
.blue-heading {
	background-color: var(--saja-accent) !important;
	color: #fff !important;
}
.table > thead > tr.blue-heading > th {
	color: #fff;
	background: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--saja-surface-2); }
.table-hover > tbody > tr:hover { background-color: var(--saja-accent-soft); }
.table-responsive { border: none; }
/* Bootstrap 3 solo le pone "width:100%" a .table-responsive por debajo de
   767px -- arriba de eso, un div de overflow:auto sin ancho explícito en
   un contenedor de solo texto puede terminar angostándose al tamaño de su
   contenido en vez de llenar el padre (visto en vivo: 254px en vez de los
   794px reales del contenedor, dejando toda la tabla -incluido el precio-
   invisible/vacía en celulares en horizontal, ej. iPhone a 844px de ancho
   lógico, por arriba del corte de Bootstrap). Sacamos la limitación del
   breakpoint: siempre al 100% del contenedor, con scroll horizontal propio
   cuando la tabla sea más ancha que la pantalla. */
.table-responsive { width: 100%; }

/* ==========================================================================
   Formularios / select2
   ========================================================================== */
.form-control, textarea.form-control {
	border-radius: var(--saja-radius-sm);
	border: 1px solid var(--saja-border);
	box-shadow: none;
	color: var(--saja-text);
}
.form-control:focus {
	border-color: var(--saja-accent);
	box-shadow: 0 0 0 3px var(--saja-accent-soft);
}
label { color: var(--saja-text); font-weight: 600; }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border-radius: var(--saja-radius-sm);
	border: 1px solid var(--saja-border);
	min-height: 34px;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
	border-color: var(--saja-accent);
}
.select2-dropdown {
	border-color: var(--saja-border);
	border-radius: var(--saja-radius-sm);
	box-shadow: var(--saja-shadow);
	overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--saja-accent) !important;
	color: #fff !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	border-radius: var(--saja-radius-sm);
	border-color: var(--saja-border);
}
.tw-dw-form-control input, .tw-dw-form-control select,
.tw-dw-checkbox {
	border-radius: var(--saja-radius-sm) !important;
}

/* ==========================================================================
   Badges / etiquetas de estado
   ========================================================================== */
.label, .badge {
	border-radius: 999px;
	font-weight: 600;
	font-size: 11px;
	padding: 4px 10px;
	letter-spacing: .02em;
}
.label-success, .bg-green, .bg-light-green { background-color: var(--saja-success-soft) !important; color: var(--saja-success) !important; }
.label-danger,  .bg-red,   .bg-light-red   { background-color: var(--saja-danger-soft)  !important; color: var(--saja-danger)  !important; }
.label-warning, .bg-yellow,.bg-light-yellow{ background-color: var(--saja-warning-soft) !important; color: var(--saja-warning) !important; }
.label-info,    .bg-blue,  .bg-light-blue  { background-color: var(--saja-info-soft)    !important; color: var(--saja-info)    !important; }
.label-default, .bg-gray                   { background-color: var(--saja-surface-2)    !important; color: var(--saja-text-muted) !important; }

/* El círculo de ícono de .info-box (ej. las tarjetas de estado de
   Proyectos: "No empezado"/"En espera"/"En progreso"/"Completado")
   reusa las mismas clases bg-green/bg-red/bg-yellow que las etiquetas
   de texto de arriba — pero ahí el fondo "suave" se ve lavado/pálido
   detrás de un ícono blanco, en vez de un círculo sólido y vivo. Se
   necesita más especificidad para ganarle a la regla de arriba. */
.info-box-icon.bg-green  { background-color: var(--saja-success) !important; color: #fff !important; }
.info-box-icon.bg-red    { background-color: var(--saja-danger)  !important; color: #fff !important; }
.info-box-icon.bg-yellow { background-color: var(--saja-warning) !important; color: #fff !important; }
.info-box-icon.bg-aqua   { background-color: var(--saja-info)    !important; color: #fff !important; }
.info-box-icon.bg-blue   { background-color: var(--saja-accent)  !important; color: #fff !important; }

/* ==========================================================================
   Menús desplegables / modales
   ========================================================================== */
.dropdown-menu {
	border-radius: var(--saja-radius);
	border: 1px solid var(--saja-border);
	box-shadow: var(--saja-shadow);
	padding: 6px;
}
.dropdown-menu > li > a { border-radius: var(--saja-radius-sm); padding: 8px 12px; }
.dropdown-menu > li > a:hover { background-color: var(--saja-accent-soft); color: var(--saja-primary-strong); }

.modal-content {
	border-radius: var(--saja-radius-lg);
	border: none;
	box-shadow: 0 20px 60px rgba(42,39,51,0.25);
}
.modal-header { border-bottom: 1px solid var(--saja-border); padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--saja-border); padding: 16px 22px; }
.modal-body { padding: 22px; }

/* ==========================================================================
   DataTables
   ========================================================================== */
.dt-button, .dataTables_wrapper .dt-buttons .btn {
	border-radius: var(--saja-radius-sm) !important;
	background: var(--saja-surface) !important;
	border: 1px solid var(--saja-border) !important;
	color: var(--saja-text) !important;
	box-shadow: none !important;
	/* Centra el ícono+texto de los botones de exportar (CSV/Excel/PDF/etc.)
	   tanto horizontal como verticalmente dentro del botón, en vez de
	   dejarlos fluir como texto en línea (que los deja pegados abajo).
	   La causa real: .tw-dw-btn-xs fija height/min-height en 24px, pero
	   el padding vertical de Bootstrap .btn (7px arriba y abajo = 14px)
	   ya deja solo 10px para el contenido, menos de lo que el ícono+texto
	   necesitan — el botón queda "demasiado bajo" para su propio padding,
	   y el contenido se desborda hacia abajo en vez de quedar centrado.
	   Se libera la altura fija para que el botón crezca a lo que su
	   contenido real necesita. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	min-height: auto !important;
}
.dt-button > span, .dataTables_wrapper .dt-buttons .btn > span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px;
}
.dt-button:hover { background: var(--saja-surface-2) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	border-radius: var(--saja-radius-sm);
	border: 1px solid var(--saja-border);
}
.paginate_button.current, .paginate_button.current:hover {
	background: var(--saja-accent) !important;
	border-color: var(--saja-accent) !important;
	color: #fff !important;
	border-radius: var(--saja-radius-sm);
}
.paginate_button { border-radius: var(--saja-radius-sm) !important; }
table.dataTable thead th, table.dataTable thead td { border-bottom: 1px solid var(--saja-border) !important; }

/* ==========================================================================
   SweetAlert (v1 clásico, inyecta su propio <style> — usamos !important
   para ganarle sin importar el orden de inyección)
   ========================================================================== */
.sweet-alert {
	border-radius: var(--saja-radius-lg) !important;
	font-family: var(--saja-font) !important;
}
.sweet-alert h2 { color: var(--saja-primary-strong) !important; font-family: var(--saja-font) !important; }
.sweet-alert .sa-button-container button.confirm {
	background-color: var(--saja-accent) !important;
	border-radius: var(--saja-radius-sm) !important;
}
.sweet-alert .sa-button-container button.cancel {
	background-color: var(--saja-surface-2) !important;
	color: var(--saja-text) !important;
	border-radius: var(--saja-radius-sm) !important;
}

/* ==========================================================================
   Barra superior y menú lateral (Tailwind ya compilado — las clases de
   color son fijas, se sobreescriben por nombre con !important)
   ========================================================================== */
/* OJO: estos selectores solo deben capturar utilidades de FONDO/BORDE
   (bg-/from-/to-/border-), nunca de texto (text-) — un color de texto
   Tailwind como "tw-text-green-900" (usado, por ejemplo, para el monto
   "Total a pagar" del POS) NO tiene nada que ver con la barra superior
   y no debe pintarse de oscuro. */
[class*="bg-primary-8"],   [class*="bg-purple-8"],   [class*="bg-green-8"],
[class*="bg-red-8"],       [class*="bg-yellow-8"],   [class*="bg-orange-8"],
[class*="bg-sky-8"],
[class*="bg-primary-9"],   [class*="bg-purple-9"],   [class*="bg-green-9"],
[class*="bg-red-9"],       [class*="bg-yellow-9"],   [class*="bg-orange-9"],
[class*="bg-sky-9"],
[class*="from-primary-8"], [class*="from-purple-8"], [class*="from-green-8"],
[class*="from-red-8"],     [class*="from-yellow-8"], [class*="from-orange-8"],
[class*="from-sky-8"],
[class*="from-primary-9"], [class*="from-purple-9"], [class*="from-green-9"],
[class*="from-red-9"],     [class*="from-yellow-9"], [class*="from-orange-9"],
[class*="from-sky-9"] {
	--tw-gradient-from: var(--saja-header-bg) !important;
	--tw-gradient-to: var(--saja-header-bg-soft) !important;
	background-color: var(--saja-header-bg) !important;
}
[class*="to-primary-8"], [class*="to-purple-8"], [class*="to-green-8"],
[class*="to-red-8"],     [class*="to-yellow-8"], [class*="to-orange-8"],
[class*="to-sky-8"],
[class*="to-primary-9"], [class*="to-purple-9"], [class*="to-green-9"],
[class*="to-red-9"],     [class*="to-yellow-9"], [class*="to-orange-9"],
[class*="to-sky-9"] {
	--tw-gradient-to: var(--saja-header-bg-soft) !important;
}
[class*="bg-primary-7"], [class*="bg-purple-7"], [class*="bg-green-7"],
[class*="bg-red-7"],     [class*="bg-yellow-7"], [class*="bg-orange-7"],
[class*="bg-sky-7"] {
	background-color: var(--saja-header-bg-soft) !important;
}
[class*="border-primary-5"], [class*="border-purple-5"], [class*="border-green-5"],
[class*="border-red-5"],     [class*="border-yellow-5"], [class*="border-orange-5"],
[class*="border-sky-5"] {
	border-color: var(--saja-accent) !important;
}
/* Estado activo del menú lateral (texto, no fondo) */
[class*="text-primary-7"], [class*="text-purple-7"], [class*="text-green-7"],
[class*="text-red-7"],     [class*="text-yellow-7"], [class*="text-orange-7"],
[class*="text-sky-7"] {
	color: var(--saja-accent) !important;
}
header .tw-dw-dropdown .tw-dw-menu,
.tw-dw-menu {
	border-radius: var(--saja-radius) !important;
	box-shadow: var(--saja-shadow) !important;
}

/* Login: recolorear el degradé genérico índigo/azul de fábrica
   (incluye los estados hover:/active: generados por Tailwind, que llevan
   el nombre de la utilidad completo dentro del atributo class) */
[class*="from-indigo-"] { --tw-gradient-from: var(--saja-accent) !important; }
[class*="to-blue-"]     { --tw-gradient-to: var(--saja-primary) !important; }
[class*="ring-blue-"]   { --tw-ring-color: var(--saja-accent) !important; }

/* Login: fondo de página completo (viene de public/css/app.css .right-col,
   no de las utilidades Tailwind de arriba). Bug preexistente (ya estaba
   así antes del rediseño): .right-col usaba solo height:100%, que depende
   de que los ancestros tengan alto definido — si el contenido real de la
   página es más alto que la ventana, el degradé se corta y se ve el fondo
   del body por debajo. Se corrige con min-height: 100vh, que no depende
   de los ancestros. */
html, body { min-height: 100%; }
.right-col {
	background: linear-gradient(135deg, var(--saja-primary-strong), var(--saja-accent)) !important;
	min-height: 100vh !important;
	height: auto !important;
}

/* ==========================================================================
   Íconos (Font Awesome) — mismo set, mejor tratamiento
   ========================================================================== */
.fa, .fas, .far, .fab {
	vertical-align: -1px;
}
.btn .fa, .btn .fas, .btn .far {
	opacity: .9;
}
.text-muted .fa, .text-muted .fas { color: var(--saja-text-muted); }

/* Panel de bienvenida del Inicio ("Bienvenido Fernando" + tarjetas de
   resumen): antes era un bloque de borde a borde sin esquinas, distinto
   al resto de la pantalla (que sí usa tarjetas redondeadas con margen).
   Se convierte en una tarjeta más, con el mismo margen/redondeo que las
   demás, para que toda la pantalla hable el mismo idioma visual.
   (De paso resuelve un bug preexistente: traía "xl:tw-pb-0", que le
   sacaba el espacio de abajo justo en pantallas de escritorio, pegando
   las tarjetas blancas contra lo que sigue.) */
.tw-pb-6[class*="tw-bg-gradient-to-r"][class*="tw-from-primary"] {
	padding-bottom: 1.5rem !important;
	margin: 20px 20px 20px 20px !important;
	border-radius: var(--saja-radius-lg) !important;
	overflow: hidden;
	box-shadow: var(--saja-shadow);
}

/* ==========================================================================
   Responsive / celular
   ========================================================================== */
@media (max-width: 767px) {
	.box-body, .panel-body, .modal-body { padding: 14px; }
	.btn { padding: 8px 14px; }
	.table-responsive,
	.dataTables_wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.modal-dialog { width: auto; margin: 12px; }
	.box-header, .panel-heading { padding: 12px 14px; }
	h1, .box-title { font-size: 18px; }
	.dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
	.dt-buttons .btn, .dt-button { margin: 0 !important; }
}

/* Barra superior: se mantiene el mismo alto de siempre (alineado con el
   logo), pero el contenido de adentro se centra de verdad de arriba a
   abajo. El centrado por flexbox no alcanzaba porque una fila interna
   ocupa más alto del que entra en la barra (por eso quedaba pegado abajo);
   se centra por posición absoluta en su lugar, que no depende de eso.
   Importante: se centra con top:0/bottom:0 + margin:auto, NO con
   "transform: translateY()" -- un transform, aunque sea de centrado, crea
   un nuevo contexto de apilamiento en ese contenedor, y como el desplegable
   de perfil/notificaciones vive adentro y se sale de la barra hacia abajo,
   quedaba atrapado en ese contexto y el contenido de la página (que pinta
   después en el orden del documento) lo tapaba a mitad de camino. Con
   margin:auto no se crea ese contexto nuevo y el desplegable vuelve a
   quedar completo por encima del contenido.
   Importante: todo esto va bajo @media (min-width: 1024px), el mismo
   punto de corte "lg" que trae la propia clase "lg:tw-h-15" -- esa clase
   solo le da altura fija a la barra desde ese ancho para arriba; en el
   celular no aplica y el contenedor no tiene altura propia. Sin esta
   guarda, el hijo pasaba a position:absolute igual en mobile, sacándolo
   del flujo y colapsando el contenedor a altura 0 -- con top:0/bottom:0
   sobre un padre en altura 0, el contenido quedaba centrado sobre ese
   punto colapsado, la mitad de su alto para arriba (fuera de la
   pantalla) y la mitad para abajo, tapando "Bienvenido Fernando". */
@media (min-width: 1024px) {
	[class*="tw-h-15"] {
		position: relative;
	}
	[class*="tw-h-15"] > div:first-child {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin-top: auto;
		margin-bottom: auto;
		height: fit-content;
	}
}

/* ==========================================================================
   Menú lateral colapsado "solo íconos"
   Gancho: body.sidebar-collapse (agregada por el botón .side-bar-collapse y
   restaurada al cargar la página vía localStorage, ver app.blade.php).
   Todo bajo @media (min-width: 1024px) porque ese estado guardado en
   localStorage no tiene noción de tamaño de pantalla: si no se restringe acá
   (con el mismo punto de corte "lg" que ya usa el propio botón/aside),
   abrir el sistema en el celular con el menú previamente colapsado en la
   compu heredaría por error este mismo estilo en el menú móvil.
   ========================================================================== */
@media (min-width: 1024px) {
	.side-bar {
		transition: width .2s ease;
	}
	body.sidebar-collapse .side-bar {
		width: 4.5rem !important;
	}

	/* Logo del negocio: solo ícono/inicial, centrado, sin nombre ni punto verde */
	body.sidebar-collapse .side-bar-heading-text,
	body.sidebar-collapse .side-bar-heading > .tw-bg-green-400 {
		display: none !important;
	}
	body.sidebar-collapse .side-bar-heading-fallback {
		display: inline-flex !important;
	}

	/* Textos e íconos del nivel raíz del menú (no afecta los flyouts de abajo) */
	body.sidebar-collapse #side-bar > a,
	body.sidebar-collapse #side-bar > div > a.drop_down {
		justify-content: center;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.sidebar-collapse #side-bar > a > span,
	body.sidebar-collapse #side-bar > div > a.drop_down > span,
	body.sidebar-collapse #side-bar > div > a.drop_down > svg.svg {
		display: none !important;
	}

	/* Ícono del botón de colapsar: se espeja para indicar "expandir" */
	body.sidebar-collapse .side-bar-collapse svg {
		transform: scaleX(-1);
	}

	/* Flyout de submenús: cada ítem con hijos es un <div> que envuelve el link
	   .drop_down y, al lado, el bloque .chiled con los hijos (ver
	   AdminlteCustomPresenter::getMenuWithDropDownWrapper). Al pasar el mouse,
	   .chiled se despliega flotando al costado del ícono en vez de expandirse
	   hacia abajo dentro de la columna angosta. Usa position:fixed (con la
	   posición calculada por un pequeño script en javascripts.blade.php) en vez
	   de absolute, porque #side-bar tiene scroll vertical propio y eso recorta
	   cualquier hijo posicionado que se salga de su ancho, aunque sea absolute. */
	body.sidebar-collapse #side-bar > div > .chiled {
		display: none !important;
		position: fixed;
		margin: 0 !important;
		padding: 8px !important;
		min-width: 220px;
		background: var(--saja-surface);
		border: 1px solid var(--saja-border);
		border-radius: var(--saja-radius);
		box-shadow: var(--saja-shadow);
		z-index: 1000;
	}
	body.sidebar-collapse #side-bar > div:hover > .chiled,
	body.sidebar-collapse #side-bar > div:focus-within > .chiled {
		display: block !important;
	}
	body.sidebar-collapse #side-bar > div > .chiled > div:first-child {
		display: none;
	}
}

/* ==========================================================================
   Buscador de producto (jQuery UI Autocomplete) -- se usa en TODAS las
   pantallas donde se cargan líneas de producto (Agregar venta, Compras,
   Órdenes de compra, Devolución de venta, Imprimir etiquetas, etc.). Es un
   widget distinto al select2 (más viejo, sin estilo propio de fábrica), por
   eso el cuadro de resultados se veía plano/sin combinar con el resto. Un
   solo ajuste acá lo empareja en todos esos lugares a la vez.
   ========================================================================== */
.ui-autocomplete {
	border: 1px solid var(--saja-border) !important;
	border-radius: var(--saja-radius-sm) !important;
	box-shadow: var(--saja-shadow) !important;
	padding: 4px !important;
	background: var(--saja-surface) !important;
}
.ui-autocomplete .ui-menu-item {
	border-radius: var(--saja-radius-sm);
}
.ui-autocomplete .ui-menu-item > div {
	padding: 6px 10px;
	font-size: 13px;
	color: var(--saja-text);
}
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus {
	background: var(--saja-accent) !important;
	border: none !important;
	color: #fff !important;
	margin: 0 !important;
}
.ui-autocomplete .ui-state-active > div,
.ui-autocomplete .ui-state-focus > div {
	color: #fff !important;
}

/* ==========================================================================
   Fila de pago "bloqueada" (HMS -- Reservas)
   Un pago ya guardado se muestra bloqueado por defecto al entrar a editar,
   para que nadie lo modifique sin querer mientras cambia otra cosa de la
   reserva. pointer-events:none alcanza para evitar el click/tipeo por
   accidente sin tener que tocar 'readonly'/'disabled' de cada campo por
   separado (eso rompería el envío del valor al guardar el formulario). */
.payment_row_fields_locked {
	pointer-events: none;
	opacity: 0.6;
}

/* ==========================================================================
   Colores por estado en el Informe de HMS (tabla "Habitaciones por reserva")
   Antes usaban las clases genéricas bg-info/bg-success/bg-danger/bg-yellow,
   que este mismo rediseño (Etapa 6) ya suaviza a tonos pastel -- por eso
   "Confirmada" se veía casi blanco. Acá se igualan a los mismos colores
   fuertes que ya usa la tarjeta "Estado" de la reserva (ver setStatus() en
   bookings/create.blade.php), para que sea el mismo lenguaje visual en
   toda la pantalla: Pendiente = amarillo, Confirmada = verde, Cancelada =
   rojo. "Recibida" no es un estado real (es el total general), se deja en
   gris neutro para no confundirla con los 3 estados de verdad. */
.hms-status-received {
	background-color: #e9ecef !important;
}
.hms-status-confirmed {
	background-color: green !important;
	color: #fff !important;
}
.hms-status-cancelled {
	background-color: red !important;
	color: #fff !important;
}
.hms-status-pending {
	background-color: yellow !important;
	color: #333 !important;
}

/* Botones de acción de la lista de Reservas (Editar/Entrada-Salida/Ver/
   Enviar correo): antes eran botones de texto de ancho distinto, se
   apilaban en 2-3 líneas por fila. Ahora son solo ícono, todos del mismo
   tamaño y centrados -- el "title" de cada uno ya alcanza para mostrar
   el tooltip nativo del navegador al pasar el mouse, sin JS extra. */
.hms-action-btn {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 2px !important;
}

/* ==========================================================================
   Pestañas (.nav-tabs-custom) -- componente compartido por ~30 pantallas
   del sistema (Ver contacto, Reparación, etc.). Reemplaza el color de
   fábrica de AdminLTE (celeste #3c8dbc) por el acento de marca, mismo
   criterio ya usado en el resto del rediseño: un solo archivo CSS que
   repinta el componente clásico de Bootstrap, sin tocar cada pantalla.
   ========================================================================== */
.nav-tabs-custom > .nav-tabs > li.active {
	border-top-color: var(--saja-accent);
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
	color: var(--saja-primary);
	font-weight: 600;
}
.nav-tabs-custom > .nav-tabs > li > a {
	color: var(--saja-text-muted);
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
	color: var(--saja-accent);
}

/* ==========================================================================
   Grupo de botones tipo "radio" (ej. "Formato 1/2/3" del Libro mayor) --
   se ve igual que el resto de los tw-dw-btn del sistema, con el color de
   marca en el botón activo.
   ========================================================================== */
.tw-dw-btn-group-toggle .tw-dw-btn {
	background: var(--saja-surface-2);
	color: var(--saja-text);
	border: 1px solid var(--saja-border);
}
/* ".active" (no "tw-dw-btn-active") a propósito -- es la clase que el
   propio JS de Bootstrap (data-toggle="buttons") ya alterna solo al
   marcar/desmarcar el radio interno, sin JS nuevo de por medio. */
.tw-dw-btn-group-toggle .tw-dw-btn.active {
	background: var(--saja-accent);
	color: #fff;
	border-color: var(--saja-accent);
}

/* ==========================================================================
   Tarjetas de resumen clickeables (ej. "Pendiente"/"Completado" del tablero
   de Reparación) -- avisan con un pequeño levantamiento que llevan a algún
   lado, sin cambiar el color/tamaño que ya trae cada tarjeta.
   ========================================================================== */
a.small-box-link {
	display: block;
	text-decoration: none;
	cursor: pointer;
}
a.small-box-link .small-box {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.small-box-link:hover .small-box {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Impresión: el contenido real de todo el sistema vive adentro de
   #scrollable-container (tw-h-screen + tw-overflow-y-auto, ver Etapa 9/18 —
   el <body> nunca scrollea). Al imprimir, el navegador recorta ese
   contenedor a lo que está scrolleado en pantalla en ese momento (altura
   fija + overflow), cortando cualquier título/dato que haya quedado arriba
   o abajo del scroll. Se libera la altura/scroll solo durante la impresión
   para que fluya el documento completo, sin afectar la vista en pantalla.
   ========================================================================== */
@media print {
	body,
	body > div.tw-flex,
	main.tw-flex-1,
	#scrollable-container {
		height: auto !important;
		overflow: visible !important;
	}

	/* Achica el padding/margen de las tarjetas (components.widget) y de las
	   filas de tabla -- pensados para pantalla, ocupan bastante alto -- para
	   que informes largos (ej. Ganancias/pérdidas) entren en menos hojas al
	   imprimir, sin afectar cómo se ven en pantalla. */
	.tw-shadow-sm.tw-rounded-xl.tw-ring-1 {
		margin-bottom: 6px !important;
		box-shadow: none !important;
	}
	.tw-shadow-sm.tw-rounded-xl.tw-ring-1 .tw-p-2,
	.tw-shadow-sm.tw-rounded-xl.tw-ring-1 [class*="sm:tw-p-3"] {
		padding: 4px !important;
	}
	.tw-shadow-sm.tw-rounded-xl.tw-ring-1 .tw-py-2 {
		padding-top: 2px !important;
		padding-bottom: 2px !important;
	}
	.table > tbody > tr > td,
	.table > tbody > tr > th {
		padding: 3px 8px !important;
	}
	.print_section h2 {
		margin: 0 0 8px 0 !important;
		font-size: 22px !important;
	}
}

/* ---------- Cuadros "callout" (AdminLTE) ----------
   Usados en 6 pantallas (Plantilla de propuesta, Plantillas de
   notificación, Informes de Proyecto, CMS) para avisos tipo "no hay
   datos". Vendor.css los deja con los colores de fábrica de AdminLTE
   con !important, sin pasar nunca por el rediseño de marca. */
.callout.callout-info, .callout-info {
	background-color: var(--saja-info) !important;
	border-color: var(--saja-info) !important;
}
.callout.callout-success, .callout-success {
	background-color: var(--saja-success) !important;
	border-color: var(--saja-success) !important;
}
.callout.callout-warning, .callout-warning {
	background-color: var(--saja-warning) !important;
	border-color: var(--saja-warning) !important;
}
.callout.callout-danger, .callout-danger {
	background-color: var(--saja-danger) !important;
	border-color: var(--saja-danger) !important;
}