/* ============================================================
   Portal Keycom — helpers propios (sobre la capa OyM/Tabler de abajo)
   ============================================================ */

/* Contenedor de la app: centrado y estrecho (mobile-first, sin sidebar). */
.app-container { width: 100%; max-width: 820px; margin-inline: auto; padding: 1rem; }

/* Estado del botón de búsqueda: alterna "Buscar" / spinner "Buscando…".
   htmx añade la clase .htmx-request al <form> mientras dura la petición. */
.btn-loading { display: none; }
.htmx-request .btn-idle { display: none; }
.htmx-request .btn-loading { display: inline-block; }

/* Árbol de dispositivos (regletas/splitters anidados). */
.arbol { list-style: none; padding-left: .25rem; margin: 0; }
.arbol ul { list-style: none; padding-left: 1.1rem;
  border-left: 2px solid var(--tblr-border-color); margin: .15rem 0; }
.arbol li { padding: .2rem 0; }

/* Imagen de plano dentro de card. */
.plano-img { width: 100%; height: auto; display: block; background: var(--gray-100); }


  /*
	OyM · capa sobre Tabler v1.4.0
	Carga en el HTML (header.php):
	1) tabler.min.css 1.4.0 por CDN (contiene Bootstrap 5.3.7 compilado; NO cargar bootstrap.css aparte)
	2) Bootstrap Icons por CDN (iconos bi-* del menú)
	3) Este archivo, SIEMPRE después de tabler.min.css

	Referencia del sistema anterior: style-old.css (no se carga; solo consulta).
	Catálogo de componentes: docs/schema/design-system-tabler.md
*/

/* ============================================================
	 a) TOKENS DE MARCA sobre variables --tblr-* (nunca --bs-*)
	 ============================================================ */

:root {
	/* Azul corporativo OyM (--blue-700 del sistema anterior).
	 -lt / -darken / -fg derivan solos vía color-mix(var(--tblr-primary)). */
	--tblr-primary: #0a66e8;
	--tblr-primary-rgb: 10, 102, 232;
	--tblr-blue: #0a66e8;
	--tblr-blue-rgb: 10, 102, 232;

	/* Enlaces: en Tabler son hex fijo (#066fd1), no derivan de --tblr-primary. */
	--tblr-link-color: #0a66e8;
	--tblr-link-color-rgb: 10, 102, 232;
	--tblr-link-hover-color: #0758ca;
	--tblr-link-hover-color-rgb: 7, 88, 202;

	/* Fondo y radios de la familia OyM (8/11/14). */
	--tblr-body-bg: #f3f7fc;
	/*--tblr-border-radius: 8px;
	--tblr-border-radius-lg: 11px;
	--tblr-border-radius-xl: 14px;*/

	/*--tblr-border-radius-scale: 1.5;*/
	--tblr-border-radius-scale: 1.5;

	--tblr-font-weight-medium: 600;

	/* Colores heredados */
	--blue-950: #062b6f;
	--blue-900: #3a82e6;
	--blue-850: #064aa9;
	--blue-800: #0756c7;
	--blue-700: #0a66e8;
	--blue-650: #0b6ff4;
	--blue-600: #106dea;
	--blue-100: #e7f0ff;
	--blue-075: #f1f6ff;
	--green-700: #067a4e;
	--green-100: #c9f5df;
	--green-075: #e9fbf2;
	--orange-700: #c25a1c;
	--orange-100: #ffe1cf;
	--red-700: #d92d38;
	--red-100: #ffe0e4;
	--gray-100: #eef3f8;
	--gray-200: #d9e5f2;
	--gray-300: #c6d4e3;
	--body-bg: #f3f7fc;
	--surface: #ffffff;
	--surface-soft: #f8fbff;
	--border: #dbe6f2;
	--border-strong: #cddbeb;
	--text-950: #071a3f;
	--text-900: #0b1f44;
	--text-700: #314365;
	--text-600: #53657f;
	--text-500: #6f7f98;
}

/* .status-* llevan su color como hex fijo por clase; alinear los azules. */
.status-blue,
.status-primary {
	--tblr-status-color: #0a66e8;
	--tblr-status-color-rgb: 10, 102, 232;
}

/* Cards más compactas en todo el portal (cabecera y cuerpo). */
/*.card {
	--tblr-card-cap-padding-x: 0.75rem;
	--tblr-card-cap-padding-y: 0.5rem;
	--tblr-card-spacer-x: 0.75rem;
	--tblr-card-spacer-y: 0.5rem;
}*/

