/* ==========================================================================
   app.css — Estilos base del sistema (layout + componentes compartidos)
   Se carga desde includes/templates/header.php en todas las páginas.
   Base: Bootstrap 5.3 + Bootstrap Icons. Las páginas nuevas deben usar
   estas clases (app-*) en vez de definir su propio <style>.
   ========================================================================== */

:root {
	/* Marca (se puede sobreescribir por cliente desde header.php) */
	--app-accent: #2563eb;
	--app-accent-h: #1d4ed8;
	--app-accent-lt: #eff6ff;

	/* Neutros */
	--app-bg: #f4f6fa;
	--app-surface: #ffffff;
	--app-text: #1e293b;
	--app-muted: #64748b;
	--app-border: #e2e8f0;
	--app-hover: #f1f5f9;

	/* Estados */
	--app-success: #16a34a;
	--app-warning: #d97706;
	--app-danger: #dc2626;
	--app-info: #0891b2;

	/* Medidas */
	--app-radius: 12px;
	--app-radius-sm: 8px;
	--app-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	--app-shadow-lg: 0 10px 30px rgba(15, 23, 42, .10);
	--app-sidebar-w: 260px;
	--app-topbar-h: 58px;
	--app-gutter: 14px;          /* espacio entre el contenido y los bordes (móvil) */

	/* Bootstrap hereda el acento */
	--bs-primary: var(--app-accent);
	--bs-link-color: var(--app-accent);
	--bs-link-hover-color: var(--app-accent-h);
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
body.app-body {
	background: var(--app-bg) !important;
	color: var(--app-text);
	font-size: 14.5px;
	-webkit-font-smoothing: antialiased;
	/* Todo el contenido de las páginas queda separado de la barra, del menú y de los bordes */
	padding: calc(var(--app-topbar-h) + var(--app-gutter)) var(--app-gutter) var(--app-gutter);
	min-height: 100vh;
	overflow-x: hidden;
}

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
.app-sidebar {
	--bs-offcanvas-width: var(--app-sidebar-w);
	background: var(--app-surface);
	border-right: 1px solid var(--app-border);
	display: flex;
	flex-direction: column;
}

.app-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--app-border);
	text-decoration: none;
	min-height: var(--app-topbar-h);
}

.app-sidebar-brand img {
	height: 34px;
	max-width: 120px;
	object-fit: contain;
}

.app-brand-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--app-text);
	line-height: 1.2;
}

.app-brand-sub {
	display: block;
	font-size: 11px;
	color: var(--app-muted);
}

.app-sidebar-estab {
	margin: 12px 14px 4px;
	padding: 8px 12px;
	border-radius: var(--app-radius-sm);
	background: var(--app-accent-lt);
	color: var(--app-accent);
	font-size: 12.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.app-sidebar-estab:hover {
	color: var(--app-accent-h);
}

.app-sidebar-estab small {
	margin-left: auto;
	font-weight: 500;
	opacity: .7;
}

.app-nav {
	flex: 1;
	overflow-y: auto;
	padding: 6px 10px 16px;
}

.app-nav-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--app-muted);
	opacity: .7;
	padding: 14px 10px 6px;
}

.app-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin-bottom: 1px;
	border-radius: var(--app-radius-sm);
	color: var(--app-muted);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.app-nav-link i {
	font-size: 16px;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.app-nav-link:hover {
	background: var(--app-hover);
	color: var(--app-text);
}

.app-nav-link.active {
	background: var(--app-accent-lt);
	color: var(--app-accent);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--app-accent);
}

.app-nav-link.app-nav-danger:hover {
	background: #fef2f2;
	color: var(--app-danger);
}

.app-sidebar-user {
	border-top: 1px solid var(--app-border);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.app-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--app-accent) 0%, #7c3aed 100%);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-transform: uppercase;
}

.app-user-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--app-text);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-role-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 20px;
	background: var(--app-accent-lt);
	color: var(--app-accent);
}

/* ─── Topbar ────────────────────────────────────────────────────────────── */
.app-topbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: var(--app-topbar-h);
	z-index: 1030;
	background: var(--app-surface);
	border-bottom: 1px solid var(--app-border);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
}

