/* =====================================================================================================
   Businessware · Tema claro "Pizarra suave" (decisión 0026)

   Ajustes sobre el tema Software de Radzen para un claro sin deslumbramiento: neutros con tinte pizarra,
   jerarquía por capas de luminosidad (lienzo < superficie < elevada) en lugar de bordes duros, y sombras frías
   muy tenues. El encabezado es una barra de marca oscura (pizarra profundo). Se conservan el acento del tema
   (--rz-primary) y la densidad (tamaños de controles, renglones y espacios).

   Todo cuelga de html[data-bw-tema="claro"] (lo pone App.razor desde la cookie y lo cambia bwnet.cambiarTema),
   así que el tema oscuro no se toca. Se carga después de app.css.
   Para revertir: quitar el <link> de este archivo en App.razor (y la clase bw-consulta deja de tener efecto).
   ===================================================================================================== */

html[data-bw-tema="claro"] {
	/* ---- 1. Tokens propios ---- */

	/* Superficies, de la más profunda a la más elevada (matiz pizarra ~210°). */
	--bw-lienzo: #e9edf1;            /* fondo del área de trabajo */
	--bw-lateral: #e2e7ec;           /* panel de navegación, tira de pestañas, barra de estado */
	--bw-hundida: #edf1f4;           /* controles en consulta, encabezados de tabla */
	--bw-superficie: #f4f6f8;        /* fieldsets, tablas, barra de comandos */
	--bw-elevada: #fbfcfd;           /* controles editables, listas desplegables, menús, diálogos */
	--bw-renglon-alterno: #eff2f5;   /* renglón par de las tablas: alternado sutil */
	--bw-encabezado-tabla: #e8edf1;

	/* Texto (nunca negro puro). Contraste sobre --bw-superficie: 14:1, 10:1, 6.8:1 y 4.6:1. */
	--bw-texto: #1d2731;
	--bw-texto-etiqueta: #36424e;
	--bw-texto-secundario: #4b5866;
	--bw-texto-terciario: #667280;

	/* Líneas */
	--bw-borde-sutil: #e1e6eb;
	--bw-borde: #d3dae1;
	--bw-borde-fuerte: #b4bfca;

	/* Foco: anillo con el acento del tema. */
	--bw-anillo: color-mix(in srgb, var(--rz-primary) 24%, transparent);
	--bw-flotar: rgba(29, 39, 49, 0.06);  /* fondo al pasar el puntero sobre botones de texto y opciones */

	/* Elevación: sombras frías y tenues. */
	--bw-sombra-sm: 0 1px 2px rgba(16, 32, 48, 0.05);
	--bw-sombra-md: 0 1px 2px rgba(16, 32, 48, 0.04), 0 2px 6px rgba(16, 32, 48, 0.06);
	--bw-sombra-lg: 0 4px 12px rgba(16, 32, 48, 0.08), 0 12px 32px rgba(16, 32, 48, 0.1);

	--bw-radio: 6px;
	--bw-radio-tarjeta: 8px;

	/* Peligro (etiqueta "Inhabilitado", BadgeStyle.Danger): fondo suave y texto oscuro del mismo color (30 % de negro sobre
	   "danger-darker" para pasar 4.5:1 en letra chica). Los renglones inhabilitados de las tablas usan los mismos tonos;
	   contraste del texto (medido en la E2E de usuarios): 6.45:1 sobre el fondo, 6.1:1 en los renglones pares, 5.8:1 con el
	   puntero y 5.5:1 seleccionado. */
	--bw-peligro-fondo: color-mix(in srgb, var(--rz-danger) 16%, var(--bw-elevada));
	--bw-peligro-texto: color-mix(in srgb, var(--rz-danger-darker) 70%, #000);
	--bw-peligro-borde: color-mix(in srgb, var(--rz-danger) 35%, var(--bw-elevada));
	--bw-inhabilitado-fondo: var(--bw-peligro-fondo);
	--bw-inhabilitado-fondo-alterno: color-mix(in srgb, var(--rz-danger) 22%, var(--bw-elevada));
	--bw-inhabilitado-fondo-flotar: color-mix(in srgb, var(--rz-danger) 28%, var(--bw-elevada));
	--bw-inhabilitado-texto: var(--bw-peligro-texto);
	--bw-inhabilitado-fondo-seleccionado: var(--rz-grid-selected-background-color);
	--bw-inhabilitado-texto-seleccionado: var(--bw-peligro-texto);
	--bw-inhabilitado-franja: var(--rz-danger-dark);

	/* ---- 2. Paleta base de Radzen: neutros pizarra en lugar de gris (afecta a todos los componentes) ---- */
	--rz-base: #d3dae1;
	--rz-base-50: #f4f6f8;
	--rz-base-100: #edf1f4;
	--rz-base-200: #e1e6eb;
	--rz-base-300: #d3dae1;
	--rz-base-400: #b4bfca;
	--rz-base-500: #8794a1;
	--rz-base-600: #667280;
	--rz-base-700: #4b5866;
	--rz-base-800: #36424e;
	--rz-base-900: #1d2731;
	--rz-base-light: #e1e6eb;
	--rz-base-lighter: #fbfcfd;
	--rz-base-dark: #667280;
	--rz-base-darker: #1d2731;

	/* Radzen usa base-background como color de toda superficie elevada (listas, diálogos, menús, tablas):
	   va el tono más claro; el lienzo es el fondo de la página. */
	--rz-base-background-color: var(--bw-elevada);
	--rz-body-background-color: var(--bw-lienzo);
	/* Barra de marca (encabezado): pizarra profundo, el mismo matiz de las superficies. */
	--bw-marca: #1f2b35;
	--bw-marca-texto: #e6ecf1;        /* 12.6:1 sobre la barra */
	--bw-marca-tenue: #9aa8b5;        /* 6.2:1 sobre la barra */
	--bw-marca-flotar: rgba(255, 255, 255, 0.08);
	--rz-header-background-color: var(--bw-marca);

	--rz-text-color: var(--bw-texto);
	--rz-text-title-color: var(--bw-texto);
	--rz-text-secondary-color: var(--bw-texto-secundario);
	--rz-text-tertiary-color: var(--bw-texto-terciario);

	--rz-border-radius: var(--bw-radio);

	/* ---- 3. Variables por componente ---- */

	/* Controles de captura: planos, borde completo y anillo de foco. */
	--rz-input-background-color: var(--bw-elevada);
	--rz-input-hover-background-color: var(--bw-elevada);
	--rz-input-focus-background-color: var(--bw-elevada);
	--rz-input-border: 1px solid var(--bw-borde);
	--rz-input-border-block-end: 1px solid var(--bw-borde);
	--rz-input-hover-border: 1px solid var(--bw-borde-fuerte);
	--rz-input-hover-border-block-end: 1px solid var(--bw-borde-fuerte);
	--rz-input-focus-border: 1px solid var(--rz-primary);
	--rz-input-focus-border-block-end: 1px solid var(--rz-primary);
	--rz-input-shadow: none;
	--rz-input-hover-shadow: none;
	--rz-input-focus-shadow: 0 0 0 3px var(--bw-anillo);
	--rz-input-border-radius: var(--bw-radio);
	--rz-input-disabled-background-color: var(--bw-hundida);
	--rz-input-disabled-border: 1px solid transparent;
	--rz-input-disabled-border-block-end: 1px solid transparent;
	--rz-input-disabled-shadow: none;
	--rz-dropdown-open-border: 1px solid var(--rz-primary);

	/* Opciones de listas: resaltado suave con el acento (el tema usaba un tono sólido). */
	--rz-dropdown-item-hover-background-color: var(--rz-primary-lighter);
	--rz-dropdown-item-hover-color: var(--bw-texto);

	/* Tablas (RadzenDataGrid): superficie, renglones alternados sutiles, líneas finas. */
	--rz-grid-background-color: var(--bw-superficie);
	--rz-grid-stripe-odd-background-color: var(--bw-superficie);
	--rz-grid-stripe-background-color: var(--bw-renglon-alterno);
	--rz-grid-header-background-color: var(--bw-encabezado-tabla);
	--rz-grid-header-color: var(--bw-texto-secundario);
	--rz-grid-border: 1px solid var(--bw-borde);
	--rz-grid-cell-border: 1px solid var(--bw-borde-sutil);
	--rz-grid-border-radius: var(--bw-radio-tarjeta);

	/* Fieldsets como tarjetas (el título pasa adentro: ver la sección 4). */
	--rz-fieldset-border: 1px solid var(--bw-borde-sutil);
	--rz-fieldset-border-radius: var(--bw-radio-tarjeta);
	--rz-fieldset-legend-color: var(--bw-texto-terciario);

	/* Renglón seleccionado: tono suave del acento con texto normal (el tema usaba un sólido con texto blanco, 3:1).
	   El de paso del puntero es más tenue para que no se confunda con la selección. */
	--rz-grid-selected-background-color: color-mix(in srgb, var(--rz-primary) 26%, var(--bw-elevada));
	--rz-grid-selected-color: var(--bw-texto);
	--rz-grid-hover-background-color: color-mix(in srgb, var(--rz-primary) 9%, var(--bw-superficie));
	--rz-grid-hover-color: var(--bw-texto);

	--rz-card-shadow: var(--bw-sombra-md);

	/* Avisos: tarjeta clara con franja del color del aviso (el tema los pintaba sólidos; el informativo, blanco sobre
	   turquesa, quedaba en 2:1). */
	--rz-notification-success-background-color: var(--bw-elevada);
	--rz-notification-warning-background-color: var(--bw-elevada);
	--rz-notification-error-background-color: var(--bw-elevada);
	--rz-notification-info-background-color: var(--bw-elevada);
	--rz-notification-success-color: var(--bw-texto);
	--rz-notification-warning-color: var(--bw-texto);
	--rz-notification-error-color: var(--bw-texto);
	--rz-notification-info-color: var(--bw-texto);
	--rz-notification-success-icon-color: var(--rz-success-darker);
	--rz-notification-warning-icon-color: var(--rz-warning-darker);
	--rz-notification-error-icon-color: var(--rz-danger-darker);
	--rz-notification-info-icon-color: var(--rz-info-darker);

	/* Carga de archivos (logotipo): barra del botón en tono hundido en lugar del gris del tema. */
	--rz-upload-button-bar-background-color: var(--bw-hundida);

	color-scheme: light;
}

/* =====================================================================================================
   4. Aplicación por zona
   ===================================================================================================== */

/* ---- Encabezado: barra de marca oscura con texto claro; los submenús siguen claros (capa elevada) ---- */
html[data-bw-tema="claro"] .bw-encabezado {
	background-color: var(--bw-marca);
	border-bottom-color: var(--bw-marca);
	color: var(--bw-marca-texto);
	--rz-menu-top-item-background-color: transparent;
	--rz-menu-top-item-color: var(--bw-marca-texto);
	--rz-menu-top-item-icon-color: var(--bw-marca-texto);
	--rz-menu-top-item-hover-color: var(--rz-white);
	--rz-menu-top-item-selected-color: var(--rz-white);
	--rz-menu-top-item-icon-hover-color: var(--rz-white);
}
html[data-bw-tema="claro"] .bw-encabezado .bw-titulo-app {
	color: var(--rz-white);
}
html[data-bw-tema="claro"] .bw-encabezado .bw-sesion {
	color: var(--bw-marca-tenue);
}
html[data-bw-tema="claro"] .bw-encabezado .bw-sesion strong {
	color: var(--bw-marca-texto);
}
/* Los submenús son una capa clara: vuelven al texto normal aunque cuelguen de la barra oscura. */
html[data-bw-tema="claro"] .bw-encabezado .rz-navigation-menu {
	color: var(--bw-texto);
}
/* Botones de ícono (tema, cerrar sesión) y logo sobre la barra oscura. */
html[data-bw-tema="claro"] .bw-encabezado .bw-boton-icono {
	color: var(--bw-marca-texto);
}
html[data-bw-tema="claro"] .bw-encabezado .bw-boton-icono:not(:disabled):hover,
html[data-bw-tema="claro"] .bw-boton-logo:hover {
	background-color: var(--bw-marca-flotar);
	color: var(--rz-white);
}
html[data-bw-tema="claro"] .bw-encabezado .bw-boton-icono:focus-visible,
html[data-bw-tema="claro"] .bw-boton-logo:focus-visible {
	outline: 2px solid var(--bw-marca-texto);
	outline-offset: 1px;
}

/* ---- Barra de comandos ---- */
html[data-bw-tema="claro"] .bw-barra {
	position: relative;
	z-index: 1;  /* la sombra queda sobre el panel de navegación y las pestañas */
	background-color: var(--bw-superficie);
	border-bottom-color: var(--bw-borde);
	box-shadow: var(--bw-sombra-sm);
}
html[data-bw-tema="claro"] .bw-barra .rz-button:not(:disabled) {
	color: var(--bw-texto-etiqueta);
}
html[data-bw-tema="claro"] .bw-barra .rz-button:not(:disabled):hover {
	background-color: var(--bw-flotar);
	color: var(--bw-texto);
}
html[data-bw-tema="claro"] .bw-separador {
	background-color: var(--bw-borde);
}

/* ---- Panel de navegación ----
   Títulos de sección en negritas; opciones en texto secundario; la opción activa con fondo suave del acento
   y una franja de 3 px a la izquierda. */
html[data-bw-tema="claro"] .bw-navegacion {
	background-color: var(--bw-lateral);
	border-right-color: var(--bw-borde);
	padding-block: 0.5rem;
	--rz-panel-menu-item-background-color: transparent;
	--rz-panel-menu-item-color: var(--bw-texto-etiqueta);
	--rz-panel-menu-item-border: none;
	--rz-panel-menu-item-hover-background-color: var(--bw-flotar);
	--rz-panel-menu-item-hover-color: var(--bw-texto);
	--rz-panel-menu-item-active-background-color: transparent;
	--rz-panel-menu-item-active-color: var(--bw-texto-etiqueta);
	--rz-panel-menu-item-border-radius: var(--bw-radio);
	--rz-panel-menu-item-margin-inline: 0.5rem;
	--rz-panel-menu-item-2nd-level-background-color: transparent;
	--rz-panel-menu-item-2nd-level-color: var(--bw-texto-secundario);
	--rz-panel-menu-item-2nd-level-hover-background-color: var(--bw-flotar);
	--rz-panel-menu-item-2nd-level-hover-color: var(--bw-texto);
	--rz-panel-menu-item-2nd-level-active-background-color: color-mix(in srgb, var(--rz-primary) 10%, var(--bw-elevada));
	--rz-panel-menu-item-2nd-level-active-color: var(--rz-primary-darker);
	--rz-panel-menu-item-2nd-level-active-font-weight: 600;
	--rz-panel-menu-item-2nd-level-border-radius: var(--bw-radio);
	--rz-panel-menu-item-2nd-level-margin-inline: 0.5rem;
	--rz-panel-menu-item-2nd-level-margin-block: 0.125rem;
	/* La franja propia del tema no se usa: la de abajo respeta el redondeo de la opción. */
	--rz-panel-menu-item-active-indicator: transparent;
	/* Sangría menor para que "Unidades de negocio y sucursales" quepa en una línea. */
	--rz-panel-menu-item-2nd-level-offset: 2.25rem;
	--rz-panel-menu-item-2nd-level-padding-inline: 0.75rem;
}
html[data-bw-tema="claro"] .bw-navegacion .rz-panel-menu {
	background-color: transparent;
}
html[data-bw-tema="claro"] .bw-navegacion .rz-navigation-menu .rz-navigation-item-wrapper-active {
	box-shadow: inset 3px 0 0 var(--rz-primary), var(--bw-sombra-sm);
}
html[data-bw-tema="claro"] .bw-cajon-sesion,
html[data-bw-tema="claro"] .bw-cajon-acciones {
	border-color: var(--bw-borde);
}

/* ---- Pestañas: la tira toma el tono del panel lateral; la activa se funde con el área de trabajo ---- */
html[data-bw-tema="claro"] .bw-pestanas {
	background-color: var(--bw-lateral);
	border-bottom-color: var(--bw-borde);
}
html[data-bw-tema="claro"] .bw-pestana {
	color: var(--bw-texto-secundario);
}
html[data-bw-tema="claro"] .bw-pestana:not(.bw-activa):hover {
	background-color: var(--bw-flotar);
	color: var(--bw-texto);
}
html[data-bw-tema="claro"] .bw-pestana.bw-activa {
	background-color: var(--bw-lienzo);
	border-color: var(--bw-borde);
	color: var(--bw-texto);
	font-weight: 600;
}

/* ---- Área de trabajo y ventanas flotantes ---- */
html[data-bw-tema="claro"] .bw-panel {
	background-color: var(--bw-lienzo);
}
html[data-bw-tema="claro"] .bw-flotante {
	background-color: var(--bw-lienzo);
	border-color: var(--bw-borde);
	border-radius: var(--bw-radio-tarjeta);
	box-shadow: var(--bw-sombra-lg);
}
html[data-bw-tema="claro"] .bw-flotante.bw-flotante-activa {
	border-color: var(--rz-primary);
}
html[data-bw-tema="claro"] .bw-flotante-titulo {
	background-color: var(--bw-lateral);
	border-bottom-color: var(--bw-borde);
}
html[data-bw-tema="claro"] .bw-flotante-activa .bw-flotante-titulo {
	background-color: color-mix(in srgb, var(--rz-primary) 16%, var(--bw-elevada));
}

/* ---- Barra de estado ---- */
html[data-bw-tema="claro"] .bw-estado {
	background-color: var(--bw-lateral);
	border-top-color: var(--bw-borde);
	color: var(--bw-texto-secundario);
}
html[data-bw-tema="claro"] .bw-estado > span {
	border-right-color: var(--bw-borde);
}

/* ---- Pantalla de acceso ---- */
html[data-bw-tema="claro"] .bw-tarjeta-acceso {
	background-color: var(--bw-elevada);
	border-color: var(--bw-borde-sutil);
	border-radius: 10px;
	box-shadow: var(--bw-sombra-lg);
}
html[data-bw-tema="claro"] .bw-etiqueta {
	color: var(--bw-texto-etiqueta);
}

/* ---- Detalle: título y modo (CONSULTA / EDICIÓN / ALTA) ---- */
html[data-bw-tema="claro"] .bw-detalle-titulo {
	color: var(--bw-texto);
	font-weight: 700;
	letter-spacing: -0.01em;
}
html[data-bw-tema="claro"] .rz-badge.bw-modo {
	padding: 0.125rem 0.4rem;
	border-radius: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}
html[data-bw-tema="claro"] .bw-campo .rz-label {
	color: var(--bw-texto-etiqueta);
}

/* ---- Tarjeta (datos de la sesión en Inicio): igual que los fieldsets ---- */
html[data-bw-tema="claro"] .bw-tarjeta {
	background-color: var(--bw-superficie);
	border-color: var(--bw-borde-sutil);
	border-radius: var(--bw-radio-tarjeta);
	box-shadow: var(--bw-sombra-md);
}

/* ---- Fieldsets (Generales, Datos fiscales, Series y folios…) como tarjetas ----
   El título deja de ir sobre el borde: un <legend> flotado se dibuja como un elemento normal dentro de la tarjeta. */
html[data-bw-tema="claro"] .rz-fieldset {
	background-color: var(--bw-superficie);
	box-shadow: var(--bw-sombra-md);
}
html[data-bw-tema="claro"] .rz-fieldset-legend {
	float: left;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.875rem var(--rz-fieldset-padding) 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
html[data-bw-tema="claro"] .rz-fieldset-legend + * {
	clear: both;
}
html[data-bw-tema="claro"] .rz-fieldset-legend ~ * .rz-fieldset-content {
	padding-top: 0.75rem;
}

/* ---- Consulta y solo lectura: controles "hundidos", sin borde ni protagonismo, igual de legibles ----
   Los cuadros de texto de solo lectura se reconocen por [readonly]; las listas de Radzen no marcan su estado de solo
   lectura, por eso en consulta el detalle lleva la clase bw-consulta (PantallaDetalle.ClaseDetalle). */
html[data-bw-tema="claro"] .rz-textbox[readonly],
html[data-bw-tema="claro"] .rz-textarea[readonly],
html[data-bw-tema="claro"] .rz-numeric:has(input[readonly]),
html[data-bw-tema="claro"] .bw-consulta .rz-dropdown,
html[data-bw-tema="claro"] .bw-consulta .rz-datepicker > .rz-inputtext {
	background-color: var(--bw-hundida);
	color: var(--bw-texto);
}
html[data-bw-tema="claro"] .rz-textbox[readonly]:not(:focus),
html[data-bw-tema="claro"] .rz-textarea[readonly]:not(:focus),
html[data-bw-tema="claro"] .rz-numeric:has(input[readonly]):not(:focus-within),
html[data-bw-tema="claro"] .bw-consulta .rz-dropdown:not(.rz-state-focused),
html[data-bw-tema="claro"] .bw-consulta .rz-datepicker > .rz-inputtext:not(:focus) {
	border-color: transparent;
	box-shadow: none;
}
/* Con el teclado, el foco se sigue viendo aunque el control sea de solo lectura. */
html[data-bw-tema="claro"] .rz-textbox[readonly]:focus,
html[data-bw-tema="claro"] .bw-consulta .rz-dropdown.rz-state-focused {
	border-color: var(--bw-borde-fuerte);
	box-shadow: 0 0 0 3px var(--bw-anillo);
}
html[data-bw-tema="claro"] .bw-consulta .rz-dropdown .rz-dropdown-trigger {
	color: var(--bw-texto-terciario);
}
html[data-bw-tema="claro"] ::placeholder {
	color: var(--bw-texto-terciario);
	opacity: 1;
}

/* ---- Listas desplegables, menús y diálogos ---- */
html[data-bw-tema="claro"] .rz-popup,
html[data-bw-tema="claro"] .rz-menu .rz-navigation-menu {
	border: 1px solid var(--bw-borde);
	border-radius: var(--bw-radio-tarjeta);
	box-shadow: var(--bw-sombra-lg);
}
html[data-bw-tema="claro"] .rz-dialog {
	border-radius: 10px;
}

/* ---- Botones con contorno (Agregar serie, Nuevo RFC) ---- */
/* El contorno de Radzen es una sombra interior: se conserva y se le suma la elevación. */
html[data-bw-tema="claro"] .rz-button.rz-variant-outlined.rz-base {
	background-color: var(--bw-elevada);
	box-shadow: inset 0 0 0 1px var(--bw-borde), var(--bw-sombra-sm);
}
html[data-bw-tema="claro"] .rz-button.rz-variant-outlined.rz-base:not(:disabled):hover {
	box-shadow: inset 0 0 0 1px var(--rz-primary), var(--bw-sombra-sm);
	color: var(--rz-primary-darker);
}

/* ---- Avisos: franja izquierda del color del aviso ---- */
html[data-bw-tema="claro"] .rz-notification-item {
	border: 1px solid var(--bw-borde-sutil);
	box-shadow: inset 4px 0 0 var(--bw-color-aviso, var(--rz-info)), var(--bw-sombra-lg);
}
html[data-bw-tema="claro"] .rz-notification-success { --bw-color-aviso: var(--rz-success); }
html[data-bw-tema="claro"] .rz-notification-warn { --bw-color-aviso: var(--rz-warning); }
html[data-bw-tema="claro"] .rz-notification-error { --bw-color-aviso: var(--rz-danger); }
html[data-bw-tema="claro"] .rz-notification-info { --bw-color-aviso: var(--rz-info); }

/* ---- Carga de archivos ---- */
html[data-bw-tema="claro"] .rz-fileupload {
	border: 1px solid var(--bw-borde-sutil);
	border-radius: var(--bw-radio);
	overflow: hidden;
}

/* ---- Tablas ---- */
html[data-bw-tema="claro"] .bw-tabla {
	box-shadow: var(--bw-sombra-sm);
}
/* El grid activo del maestro-detalle conserva su marca, con la sombra. */
html[data-bw-tema="claro"] .bw-md-activo .bw-tabla {
	box-shadow: 0 0 0 2px var(--rz-primary), var(--bw-sombra-sm);
}
/* Listas de solo lectura dentro de un detalle (series, CSD, sucursales de una unidad). */
html[data-bw-tema="claro"] .bw-lista-contenedor {
	border: 1px solid var(--bw-borde-sutil);
	border-radius: var(--bw-radio);
	background-color: var(--bw-superficie);
}
html[data-bw-tema="claro"] .bw-lista th {
	background-color: var(--bw-encabezado-tabla);
	color: var(--bw-texto-secundario);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom-color: var(--bw-borde);
}
html[data-bw-tema="claro"] .bw-lista td {
	border-bottom-color: var(--bw-borde-sutil);
	font-variant-numeric: tabular-nums;  /* folios y fechas alineados */
}
html[data-bw-tema="claro"] .bw-lista tbody tr:nth-child(even) > td {
	background-color: var(--bw-renglon-alterno);
}
html[data-bw-tema="claro"] .bw-lista tbody tr:hover > td {
	background-color: color-mix(in srgb, var(--rz-primary) 8%, var(--bw-superficie));
}
/* Inhabilitados (miembros de un grupo): el rojizo de la etiqueta también en los renglones pares y con el puntero encima. */
html[data-bw-tema="claro"] .bw-lista tbody tr[data-inhabilitado]:nth-child(even) > td {
	background-color: var(--bw-inhabilitado-fondo-alterno);
}
html[data-bw-tema="claro"] .bw-lista tbody tr[data-inhabilitado]:hover > td {
	background-color: var(--bw-inhabilitado-fondo-flotar);
}
html[data-bw-tema="claro"] .bw-lista tbody tr:last-child > td {
	border-bottom: none;
}
html[data-bw-tema="claro"] .rz-grid-table td {
	font-variant-numeric: tabular-nums;
}

/* ---- Etiquetas de estado: fondo suave, texto oscuro del mismo color y borde tenue ----
   El texto lleva 30 % de negro sobre el tono "darker" del tema para pasar 4.5:1 en letra chica. */
html[data-bw-tema="claro"] .rz-badge-success {
	background-color: color-mix(in srgb, var(--rz-success) 18%, var(--bw-elevada));
	color: color-mix(in srgb, var(--rz-success-darker) 70%, #000);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rz-success) 35%, var(--bw-elevada));
}
html[data-bw-tema="claro"] .rz-badge-info {
	background-color: color-mix(in srgb, var(--rz-info) 16%, var(--bw-elevada));
	color: color-mix(in srgb, var(--rz-info-darker) 70%, #000);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rz-info) 35%, var(--bw-elevada));
}
html[data-bw-tema="claro"] .rz-badge-warning {
	background-color: color-mix(in srgb, var(--rz-warning) 22%, var(--bw-elevada));
	color: color-mix(in srgb, var(--rz-warning-darker) 70%, #000);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rz-warning) 40%, var(--bw-elevada));
}
html[data-bw-tema="claro"] .rz-badge-danger {
	background-color: var(--bw-peligro-fondo);
	color: var(--bw-peligro-texto);
	box-shadow: inset 0 0 0 1px var(--bw-peligro-borde);
}
html[data-bw-tema="claro"] .rz-badge-light {
	background-color: var(--bw-hundida);
	color: var(--bw-texto-secundario);
	box-shadow: inset 0 0 0 1px var(--bw-borde);
}
html[data-bw-tema="claro"] .rz-badge-primary {
	background-color: color-mix(in srgb, var(--rz-primary) 14%, var(--bw-elevada));
	color: var(--rz-primary-darker);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rz-primary) 35%, var(--bw-elevada));
}

/* ---- Selección de texto ---- */
html[data-bw-tema="claro"] ::selection {
	background-color: color-mix(in srgb, var(--rz-primary) 24%, var(--bw-elevada));
	color: var(--bw-texto);
}

/* ---- Teléfono: el título de la tarjeta con el mismo margen que su contenido ---- */
@media (max-width: 599.98px) {
	html[data-bw-tema="claro"] .bw-detalle .rz-fieldset-legend {
		padding-inline: 0.5rem;
	}
}

/* ---- Parámetros: árbol y detalle como tarjetas (igual que los fieldsets); la consulta SQL de referencia, hundida ---- */
html[data-bw-tema="claro"] .bw-param-arbol,
html[data-bw-tema="claro"] .bw-param-detalle {
	background-color: var(--bw-superficie);
	border-color: var(--bw-borde-sutil);
	border-radius: var(--bw-radio-tarjeta);
	box-shadow: var(--bw-sombra-md);
}
html[data-bw-tema="claro"] .bw-param-arbol-boton:hover {
	background-color: var(--bw-flotar);
}
html[data-bw-tema="claro"] .bw-param-sql {
	background-color: var(--bw-hundida);
	color: var(--bw-texto-etiqueta);
}
html[data-bw-tema="claro"] .bw-param-datos dt {
	color: var(--bw-texto-secundario);
}
html[data-bw-tema="claro"] .bw-param-marca-cambio {
	color: color-mix(in srgb, var(--rz-warning-darker) 70%, #000);
}

/* ---- Editor de permisos y copia (usuarios y grupos): la lista y las sucursales como tarjetas, como el árbol de parámetros ---- */
html[data-bw-tema="claro"] .bw-perm-sucursales,
html[data-bw-tema="claro"] .bw-perm-lista {
	background-color: var(--bw-superficie);
	border-color: var(--bw-borde-sutil);
	border-radius: var(--bw-radio-tarjeta);
	box-shadow: var(--bw-sombra-sm);
}
html[data-bw-tema="claro"] .bw-perm-sucursal:hover:not(.bw-elegida),
html[data-bw-tema="claro"] .bw-perm-accion:hover,
html[data-bw-tema="claro"] .bw-perm-op:hover:not([aria-checked="true"]) {
	background-color: var(--bw-flotar);
}
html[data-bw-tema="claro"] .bw-perm-fila {
	border-bottom-color: var(--bw-borde-sutil);
}
html[data-bw-tema="claro"] .bw-perm-modulo {
	background-color: var(--bw-encabezado-tabla);
	color: var(--bw-texto-etiqueta);
}
html[data-bw-tema="claro"] .bw-perm-tres,
html[data-bw-tema="claro"] .bw-perm-op {
	border-color: var(--bw-borde-fuerte);
}
html[data-bw-tema="claro"] .bw-perm-tres {
	background-color: var(--bw-elevada);
}
/* Banda de cada unidad en la lista de sucursales: la capa hundida (la intermedia) con la franja del acento. */
html[data-bw-tema="claro"] .bw-perm-unidad {
	--bw-perm-unidad-fondo: var(--bw-hundida);
	--bw-perm-unidad-acento: var(--rz-primary);
	color: var(--bw-texto-etiqueta);
	box-shadow: 0 1px 0 var(--bw-borde-sutil);
}
html[data-bw-tema="claro"] .bw-perm-unidad-cuenta {
	color: var(--bw-texto-secundario);
}
html[data-bw-tema="claro"] .bw-perm-ico-aviso,
html[data-bw-tema="claro"] .bw-perm-marca-cambio:not(.bw-elegida *) {
	color: color-mix(in srgb, var(--rz-warning-darker) 70%, #000);
}
html[data-bw-tema="claro"] .bw-perm-efectivo[data-efectivo="Permitido"] {
	color: color-mix(in srgb, var(--rz-success-darker) 70%, #000);
}
html[data-bw-tema="claro"] .bw-perm-efectivo[data-efectivo="Negado"] {
	color: color-mix(in srgb, var(--rz-danger-darker) 70%, #000);
}
html[data-bw-tema="claro"] .bw-copia-grupo {
	border-color: var(--bw-borde-sutil);
	background-color: var(--bw-superficie);
}