/* =========================================================================
   COLMENA · Renovación visual (NOTA 13-oct-2026)
   - Menú lateral + logo: todas las pantallas (componente común).
   - Resto: Dashboard, Agenda de citas y TODAS las tablas/reportes (div.table).
     [A] = body:has(#pestanas a[href*="agenda-citas.sys?l=citas"])
     [V] Registrar venta: retirado por fases → redesign-ventas-pendiente.css
     Dashboard: todo vive dentro de .dashboard_indicadores (exclusivo de index).
   - Íconos: /iconos/ (la carpeta /icons/ choca con un alias de Apache).
   ========================================================================= */

/* ===== 1. MENÚ LATERAL (solo color; ancho, orden y apertura intactos) ===== */
#nav {
	background: var(--cv-menu-bg); /* sustituye el radial-gradient */
	border-right: 2px solid var(--cv-menu-bg);
}
#nav ul li ul {
	background-color: var(--cv-menu-sub);
}
#nav ul li > a:hover {
	background-color: var(--cv-menu-hover);
}
#nav ul li.activo {
	background: var(--cv-menu-bg);
}
#nav ul li.activo > a {
	background-color: var(--cv-menu-active);
}
#nav a:focus-visible {
	outline: 2px solid var(--cv-menu-focus);
	outline-offset: -2px;
}
#nav ul li.activo ul.drop li ul.drop > li a:hover {
	background-color: var(--cv-menu-hover);
	border-bottom: 0px;
	border-left: 2px solid #83902c;
	border-radius: 4px 4px;
	max-width: 100%;
	width: 90%;
}
#nav ul li.head > a:first-child::before {
	color: white;
	background-color: white;
}

/* Logo en círculo blanco centrado.
   <a> e <img> traen style="" inline (_estructura/menu.php:61-62):
   solo !important supera un estilo inline. Aplica igual al logo por sucursal. */
#nav > ul > a:first-child {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 116px !important;
	height: 116px !important;
	padding: 16px !important;
	margin: 24px auto 16px !important;
	border-radius: 50% !important;
	background-color: #ffffff !important;
	overflow: hidden;
}
#nav > ul > a:first-child img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 0 !important;
}

/* --- Menú · jerarquía de niveles ---
   Módulo (li.head > a) sin cambios.
   Grupo:  li.level2 > a   → tipo oración, negritas, aire arriba.
   Opción: ul.drop > li > a → gris claro, más sangría y línea guía a la izquierda.
   !important: style.css trae márgenes, rellenos, anchos y mayúsculas propios del menú
   que ganan sin él. Solo aplica dentro de #nav. */

/* Contenedores y renglones sin margen ni relleno propio */
#nav li.level2,
#nav li.head > ul.drop,
#nav li.level2 > ul.drop,
#nav li.level2 > ul.drop > li,
#nav li.head > ul.drop > li:not(.level2) {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	box-sizing: border-box;
}

/* Grupo: el texto empieza en --cv-menu-indent-1 */
#nav li.level2 > a {
	display: block !important; /* ::first-letter solo funciona en bloque */
	padding: 12px 16px 4px var(--cv-menu-indent-1) !important;
	font-family: "Muli-Bold", sans-serif;
	text-transform: lowercase !important;
}
#nav li.level2 > a::first-letter {
	text-transform: uppercase !important; /* "Control general", "Ordenes de venta" */
}

/* Línea guía: exactamente debajo del inicio del texto del grupo */
#nav li.level2 > ul.drop,
#nav li.head > ul.drop:not(:has(> li.level2)) {
	margin-left: var(--cv-menu-indent-1) !important;
	border-left: 1px solid var(--cv-menu-line);
}
#nav li.head > ul.drop:not(:has(> li.level2)) {
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

/* Opción: la caja empieza en la línea (el borde oliva del hover cae encima)
   y el texto a --cv-menu-indent-2 del borde del menú */
#nav li.level2 > ul.drop > li > a,
#nav li.head > ul.drop > li:not(.level2) > a {
	display: block;
	box-sizing: border-box;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 5px 12px 5px calc(var(--cv-menu-indent-2) - var(--cv-menu-indent-1)) !important;
	color: var(--cv-menu-text-sub);
	line-height: 1.35 !important;
	white-space: normal !important; /* opciones largas en dos renglones, alineados */
	overflow-wrap: break-word;
}

/* ===== 3. BASE COMPARTIDA (Dashboard y Agenda; Registrar venta retirado por fases) ===== */
html:is(
	:has(.dashboard_indicadores),
	:has(#pestanas a[href*="agenda-citas.sys?l=citas"])
),
body:is(
	:has(.dashboard_indicadores),
	:has(#pestanas a[href*="agenda-citas.sys?l=citas"])
) {
	background-color: var(--cv-bg);
}
body:is(
		:has(.dashboard_indicadores),
		:has(#pestanas a[href*="agenda-citas.sys?l=citas"])
	)
	section {
	color: var(--cv-text);
	font-size: var(--cv-fs-base);
}
body:is(
		:has(.dashboard_indicadores),
		:has(#pestanas a[href*="agenda-citas.sys?l=citas"])
	)
	section
	:is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--cv-primary);
	outline-offset: 2px;
}

/* ===== 4. DASHBOARD ===== */
a.indicador {
	display: inline-flex;
	align-items: center;
	justify-content: space-between; /* texto a la izq, contador a la der */
	gap: 8px;
	width: 100%; /* o el ancho que necesites */
	text-decoration: none;
}
a.indicador span {
	flex-shrink: 0; /* que no se encoja */
	margin-left: 5px; /* empuja a la derecha si no usas space-between */
	background: #415e3b;
	color: white !important;
	border-radius: 25%;
	min-width: 18px;
	height: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	padding: 0 4px;
}
h2.saludo_index {
	font-size: var(--cv-fs-screen);
	font-weight: 700;
	color: var(--cv-text);
}
small.mensaje_index {
	color: var(--cv-text-muted);
}
.dashboard_indicadores h3 {
	display: flex;
	align-items: start;
	justify-content: start; /* centra horizontalmente */
	gap: 8px; /* separación entre caja e ícono/texto */
}
/* La caja que envuelve el ícono */
.dashboard_indicadores h3 > .content_pulso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	/* background-color: #eaf3e3;
	padding: 6px 10px;
	border: 0px solid #dce0b8;
	color: #5a611a; */
}

/* El ícono dentro de la caja */
.dashboard_indicadores h3 > .content_pulso > .pulso_blue {
	width: var(--cv-ico-head);
	height: var(--cv-ico-head);
	display: block;
	margin: 0; /* sin margen extra, ya hay gap */
	flex-shrink: 0;
	background-color: var(--cv-primary-hover);
}
div.dashboard_indicadores div.duo_indicador a {
	padding: 0px 2px;
}
div.dashboard_indicadores
	div.duo_indicador
	a:first-of-type:not(.cv-titulo-enlace) {
	margin-top: 9px;
}
div.dashboard_indicadores div.duo_indicador a.link-fila {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	padding: 9px 2px;
	border-bottom: 1px solid #eef2f7;
	text-decoration: none;
}
div.dashboard_indicadores div.duo_indicador a.link-fila span {
	background: var(--cv-coral-soft);
	border-radius: 50%;
	min-width: 18px;
	height: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	padding: 0 4px;
	margin-left: auto;
}
div.dashboard_indicadores div.duo_indicador a.link-fila::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--cv-text-muted);
	border-bottom: 1px solid var(--cv-text-muted);
	transform: rotate(-45deg);
	margin-left: 8px;
	flex-shrink: 0;
}

/* Tarjetas blancas (Seguimiento, Calendario, Gráfica, Registros rápidos) */
div.dashboard_indicadores > div.duo_indicador:not(.greengradient) {
	background-color: var(--cv-surface);
	border-radius: var(--cv-radius-card);
	box-shadow: var(--cv-ring), var(--cv-shadow);
	/* width: calc(20% - 20px); */
}
div.dashboard_indicadores > div.duo_indicador h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--cv-fs-block);
	color: var(--cv-text);
}
div.dashboard_indicadores > div.duo_indicador h3 > .icono-titulo {
	display: inline-block;
	width: var(--cv-ico-head);
	height: var(--cv-ico-head);
	background-color: var(--cv-fin-title);
	-webkit-mask-image: var(--cv-i);
	mask-image: var(--cv-i);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
div.dashboard_indicadores
	> div.duo_indicador
	h3
	> .icono-titulo.cobranza_pagaduria {
	-webkit-mask-image: url("/iconos/money-group.svg");
	mask-image: url("/iconos/money-group.svg");
}
/* Íconos de encabezado de bloque (20 px) */
.dashboard_indicadores h3 > span .pulso_blue,
div.dashboard_indicadores > div.duo_indicador > h3::before,
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> h3.tit-verde::before {
	width: var(--cv-ico-head);
	height: var(--cv-ico-head);
}
.dashboard_indicadores h3 > span .pulso_blue {
	animation: none;
	border-radius: 0;
	box-shadow: none;
	--cv-i: url("/images/iconos-cultyvo/calendar.svg");
}
.dashboard_indicadores h3 > span .pulso_blue.control-tareas {
	--cv-i: url("/images/iconos-cultyvo/assignment.svg");
}

/* PARA CLASES DE CALENDARIO */
/* Contenedor de cada evento */
.duo_indicador a div.evento-card {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 0;
	border-bottom: 1px solid #e5e7eb;
}

/* Bloque de fecha */
.duo_indicador a .evento-card .evento-fecha {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	background-color: #edf5ff;
	border-radius: 10px;
	flex-shrink: 0;
	line-height: 1;
}

.duo_indicador a .evento-card .evento-dia {
	font-size: 1rem;
	font-weight: 700;
	color: #3975bc;
}

.duo_indicador a .evento-card .evento-mes {
	font-size: 0.5rem;
	font-weight: 600;
	color: #84afe3;
	letter-spacing: 0.5px;
}

/* Info central */
.duo_indicador a .evento-card .evento-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
	font-family: "Muli-Regular";
	padding: 0px 10px;
}

.duo_indicador a .evento-card .evento-info .evento-titulo {
	/* font-size: 0.95rem; */
	/* font-weight: 600; */
	color: #1f2937;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.duo_indicador a .evento-card .evento-info .evento-subtitulo {
	font-size: 0.82rem;
	color: #6b7280;
	text-align: left;
}