.app-burger {
	border: 1px solid var(--app-border);
	background: var(--app-surface);
	color: var(--app-text);
	border-radius: var(--app-radius-sm);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.app-burger:hover {
	background: var(--app-hover);
}

.app-topbar-title {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.app-topbar-greet {
	font-size: 13px;
	color: var(--app-muted);
	white-space: nowrap;
}

.app-topbar-greet strong {
	color: var(--app-text);
}

@media (min-width: 768px) {
	:root {
		--app-gutter: 24px;
	}
}

/* ─── Escritorio (≥ 992px): sidebar fijo, contenido desplazado ─────────── */
@media (min-width: 992px) {
	.app-sidebar.offcanvas-lg {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--app-sidebar-w);
		z-index: 1035;
		transition: transform .2s ease;
		/* Bootstrap pone fondo transparente con !important en offcanvas-lg */
		background-color: var(--app-surface) !important;
	}

	body.app-body {
		padding-left: calc(var(--app-sidebar-w) + var(--app-gutter));
		transition: padding-left .2s ease;
	}

	.app-topbar {
		left: var(--app-sidebar-w);
		transition: left .2s ease;
	}

	/* Sidebar oculto en escritorio (botón hamburguesa) */
	body.app-body.app-sb-collapsed {
		padding-left: var(--app-gutter);
	}

	body.app-sb-collapsed .app-sidebar.offcanvas-lg {
		transform: translateX(-100%);
	}

	body.app-sb-collapsed .app-topbar {
		left: 0;
	}
}

/* ─── Móvil ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.app-topbar-greet {
		display: none;
	}
}

@media (max-width: 575.98px) {
	body.app-body {
		font-size: 14px;
	}

	.app-topbar {
		padding: 0 12px;
	}
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.app-footer {
	margin-top: 40px;
	padding: 18px 16px;
	border-top: 1px solid var(--app-border);
	color: var(--app-muted);
	font-size: 12.5px;
	text-align: center;
}

.app-footer a {
	color: var(--app-muted);
}

/* ==========================================================================
   Componentes compartidos (usar en páginas nuevas / al migrar)
   ========================================================================== */

/* Encabezado de página (el espacio exterior lo da body.app-body) */

.app-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.app-page-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.app-page-sub {
	color: var(--app-muted);
	font-size: 13.5px;
	margin: 2px 0 0;
}

/* Tarjetas */
.app-card {
	background: var(--app-surface);
	border: 1px solid var(--app-border);
	border-radius: var(--app-radius);
	box-shadow: var(--app-shadow);
}

.app-card-header {
	padding: 14px 18px;
	border-bottom: 1px solid var(--app-border);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.app-card-body {
	padding: 18px;
}

/* KPI */
.app-kpi {
	padding: 16px 18px;
}

.app-kpi-label {
	font-size: 12px;
	color: var(--app-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.app-kpi-value {
	font-size: clamp(16px, 1.7vw, 24px);
	font-weight: 700;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;          /* "L 108,618.65" nunca se parte en dos líneas */
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-kpi-value.fs-5 {
	font-size: clamp(14px, 1.3vw, 19px) !important;
}

/* Tablas: siempre envolver en .table-responsive */
.app-table {
	margin: 0;
}

.app-table thead th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--app-muted);
	background: #f8fafc;
	border-bottom-width: 1px;
	white-space: nowrap;
}

.app-table td {
	vertical-align: middle;
}

.app-n {
	width: 1%;
	white-space: nowrap;
	color: var(--app-muted);
	font-size: 12px !important;
	font-variant-numeric: tabular-nums;
}

/* Encabezados que ordenan (table[data-ordenar], ver app-tabla.js) */
.app-th-orden {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.app-th-orden::after {
	content: '\2195';
	margin-left: 4px;
	font-size: .8em;
	opacity: .35;
}

.app-th-orden.orden-asc::after {
	content: '\2191';
	opacity: 1;
}

.app-th-orden.orden-desc::after {
	content: '\2193';
	opacity: 1;
}

.app-th-orden:hover {
	color: var(--brand, #ea580c);
}

.app-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Insignias de estado */
.app-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid transparent;
	white-space: nowrap;
}

.app-badge-success { background: #f0fdf4; color: var(--app-success); border-color: #bbf7d0; }
.app-badge-warning { background: #fffbeb; color: var(--app-warning); border-color: #fde68a; }
.app-badge-danger  { background: #fef2f2; color: var(--app-danger);  border-color: #fecaca; }
.app-badge-info    { background: #ecfeff; color: var(--app-info);    border-color: #a5f3fc; }
.app-badge-muted   { background: #f1f5f9; color: var(--app-muted);   border-color: var(--app-border); }

/* Formularios */
.app-body .form-control,
.app-body .form-select {
	border-color: var(--app-border);
	border-radius: var(--app-radius-sm);
}

.app-body .form-control:focus,
.app-body .form-select:focus {
	border-color: var(--app-accent);
	box-shadow: 0 0 0 3px var(--app-accent-lt);
}

.app-body .form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--app-text);
}

/* Botones */
.app-body .btn {
	border-radius: var(--app-radius-sm);
	font-weight: 500;
}

.app-body .btn-primary {
	background: var(--app-accent);
	border-color: var(--app-accent);
}

.app-body .btn-primary:hover,
.app-body .btn-primary:focus {
	background: var(--app-accent-h);
	border-color: var(--app-accent-h);
}

/* Contenido de páginas antiguas: evitar scroll horizontal en móvil */

.app-body img,
.app-body canvas {
	max-width: 100%;
}

/* ─── Impresión: solo el contenido ──────────────────────────────────────── */
@media print {
	.app-sidebar,
	.app-topbar,
	.app-footer {
		display: none !important;
	}

	body.app-body {
		padding: 0 !important;
		background: #fff !important;
	}
}

/* ==========================================================================
   Login (index.php) y pantallas sin sesión (selección de cliente/establecimiento)
   ========================================================================== */
body.app-login {
	min-height: 100vh;
	margin: 0;
	background: radial-gradient(1200px 600px at 10% -10%, var(--app-accent-lt), transparent 60%),
		radial-gradient(900px 500px at 110% 110%, #fff7ed, transparent 60%), var(--app-bg);
	color: var(--app-text);
}

.app-login-wrap {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

.app-login-card {
	width: 100%;
	max-width: 400px;
	background: var(--app-surface);
	border: 1px solid var(--app-border);
	border-radius: 16px;
	box-shadow: var(--app-shadow-lg);
	padding: 32px 28px;
}

@media (max-width: 400px) {
	.app-login-card {
		padding: 24px 18px;
		border-radius: 12px;
	}
}

.app-login-logo {
	max-height: 72px;
	max-width: 200px;
	object-fit: contain;
	margin-bottom: 14px;
}

.app-login-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.app-login-sub {
	color: var(--app-muted);
	font-size: 13.5px;
	margin: 4px 0 0;
}

.app-login .form-label {
	font-size: 13px;
	font-weight: 600;
}

.app-login .input-group-text {
	background: #f8fafc;
	color: var(--app-muted);
	border-color: var(--app-border);
}

.app-login .form-control {
	border-color: var(--app-border);
}

.app-login .form-control:focus {
	border-color: var(--app-accent);
	box-shadow: 0 0 0 3px var(--app-accent-lt);
}

.app-login .btn-primary {
	background: var(--app-accent);
	border-color: var(--app-accent);
	font-weight: 600;
	border-radius: var(--app-radius-sm);
}

.app-login .btn-primary:hover {
	background: var(--app-accent-h);
	border-color: var(--app-accent-h);
}

.app-login-pie {
	margin-top: 18px;
	font-size: 12px;
	color: var(--app-muted);
	text-align: center;
}

/* Selección de empresa / establecimiento: lista de tarjetas táctiles */
.app-select-card {
	max-width: 460px;
}

.app-select-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--app-accent);
	background: var(--app-accent-lt);
}

.app-select-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 60vh;
	overflow-y: auto;
}

.app-select-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	text-align: left;
	background: var(--app-surface);
	border: 1px solid var(--app-border);
	border-radius: var(--app-radius);
	color: var(--app-text);
	transition: border-color .15s, box-shadow .15s, transform .05s;
}

.app-select-item:hover,
.app-select-item:focus-visible {
	border-color: var(--app-accent);
	box-shadow: 0 0 0 3px var(--app-accent-lt);
	outline: none;
}

.app-select-item:active {
	transform: scale(.99);
}

.app-select-item.is-actual {
	border-color: var(--app-accent);
	background: var(--app-accent-lt);
}

.app-select-logo {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 10px;
	background: #f8fafc;
	border: 1px solid var(--app-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--app-muted);
	overflow: hidden;
}

.app-select-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.app-select-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.app-select-text strong {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-select-text small {
	font-size: 12px;
	color: var(--app-muted);
}

.app-select-go {
	color: var(--app-muted);
}

/* ==========================================================================
   Capa de unificación de páginas antiguas
   Las páginas viejas traen su propio <style> con un encabezado de color
   distinto por módulo. Aquí se igualan todos al estilo de .app-page-header
   (tarjeta clara con acento de marca). Prefijo .app-body = más especificidad
   que los estilos de la página; !important solo donde hay estilos en línea.
   ========================================================================== */

.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header) {
	background: var(--app-surface) !important;
	color: var(--app-text) !important;
	border: 1px solid var(--app-border);
	border-left: 4px solid var(--app-accent);
	border-radius: var(--app-radius);
	box-shadow: var(--app-shadow);
	padding: 16px 20px !important;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)::before,
.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)::after {
	display: none !important;
}

/* Título y subtítulo */
.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	:is(h1, h2, h3, h4, h5, [class$="-title"]) {
	color: var(--app-text) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	margin: 0 !important;
	opacity: 1 !important;
}

.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	:is(p, small, [class$="-sub"]) {
	color: var(--app-muted) !important;
	opacity: 1 !important;
	font-size: 13px !important;
	margin: 2px 0 0 !important;
}

.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	:is(h1, h2, h3, h4, h5, [class$="-title"]) .bi {
	color: var(--app-accent);
}

/* Logo y adornos repetidos (el logo ya está en la barra lateral) */
.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	:is(img[class*="logo"], > div[style*="font-size:3rem"], > div[style*="font-size: 3rem"]) {
	display: none !important;
}

/* Botones dentro del encabezado: los "blancos sobre color" pasan a secundarios */
.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
	background: var(--app-surface) !important;
	color: var(--app-text) !important;
	border: 1px solid var(--app-border) !important;
}

.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover {
	background: var(--app-hover) !important;
}

.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
	.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
	.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
	:is(button:not(.btn), a[class^="btn-"]) {
	background: var(--app-accent) !important;
	color: #fff !important;
	border: 1px solid var(--app-accent) !important;
}

@media (max-width: 575.98px) {
	.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
		.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
		.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header) {
		padding: 14px 16px !important;
	}
	.app-body :is(.db-header, .fv-header, .fh-header, .ct-header, .cc-hero, .ec-hero, .fc-hero,
		.gs-header, .tj-hero, .cg-header, .fin-hero, .pj-hero, .cl-header, .cv-hero, .pc-header,
		.cf-header-card, .cc-header, .ec-header, .cm-header, .ug-header, .rc-hero, .fe-header)
		:is(h1, h2, h3, h4, h5, [class$="-title"]) {
		font-size: 17px !important;
	}
}

/* Cifras: nunca partir "L 12,345.00" en dos líneas */
.app-body table :is(td, th).text-end,
.app-body .app-num,
.app-body [class*="stat-val"],
.app-body [class*="kpi-val"] {
	white-space: nowrap;
}

/* Adorno grande (emoji/ícono al 20 %) que algunas cabeceras traen a la derecha */
.app-body :is(.db-header, .gs-header, .tj-hero, .fin-hero, .pj-hero, .cl-header, .cm-header, .rc-hero, .fe-header, .fv-header)
	> :is(div, i)[style*="opacity:.2"],
.app-body :is(.db-header, .gs-header, .tj-hero, .fin-hero, .pj-hero, .cl-header, .cm-header, .rc-hero, .fe-header, .fv-header)
	> :is(div, i)[style*="opacity: .2"],
.app-body :is(.db-header, .gs-header, .tj-hero, .fin-hero, .pj-hero, .cl-header, .cm-header, .rc-hero, .fe-header, .fv-header)
	> :is(div, i)[style*="font-size:3rem"] {
	display: none !important;
}

/* Contenedores de página antiguos: el espacio exterior ya lo da body.app-body */
.app-body :is(.cg-page, .cf-page, .cl-page, .cc-page, .cm-page, .ct-page, .cc-wrap, .ec-page, .ec-wrap,
	.fe-page, .fc-wrap, .fin-wrap, .gs-page, .fv-page, .rc-wrap, .fh-page, .pc-page, .pj-wrap, .tj-page, .ug-page) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Botón de acción principal: un solo color (el acento de la empresa) en todos los módulos */
body.app-body :is(.btn-nuevo-tj, .btn-nuevo-gs, .btn-nuevo-colab, .btn-new-user, .btn-new-ct, .btn-new-cat,
	.btn-new-cai, .btn-new, .btn-save, .btn-modal-save, .btn-guardar, .btn-guardar-edit, .btn-update,
	.btn-create-prod, .btn-rc-primary, .btn-facturar, .btn-assign) {
	background: var(--app-accent) !important;
	border-color: var(--app-accent) !important;
	color: #fff !important;
	box-shadow: none !important;
}

body.app-body :is(.btn-nuevo-tj, .btn-nuevo-gs, .btn-nuevo-colab, .btn-new-user, .btn-new-ct, .btn-new-cat,
	.btn-new-cai, .btn-new, .btn-save, .btn-modal-save, .btn-guardar, .btn-guardar-edit, .btn-update,
	.btn-create-prod, .btn-rc-primary, .btn-facturar, .btn-assign):hover {
	background: var(--app-accent-h) !important;
	border-color: var(--app-accent-h) !important;
}

/* En celular las cifras grandes de las tarjetas se achican en vez de salirse */
@media (max-width: 575.98px) {
	.app-body [class*="stat-val"],
	.app-body [class*="kpi-val"] {
		font-size: clamp(.85rem, 4vw, 1.25rem) !important;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Mismo ancho en todas las páginas: las viejas usaban .container / .container-xxl (1320 px)
   y algunas un tope propio (960, 1100, 1200 px). Ahora todas ocupan el ancho disponible,
   igual que los módulos nuevos; el margen exterior lo da body.app-body. */
body.app-body > :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl),
body.app-body :is(.cg-page, .cf-page, .cl-page, .cc-page, .cm-page, .ct-page, .cc-wrap, .ec-page, .ec-wrap,
	.fe-page, .fc-wrap, .fin-wrap, .gs-page, .fv-page, .rc-wrap, .fh-page, .pc-page, .pj-wrap, .tj-page, .ug-page) {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* El dashboard traía margen superior propio */
body.app-body > .container-xxl.mt-4 {
	margin-top: 0 !important;
}

/* Encabezado de los módulos nuevos con la misma tarjeta que las páginas viejas */
body.app-body .app-page-header {
	background: var(--app-surface);
	border: 1px solid var(--app-border);
	border-left: 4px solid var(--app-accent);
	border-radius: var(--app-radius);
	box-shadow: var(--app-shadow);
	padding: 16px 20px;
}

body.app-body .app-page-title {
	font-size: 20px;
}

@media (max-width: 575.98px) {
	body.app-body .app-page-header { padding: 14px 16px; }
	body.app-body .app-page-title { font-size: 17px; }
}

@media print {
	body.app-body .app-page-header { border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   Componentes con el mismo aspecto que las páginas antiguas
   (indicadores con ícono, barra de búsqueda, tablas y paginación)
   ========================================================================== */

/* Indicador con ícono: <div class="app-stat"><div class="app-stat-icon blue"><i class="bi …"></i></div>
   <div><div class="app-stat-val">…</div><div class="app-stat-lbl">…</div></div></div> */
.app-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.app-stat {
	background: var(--app-surface);
	border: 1px solid var(--app-border);
	border-radius: var(--app-radius);
	box-shadow: var(--app-shadow);
	padding: 14px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	transition: box-shadow .15s, transform .15s;
}

.app-stat:hover {
	box-shadow: var(--app-shadow-lg);
	transform: translateY(-2px);
}

.app-stat > div:last-child { min-width: 0; }

.app-stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	flex-shrink: 0;
	background: var(--app-accent-lt);
	color: var(--app-accent);
}

.app-stat-icon.green  { background: #f0fdf4; color: var(--app-success); }
.app-stat-icon.amber  { background: #fffbeb; color: var(--app-warning); }
.app-stat-icon.red    { background: #fef2f2; color: var(--app-danger); }
.app-stat-icon.teal   { background: #f0fdfa; color: #0d9488; }
.app-stat-icon.purple { background: #f5f3ff; color: #7c3aed; }
.app-stat-icon.gray   { background: #f1f5f9; color: var(--app-muted); }

.app-stat-val {
	font-size: clamp(15px, 1.25vw, 21px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--app-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.app-stat-lbl {
	font-size: 12px;
	color: var(--app-muted);
	margin-top: 3px;
}

/* Barra de búsqueda */
.app-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.app-search {
	position: relative;
	flex: 1 1 220px;
	min-width: 180px;
}

.app-search > i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--app-muted);
	pointer-events: none;
}

.app-search input {
	padding-left: 36px;
}

/* Tablas: mismo espaciado y tipografía que las páginas antiguas */
.app-table thead th {
	padding: 12px 16px;
	font-size: 11.5px;
}

.app-table tbody td,
.app-table tfoot td {
	padding: 12px 16px;
	font-size: 13.5px;
}

.app-table tbody tr:hover > td {
	background: var(--app-hover);
}

.app-body .app-table a:not(.btn) {
	color: var(--app-accent);
	text-decoration: none;
	font-weight: 500;
}

.app-body .app-table a:not(.btn):hover {
	text-decoration: underline;
}

/* Paginación (pie de tabla) */
.app-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px;
	border-top: 1px solid var(--app-border);
	background: #f8fafc;
	border-radius: 0 0 var(--app-radius) var(--app-radius);
}

.app-pager-info {
	font-size: 12.5px;
	color: var(--app-muted);
}

.app-pager-btns {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

/* Botón de página: también unifica el .page-btn de las páginas antiguas */
.app-page-btn,
body.app-body .page-btn {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-radius: var(--app-radius-sm);
	border: 1.5px solid var(--app-border);
	background: var(--app-surface);
	color: var(--app-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.app-page-btn:hover:not(.disabled):not(.active),
body.app-body .page-btn:hover:not(.disabled):not(.active) {
	border-color: var(--app-accent) !important;
	color: var(--app-accent) !important;
	background: var(--app-accent-lt) !important;
}

.app-page-btn.active,
body.app-body .page-btn.active {
	background: var(--app-accent) !important;
	border-color: var(--app-accent) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, .25) !important;
}

.app-page-btn.disabled,
body.app-body .page-btn.disabled {
	opacity: .35;
	pointer-events: none;
}

@media print {
	.app-pager, .app-toolbar { display: none !important; }
	.app-stat { box-shadow: none; }
}

/* ==========================================================================
   Estados financieros en formato clásico (estados_financieros.php / balance_general.php)
   ========================================================================== */
.app-estado {
	max-width: 860px;
	margin: 0 auto;
	padding: 32px 36px 24px;
}

.app-estado-head {
	text-align: center;
	margin-bottom: 22px;
}

.app-estado-empresa {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.app-estado-titulo {
	font-size: 16px;
	font-weight: 700;
	margin-top: 6px;
}

.app-estado-sub {
	color: var(--app-muted);
	font-size: 13px;
}

.app-estado-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.app-estado-tabla td {
	padding: 4px 6px;
	vertical-align: bottom;
}

.app-estado-tabla td:nth-child(2),
.app-estado-tabla td:nth-child(3) {
	text-align: right;
	white-space: nowrap;
}

.app-estado-col {
	width: 150px;
}

.app-estado-sec td {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .04em;
	padding-top: 18px;
}

.app-estado-grp td {
	font-weight: 600;
	padding-top: 10px;
	padding-left: 18px;
}

.app-estado-i1 {
	padding-left: 22px !important;
}

.app-estado-i2 {
	padding-left: 36px !important;
}

/* Raya simple bajo la última cifra de un grupo, doble bajo los totales finales */
.app-estado-tabla td.app-estado-sub-l {
	border-bottom: 1px solid var(--app-text);
}

.app-estado-tabla td.app-estado-dbl {
	border-bottom: 3px double var(--app-text);
}

.app-estado-tot td {
	font-weight: 600;
	padding-top: 6px;
}

.app-estado-final td {
	font-weight: 700;
	font-size: 15px;
	padding-top: 14px;
}

.app-estado-final td:last-child {
	border-bottom: 3px double var(--app-text);
}

.app-estado-final.neg td {
	color: #b91c1c;
}

.app-estado-nota {
	color: var(--app-muted);
	font-size: 12px;
	font-weight: 400;
}

.app-estado-notas {
	margin-top: 26px;
	padding-top: 14px;
	border-top: 1px solid var(--app-border);
	color: var(--app-muted);
	font-size: 12.5px;
}

.app-estado-notas p {
	margin-bottom: 6px;
}

.app-estado-pie {
	font-size: 11.5px;
}

@media (max-width: 576px) {
	.app-estado {
		padding: 20px 14px;
	}

	.app-estado-tabla {
		font-size: 13px;
	}

	.app-estado-col {
		width: 96px;
	}
}

@media print {
	.no-print {
		display: none !important;
	}

	.app-estado {
		border: 0 !important;
		box-shadow: none !important;
		max-width: none;
		padding: 0;
	}
}

/* Estado del envío por correo de una factura (Historial de facturas): línea pequeña bajo el correlativo, sobre + texto */
.app-envio { display: block; margin-top: 4px; font-size: .7rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.app-envio:hover { text-decoration: underline; }
.app-envio .bi + .bi { margin-left: .1rem; }
.app-envio-programado { color: #1d4ed8; }
.app-envio-enviado { color: #15803d; }
.app-envio-error { color: #b91c1c; }

/* Indicador que funciona como filtro (Cuentas por pagar): clic = filtra; el activo queda marcado */
button.app-stat { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.app-stat:disabled { cursor: default; opacity: .6; transform: none; box-shadow: var(--app-shadow); }
.app-stat-filtro.activo { border-color: var(--app-accent); box-shadow: 0 0 0 2px var(--app-accent-lt), var(--app-shadow); }
/* Encabezado de mes dentro de una tabla agrupada */
.app-table tr.cp-mes td { background: #f8fafc; font-size: .82rem; padding-top: .45rem; padding-bottom: .45rem; }
/* Cuota futura de una serie con fecha de fin (aún no registrada): se ve más tenue */
.app-table tr.cp-futura td { background: #fafbfc; color: var(--app-muted); }

/* Semáforo de cobro/pago por días que faltan (Contratos): rojo vencido, naranja ≤ 3 días, amarillo ≤ 7, gris más adelante */
.ct-sem { display: inline-block; border-radius: 6px; padding: 1px 6px; font-weight: 600; }
.ct-sem.ct-sem-rojo { background: #fee2e2; color: #991b1b; }
.ct-sem.ct-sem-naranja { background: #ffedd5; color: #9a3412; }
.ct-sem.ct-sem-amarillo { background: #fef9c3; color: #854d0e; }
.ct-sem.ct-sem-gris { background: #f1f5f9; color: #475569; }
/* Atrasos también por grados (no todo rojo): 1–7 días, 8–30 días, más de 30 días */
.ct-sem.ct-sem-atr1 { background: #ffedd5; color: #c2410c; }
.ct-sem.ct-sem-atr2 { background: #fee2e2; color: #b91c1c; }
.ct-sem.ct-sem-atr3 { background: #b91c1c; color: #fff; }

/* ── Buscador con autocompletado para listas largas (clientes/js/select-buscar.js, <select data-buscar>) ── */
.sb-oculto { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; pointer-events: none !important; overflow: hidden; }
.sb-widget { position: relative; }
.sb-widget .sb-input { padding-right: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px 14px; text-overflow: ellipsis; }
.sb-widget .sb-limpiar { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--bs-secondary-color, #94a3b8); font-size: 1.15rem; line-height: 1; padding: 0 .25rem; }
.sb-widget .sb-limpiar[hidden] { display: none; }
.sb-widget .sb-lista { position: fixed; z-index: 1085; max-height: 280px; overflow-y: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #e2e8f0); border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, .14); padding: .25rem 0; }
.sb-widget .sb-op { padding: .42rem .75rem; font-size: .88rem; cursor: pointer; white-space: normal; line-height: 1.35; }
.sb-widget .sb-op.activo { background: var(--bs-primary-bg-subtle, #e0f2fe); }
.sb-widget .sb-op.elegido { font-weight: 600; }
.sb-widget .sb-op mark { padding: 0; background: #fde68a; color: inherit; border-radius: 2px; }
.sb-widget .sb-grupo { padding: .5rem .75rem .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color, #64748b); border-top: 1px solid var(--bs-border-color, #eef2f7); }
.sb-widget .sb-grupo:first-child { border-top: 0; }
.sb-widget .sb-op.sb-en-grupo { padding-left: 1.25rem; }
.sb-widget .sb-vacio { padding: .5rem .75rem; font-size: .82rem; color: var(--bs-secondary-color, #64748b); }
.sb-widget.sb-disabled .sb-input { background-color: var(--bs-secondary-bg, #e9ecef); }

/* Pestañas dentro de una tarjeta, con línea bajo la activa (Configuración; mismo estilo que Cobros por correo) */
.app-tabs-card { padding: 0; overflow: hidden; }
.app-tabs-linea { padding: 0 .75rem; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.app-tabs-linea .nav-link { padding: .85rem 1rem; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--bs-secondary-color, #64748b); font-weight: 600; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.app-tabs-linea .nav-link:hover { color: var(--bs-primary, #e4550d); background: var(--bs-tertiary-bg, #f8fafc); }
.app-tabs-linea .nav-link.active { color: var(--bs-primary, #e4550d); border-bottom-color: currentColor; }
.app-tabs-linea .nav-link:focus-visible { outline: 2px solid var(--bs-primary, #e4550d); outline-offset: -4px; }

/* Tasa del dólar en la barra superior */
.app-topbar-tasa { align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--bs-border-color, #e2e8f0); border-radius: 999px; font-size: .78rem; font-weight: 600; color: #047857; background: #ecfdf5; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-topbar-tasa:hover { background: #d1fae5; color: #065f46; }
.app-topbar-tasa small { font-size: .65rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-left: .2rem; }
button.app-topbar-tasa { cursor: pointer; }
.app-tasa-pop { width: 290px; max-width: calc(100vw - 24px); }
.app-tasa-cv { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
.app-tasa-cv > div + div { border-left: 1px solid var(--bs-border-color, #e2e8f0); }
.app-tasa-conv { display: flex; align-items: center; gap: .5rem; }

/* Login: franja del tipo de cambio (arriba) y panel desplegable con convertidor */
body.app-login { display: flex; flex-direction: column; }
body.app-login .app-login-wrap { flex: 1; min-height: 0; }
.app-fx-barra { position: relative; z-index: 20; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 22px; padding: 10px 16px; background: var(--app-surface, #fff); border-bottom: 1px solid var(--app-border, #e2e8f0); box-shadow: 0 1px 6px rgba(15,23,42,.05); font-size: 14px; }
.app-fx-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--app-accent, #e4550d); font-weight: 700; padding: 4px 6px; border-radius: 8px; }
.app-fx-toggle:hover, .app-fx-toggle.abierto { background: var(--app-accent-lt, #fff1e8); }
.app-fx-toggle:focus-visible { outline: 2px solid var(--app-accent, #e4550d); outline-offset: 2px; }
.app-fx-flecha { font-size: 12px; transition: transform .2s; }
.app-fx-toggle.abierto .app-fx-flecha { transform: rotate(180deg); }
.app-fx-valores { display: flex; align-items: center; gap: 18px; color: var(--app-text, #0f172a); font-variant-numeric: tabular-nums; }
.app-fx-valores b { font-weight: 600; }
.app-fx-mon { color: var(--app-muted, #64748b); }
.app-fx-bch { font-size: 10.5px; font-weight: 700; color: #fff; background: #16a34a; border-radius: 999px; padding: 2px 8px; }
.app-fx-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 360px; max-width: calc(100vw - 24px); background: var(--app-surface, #fff); border: 1px solid var(--app-border, #e2e8f0); border-radius: 14px; box-shadow: 0 18px 40px rgba(15,23,42,.18); padding: 18px; animation: fxIn .16s ease-out; }
@keyframes fxIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.app-fx-panel::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--app-border, #e2e8f0); border-top: 1px solid var(--app-border, #e2e8f0); transform: translateX(-50%) rotate(45deg); }
.app-fx-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--app-muted, #64748b); font-size: 12.5px; margin-bottom: 12px; }
.app-fx-cerrar { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--app-muted, #64748b); padding: 0 4px; }
.app-fx-cv { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--app-border, #e2e8f0); border-radius: 12px; margin-bottom: 14px; }
.app-fx-cv > div { padding: 10px; text-align: center; display: flex; flex-direction: column; }
.app-fx-cv > div + div { border-left: 1px solid var(--app-border, #e2e8f0); }
.app-fx-cv span { font-size: 12px; color: var(--app-muted, #64748b); }
.app-fx-cv strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.app-fx-modo { display: grid; grid-template-columns: 1fr 1fr; background: #f1f5f9; border-radius: 10px; padding: 4px; gap: 4px; margin-bottom: 10px; }
.app-fx-modo button { border: 0; background: transparent; color: #475569; font-weight: 600; font-size: 13px; padding: 8px 6px; border-radius: 8px; }
.app-fx-modo button.active { background: #fff; color: var(--app-accent, #e4550d); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.app-fx-campo { display: flex; align-items: stretch; border: 1px solid var(--app-border, #e2e8f0); border-radius: 10px; overflow: hidden; margin: 0; }
.app-fx-campo:focus-within { border-color: var(--app-accent, #e4550d); box-shadow: 0 0 0 3px var(--app-accent-lt, #fff1e8); }
.app-fx-moneda { padding: 0 14px; font-weight: 700; color: #475569; background: #f8fafc; display: flex; align-items: center; min-width: 58px; justify-content: center; border-right: 1px solid var(--app-border, #e2e8f0); }
.app-fx-campo input { border: 0; outline: 0; flex: 1; min-width: 0; padding: 11px 14px; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.app-fx-res { margin-top: 12px; text-align: right; }
.app-fx-res span { display: block; font-size: 26px; font-weight: 800; color: var(--app-text, #0f172a); font-variant-numeric: tabular-nums; line-height: 1.15; word-break: break-all; }
.app-fx-res small { color: var(--app-muted, #64748b); font-size: 12px; }
.app-fx-pista { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--app-border, #e2e8f0); font-size: 12px; color: var(--app-muted, #64748b); }
@media (max-width: 575.98px) {
	.app-fx-barra { font-size: 13px; gap: 4px 12px; padding: 8px 10px; }
	.app-fx-valores { gap: 10px; }
	.app-fx-panel { top: calc(100% + 6px); left: 12px; right: 12px; width: auto; max-width: none; transform: none; animation: none; }
	.app-fx-panel::before { display: none; }
}

/* Interruptores (toggles): mano al pasar el mouse; los bloqueados, no */
.form-switch .form-check-input, .form-switch .form-check-label { cursor: pointer; }
.form-switch .form-check-input:disabled, .form-switch .form-check-input:disabled ~ .form-check-label { cursor: not-allowed; }

/* Editor de viñetas (Incluye / Condiciones de cotizaciones, ver clientes/js/lista-vinetas.js) */
.lv-fila {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 4px;
}

.lv-punto {
	color: #e8590c;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1;
	width: 10px;
	flex: none;
	padding-top: 6px;
}

.lv-t {
	flex: 0 0 150px;
	font-weight: 700;
}

.lv-t::placeholder {
	font-weight: 400;
}

.lv-x {
	flex: 1 1 auto;
	min-width: 0;
	resize: none;
	overflow: hidden;
	line-height: 1.45;
}

.lv-acc {
	display: flex;
	gap: 6px;
	flex: none;
	padding-top: 5px;
}

.lv-acc .btn-link {
	color: var(--app-muted, #64748b);
	line-height: 1;
}

.lv-acc .btn-link.text-danger {
	color: #dc2626 !important;
}

@media (max-width: 576px) {
	.lv-fila {
		flex-wrap: wrap;
	}

	.lv-t {
		flex: 1 1 calc(100% - 20px);
	}

	.lv-x {
		flex: 1 1 calc(100% - 90px);
		margin-left: 16px;
	}
}