/*
	zticket · capa propia sobre Tabler 1.7.4 (D06, D38)

	Regla: Tabler se usa tal cual. Aquí solo va:
	  a) lo que necesitan los componentes x-ui.* y Tabler no trae (cards tintadas, lista
	     clave/valor, barras de acento…), y
	  b) arreglos de fallos de Tabler COMPROBADOS en la versión que se sirve, cada uno con la
	     versión en la que se comprobó. Al subir de versión se vuelven a comprobar y se quitan los
	     que Tabler ya haya resuelto.

	Nada de tokens de marca, tamaños de letra ni retoques de gusto: el aspecto es el de Tabler.
	Se carga SIEMPRE la última (layouts/partials/head.blade.php).

	Origen de los bloques de componentes: oym.css de oym3, commit 5f077cd6, con el prefijo
	`oym-` cambiado a `zt-`.
*/

/* ============================================================
	 a) COMPONENTES
	 ============================================================ */

/* .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-*. 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 {
	--zt-tint: var(--tblr-primary);
	background-color: var(--tblr-card-bg, #fff);
	background-color: color-mix(in oklab, var(--zt-tint) 4%, var(--tblr-card-bg, #fff));
	border-color: var(--tblr-border-color);
	border-color: color-mix(in oklab, var(--zt-tint) 18%, var(--tblr-border-color));
}

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

.card-tinted-success { --zt-tint: var(--tblr-success); }
.card-tinted-danger	{ --zt-tint: var(--tblr-danger); }
/* .card-tinted-warning — añadido en Fase 2 para la página "acceso pendiente"
	 (docs/schema/design-system-tabler.md ya prevé este modificador para "otro
	 color": define --zt-tint = var(--tblr-{color}), misma mecánica que success/danger). */
.card-tinted-warning { --zt-tint: var(--tblr-warning); }
/* .card-tinted-primary / -info / -secondary — completan el juego para que la API
	 por intención visual de los componentes (x-ui.card tinted / x-ui.status-panel,
	 App\Support\Ui\UiIntent) tenga los seis casos cubiertos: sin esto un
	 tinted="info" generaría una clase inexistente y la card saldría sin tintar.
	 Misma mecánica que success/danger/warning: solo se define --zt-tint. */
.card-tinted-primary   { --zt-tint: var(--tblr-primary); }
.card-tinted-info      { --zt-tint: var(--tblr-info); }
.card-tinted-secondary { --zt-tint: var(--tblr-secondary); }

/* .zt-datalist / .zt-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. */
.zt-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);
}

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

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

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

.zt-datarow > .zt-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) {
	.zt-datarow { grid-template-columns: 1.25rem 1fr; }
	.zt-datarow > .zt-datarow-value { grid-column: 2; justify-self: start; text-align: left; }
}

/* `x-ui.info-list apilada`: la MISMA disposición de arriba a cualquier ancho, para una lista en
   media card (desvíos del fijo, ADR 0042), donde en una línea la insignia se parte letra a letra. */
.zt-datalist--apilada .zt-datarow { grid-template-columns: 1.25rem 1fr; }
.zt-datalist--apilada .zt-datarow > .zt-datarow-value { grid-column: 2; justify-self: start; text-align: left; }

/* Un componente Livewire diferido DENTRO de una lista clave/valor (el titular de
   una línea móvil) obliga a envolver sus filas en un `<div>`: Livewire exige un
   elemento raíz por componente. Ese div no debe partir la lista en dos.

   `.zt-datarow:last-child` quita el borde a la última fila de CADA padre, así
   que la última fila del componente se quedaba sin línea y la lista aparecía
   cortada justo ahí — el hueco que delataba dónde empezaba el bloque diferido.
   Aquí se le devuelve, y solo se quita de verdad cuando ese div es lo último de
   la lista. */
.zt-datalist > div > .zt-datarow:last-child {
	border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
}

.zt-datalist > div:last-child > .zt-datarow:last-child { border-bottom: 0; }

/* x-ui.metric con `stacked`: icono, valor y etiqueta centrados en columna, para
   las rejillas de KPIs de las cards de consumo. */
.zt-metric--stacked {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.25rem;
}

.zt-metric--stacked > i {
	font-size: 1.5rem;
	line-height: 1;
}


/* [x-ui.card accent / x-ui.event-list accent] Barra de acento superior (`card-{color}`) o lateral
   (`card-{color}-left`). Tabler solo trae `card-status-*`, que es otra cosa. */
.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)}

/* `x-ui.checkbox-filter`: el catálogo vive en un dropdown compacto, pero 20 categorías no
   pueden empujar el menú fuera de una pantalla pequeña. El scroll pertenece al listado de
   opciones; el slot inferior (p. ej. «Todos los estados») queda siempre visible. */
.zt-checkbox-filter-menu {
	min-inline-size: 15rem;
}

/* LA SEPARACIÓN ENTRE OPCIONES LA PONE LA LISTA, NO LA CASILLA. `x-ui.checkbox` va aquí con
   `tight`, que le quita el `margin-bottom: .75rem` de Tabler; sin nada que lo sustituya las
   filas quedaban pegadas. Se repone con `gap` y no retirando el `tight` por dos motivos: el
   margen de la casilla también cuelga DEBAJO de la última opción —y ahí lo que hay es el borde
   del menú o el separador del slot—, y `.form-check` es `display: block`, así que su margen se
   colapsaría con el del contenedor y el hueco real dependería de quién gana. Con `gap` el aire
   está solo ENTRE filas y vale el mismo número en todas. */
.zt-checkbox-filter-list {
	max-block-size: 18rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* Alpine oculta [x-cloak] hasta que evalúa x-show (solo dentro de componentes Livewire). */
[x-cloak] { display: none !important; }

/* ============================================================
	 b) ARREGLOS DE FALLOS DE TABLER (comprobados en 1.7.4)
	 ============================================================ */

/* Comprobado en Tabler 1.7.4: `.nav-segmented .nav-link-input { display: none }` saca el radio
   del orden de tabulación. */
/* x-ui.segmented: que se pueda manejar con el teclado. Tabler oculta el radio con
   `display: none` (`.nav-segmented .nav-link-input`), y un elemento así no entra en el orden
   de tabulación: el control —y con él el rango de las gráficas, `x-ui.chart-range`— solo se
   podía usar con el ratón. Se sustituye por el mismo ocultado que Bootstrap aplica a
   `.btn-check`, que deja el radio fuera de la vista pero enfocable, y el foco se pinta en la
   etiqueta con el anillo de Tabler. La especificidad es la suya más `>`, así que no hace falta `!important`. */
.nav-segmented > .nav-link-input {
	display: block;
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}

.nav-segmented > .nav-link-input:focus-visible + .nav-link {
	outline: 0;
	box-shadow: 0 0 0 var(--tblr-focus-ring-width) var(--tblr-focus-ring-color);
}