/* Badge de estado */
.duo_indicador a .evento-card .evento-estado {
	flex-shrink: 0;
	width: auto;
	padding: 0;
}

.duo_indicador a .evento-card .badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
}

.badge.badge-pendiente {
	background-color: #fde8c8;
	color: #b45309;
}

.badge.badge-confirmada {
	background-color: #d1fae5;
	color: #065f46;
}

.badge.badge-cancelada {
	background-color: #fee2e2;
	color: #991b1b;
}

/* Responsivo */
@media (max-width: 600px) {
	.duo_indicador a div.evento-card {
		gap: 10px;
		padding: 10px 0;
	}
	.duo_indicador a .evento-card .evento-fecha {
		width: 48px;
		height: 48px;
	}
	.duo_indicador a .evento-card .evento-dia {
		font-size: 1.1rem;
	}
	.duo_indicador a .evento-card .evento-info .evento-titulo {
		font-size: 0.9rem;
	}
	.duo_indicador a .evento-card .badge {
		font-size: 0.7rem;
		padding: 5px 10px;
	}
}

span.pulso_blue.grafica_ventas {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59"><title>pie chart</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="pie_chart" data-name="pie chart"><path d="M24.84,59a24.85,24.85,0,0,1,0-49.69,2.49,2.49,0,0,1,2.5,2.5V31.66H47.19a2.49,2.49,0,0,1,2.5,2.5A24.88,24.88,0,0,1,24.84,59Zm-2.5-44.53A19.84,19.84,0,1,0,44.53,36.66H24.84a2.5,2.5,0,0,1-2.5-2.5Z"/><path d="M56.5,27.34H34.16a2.49,2.49,0,0,1-2.5-2.5V2.5A2.49,2.49,0,0,1,34.16,0,24.88,24.88,0,0,1,59,24.84,2.49,2.49,0,0,1,56.5,27.34Zm-19.84-5H53.84A19.89,19.89,0,0,0,36.66,5.16Z"/></g></g></g></svg>');
}

span.pulso_blue.registros_rapidos {
	mask-image: url("/iconos/flash.svg");
}

/* --- Seguimiento: burbujas en columna a la derecha, antes de la flecha --- */
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cv-border);
	color: var(--cv-text);
	font-size: var(--cv-fs-base);
	font-family: "Muli-Regular";
}
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a:last-of-type {
	border-bottom: 0;
}
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a
	> .red {
	margin-left: auto;
	min-width: 28px; /* misma columna con 1, 2 o 3 dígitos */
	height: 22px;
	padding: 0 8px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cv-radius-pill);
	background-color: var(--cv-coral-soft);
	color: var(--cv-coral);
	font-size: 12px;
	font-weight: 700;
}
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--cv-text-muted);
	border-bottom: 1px solid var(--cv-text-muted);
	transform: rotate(-45deg);
	margin-left: 8px;
	flex-shrink: 0;
}
div.dashboard_indicadores
	> div.duo_indicador:has(> h3 > .pulso_blue)
	> a:not(:has(> .red))::after {
	margin-left: auto;
}

/* --- Seguimiento: hover ---
   El renglón gana aire a los lados con margen negativo + relleno igual:
   en reposo no se mueve nada; en hover el fondo sobresale un poco y el texto
   se recorre como en la propuesta. La barra es un box-shadow (no cambia medidas). */
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a {
	margin-inline: -8px;
	padding-inline: 8px;
	transition:
		background-color 0.15s,
		padding-left 0.15s;
}
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a:is(:hover, :focus-visible) {
	padding-left: 16px;
	background-color: var(--cv-soft) !important;
	box-shadow: inset 4px 0 0 var(--cv-primary);
	color: var(--cv-text) !important;
	font-family: "Muli-Bold", sans-serif !important;
	outline: none;
	border-radius: 4px var(--cv-radius-ctrl) var(--cv-radius-ctrl) 4px;
}
/* Flecha del renglón en hover: mismo verde que la barra */
div.dashboard_indicadores
	> div.duo_indicador:has(
		> h3 .pulso_blue:not(.calendario, .grafica_ventas, .registros_rapidos)
	)
	> a:is(:hover, :focus-visible)::after {
	border-color: var(--cv-primary);
	border-right-width: 2px;
	border-bottom-width: 2px;
}

/* Sin animación para quien la tiene desactivada en su sistema */
@media (prefers-reduced-motion: reduce) {
	div.dashboard_indicadores > div.duo_indicador > a {
		transition: none;
	}
}

/* --- Bloque financiero, opción A (fondo verde #24372E se mantiene) --- */
div.dashboard_indicadores > div.duo_indicador.greengradient {
	background: var(--cv-fin-bg);
	border-radius: var(--cv-radius-card);
	color: var(--cv-fin-text);
}
div.dashboard_indicadores > div.duo_indicador.greengradient > h3.tit-verde {
	color: var(--cv-fin-title);
	font-size: 16px;
	--cv-i: url("/images/iconos-cultyvo/money circle.svg");
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> h3.tit-verde
	~ h3.tit-verde {
	margin-top: 12px;
	border-top: 1px solid var(--cv-fin-line); /* separa Cobranza de Ventas e inventario */
	--cv-i: url("/images/iconos-cultyvo/reporte_grafica.svg");
}
div.dashboard_indicadores > div.duo_indicador.greengradient > a.indicador {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	color: var(--cv-fin-text);
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> a.indicador
	> b.monto_resaltado {
	order: 2; /* importe a la derecha */
	margin-left: auto;
	color: var(--cv-fin-text);
	font-size: 20px;
	font-weight: 700;
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> a.indicador
	> b.monto_resaltado
	span {
	color: inherit;
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> a.indicador
	> b.monto_resaltado.xPagar {
	color: var(--cv-fin-pagar);
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> a.indicador
	> .contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--cv-fin-text);
	font-size: 12px;
	font-weight: 700;
}

/* --- Bloque financiero: hover (Cobranza vs Pagaduría y Ventas vs Inventario) ---
   Va DESPUÉS de las reglas base del bloque (padding: 6px 0) para ganarles.
   El texto no se mueve: margen negativo + relleno igual; en hover solo aparecen
   el fondo y la barra, sobresaliendo a los lados.
   !important en fondo, color y tamaño: style.css trae su propio hover para
   los enlaces del dashboard (texto verde, letra chica, fondo transparente). */
div.dashboard_indicadores > div.duo_indicador.greengradient > a.indicador {
	margin-inline: -12px;
	padding: 8px 12px;
	border-radius: var(--cv-radius-ctrl);
	font-size: var(--cv-fs-base);
	transition: background-color 0.15s;
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> a.indicador:is(:hover, :focus-visible) {
	background-color: var(--cv-fin-hover) !important;
	box-shadow: inset 4px 0 0 var(--cv-fin-title);
	border-radius: 0 var(--cv-radius-ctrl) var(--cv-radius-ctrl) 0;
	color: var(--cv-fin-text) !important;
	font-size: var(--cv-fs-base) !important;
	font-family: "Muli-Bold";
	outline: none;
	border-radius: 4px var(--cv-radius-ctrl) var(--cv-radius-ctrl) 4px;
}
div.dashboard_indicadores
	> div.duo_indicador.greengradient
	> a.indicador:is(:hover, :focus-visible)
	> .contador {
	background-color: var(--cv-fin-accent-soft);
	color: var(--cv-fin-title);
}

/* --- Calendario General: fecha destacada --- */
div.dashboard_indicadores > div.indicador_dash.doble p > b {
	display: inline-block;
	margin-right: 4px;
	padding: 2px 8px;
	border-radius: 6px;
	background-color: var(--cv-soft);
	color: var(--cv-text);
	font-weight: 700;
}

/* --- Gráfica: solo ícono del título (datos intactos) --- */
/* div.dashboard_indicadores > div.duo_indicador:has(.grafico) > h3::before {
	--cv-i: url("/images/iconos-cultyvo/reporte_grafica.svg");
} */

/* --- Registros rápidos: orden intacto; Venta en oliva, resto verde suave --- */
div.dashboard_indicadores > div.duo_indicador:has(> a.boton) {
	row-gap: 6px;
}
div.dashboard_indicadores > div.duo_indicador:has(> a.boton) > a.boton {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: var(--cv-radius-ctrl);
	background-color: #f5f5f5;
	color: var(--cv-text) !important;
	box-shadow: var(--cv-ring);
	font-size: var(--cv-fs-base);
	font-weight: 500;
	text-align: left;
	position: relative; /* para la flecha ::after */
	text-decoration: none;
}
div.dashboard_indicadores > div.duo_indicador:has(> a.boton) > a.boton:hover {
	background-color: var(--cv-soft-hover);
}

div.dashboard_indicadores
	> div.duo_indicador:has(> a.boton)
	> a.boton[href*="registro_venta"] {
	background-color: var(--cv-primary);
	color: #ffffff !important;
	box-shadow: none;
}
div.duo_indicador a.boton::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--cv-text-muted);
	border-bottom: 1px solid var(--cv-text-muted);
	transform: rotate(-45deg);
	margin-left: 8px;
	flex-shrink: 0;
}

div.dashboard_indicadores
	> div.duo_indicador:has(> a.boton)
	> a.boton[href*="registro_venta"]::after {
	border-right: 1px solid var(--cv-soft-hover);
	border-bottom: 1px solid var(--cv-soft-hover);
}
div.dashboard_indicadores > div.duo_indicador:has(> a.boton) > a.boton::after {
	margin-left: auto;
}
div.dashboard_indicadores
	> div.duo_indicador:has(> a.boton)
	> a.boton[href*="registro_venta"]:hover {
	background-color: var(--cv-primary-hover);
}

a.boton.ico-venta span,
a.boton.ico-cotizacion span,
a.boton.ico-orden-venta span,
a.boton.ico-registro-cita span,
a.boton.ico-registro-cliente span {
	display: inline-block;
	width: var(--cv-ico-head);
	height: var(--cv-ico-head);
	background-color: var(--cv-text);
	-webkit-mask-image: var(--cv-i);
	mask-image: var(--cv-i);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
a.boton.ico-venta span {
	background-color: white;
}
@media (min-width: 1025px) {
	div.dashboard_indicadores > div.duo_indicador:not(.greengradient) {
		width: calc(25% - 20px);
	}
	/* Fila 1: llenar el ancho */
	div.dashboard_indicadores
		> div.duo_indicador:not(:has(.grafico), :has(> a.boton)) {
		flex-grow: 1;
	}
	/* Calendario crece el doble (selector más específico que el anterior) */
	div.dashboard_indicadores > div.indicador_dash.duo_indicador.doble {
		flex-grow: 2;
	}
	/* Fila 2: anchos del ESPERADO */
	div.dashboard_indicadores > div.duo_indicador:has(.grafico) {
		min-width: calc(40% - 20px);
	}
	div.dashboard_indicadores > div.duo_indicador:has(> a.boton) {
		min-width: calc(25% - 20px);
	}
}
/* ===== 4b. TABLAS Y REPORTES (todo el sistema: div.table de _clases/llamadas.php) ===== */
html:has(section div.table),
body:has(section div.table) {
	background-color: var(--cv-bg);
}
div.table {
	background-color: var(--cv-surface);
	border-radius: var(--cv-radius-card);
	box-shadow: var(--cv-ring), var(--cv-shadow);
}
/* Debajo de las pestañas, esquinas superiores rectas para que encajen */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel) ~ div.table {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
div.table > h4.table-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--cv-text);
}
div.table input.cultyvo-filter-search {
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-ctrl);
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7770' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 9px center;
	background-size: 16px;
}
/* style.css fija th { background-color:#fff !important }: background-image pinta encima.
   table.darkhead queda fuera: su encabezado oscuro es intencional. */