/* ============================================================
	 COMPONENTES OyM (reutilizables; documentados en el catálogo)
	 ============================================================ */

/* .oym-container — contenedor estándar de página. Sustituye a container-fluid
	 dentro de page-body: ancho completo hasta un máximo cómodo y PEGADO A LA
	 IZQUIERDA (la sidebar fija ya delimita), en vez del container-xl centrado.
	 No redefine ninguna clase de Tabler. */
.oym-container {
	width: 100%;
	max-width: 1580px;
	margin-inline: 0;
	padding-inline: 1.5rem;
}

/* .card-tinted — card enteramente tintada del color de estado (header más
	 tintado, body con lavado suave). Tabler solo trae la barra lateral
	 card-status-*; esto es componente OyM. Usa la mecánica de paleta Tabler
	 (var(--tblr-*) + color-mix), NUNCA hex sueltos. Fallback sólido declarado
	 ANTES del color-mix: un navegador sin soporte se queda con él (nunca card
	 transparente). color-mix(in oklab) es Baseline 2023 y el propio Tabler ya
	 lo usa; el fallback es seguro extra. */
.card-tinted {
	--oym-tint: var(--tblr-primary);
	background-color: var(--tblr-card-bg, #fff);
	background-color: color-mix(in oklab, var(--oym-tint) 4%, var(--tblr-card-bg, #fff));
	border-color: var(--tblr-border-color);
	border-color: color-mix(in oklab, var(--oym-tint) 18%, var(--tblr-border-color));
}

.card-tinted > .card-header {
	background-color: var(--tblr-card-bg, #fff);
	background-color: color-mix(in oklab, var(--oym-tint) 10%, var(--tblr-card-bg, #fff));
	border-bottom-color: color-mix(in oklab, var(--oym-tint) 14%, var(--tblr-border-color));
}

.card-tinted-success { --oym-tint: var(--tblr-success); }
.card-tinted-danger	{ --oym-tint: var(--tblr-danger); }

/* .oym-datalist / .oym-datarow — lista clave-valor en UNA línea:
   icono | etiqueta (izq) | valor (der). El datagrid de Tabler apila
   título/valor en vertical y no sirve para este layout; esto porta el patrón
   info-row del sistema anterior sobre tokens Tabler (sin hex). El valor se
   alinea a la derecha y, si es largo (p.ej. ID Domicilio), rompe por caracter
   en vez de desbordar la fila. */
.oym-datarow {
	display: grid;
	grid-template-columns: 1.25rem auto minmax(0, 1fr);
	align-items: center;
	gap: 0.35rem 0.6rem;
	padding-block: 0.4rem;
	border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
	color: var(--tblr-body-color);
}

.oym-datarow:last-child { border-bottom: 0; }

.oym-datarow > i {
	color: var(--tblr-primary);
	font-size: 0.875rem;
	line-height: 1;
	text-align: center;
}

.oym-datarow > .oym-datarow-label {
	color: var(--tblr-secondary);
	font-weight: var(--tblr-font-weight-medium, 600);
	cursor: default;
}

.oym-datarow > .oym-datarow-value {
	justify-self: end;
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
	font-weight: var(--tblr-font-weight-medium, 600);
}

/* En estrecho, el valor cae bajo la etiqueta y a la izquierda. */
@media (max-width: 575.98px) {
	.oym-datarow { grid-template-columns: 1.25rem 1fr; }
	.oym-datarow > .oym-datarow-value { grid-column: 2; justify-self: start; text-align: left; }
}

/* ============================================================
	 b) SHELL OyM (sidebar + topbar sobre la estructura Tabler)
	 ============================================================ */

/* Sidebar: degradado azul del OyM anterior (style-old.css .oym-sidebar).
	 .navbar-vertical.oym-sidebar (0-2-0) gana al .navbar de Tabler sin !important. */
.navbar-vertical.oym-sidebar {
	color: #fff;
	background:
	radial-gradient(260px 360px at 115% 30%, rgba(30, 144, 255, .52), transparent 63%),
	radial-gradient(260px 360px at 55% 100%, rgba(4, 84, 187, .58), transparent 58%),
	linear-gradient(180deg, #0787f4 0%, #065fca 27%, #063f94 58%, #05367e 100%);
	box-shadow: 10px 0 30px rgba(3, 29, 78, .16);
}

.navbar-vertical.oym-sidebar::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
	linear-gradient(105deg, transparent 0%, transparent 62%, rgba(255,255,255,.05) 62.2%, transparent 78%),
	radial-gradient(circle at 98% 48%, rgba(255,255,255,.09), transparent 28%);
}

/* El contenido del sidebar por encima del ::after decorativo. */
.navbar-vertical.oym-sidebar > .container-fluid {
	position: relative;
	z-index: 1;
}

/* Texto de navegación: blanco como en el shell anterior
	 (data-bs-theme="dark" ya aclara, pero afinamos el contraste sobre azul). */
.navbar-vertical.oym-sidebar .nav-link {
	color: rgba(255, 255, 255, .94);
}

.navbar-vertical.oym-sidebar .nav-link:hover {
	color: #fff;
	background: rgba(0, 36, 103, .26);
}

.navbar-vertical.oym-sidebar .nav-item.active .nav-link,
.navbar-vertical.oym-sidebar .nav-link.active {
	color: #fff;
	background: linear-gradient(90deg, rgba(8, 50, 135, .82), rgba(4, 69, 160, .66));
	border-left:solid 3px #fff;
}

/* Marca OyM (portado de style-old.css .brand-lockup / .brand-oym / .brand-subtitle). */
.brand-lockup {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.brand-lockup:hover { color: #fff; }

.brand-oym {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.13em;
	line-height: .88;
}

.brand-subtitle {
	margin-top: 0;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .015em;
	line-height: .92;
	opacity: .96;
}

/* Cabeceras de grupo del menú (portado de style-old.css .sidebar-section). */
.sidebar-section {
	margin: 22px 10px 7px;
	color: rgba(229, 244, 255, .82);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	list-style: none;
}

/* Centro de ayuda al pie del sidebar (portado de style-old.css .help-pill). */
.sidebar-footer {
	padding: 10px 8px 16px;
}

.help-pill {
	width: 100%;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	background: rgba(0, 35, 92, .16);
}

.help-pill:hover { color: #fff; background: rgba(0, 35, 92, .3); }

/* Buscador global del topbar (Tabler no trae buscador). */
.top-search {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	max-width: 640px;
}

.top-search .input-icon {
	flex: 1 1 auto;
}

/* Alinea el contenido de la topbar con .oym-container: el .container-fluid de
	 Tabler trae de serie un padding lateral de --tblr-page-padding (0.75rem),
	 mientras que .oym-container usa 1.5rem → sin esto la topbar queda ~12px
	 desplazada respecto al contenido de la página. */
.oym-topbar > .container-fluid {
	padding-inline: 1.5rem;
}

/* .oym-badge-count — contador circular sobre un botón-icono (campana de la
	 topbar). `badge-notification` de Tabler es una píldora de ancho variable
	 pensada para textos como "9+"; con un solo dígito no queda redonda. Fuerza
	 ancho mínimo = alto (círculo con 1 dígito) y deja que crezca en píldora si
	 el contador tiene 2 dígitos, sin perder el posicionamiento de
	 badge-notification (top/right + translate). */
.badge-notification.oym-badge-count {
	min-width: 1.125rem;
	height: 1.125rem;
	padding-inline: 0.2rem;
	border-radius: 1.125rem;
	font-size: 0.625rem;
}


.datagrid-title{
	font-weight: 550;
	color:var(--text-700);
	letter-spacing: normal

}

.datagrid-title i{color:var(--tblr-primary)}
.page-body {margin-top:0;}

* {scrollbar-color: auto;}

/* Compensación de scrollbar del shell. NO revertir sin leer esto.

   Tabler trae UNA sola regla `:host,:root { margin-left: calc(100vw - 100%) }`
   (@media ≥992px). Es su anti-jank para layouts CENTRADOS: `100vw` incluye el
   scrollbar y `100%` no, así que el margin vale 0 sin barra y ~15px con barra, y
   con eso el contenido centrado no "salta" al navegar entre páginas con y sin
   scrollbar. Auditado sobre tabler.min.css@1.4.0: esa regla es la ÚNICA que usa
   ese calc y NADA más de Tabler depende de ese margin (no hay full-bleed ni
   breakout con `calc(100% - 100vw)` ni márgenes negativos que lo asuman) →
   neutralizarlo no desactiva ninguna otra función de Tabler.

   Por qué nos estorba: nuestro shell es LEFT-ANCHORED. El sidebar es
   `position: fixed; left:0` → inmune al margin de <html>; pero el topbar y
   .page-wrapper van en flujo → ese margin sí los empuja. Con barra (páginas
   largas) el contenido se separa ~15px del sidebar; sin barra (páginas cortas)
   no → hueco de 15px intermitente entre sidebar y contenido/topbar.

   Fix: (1) anular el margin de Tabler — mismo selector `:root` y misma media
   query, misma especificidad, pero cargamos style.css DESPUÉS de tabler.min.css
   → ganamos por orden (sin !important); (2) reservar el gutter SIEMPRE con
   scrollbar-gutter: stable, que sustituye al anti-jank de Tabler pero al modo
   left-anchored: ancho de contenido constante haya o no barra → ni hueco ni
   salto horizontal. Regla de shell: aplica a TODAS las páginas. */
html { scrollbar-gutter: stable; }
@media (min-width: 992px) {
	:root { margin-left: 0; margin-right: 0; }
}
/* admin/menu — input numérico de orden en la tabla de ítems del sidebar.
   Ancho fijo estrecho para que el <input> no se estire en la columna w-1. */
.oym-input-orden { width: 5rem; }


.badge{-webkit-user-select: auto;-moz-user-select: auto; user-select:auto;cursor:default}

.btn-list{display:unset}
.btn-action {border:none}
.navbar .navbar-nav .nav-link{margin-left:5px;margin-bottom:5px}
.card-title,.page-title{cursor:default}

.card-primary{border-top:3px solid var(--tblr-primary)}
.card-secondary{border-top:3px solid var(--tblr-secondary)}
.card-success{border-top:3px solid var(--tblr-success)}
.card-danger{border-top:3px solid var(--tblr-danger)}
.card-warning{border-top:3px solid var(--tblr-warning)}
.card-info{border-top:3px solid var(--tblr-info)}
.card-light{border-top:3px solid var(--tblr-light)}
.card-dark{border-top:3px solid var(--tblr-dark)}
.card-muted{border-top:3px solid var(--tblr-muted)}
.card-blue{border-top:3px solid var(--tblr-blue)}
.card-azure{border-top:3px solid var(--tblr-azure)}
.card-indigo{border-top:3px solid var(--tblr-indigo)}
.card-purple{border-top:3px solid var(--tblr-purple)}
.card-pink{border-top:3px solid var(--tblr-pink)}
.card-red{border-top:3px solid var(--tblr-red)}
.card-orange{border-top:3px solid var(--tblr-orange)}
.card-yellow{border-top:3px solid var(--tblr-yellow)}
.card-lime{border-top:3px solid var(--tblr-lime)}
.card-green{border-top:3px solid var(--tblr-green)}
.card-teal{border-top:3px solid var(--tblr-teal)}
.card-cyan{border-top:3px solid var(--tblr-cyan)}


.card-primary-left{border-left:3px solid var(--tblr-primary)}
.card-secondary-left{border-left:3px solid var(--tblr-secondary)}
.card-success-left{border-left:3px solid var(--tblr-success)}
.card-danger-left{border-left:3px solid var(--tblr-danger)}
.card-warning-left{border-left:3px solid var(--tblr-warning)}
.card-info-left{border-left:3px solid var(--tblr-info)}
.card-light-left{border-left:3px solid var(--tblr-light)}
.card-dark-left{border-left:3px solid var(--tblr-dark)}
.card-muted-left{border-left:3px solid var(--tblr-muted)}
.card-blue-left{border-left:3px solid var(--tblr-blue)}
.card-azure-left{border-left:3px solid var(--tblr-azure)}
.card-indigo-left{border-left:3px solid var(--tblr-indigo)}
.card-purple-left{border-left:3px solid var(--tblr-purple)}
.card-pink-left{border-left:3px solid var(--tblr-pink)}
.card-red-left{border-left:3px solid var(--tblr-red)}
.card-orange-left{border-left:3px solid var(--tblr-orange)}
.card-yellow-left{border-left:3px solid var(--tblr-yellow)}
.card-lime-left{border-left:3px solid var(--tblr-lime)}
.card-green-left{border-left:3px solid var(--tblr-green)}
.card-teal-left{border-left:3px solid var(--tblr-teal)} 
.card-cyan-left{border-left:3px solid var(--tblr-cyan)}