div.table table:not(.darkhead) thead th {
	background-image: linear-gradient(var(--cv-th-bg), var(--cv-th-bg));
	color: var(--cv-text);
	border-bottom: 1px solid var(--cv-border);
}
div.table table tbody td {
	border-bottom: 1px solid var(--cv-border);
	border-right-color: transparent;
}
/* Solo background-color: respeta td-yellow-claro / td-green-claro (!important)
   y los íconos de td.money, td.kg… (background-image) */
div.table table tbody tr:not(.red, .green):hover > td {
	background-color: var(--cv-row-hover);
}
/* Importes en totales (tfoot): un poco más grandes para destacarlos.
   Aplica a toda tabla del sistema, esté o no dentro de div.table.
   El ícono de pesos (.money) es background-image y se mantiene alineado. */
table tfoot td.money {
	font-size: var(--cv-fs-base); /* 14 px; las celdas del cuerpo miden 11 px */
	color: var(--cv-text);
	white-space: nowrap; /* evita que el importe se parta en dos renglones */
}
/* Botones dentro de la tabla: azul por defecto, .red coral, .green verde */
div.table td .boton-pequeno {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--cv-blue-soft-dark);
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-blue-soft);
	color: var(--cv-blue);
	font-size: 12px;
	font-weight: 600;
}
div.table td .boton-pequeno:hover {
	box-shadow: inset 0 0 0 1px currentColor;
}
div.table td .boton-pequeno:is(.red, .borrar_detalle) {
	background-color: var(--cv-coral-soft);
	color: var(--cv-coral);
}
div.table td .boton-pequeno:is(.red) {
	border: 1px solid var(--cv-coral-soft-dark);
}
div.table td .boton-pequeno.green {
	background-color: var(--cv-soft);
	color: var(--cv-primary);
	border: 1px solid var(--cv-soft-dark);
}

/* Exportar a CSV */
div.table a.cvs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-bg);
	color: var(--cv-text-muted) !important;
	box-shadow: var(--cv-ring);
	font-family: "Muli-Bold";
	--cv-i: url("/iconos/download.svg");
	--cv-ico-display: block;
}
div.table a.cvs:hover {
	background-color: var(--cv-surface);
}
/* --- Íconos opcionales en botones de tabla ---
   Apagado por defecto. Un botón muestra ícono solo si una regla le define
   --cv-i (archivo) y --cv-ico-display. Toma el color del texto (currentColor). */
div.table td .boton-pequeno::before,
div.table a.cvs::before,
div.table > p.info a.boton::before,
section .hc-accion::before,
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.contenedor_productos_estrella
	.boton_estrella::before,
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button:is(.btnCobrarVenta, .btnCerrarVenta, .btnCerrarVentaTcobro)::before {
	content: "";
	display: var(--cv-ico-display, none);
	order: var(--cv-ico-order, 0); /* 0 = antes del texto, 1 = después */
	flex-shrink: 0;
	width: var(--cv-ico-table);
	height: var(--cv-ico-table);
	background-color: currentColor;
	-webkit-mask: var(--cv-i) center / contain no-repeat;
	mask: var(--cv-i) center / contain no-repeat;
}
/* Botones de acción del reporte (Registrar…, Seleccionar todo, Cerrar) */
div.table > p.info a.boton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Ícono después del texto: agregar también la clase cvi-despues */
div.table td .boton-pequeno.cvi-despues {
	--cv-ico-order: 1;
}

/* Catálogo de íconos (forma A: por clase en el PHP) */
.cvi-trash {
	--cv-i: url("/iconos/basura.svg");
	--cv-ico-display: block;
}
.cvi-trash.red {
	background-color: var(--cv-coral-soft);
	color: var(--cv-coral);
}
.cvi-refresh {
	--cv-i: url("/iconos/refresh.svg");
	--cv-ico-display: block;
}
.cvi-atender {
	--cv-i: url("/iconos/account.svg");
	--cv-ico-display: block;
}
.cvi-money {
	--cv-i: url("/iconos/money.svg");
	--cv-ico-display: block;
}
.cvi-money.green {
	background-color: var(--cv-soft-dark);
	color: var(--cv-soft);
}
.cvi-form {
	--cv-i: url("/iconos/form.svg");
	--cv-ico-display: block;
}
.cvi-doc {
	--cv-i: url("/iconos/document.svg");
	--cv-ico-display: block;
}
.cvi-upload {
	--cv-i: url("/iconos/upload.svg");
	--cv-ico-display: block;
}
.cvi-agregar {
	--cv-i: url("/iconos/add_circle.svg");
	--cv-ico-display: block;
}
.cvi-check {
	--cv-i: url("/iconos/check_circle.svg");
	--cv-ico-display: block;
}
.cvi-edit {
	--cv-i: url("/iconos/edit.svg");
	--cv-ico-display: block;
}
.cvi-ver {
	--cv-i: url("/iconos/visibility.svg");
	--cv-ico-display: block;
}

/* --- Tarjeta única: div.table dentro de otro bloque ---
   En formularios (cuentas por cobrar/pagar, etc.) la tabla es div.table.bloqueform
   dentro de un .bloqueform: style.css le pinta #F5F7FF (bloque anidado) y el 4b
   le pone su propia tarjeta → doble recuadro. Aquí la tabla se integra al bloque. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform
	div.table {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
/* El buscador sube -35px (style.css) para alinearse con h4.table-title.
   En tablas dentro de un bloque de formulario ese título está vacío
   (el título real es el del bloque), así que aquí no se sube. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform
	div.table
	> .cultyvo-filter {
	margin-top: 0;
}
/* Exportar a CSV dentro de formularios.
   style.css (línea 4783) trata todo "form a.boton.table" como el botón miniatura de
   "agregar": absoluto, 30×30 px, opacity .3 e ícono add.png. El CSV comparte esas clases
   (a.cvs.boton.table.small) y dentro de formularios desaparecía.
   Se restablece solo el CSV; los botones "agregar" reales no cambian. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.table
	a.cvs.boton.table {
	position: static;
	display: flex;
	width: 100%;
	height: auto;
	overflow: visible;
	opacity: 1;
	z-index: auto;
	background-image: none;
	background-color: var(--cv-bg);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.table
	a.cvs.boton.table:hover {
	background-color: var(--cv-surface);
}
/* --- Bloque de formulario con tabla: buscador en la fila del título ---
   Solo bloques fijos (no .moreless) cuya tabla es div.table.bloqueform
   (Pendientes en cuentas por cobrar/pagar). TIMBRAR y COBRADAS no entran. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless):has(> div.table.bloqueform) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 12px;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless):has(> div.table.bloqueform)
	> h4 {
	flex: 1 1 auto;
	margin: 0;
	padding-left: 0;
}
/* La caja de la tabla no participa en el acomodo; sus hijos sí (el DOM no cambia) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless)
	> div.table.bloqueform {
	display: contents;
}
/* Título vacío de la tabla (trae solo un espacio) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless)
	> div.table.bloqueform
	> h4.table-title {
	display: none;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless)
	> div.table.bloqueform
	> .cultyvo-filter {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless)
	> div.table.bloqueform
	> .container_table {
	flex: 0 0 100%;
	min-width: 0;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.moreless)
	> div.table.bloqueform
	ul.cultyvo-paginacion {
	margin-bottom: 0;
}
/* Identificación: h3 (cliente) y p (con RS) como una caja gris de dos columnas.
   !important: style.css fija tamaño/espaciado del h3 y el color de .green/.gray. */
form#cuentaspor > h3:has(> small),
form#cuentaspor > h3:has(> small) + p {
	display: inline-flex !important;
	flex-direction: column;
	justify-content: center;
	vertical-align: top;
	width: 50%;
	height: 64px;
	box-sizing: border-box;
	position: static !important;
	margin: 0 0 16px !important; /* el p trae margin-top:-10px inline */
	padding: 0 16px !important;
	background-color: var(--cv-th-bg);
	font-family: "Muli", sans-serif;
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: normal;
	color: var(--cv-text-muted) !important;
}
form#cuentaspor > h3:has(> small) {
	border-radius: var(--cv-radius-ctrl) 0 0 var(--cv-radius-ctrl);
}
form#cuentaspor > h3:has(> small) + p {
	border-left: 1px solid var(--cv-border);
	border-radius: 0 var(--cv-radius-ctrl) var(--cv-radius-ctrl) 0;
}
/* Etiqueta: chica y tenue */
form#cuentaspor > h3:has(> small) > small {
	font-size: 12px !important;
	font-family: "Muli", sans-serif !important;
	color: var(--cv-text-muted) !important;
	text-transform: capitalize !important;
}
/* Nombre: más grande, negro y en negritas */
form#cuentaspor > h3:has(> small) > span.green,
form#cuentaspor > h3:has(> small) + p > span.gray {
	margin-top: 2px;
	font-family: "Muli-Bold", sans-serif !important;
	font-size: 15px !important;
	text-transform: uppercase;
	color: var(--cv-text) !important;
}

/* Acciones: botones secundarios neutros (style.css pone texto blanco con !important) */
form#cuentaspor > a.boton {
	background-color: var(--cv-surface) !important;
	box-shadow: var(--cv-ring);
	color: var(--cv-text) !important;
	font-family: "Muli-Bold";
	border: 1px solid var(--cv-border);
}
form#cuentaspor > a.boton:hover {
	background-color: var(--cv-bg) !important;
}

@media (max-width: 767px) {
	form#cuentaspor > h3:has(> small),
	form#cuentaspor > h3:has(> small) + p {
		width: 100%;
		border-radius: var(--cv-radius-ctrl);
		border-left: 0;
	}
	form#cuentaspor > h3:has(> small) {
		margin-bottom: 4px !important;
	}
}
/* ===== 5. PESTAÑAS (todo el sistema, los 3 niveles) ===== */
/* :not(.boton) excluye la burbuja del contador (a.boton.indicadorpestania) */
a.boton[data-count]::after,
div#basicstyle a.boton.table::after {
	right: 0px;
}
/* Debajo de pestañas reales (con al menos un elemento), esquinas superiores rectas */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel):has(li)
	~ div.table {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* Separación entre tarjetas de tabla consecutivas */
div.table ~ div.table {
	margin-top: 16px;
}
/* --- Pestañas · comparativa autorizada ---
   Una línea gris por nivel; activa: negrita y tramo oliva, sin fondo.
   Hover: solo el tramo oliva. Mismo tamaño y relleno en los 3 niveles.
   La línea va en el <li> para abarcar también el contador. */

/* Solo niveles existentes: un nav sin pestañas no se muestra */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel):not(:has(li)) {
	display: none;
}
/* Línea gris del nivel */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel) > ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 8px;
	border-bottom: 2px solid transparent;
}
/* Cada pestaña: el tramo de color va en el li y cubre la línea gris */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel) > ul > li {
	display: flex;
	align-items: center;
	margin: 0 0 -1px;
	border-bottom: 2px solid transparent;
}
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel)
	> ul
	> li:is(:hover, .activo) {
	border-bottom-color: var(--cv-primary);
}
/* Texto: igual en los 3 niveles (style.css usa 10–15 px y rellenos distintos).
   El relleno inferior de 10 px empata con el padding-bottom:10px !important
   que style.css pone en hover y activa: así nada cambia de altura. */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel)
	li
	> a:not(.boton) {
	float: none;
	padding: 10px 14px;
	font-family: "Muli-Regular", sans-serif;
	font-size: 13px;
	text-transform: none;
	color: var(--cv-text-muted);
	background: transparent;
	border: 0;
	border-radius: 0;
}
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel)
	li:hover
	> a:not(.boton) {
	color: var(--cv-text);
}
/* Activa: negrita negra, sin fondo */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel)
	li.activo
	> a:not(.boton) {
	font-family: "Muli-Bold", sans-serif;
	color: var(--cv-text);
}

/* Contador en línea, a la derecha del texto.
   Relleno simétrico arriba/abajo: style.css fuerza padding-bottom:10px !important
   en la pestaña activa y en hover; así la burbuja queda centrada igual. */
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel)
	li
	> a.boton.indicadorpestania {
	position: static;
	display: inline-flex;
	align-items: center;
	padding: 0px !important;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel)
	li
	> a.boton.indicadorpestania[data-count]::after {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	box-sizing: border-box;
	border-radius: rgb(237 93 76);
	background-color: rgb(237 93 76);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* --- Paginación del buscador: 25 / 100 / Mostrar todos --- */
.cultyvo-filter-button {
	height: 32px;
	padding: 0 12px;
	margin-left: 8px;
	vertical-align: middle;
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-surface);
	box-shadow: var(--cv-ring); /* borde que no altera medidas */
	color: var(--cv-text);
	font-size: var(--cv-fs-base);
}
/* No seleccionados (25 / 100 / Mostrar todos): neutros */
div.table .cultyvo-filter-button:not(.active) {
	background-color: var(--cv-surface);
	box-shadow: var(--cv-ring);
	color: var(--cv-text);
}
div.table .cultyvo-filter-button:not(.active):hover {
	background-color: var(--cv-bg);
}
div.table .cultyvo-filter-button[rel="9999999"] {
	font-family: "Muli-Bold", sans-serif;
}
/* Seleccionado: gris oscuro */
div.table .cultyvo-filter-button.active {
	background-color: var(--cv-slate);
	box-shadow: none;
	color: #ffffff;
}

/* ===== 6. FORMULARIOS (todo el sistema) — Fase 1: base =====
   Contenedores de style.css: form.basico, div.form.basico, div#basicstyle, div.smallinput.
   Solo colores, bordes y radios: anchos, floats y orden intactos.
   Excluidos: label.green/.blue/.red/.highlight (color propio) y div.pagos_tienda (captura de cobro).
   .valError (borde naranja con !important) sigue ganando: la validación se conserva. */

/* Fondo de página */
html:has(
	section :is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
),
body:has(
	section :is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
) {
	background-color: var(--cv-bg);
}

/* Bloques */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput) .bloqueform {
	border-color: var(--cv-border);
	border-radius: var(--cv-radius-card);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform.w50.captura_producto.section_cobro {
	margin-right: 1rem;
}
/* Sombra solo en el bloque exterior, no en bloques anidados */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform:not(.bloqueform .bloqueform) {
	box-shadow: var(--cv-shadow);
}
/* Títulos: cualquier h4 del bloque (en Nuevo cliente algunos están dentro de .divOcultar) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform
	h4 {
	font-size: var(--cv-fs-block);
	color: var(--cv-text);
}
/* Botón −/+ del bloque: círculo verde suave (el ícono PNG se conserva) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform.moreless
	> .abrircerrar {
	width: 28px;
	height: 28px;
	top: 8px;
	border-radius: 50%;
	background-color: var(--cv-bg);
	background-size: 12px;
}
/* Todos los títulos del bloque con −/+ alineados, dejando espacio al círculo */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.bloqueform.moreless
	h4 {
	margin-left: 40px;
}

/* Etiquetas: la de cada campo y la de cada grupo de radios ("Tipo", "Sexo", "COBRO"…) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.container_inputs:not(.pagos_tienda *)
	> label:not(.green, .blue, .red, .highlight),
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	label:has(+ div.radiobox):not(.green, .blue, .red, .highlight) {
	background-color: var(--cv-label-bg);
	border-color: var(--cv-border);
	border-radius: var(--cv-radius-ctrl) 0 0 var(--cv-radius-ctrl);
}

/* Campos (incluye los buscadores con autocompletar) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.container_inputs:not(.pagos_tienda *)
	> :is(input, select, textarea):not(
		[type="radio"],
		[type="checkbox"],
		[type="hidden"]
	),
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.container_inputs:not(.pagos_tienda *)
	> .awesomplete
	> input {
	border-color: var(--cv-border);
	border-radius: 0 var(--cv-radius-ctrl) var(--cv-radius-ctrl) 0;
}

/* Hover y foco: oliva aprobado (style.css usaba #83902c) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.container_inputs:not(.pagos_tienda *)
	:is(input, select, textarea):is(:hover, :focus),
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.container_inputs:not(.pagos_tienda *):has(
		:is(input, select, textarea):is(:hover, :focus)
	)
	> label:not(.green, .blue, .red, .highlight) {
	border-color: var(--cv-primary);
}

/* --- Crear tarea/evento: fecha y hora en el mismo renglón ---
   Cada fecha (label + input.picker__input) y su hora (input[type=time] solo)
   vienen en contenedores separados: se ponen lado a lado. */
form#nevento .container_inputs:has(> input.picker__input),
form#nevento .container_inputs:has(> input[type="time"]) {
	float: left;
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
}
/* Fecha: todo el ancho menos la hora */
form#nevento .container_inputs:has(> input.picker__input) {
	width: calc(100% - 158px);
}
form#nevento
	.container_inputs:has(> input.picker__input)
	> input.picker__input {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}
/* Hora: ancho fijo suficiente para "12:00 p. m." y el reloj */
form#nevento .container_inputs:has(> input[type="time"]) {
	width: 150px;
	margin-left: 8px;
}
form#nevento .container_inputs:has(> input[type="time"]) > input[type="time"] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	border-radius: var(
		--cv-radius-ctrl
	); /* sin etiqueta a la izquierda: esquinas completas */
}
/* Lo que sigue (Descripción) empieza en renglón nuevo */
form#nevento .container_inputs.text_areas {
	clear: both;
}

/* Celular: la hora baja debajo de su fecha, a todo lo ancho */
@media (max-width: 480px) {
	form#nevento .container_inputs:has(> input.picker__input),
	form#nevento .container_inputs:has(> input[type="time"]) {
		float: none;
		width: 100%;
		margin-left: 0;
	}
}

/* --- Fase 1b: campos alineados al borde del bloque (≥481 px) ---
   style.css: etiqueta 25 % + campo 69 % (input content-box, select border-box)
   → ningún campo llegaba al borde. Ahora todo border-box y suma 100 %.
   duo = media fila (etiqueta 25 % + campo 25 %): 2 por línea.
   Fuera de alcance: filtros (sección 9), cobro (pagos_tienda), compras (#entrada, #tcompra, #folios), .left-help.
   Celular (≤480) lo apila style.css. */
@media (min-width: 481px) {
	/* 1. Campo normal: etiqueta 25 % + campo 75 % */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> :is(
			input:not([type="radio"], [type="checkbox"], [type="hidden"]),
			select,
			textarea,
			.awesomplete
		):not(.sinlabel, .right-side, .duo, .cuatrocinco, .masuno) {
		box-sizing: border-box;
		width: 75%;
	}
	/* 2. half y cincocinco (input o select): sin el margen que los acortaba */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> :is(input, select):is(.half, .cincocinco):not(.right-side) {
		margin-right: 0;
	}
	/* 3. Alturas de siempre, contando relleno y borde */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> :is(
			input:not([type="radio"], [type="checkbox"], [type="hidden"]),
			select
		) {
		height: 39px;
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> textarea {
		height: 112px;
	}
	/* 4. Buscador (awesomplete): la caja ocupa el ancho y su input la llena */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> .awesomplete {
		float: left;
		margin: 2px 0;
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> .awesomplete
		> input {
		box-sizing: border-box;
		width: 100%;
		height: 39px;
		margin: 0;
	}
	/* 5. "+" del framework (va dentro de la etiqueta): deja 40 px y lo pone al borde */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		):has(> label > a.added)
		> :is(input, select, .awesomplete) {
		width: calc(75% - 40px);
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs
		> label
		> a.added {
		right: auto;
		left: calc(
			400% - 32px
		); /* la etiqueta mide 25 % de la fila: 400 % = ancho de la fila */
	}
	/* 6. duo = media fila: 25 % + 25 % (8 px entre mitades)
	      !important: le gana al style="width:18%" que algunos formularios escriben en línea */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> :is(input, select).duo {
		box-sizing: border-box;
		width: calc(25% - 8px) !important;
		margin-right: 8px;
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> label.lduo {
		width: 25%;
		margin-left: 0; /* anula los -2px (.r) y 10px (.r2f) de style.css */
	}
	/* 7. Etiqueta duo/lduo cuyo campo NO es duo (Categoría, DEPTO): fila normal */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		):not(:has(> .duo:not(label)))
		> label:is(.duo, .lduo) {
		width: 25%;
		margin-left: 0;
		clear: left;
	}
	/* 8. Radios y casillas con ancho en línea: sin margen extra (evita que la última baje) */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		div.radiobox[style*="width"] {
		margin-right: 0;
	}
	/* 9. Campo con "+" a un costado (el formulario escribe el "+" con estilo en línea:
	      float:right; margin-right:90px !important).
	      - Campo normal: deja 44 px al final.
	      - Buscador (awesomplete): se acorta el input, no la caja, para que la lista
	        de sugerencias conserve el ancho completo.
	      - El "+" se desplaza 90 px al borde con transform (el estilo en línea no lo declara).
	      Acepta que entre el campo y el "+" haya un hidden o el <span> de validación.
	      PARCHE: depende del estilo en línea; la corrección real es en el PHP o el framework. */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		):is(
			:has(+ a.botones-1.agregar),
			:has(+ input[type="hidden"] + a.botones-1.agregar),
			:has(+ span + input[type="hidden"] + a.botones-1.agregar),
			:has(+ input[type="hidden"] + span + a.botones-1.agregar)
		)
		> :is(input, select) {
		width: calc(75% - 44px);
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		):is(
			:has(+ a.botones-1.agregar),
			:has(+ input[type="hidden"] + a.botones-1.agregar),
			:has(+ span + input[type="hidden"] + a.botones-1.agregar),
			:has(+ input[type="hidden"] + span + a.botones-1.agregar)
		)
		> .awesomplete
		> input {
		width: calc(100% - 44px);
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		a.botones-1.agregar:is(
			[style*="margin-right: 90px"],
			[style*="margin-right:90px"]
		) {
		transform: translateX(90px);
	}
}
/* --- Fase 1b · excepciones ---
   Algunos campos traían su altura calculada con content-box (altura + relleno + borde).
   Con border-box quedaban más chicos que su etiqueta. */
@media (min-width: 481px) {
	/* TOTAL de la venta: 46 px, igual que su etiqueta (Fase 4) */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.section_totales
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		> input.total {
		height: 46px;
	}

	/* Buscador de productos en venta: etiqueta y campo de la misma altura.
	   Se identifica por su texto de ayuda ("CTRL + B"); ver nota abajo. */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		):has(input[placeholder*="CTRL + B"])
		> label,
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.container_inputs:not(
			.pagos_tienda *,
			#entrada *,
			#tcompra *,
			#folios *,
			.left-help *
		)
		input[placeholder*="CTRL + B"] {
		height: 42px;
	}

	/* Dos columnas dentro de un bloque: 50 % cada una, 24 px de separación al centro */
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.bloqueform
		> .w50:not(.bloqueform):has(+ .w50:not(.bloqueform)) {
		box-sizing: border-box;
		width: 50%;
		padding-right: 12px;
	}
	:is(form.basico, div.form.basico, div#basicstyle):not(.filtros_)
		.bloqueform
		> .w50:not(.bloqueform)
		+ .w50:not(.bloqueform) {
		box-sizing: border-box;
		width: 50%;
		padding-left: 12px;
	}
}
/* --- Fase 2: radios (div.radiobox > label.radio) ---
   Solo colores, borde y círculo. Anchos y orden intactos. */

/* Ancho según el texto, nunca menor al 25 % de antes.
   El float hace que width:auto tome el ancho del contenido. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:not(.cards, .iva) {
	min-width: 22%;
	width: auto;
	margin-right: 5px;
}

/* No seleccionado: blanco con borde gris y texto oscuro */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox
	> label.radio {
	background-color: var(--cv-surface);
	color: var(--cv-text) !important;
	border: none;
	border-radius: var(--cv-radius-ctrl);
	box-shadow: inset 0 0 0 1px var(--cv-border); /* borde que no cambia la medida */
	font-family: "Muli-Bold";
}
/* Círculo vacío */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox
	> label.radio
	span {
	border-color: var(--cv-text-muted);
	box-shadow: none;
}
/* Hover (solo opciones disponibles y no seleccionadas) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:not(.activo)
	> label.radio:not(.disabled):hover {
	background-color: var(--cv-bg);
}

/* Seleccionado: azul con texto blanco */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox.activo
	> label.radio {
	background-color: var(--cv-blue);
	color: #ffffff !important;
	box-shadow: none;
}
/* Círculo seleccionado: anillo blanco, separación azul y punto blanco (sin palomita) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox.activo
	> label.radio
	span {
	background-image: none;
	background-color: #ffffff;
	border: 2px solid #ffffff;
	box-shadow: inset 0 0 0 3px var(--cv-blue);
}

/* Deshabilitado: mismo blanco, texto atenuado */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:not(.activo)
	> label.radio.disabled {
	color: var(--cv-text-muted);
	cursor: not-allowed;
}
/* Foco con teclado: el div.radiobox tiene tabindex */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:focus-visible {
	outline: none;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:focus-visible
	> label.radio {
	box-shadow: 0 0 0 2px var(--cv-primary);
}
/* --- Casillas de confirmación (div.radiobox > label.checkbox) ---
   "Enviar invitación al tutor", "Estoy seguro…", etc. Mismo aspecto que un campo:
   la casilla es una opción, no una acción (el oliva relleno es de los botones).
   !important en fondo y color: la franja verde con texto blanco viene de style.css. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox
	> label.checkbox {
	background-color: var(--cv-surface) !important;
	color: var(--cv-text) !important;
	border: none;
	border-radius: var(--cv-radius-ctrl);
	box-shadow: inset 0 0 0 1px var(--cv-border); /* borde que no cambia la medida */
	cursor: pointer;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox
	> label.checkbox:hover {
	box-shadow: inset 0 0 0 1px var(--cv-primary);
}
/* Cuadrito vacío */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox
	> label.checkbox
	> span {
	background-color: var(--cv-surface);
	border: 1px solid var(--cv-text-muted);
	border-radius: 4px;
	box-sizing: border-box;
}
/* Marcada: fondo verde suave, borde oliva y palomita oliva */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:has(input[type="checkbox"]:checked)
	> label.checkbox {
	background-color: var(--cv-soft) !important;
	box-shadow: inset 0 0 0 1px var(--cv-primary);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:has(input[type="checkbox"]:checked)
	> label.checkbox
	> span {
	border-color: var(--cv-primary);
	background-color: var(--cv-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
}
/* Foco con teclado (el div.radiobox tiene tabindex) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	div.radiobox:focus-visible
	> label.checkbox {
	box-shadow: 0 0 0 2px var(--cv-primary);
}

/* --- Fase 3: tablas dentro de formularios (table.form) ---
   Productos de la venta, contactos del cliente, etc. Anchos y columnas intactos. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput) table.form {
	border-radius: var(--cv-radius-ctrl);
	box-shadow: var(--cv-ring); /* contorno que no altera medidas */
}
/* Encabezado: style.css fija th { background-color:#fff !important; borde azul }.
   Un background-image de un solo color pinta encima sin !important. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	table.form
	thead
	th {
	background-image: linear-gradient(var(--cv-th-bg), var(--cv-th-bg));
	color: var(--cv-text-muted);
	border-bottom-color: var(--cv-border);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	table.form
	thead
	th:first-child {
	border-top-left-radius: var(--cv-radius-ctrl);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	table.form
	thead
	th:last-child {
	border-top-right-radius: var(--cv-radius-ctrl);
}
/* Línea suave entre filas (antes: borde blanco invisible) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	table.form
	tbody
	td {
	border-bottom: 1px solid var(--cv-border);
}

/* --- Fase 4: botones de formulario y total --- */
/* Productos estrella ("Revisión"…): botón secundario neutro. Ancho y orden intactos. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.contenedor_productos_estrella
	.boton_estrella {
	background-color: var(--cv-surface);
	border-color: transparent;
	border-radius: var(--cv-radius-ctrl);
	box-shadow: var(--cv-ring);
	color: var(--cv-text);
	font-weight: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.contenedor_productos_estrella
	.boton_estrella:hover {
	background-color: var(--cv-bg);
}

/* Botón "+" (antes sprite PNG): círculo oliva con + en CSS.
   Grid centra las dos barras sin cambiar la posición del enlace. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	a.botones-1.agregar {
	display: grid;
	place-items: center;
	background-image: none;
	background-color: var(--cv-primary);
	border-radius: 50%;
	opacity: 1;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	a.botones-1.agregar:hover {
	background-color: var(--cv-primary-hover);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	a.botones-1.agregar::before,
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	a.botones-1.agregar::after {
	content: "";
	grid-area: 1 / 1; /* las dos barras en la misma celda, cruzadas */
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background-color: #ffffff;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	a.botones-1.agregar::after {
	width: 2px;
	height: 14px;
}

/* Botones de cobro */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button:is(.btnCobrarVenta, .btnCerrarVenta) {
	background-color: var(--cv-primary);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button:is(.btnCobrarVenta, .btnCerrarVenta):hover {
	background-color: var(--cv-primary-hover);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button.btnRegresarVenta {
	background-color: var(--cv-coral);
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button.btnRegresarVenta:hover {
	filter: brightness(0.92);
}
/* Guardar pendiente: el JS escribe el gris rgb(161,161,161) en el style="" mientras
   COBRO/Acción no lo habilitan. Ese estado se respeta: solo se pinta sin el gris. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button.btnCerrarVentaTcobro:not([style*="161, 161, 161"]) {
	background-color: var(--cv-primary);
}
/* Ícono + texto + tecla en una línea, centrados (el ancho de cada botón no cambia) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button:is(.btnCobrarVenta, .btnCerrarVenta, .btnCerrarVentaTcobro) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	--cv-ico: 20px; /* encabezado/botón grande: 20–24 px según la NOTA */
}
/* Ícono de documento en Guardar pendiente y Cerrar venta */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button:is(.btnCerrarVenta, .btnCerrarVentaTcobro) {
	--cv-i: url("/iconos/document.svg");
	--cv-ico-display: block;
}

/* Teclas (F12, CTRL+ENTER): contorno claro sobre el botón */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	button
	.keycap {
	height: auto;
	min-height: 0;
	padding: 1px 6px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-size: 12px;
}

/* TOTAL destacado (subtotal, descuento e IVA sin cambios) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.section_totales
	.container_inputs:has(> input.total)
	> :is(label, input.total) {
	background-color: var(--cv-th-bg);
	border-color: var(--cv-border);
	color: var(--cv-text);
	-webkit-text-fill-color: var(
		--cv-text
	); /* evita el gris del campo deshabilitado */
	opacity: 1;
	font-weight: 700;
}
/* TOTAL: tipografía destacada.
   !important solo en el tamaño: el <style> de ventas fija input.total {25px !important}.
   clamp(): 30 px en escritorio, baja sola hasta 22 px en celular. */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.section_totales
	.container_inputs:has(> input.total)
	> :is(label, input.total) {
	height: 46px; /* evita que el número grande se recorte (antes 39 px) */
	font-family: "Muli-Bold", "Muli-Regular", sans-serif;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.section_totales
	.container_inputs:has(> input.total)
	> label {
	font-size: 15px;
	line-height: 36px;
}
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.section_totales
	.container_inputs:has(> input.total)
	> input.total {
	font-size: clamp(22px, 2.2vw + 10px, 30px) !important;
	height: 34px;
}

/* --- Fase 5: encabezados de pantalla ---
   Jerarquía: título 26 px > cliente/proveedor 20 px > razón social 13 px. */

/* Título de pantalla (todos los formularios) */
:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
	.frow-titulo
	h3.fnombre {
	font-family: "Muli-Black";
	font-size: var(--cv-fs-screen);
	line-height: 1.3;
	color: var(--cv-text);
	margin: 0px 0px 10px 0px;
}

/* Cuentas por cobrar / pagar: h3 (cliente) y p (con RS) como una caja gris
   de dos columnas. Textos sin cambio.
   !important: style.css fija tamaño/espaciado del h3 y el color de .green/.gray. */
form#cuentaspor > h3:has(> small),
form#cuentaspor > h3:has(> small) + p {
	display: inline-flex !important;
	flex-direction: column;
	justify-content: center;
	vertical-align: top;
	width: 50%;
	height: 64px;
	box-sizing: border-box;
	position: static !important;
	margin: 0 0 16px !important; /* el p trae margin-top:-10px inline */
	padding: 0 16px !important;
	background-color: var(--cv-th-bg);
	font-family: "Muli", sans-serif;
	font-size: 12px !important;
	line-height: 1.3 !important;
	font-weight: normal;
	color: var(--cv-text-muted) !important;
}
form#cuentaspor > h3:has(> small) {
	border-radius: var(--cv-radius-ctrl) 0 0 var(--cv-radius-ctrl);
}
form#cuentaspor > h3:has(> small) + p {
	border-left: 1px solid var(--cv-border);
	border-radius: 0 var(--cv-radius-ctrl) var(--cv-radius-ctrl) 0;
}
/* Etiqueta: chica y tenue */
form#cuentaspor > h3:has(> small) > small {
	font-size: 12px !important;
	font-family: "Muli", sans-serif !important;
	color: var(--cv-text-muted) !important;
	text-transform: capitalize !important;
}
/* Nombre: más grande, negro y en negritas */
form#cuentaspor > h3:has(> small) > span.green,
form#cuentaspor > h3:has(> small) + p > span.gray {
	margin-top: 2px;
	font-family: "Muli-Bold", sans-serif !important;
	font-size: 15px !important;
	text-transform: uppercase;
	color: var(--cv-text) !important;
}
/* Acciones: botones secundarios neutros (style.css pone texto blanco con !important) */
form#cuentaspor > a.boton {
	background-color: var(--cv-surface) !important;
	box-shadow: var(--cv-ring);
	color: var(--cv-text) !important;
}
form#cuentaspor > a.boton:hover {
	background-color: var(--cv-bg) !important;
}
/* Razón social */
form#cuentaspor > h3:not(.fnombre) + p {
	font-size: 13px;
	color: var(--cv-text-muted);
	/* margin: 10px 0px !important; */
}

/* Móvil: style.css baja todos los h3 a 21 px; se conserva la jerarquía */
@media (max-width: 480px) {
	:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
		.frow-titulo
		h3.fnombre {
		font-size: 20px;
	}
}
@media (max-width: 767px) {
	form#cuentaspor > h3:has(> small),
	form#cuentaspor > h3:has(> small) + p {
		width: 100%;
		height: auto;
		padding: 10px 16px !important;
		border-radius: var(--cv-radius-ctrl);
		border-left: 0;
	}
	form#cuentaspor > h3:has(> small) {
		margin-bottom: 4px !important;
	}
}

/* ===== 7. ANCHOS MENORES (escritorio sin cambios) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
	div.dashboard_indicadores > div.duo_indicador.column {
		width: calc(50% - 20px);
	}
	/* .doble trae width con !important en style.css: min-width le gana */
	div.dashboard_indicadores > div.duo_indicador.column.doble {
		min-width: calc(100% - 20px);
	}
	div.table {
		overflow-x: auto;
	}
}
/* ===== 8. HISTORIA CLÍNICA (encabezado armado por el script de la página) ===== */
section h3.hc-titulo {
	margin: 0 0 12px;
	font-family: "Muli-Black", "Muli-Bold", sans-serif;
	font-size: var(--cv-fs-screen);
	line-height: 1.3;
	color: var(--cv-text);
}
section div.topinfo.hc-fichas {
	display: grid;
	grid-template-columns: 1.15fr 1fr 0.8fr 1.15fr; /* paciente, tutor, antecedentes, indicadores */
	gap: 16px;
	margin-bottom: 16px;
	background: transparent;
	align-items: stretch;
}
section .hc-card {
	padding: 20px 24px;
	border-radius: var(--cv-radius-card);
	background-color: var(--cv-surface);
	box-shadow: var(--cv-ring), var(--cv-shadow);
	color: var(--cv-text);
	font-size: 15px;
	line-height: 1.6;
	box-sizing: border-box;
}
section .hc-card > h4 {
	margin: 0 0 8px;
	font-family: "Muli-Bold", sans-serif;
	font-size: var(--cv-fs-block);
	text-transform: uppercase;
	color: var(--cv-text);
}
/* Paciente */
section .hc-paciente > h4.hc-nombre {
	font-size: 28px;
	line-height: 1.2;
	text-transform: none;
}
section .hc-fila span {
	margin-right: 4px;
}
section .hc-fila b {
	font-family: "Muli-Bold", sans-serif;
}
/* Tutor: etiqueta y valor en dos columnas */
section .hc-datos {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	margin-bottom: 4px;
}
section .hc-datos .hc-fila {
	display: contents;
}
section .hc-datos .hc-fila span {
	color: var(--cv-text-muted);
}
section .hc-datos .hc-fila b {
	font-family: inherit;
	font-weight: 400;
	overflow-wrap: anywhere; /* correos largos */
}
/* Botones de acción (tutor y antecedentes) */
section .hc-accion {
	font-family: "Muli-Bold";
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 10px 16px;
	border-radius: var(--cv-radius-ctrl);
	font-size: 15px;
	text-decoration: none;
	--cv-ico: 20px;
}
section .hc-tutor .hc-accion {
	display: inline-flex;
}
section .hc-accion.hc-azul {
	background-color: var(--cv-blue-soft);
	color: var(--cv-blue);
}
section .hc-accion.hc-gris {
	background-color: var(--cv-slate-soft);
	color: var(--cv-slate);
}
section .hc-accion:hover {
	box-shadow: inset 0 0 0 1px currentColor;
}
/* Indicadores: 2 × 2 mini tarjetas */
section .hc-indicadores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 16px;
}
section .hc-indicador {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 16px;
	border-radius: var(--cv-radius-ctrl);
	box-shadow: var(--cv-ring);
}
section .hc-indicador span {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--cv-text-muted);
}
section .hc-indicador b {
	font-family: "Muli-Bold", sans-serif;
	font-size: 18px;
	line-height: 1.3;
	color: var(--cv-text);
}
/* Tablet: 2 columnas · Móvil: 1 columna */
@media (max-width: 1024px) {
	section div.topinfo.hc-fichas {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 767px) {
	section div.topinfo.hc-fichas {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	div.dashboard_indicadores > div.duo_indicador.column {
		width: calc(95% - 20px);
		min-width: calc(95% - 20px); /* cubre también .doble (!important) */
	}
	div.table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	body:has(#pestanas a[href*="agenda-citas.sys?l=citas"]) div.table table {
		min-width: 960px;
	}
	:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel) ul {
		display: flex;
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	:is(#pestanas, #pestanas-doble-nivel, #pestanas-triple-nivel) li > a {
		white-space: nowrap;
	}
}

/* --- Título de tarjeta como enlace ( Calendario General del panel ) ---
   El enlace envuelve al h3 completo: así el h3 y su ícono conservan las reglas
   del rediseño ( h3 > .content_pulso ... ), que solo aplican a hijos directos.
   Hover discreto: el título toma el verde de acción y aparece la misma flecha
   de los enlaces de Registros rápidos ( div.duo_indicador a.boton::after ).
   Selector reforzado: style.css da a todo enlace de las tarjetas 13-14 px, #666,
   relleno y negro en hover. */
div.dashboard_indicadores div.duo_indicador a.cv-titulo-enlace {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: none;
	border-radius: var(--cv-radius-ctrl);
}
div.dashboard_indicadores div.duo_indicador a.cv-titulo-enlace > h3 {
	transition: color 0.15s ease;
}
div.dashboard_indicadores div.duo_indicador a.cv-titulo-enlace::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--cv-primary);
	border-bottom: 1px solid var(--cv-primary);
	transform: translateX(-3px) rotate(-45deg);
	opacity: 0;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
	flex-shrink: 0;
}
div.dashboard_indicadores
	div.duo_indicador
	a.cv-titulo-enlace:is(:hover, :focus-visible)
	> h3 {
	color: var(--cv-primary);
}
div.dashboard_indicadores
	div.duo_indicador
	a.cv-titulo-enlace:is(:hover, :focus-visible)::after {
	opacity: 1;
	transform: translateX(0) rotate(-45deg);
}
div.dashboard_indicadores div.duo_indicador a.cv-titulo-enlace:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--cv-soft-hover);
}
@media (prefers-reduced-motion: reduce) {
	div.dashboard_indicadores div.duo_indicador a.cv-titulo-enlace > h3,
	div.dashboard_indicadores div.duo_indicador a.cv-titulo-enlace::after {
		transition: none;
	}
}

/* --- Resumen de cita ( popup del calendario, sucursales clínica ) ---
   _calendario/js/cita_resumen.js · contenido: _calendario/functions/cita_resumen.php */
.cv-cita-resumen {
	position: fixed;
	z-index: 1040; /* debajo de magnificPopup ( 1042+ ) */
	box-sizing: border-box;
	width: 360px;
	max-height: calc(100vh - 16px);
	overflow-y: auto;
	padding: 20px 22px 18px;
	background: var(--cv-surface);
	border-radius: var(--cv-radius-card);
	box-shadow:
		0 14px 36px rgba(36, 51, 44, 0.16),
		var(--cv-ring);
	color: var(--cv-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--cv-fs-base);
	line-height: 1.4;
	text-align: left;
}
/* Flecha hacia la cita */
.cv-cita-resumen[data-lado]:not([data-lado=""])::before {
	content: "";
	position: absolute;
	top: calc(var(--cr-flecha, 40px) - 8px);
	width: 14px;
	height: 14px;
	background: var(--cv-surface);
	box-shadow: -1px 1px 0 var(--cv-border);
	transform: rotate(45deg);
}
.cv-cita-resumen[data-lado="derecha"]::before {
	left: -7px;
}
.cv-cita-resumen[data-lado="izquierda"]::before {
	right: -7px;
	box-shadow: 1px -1px 0 var(--cv-border);
}
.cv-cita-resumen .cr-i {
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--cr-i) center / contain no-repeat;
	mask: var(--cr-i) center / contain no-repeat;
}
.cv-cita-resumen .cr-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cv-cita-resumen h3 {
	margin: 0;
	padding: 0;
	font-size: 19px;
	font-weight: bold;
	color: var(--cv-text);
}
.cv-cita-resumen .cr-cerrar {
	display: inline-flex;
	padding: 6px;
	border: 0;
	border-radius: var(--cv-radius-ctrl);
	background: none;
	color: var(--cv-text-muted);
	cursor: pointer;
}
.cv-cita-resumen .cr-cerrar:focus-visible {
	outline: 2px solid var(--cv-soft-dark);
	outline-offset: 0;
}
.cv-cita-resumen .cr-cerrar:hover {
	background: var(--cv-bg);
	color: var(--cv-text);
}
.cv-cita-resumen .cr-folio {
	margin: 2px 0 14px;
	color: var(--cv-text-muted);
}
.cv-cita-resumen .cr-folio span {
	margin-left: 4px;
}
/* Paciente */
.cv-cita-resumen .cr-paciente {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cv-border);
}
.cv-cita-resumen .cr-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--cv-bg);
	color: #3f4a44;
}
.cv-cita-resumen .cr-avatar .cr-i {
	width: 34px;
	height: 34px;
}
.cv-cita-resumen .cr-avatar .cr-perro {
	width: 40px;
	height: 40px;
}
.cv-cita-resumen .cr-paciente strong {
	display: block;
	font-size: 18px;
}
.cv-cita-resumen .cr-rol {
	display: block;
	color: var(--cv-text-muted);
}
.cv-cita-resumen .cr-estado {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 12px;
	border-radius: var(--cv-radius-ctrl);
	font-size: 12px;
	font-weight: bold;
}
.cv-cita-resumen .cr-abierta {
	background: var(--cv-blue-soft);
	color: var(--cv-blue);
}
.cv-cita-resumen .cr-cerrada {
	background: var(--cv-soft);
	color: var(--cv-primary-hover);
}
.cv-cita-resumen .cr-pendiente {
	background: #fdf0d9;
	color: #9a5b00;
}
.cv-cita-resumen .cr-cancelada {
	background: #f3f4f6;
	color: #6b7280;
}
/* Datos */
.cv-cita-resumen .cr-datos {
	margin: 0;
	padding: 12px 0;
	list-style: none;
	border-bottom: 1px solid var(--cv-border);
}
.cv-cita-resumen .cr-datos li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
}
.cv-cita-resumen .cr-datos .cr-i {
	color: var(--cv-text-muted);
}
.cv-cita-resumen .cr-etiqueta {
	flex: 0 0 90px;
	color: var(--cv-text-muted);
}
.cv-cita-resumen .cr-valor {
	overflow-wrap: anywhere;
}
/* Botones */
.cv-cita-resumen .cr-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-ctrl);
	background: var(--cv-surface);
	color: var(--cv-text) !important;
	font:
		bold 14px Arial,
		Helvetica,
		sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.cv-cita-resumen .cr-boton:hover:not(:disabled) {
	background: var(--cv-row-hover);
}
.cv-cita-resumen .cr-boton:focus-visible {
	outline: 2px solid var(--cv-soft-dark);
	outline-offset: 1px;
}
.cv-cita-resumen .cr-boton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.cv-cita-resumen .cr-primario {
	border-color: var(--cv-primary);
	background: var(--cv-primary);
	color: #ffffff !important;
}
.cv-cita-resumen .cr-primario:hover:not(:disabled) {
	background: var(--cv-primary-hover);
}
.cv-cita-resumen .cr-documento {
	border-color: var(--cv-blue-soft-dark);
	background: var(--cv-blue-soft);
	color: var(--cv-blue) !important;
}
.cv-cita-resumen .cr-documento:hover:not(:disabled) {
	background: #e1eefc;
}
.cv-cita-resumen .cr-acciones {
	padding: 14px 0;
	border-bottom: 1px solid var(--cv-border);
}
.cv-cita-resumen .cr-documentos {
	display: flex;
	gap: 10px;
}
/* Envío */
.cv-cita-resumen .cr-envio {
	padding-top: 12px;
}
.cv-cita-resumen .cr-subtitulo {
	margin: 0 0 10px;
	font-weight: bold;
}
.cv-cita-resumen .cr-canal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.cv-cita-resumen .cr-canal input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--cv-primary);
}
.cv-cita-resumen .cr-inactivo {
	color: var(--cv-text-muted);
	cursor: default;
}
.cv-cita-resumen .cr-consentimiento {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--cv-text-muted);
}
.cv-cita-resumen .cr-consentimiento li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cv-cita-resumen .cr-consentimiento .cr-i {
	width: 14px;
	height: 14px;
}
.cv-cita-resumen .cr-consentimiento .cr-no {
	color: var(--cv-coral);
}
.cv-cita-resumen .cr-nota {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--cv-text-muted);
}
.cv-cita-resumen .cr-envio-botones,
.cv-cita-resumen .cr-revision-botones {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}
.cv-cita-resumen .cr-revision {
	margin-top: 12px;
	padding: 12px;
	border-radius: var(--cv-radius-ctrl);
	background: var(--cv-bg);
}
.cv-cita-resumen .cr-destino {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	overflow-wrap: anywhere;
}
/* style.css fuerza en celular a todo button: width 29%, padding, 12px y margin-top ( !important ) */
.cv-cita-resumen .cr-boton {
	width: 100% !important;
	padding: 9px 14px !important;
	font-size: 14px !important;
	margin-top: 0 !important;
}
.cv-cita-resumen .cr-cerrar {
	width: auto !important;
	padding: 6px !important;
	margin-top: 0 !important;
}
/* hidden debe ganarle a los display de arriba ( p. ej. el grid de los botones ) */
.cv-cita-resumen [hidden] {
	display: none !important;
}
/* Con el resumen abierto no se muestran los tooltips de hover del calendario */
body.cr-abierto .tooltip {
	display: none !important;
}
/* Pantallas angostas: hoja inferior */
.cv-cita-resumen.cr-movil {
	left: 0 !important;
	right: 0;
	bottom: 0;
	top: auto !important;
	width: 100%;
	max-height: 85vh;
	border-radius: var(--cv-radius-card) var(--cv-radius-card) 0 0;
}
.cv-cita-resumen.cr-movil::before {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.cv-cita-resumen .cr-boton {
		transition: none;
	}
}

/* ===== 9. INDICADORES Y FILTROS DE REPORTES ===== */

/* --- Indicadores: div.topinfo > span.saldo > div.infoTop ("etiqueta: <b>importe</b>")
   Historia clínica (.hc-fichas) queda fuera. */
section div.topinfo:not(.hc-fichas) {
	gap: 12px;
	padding: 16px 20px 4px;
	box-sizing: border-box;
}
section div.topinfo:not(.hc-fichas) > span.saldo {
	flex: 0 1 220px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 16px;
	display: block;
	border: 0; /* style.css: borde azul */
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-bg); /* gris tenue */
	box-shadow: var(--cv-ring); /* borde suave */
	text-align: left;
}
/* Etiqueta arriba (pequeña, gris) e importe abajo (grande) */
section div.topinfo:not(.hc-fichas) > span.saldo > div.infoTop {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--cv-text-muted);
}
section div.topinfo:not(.hc-fichas) > span.saldo > div.infoTop > b {
	font-family: "Muli-Bold", sans-serif;
	font-size: 22px;
	line-height: 1.2;
	text-transform: none;
	color: var(--cv-text);
}

/* --- Filtros: cuadrícula de 4 columnas ---
   "Aplicar filtros" fijo en fila 1, columna 4; los filtros llenan los huecos solos:
   2 filtros → col 1-2 · 5 filtros → 3 arriba + 2 abajo.
   !important solo contra los style="" del HTML y el <style> de la página. */
form.basico.filtros_ > div.w50 {
	display: grid !important; /* inline: display:block */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px 16px;
	align-items: end;
	width: 94% !important; /* inline: 60% */
	margin: 0 auto !important; /* inline: 0 0 0 15% */
	float: none !important;
	padding: 4px 0 8px;
}
:is(form.basico, div#basicstyle).filtros_ > div.w50 > .container_inputs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	margin: 0;
}
/* Etiqueta arriba del campo */
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> .container_inputs
	> label {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	line-height: 1.3;
	font-size: 12px;
	text-align: left;
	color: var(--cv-text-muted);
}
/* Campo completo con borde suave */
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> .container_inputs
	> :is(input, select):not([type="hidden"]) {
	float: none;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-surface);
	color: var(--cv-text);
}
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> .container_inputs
	> :is(input, select):is(:hover, :focus) {
	border-color: var(--cv-primary);
}
/* Botón: siempre fila 1, columna 4 */
:is(form.basico, div#basicstyle).filtros_ > div.w50 > div.container_btns_form {
	grid-column: 4;
	grid-row: 1;
	position: static !important; /* inline: relative; top/right */
	margin: 0 !important; /* <style> de la página: margin-top:-4% !important */
}
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.container_btns_form
	> input[type="submit"] {
	float: none;
	width: 100% !important;
	white-space: nowrap;
	height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-primary);
	color: #ffffff;
	font-family: "Muli-Bold", sans-serif;
	font-size: var(--cv-fs-base);
	cursor: pointer;
	text-transform: initial;
}
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.container_btns_form
	> input[type="submit"]:hover {
	background-color: var(--cv-primary-hover);
}
/* Botón expandir/contraer: mismo ícono, oliva aprobado */
form.basico.filtros_ .abrircerrar {
	background-color: var(--cv-primary);
}

/* Botón expandir/contraer: mismo ícono, círculo de 28 px alineado con el título */
form.basico.filtros_ > h4 {
	display: flex;
	align-items: center;
	gap: 12px;
}
form.basico.filtros_ > h4 > .abrircerrar,
section div.bloqueform.graf_indicadores > .abrircerrar {
	position: static !important; /* gráficas: relative !important en style.css */
	top: auto;
	left: auto;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin: 0;
	background-color: var(--cv-primary);
	background-size: 14px !important;
}
/* Ícono de calendario en Desde / Hasta (pickadate) */
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> .container_inputs
	> input.picker__input {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7770' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}
/* --- Filtros: buscador con autocompletar (div.divinput_buscador) ---
   Viene envuelto en un div propio: se trata como una celda más de la cuadrícula
   y su campo se ve igual que Desde / Hasta, con lupa.
   !important en anchos: el <style> de cada página fija 122 %, 20 %, 30 %… */
:is(form.basico, div#basicstyle).filtros_ > div.w50 > div.divinput_buscador {
	width: auto !important;
	min-width: 0;
	margin: 0;
	float: none;
}
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.divinput_buscador
	> .container_inputs {
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	width: auto !important;
	margin: 0;
}
/* Etiqueta arriba, igual que Desde / Hasta */
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.divinput_buscador
	> .container_inputs
	> label {
	float: none;
	width: auto !important;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	line-height: 1.3;
	font-size: 12px;
	text-align: left;
	white-space: nowrap;
	color: var(--cv-text-muted);
}
/* Campo a todo lo ancho, con lupa */
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.divinput_buscador
	.awesomplete {
	display: block;
	width: 100% !important;
}
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.divinput_buscador
	.awesomplete
	> input {
	float: none;
	width: 100% !important;
	height: 40px;
	margin: 0;
	padding: 0 12px 0 34px;
	box-sizing: border-box;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-ctrl);
	background-color: var(--cv-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7770' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 11px center;
	background-size: 16px;
	color: var(--cv-text);
	text-overflow: ellipsis;
}
:is(form.basico, div#basicstyle).filtros_
	> div.w50
	> div.divinput_buscador
	.awesomplete
	> input:is(:hover, :focus) {
	border-color: var(--cv-primary);
}
/* Panel blanco continuo: indicadores, gráficas, filtros y tabla */
form.basico.filtros_ {
	background: var(--cv-surface);
}

/* --- Gráficas e indicadores (solo .bloqueform.graf_indicadores) --- */
section div.bloqueform.graf_indicadores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	row-gap: 16px; /* separa el encabezado de las gráficas */
	box-sizing: border-box;
	padding: 10px 20px 16px;
	background: var(--cv-surface) !important; /* inline: #fcfcfc */
}
section div.bloqueform.graf_indicadores > :not(.abrircerrar, h4) {
	flex: 0 0 100%;
}
section div.bloqueform.graf_indicadores > h4 {
	margin: 0;
	padding: 0 !important; /* style.css: 4.2 % (14.2 % !important en celular) */
}
/* Cerrado: solo el encabezado. style.css: 70 px (82 px en celular) dejaban asomar las tarjetas.
   10 px de relleno + 28 px del círculo = 38; las gráficas empiezan en 54 → quedan ocultas. */
section div.bloqueform.graf_indicadores.closed {
	max-height: 48px !important;
	overflow: hidden;
	padding-bottom: 10px;
}
/* Contenedor de gráficas: cuadrícula.
   .columna-graficas (2 pasteles agrupados en el HTML) se "disuelve" con
   display:contents → las 4 tarjetas son hermanas y miden lo mismo.
   !important en display: el contenedor trae display:flex en línea. */
section div.bloqueform.graf_indicadores .containes-graficas {
	display: grid !important;
	grid-template-columns: repeat(
		2,
		minmax(0, 1fr)
	); /* minmax(0,…): el canvas no fuerza el ancho */
	gap: 16px;
	align-items: start;
}
section div.bloqueform.graf_indicadores .columna-graficas {
	display: contents;
}
section div.bloqueform.graf_indicadores .containes-graficas .grafico {
	width: auto !important; /* anula 30 % / 100 % de style.css y del <style> de la página */
	min-width: 0;
}

/* Tablet y celular: una gráfica por renglón */
@media (max-width: 1024px) {
	section div.bloqueform.graf_indicadores .containes-graficas {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Tarjeta de cada gráfica (style.css: borde negro, min-height 500 px, margin-top 20 px) */
section div.bloqueform.graf_indicadores .grafico {
	margin: 0;
	min-height: 0;
	padding: 12px 16px 16px;
	box-sizing: border-box;
	border: 1px solid var(--cv-border);
	border-radius: var(--cv-radius-card);
	background-color: var(--cv-surface);
	box-shadow: var(--cv-shadow);
}
/* Tabla de cada gráfica: mismo estilo que las tablas del sistema */
section div.bloqueform.graf_indicadores .table-grafica {
	margin-top: 12px;
	font-size: 12px;
}
section div.bloqueform.graf_indicadores .table-grafica thead th {
	background-image: linear-gradient(
		var(--cv-th-bg),
		var(--cv-th-bg)
	); /* th trae #fff !important */
	color: var(--cv-text);
	border-bottom: 1px solid var(--cv-border);
	padding: 8px 6px;
}
section div.bloqueform.graf_indicadores .table-grafica tbody td {
	border-bottom: 1px solid var(--cv-border);
	color: var(--cv-text);
}

/* Celular: una columna, botón al final */
@media (max-width: 767px) {
	form.basico.filtros_ > div.w50 {
		grid-template-columns: 1fr;
	}
	:is(form.basico, div#basicstyle).filtros_
		> div.w50
		> div.container_btns_form {
		grid-column: 1;
		grid-row: auto;
	}
}
/* style.css (≤480) fuerza display:block !important en .w50, .half, .duo, etc.
   Le ganaba al display:none que jQuery escribe al ocultar (.hide(), .toggle(), .slideUp()),
   y en celular reaparecían bloques ocultos por el JS (p. ej. Opciones de venta).
   Aquí, si el elemento está oculto en línea o con .hide, se respeta.
   !important: para ganarle al !important de style.css en este rango. */
@media (max-width: 480px) {
	form label.radio,
	form label.checkbox {
		color: var(--cv-text);
		border-radius: var(--cv-radius-ctrl);
	}
	.bloqueform.w50.captura_producto.section_cobro,
	.bloqueform.w50.captura_producto.section_totales {
		padding: 10px !important;
	}
	:is(
		.w75,
		.w60,
		.w50,
		.w40,
		.w33,
		.w25,
		.half,
		.duo,
		.lduo,
		.r2f,
		.cincocinco
	):is([style*="display: none"], [style*="display:none"], .hide) {
		display: none !important;
	}
}
/* Celular (≤480): relleno lateral en los bloques con clase de ancho.
   style.css (≤480) quita padding-left/right con !important a todo .bloqueform.wNN
   y le gana a su propio .bloqueform { padding: 10px !important }:
   los campos quedaban pegados al borde del bloque. */
@media (max-width: 480px) {
	:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
		.bloqueform:is(.w25, .w33, .w40, .w50, .w60, .w75) {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* Entradas de inventario (≤900, bloques apilados): el bloque de totales trae
   style="margin-left:20px !important" en línea. Un !important en línea no se puede
   vencer desde CSS; left: -20px lo compensa y el bloque vuelve a quedar alineado
   sin salirse por la derecha (el bloque ya es position: relative en style.css).
   Corrección real: quitar ese margen en línea del PHP del formulario. */
@media (max-width: 900px) {
	form#inventario_entradas
		.bloqueform:is([style*="margin-left:20px"], [style*="margin-left: 20px"]) {
		left: -20px;
	}
}
/* Buscador con botón al lado (.contenidobuscador: .divright = buscador, .divleft = botón).
   Entradas/salidas de inventario, kits de Productos, etc.
   En celular el buscador quedaba angosto y el botón cortado: style.css (≤480)
   fuerza a todo .boton width: 29% !important.
   Aquí se apilan: buscador a todo el ancho y el botón debajo, también a todo el ancho.
   display sin !important: así un botón oculto por el JS o en línea (display:none) sigue oculto. */
@media (max-width: 480px) {
	:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
		.contenidobuscador {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
		.contenidobuscador
		> :is(.divright, .divleft) {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}
	:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
		.contenidobuscador
		> .divleft
		> small {
		display: block;
	}
	:is(form.basico, div.form.basico, div#basicstyle, div.smallinput)
		.contenidobuscador
		> .divleft
		a.boton {
		display: block;
		width: 100% !important; /* le gana al width: 29% !important de style.css */
		float: none !important;
		margin: 0 !important;
		box-sizing: border-box;
		text-align: center;
		white-space: normal;
	}
}