/* =========================================================================
   SportModaERP - estilos de la app (layout + tema claro/oscuro)
   Paleta propia (no la generica de Bootstrap) con buen contraste en ambos
   modos. El tema se aplica con [data-theme="claro"|"obscuro"] en <html>.
   ========================================================================= */

:root,
[data-theme="claro"] {
	--sm-bg: #f4f6f9;
	--sm-surface: #ffffff;
	--sm-surface-2: #eef1f6;
	--sm-border: #e2e6ee;
	--sm-text: #1d2433;
	--sm-text-muted: #667085;
	--sm-primary: #4f46e5;
	--sm-primary-hover: #4338ca;
	--sm-primary-contrast: #ffffff;
	--sm-accent: #0ea5a4;
	--sm-success: #16a34a;
	--sm-warning: #d97706;
	--sm-danger: #dc2626;
	--sm-sidebar-bg: #1b1f3b;
	--sm-sidebar-text: #c7cbe8;
	--sm-sidebar-text-active: #ffffff;
	--sm-sidebar-active-bg: rgba(79, 70, 229, 0.35);
	--sm-topbar-bg: #ffffff;
	--sm-shadow: 0 2px 10px rgba(23, 26, 45, 0.06);
	--sm-shadow-lg: 0 12px 32px rgba(23, 26, 45, 0.14);
	--sm-radius: 0.75rem;
}

[data-theme="obscuro"] {
	--sm-bg: #10131f;
	--sm-surface: #171b2c;
	--sm-surface-2: #1e2338;
	--sm-border: #2a3049;
	--sm-text: #e7e9f5;
	--sm-text-muted: #9aa0c0;
	--sm-primary: #6d63f5;
	--sm-primary-hover: #7d74ff;
	--sm-primary-contrast: #ffffff;
	--sm-accent: #22d3d1;
	--sm-success: #34d399;
	--sm-warning: #fbbf24;
	--sm-danger: #f87171;
	--sm-sidebar-bg: #0b0e1a;
	--sm-sidebar-text: #a7ade0;
	--sm-sidebar-text-active: #ffffff;
	--sm-sidebar-active-bg: rgba(109, 99, 245, 0.35);
	--sm-topbar-bg: #171b2c;
	--sm-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	--sm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
	--sm-radius: 0.75rem;
}

* { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }

html, body {
	height: 100%;
}

body {
	background-color: var(--sm-bg);
	color: var(--sm-text);
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

a { color: var(--sm-primary); }
a:hover { color: var(--sm-primary-hover); }

.sm-card, .card {
	background-color: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow);
	transition: background-color .18s ease, border-color .18s ease, color .18s ease,
				box-shadow .2s ease, transform .2s ease;
}

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

/* Botones: leve elevacion al pasar el mouse, feedback de "presionado" al
   hacer click - consistente en toda la app sin tocar cada vista. */
.btn {
	transition: background-color .18s ease, border-color .18s ease, color .18s ease,
				box-shadow .2s ease, transform .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
	background-color: var(--sm-primary);
	border-color: var(--sm-primary);
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--sm-primary-hover);
	border-color: var(--sm-primary-hover);
	box-shadow: 0 6px 16px rgba(79, 70, 229, .3);
}

/* Foco visible consistente con la marca (accesibilidad + identidad),
   en vez del azul generico de Bootstrap. */
.form-control:focus, .form-select:focus, .btn:focus-visible, .nav-link:focus-visible {
	border-color: var(--sm-primary);
	box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .2);
}

/* -------------------------------------------------------------------
   Layout: sidebar fijo + topbar + contenido
   ------------------------------------------------------------------- */
.sm-app {
	display: flex;
	min-height: 100vh;
}

.sm-sidebar {
	width: 260px;
	flex-shrink: 0;
	background-color: var(--sm-sidebar-bg);
	color: var(--sm-sidebar-text);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	overflow-y: auto;
	z-index: 1030;
	transition: width .2s ease, transform .25s ease;
}

.sm-sidebar .sm-brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 1.1rem 1.25rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.sm-sidebar .sm-brand .sm-brand-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.sm-sidebar .sm-menu-group-title {
	text-transform: uppercase;
	font-size: .7rem;
	letter-spacing: .06em;
	color: rgba(199, 203, 232, .55);
	padding: 1rem 1.25rem .35rem;
}

.sm-sidebar .sm-menu-group-toggle {
	width: 100%;
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.sm-sidebar .sm-menu-group-toggle:hover { color: rgba(199, 203, 232, .85); }
.sm-sidebar .sm-menu-group-toggle.active { color: var(--sm-sidebar-text-active); }

.sm-menu-group-chevron {
	font-size: .65rem;
	transition: transform .2s ease;
}
.sm-menu-group-toggle[aria-expanded="true"] .sm-menu-group-chevron { transform: rotate(180deg); }

/* Colapsado a solo iconos: los grupos siempre se muestran completos y
   sin titulo/flecha (no tiene caso "plegar" cuando ya solo hay iconos). */
.sm-app.sm-sidebar-collapsed .sm-sidebar .sm-menu-group-title { display: none; }
.sm-app.sm-sidebar-collapsed .sm-sidebar .collapse:not(.show) { display: block; }

.sm-sidebar .nav-link {
	color: var(--sm-sidebar-text);
	padding: .55rem 1.25rem;
	border-radius: 0;
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .92rem;
	position: relative;
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

.sm-sidebar .nav-link i { width: 18px; text-align: center; transition: transform .15s ease; }

.sm-sidebar .nav-link:hover {
	background-color: rgba(255,255,255,.06);
	color: var(--sm-sidebar-text-active);
	padding-left: 1.45rem;
}
.sm-sidebar .nav-link:hover i { transform: scale(1.1); }

.sm-sidebar .nav-link.active {
	background-color: var(--sm-sidebar-active-bg);
	color: var(--sm-sidebar-text-active);
	font-weight: 600;
}

.sm-sidebar .nav-link.active::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background-color: var(--sm-accent);
}

/* Colapsado: solo iconos */
.sm-app.sm-sidebar-collapsed .sm-sidebar { width: 76px; }
.sm-app.sm-sidebar-collapsed .sm-sidebar .sm-brand span,
.sm-app.sm-sidebar-collapsed .sm-sidebar .sm-menu-group-title,
.sm-app.sm-sidebar-collapsed .sm-sidebar .nav-link span { display: none; }
.sm-app.sm-sidebar-collapsed .sm-content-wrap { margin-left: 76px; }

.sm-content-wrap {
	margin-left: 260px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sm-topbar {
	background-color: var(--sm-topbar-bg);
	border-bottom: 1px solid var(--sm-border);
	padding: .65rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 1020;
	box-shadow: var(--sm-shadow);
}

.sm-topbar .sm-icon-btn {
	background: transparent;
	border: 1px solid var(--sm-border);
	color: var(--sm-text);
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sm-topbar .sm-icon-btn:hover { background-color: var(--sm-surface-2); }

.sm-badge-notif {
	position: absolute;
	top: -4px;
	right: -4px;
	font-size: .62rem;
	padding: .25em .45em;
	line-height: 1;
	animation: sm-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes sm-badge-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

.sm-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent));
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .85rem;
}

.sm-content {
	padding: 1.5rem;
	flex-grow: 1;
}

/* Banner de bienvenida del dashboard: mismo efecto de particulas del
   login, pero contenido a una tarjeta y con menos densidad para no
   competir con los datos de abajo. */
.sm-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--sm-radius);
	padding: 1.75rem 2rem;
	margin-bottom: 1.25rem;
	background: linear-gradient(120deg, var(--sm-primary), var(--sm-accent));
	box-shadow: var(--sm-shadow-lg);
	animation: sm-fade-up .35s ease both;
}
.sm-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: .55;
}
.sm-hero-content {
	position: relative;
	z-index: 1;
	color: #fff;
}
.sm-hero-content p { color: rgba(255, 255, 255, .85); }

.sm-kpi {
	border-radius: var(--sm-radius);
	background-color: var(--sm-surface);
	border: 1px solid var(--sm-border);
	box-shadow: var(--sm-shadow);
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	animation: sm-fade-up .35s ease both;
	transition: box-shadow .2s ease, transform .2s ease;
}
.sm-kpi:hover { box-shadow: var(--sm-shadow-lg); transform: translateY(-3px); }

.sm-kpi .sm-kpi-icon {
	width: 46px; height: 46px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.15rem;
	color: #fff;
	flex-shrink: 0;
	transition: transform .25s ease;
}
.sm-kpi:hover .sm-kpi-icon { transform: scale(1.08) rotate(-4deg); }

/* Aparicion escalonada: cuando varias .sm-kpi/.sm-card viven en la misma
   fila (row > [class*="col-"]), cada una entra un poco despues que la
   anterior en vez de todas a la vez - se siente mas vivo sin animar nada
   por separado en cada vista. */
.row > [class*="col-"]:nth-child(1) > .sm-kpi,
.row > [class*="col-"]:nth-child(1) > .sm-card { animation-delay: 0s; }
.row > [class*="col-"]:nth-child(2) > .sm-kpi,
.row > [class*="col-"]:nth-child(2) > .sm-card { animation-delay: .05s; }
.row > [class*="col-"]:nth-child(3) > .sm-kpi,
.row > [class*="col-"]:nth-child(3) > .sm-card { animation-delay: .1s; }
.row > [class*="col-"]:nth-child(4) > .sm-kpi,
.row > [class*="col-"]:nth-child(4) > .sm-card { animation-delay: .15s; }
.row > [class*="col-"]:nth-child(n+5) > .sm-kpi,
.row > [class*="col-"]:nth-child(n+5) > .sm-card { animation-delay: .2s; }

/* Termina en transform:none (no translateY(0)): con fill-mode "both" el
   ultimo fotograma se queda aplicado, y CUALQUIER transform crea un
   contexto de apilamiento que deja a un modal anidado debajo del
   backdrop de Bootstrap (la pantalla se "congela" al abrirlo). */
@keyframes sm-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.sm-fade-in { animation: sm-fade-up .3s ease both; }

/* -------------------------------------------------------------------
   Pantallas publicas (login / recuperar / restablecer)
   ------------------------------------------------------------------- */
.sm-auth-page {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #10132a;
	padding: 1.5rem;
}

/* Blobs de gradiente que derivan lentamente detras de las particulas -
   capa barata (solo CSS, compositada por el GPU) que le da profundidad
   al fondo sin sumar peso de JS. */
.sm-auth-page::before,
.sm-auth-page::after {
	content: "";
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .45;
	z-index: 0;
	pointer-events: none;
}
.sm-auth-page::before {
	background: var(--sm-primary);
	top: -20vmax;
	left: -15vmax;
	animation: sm-blob-drift-1 22s ease-in-out infinite alternate;
}
.sm-auth-page::after {
	background: var(--sm-accent);
	bottom: -22vmax;
	right: -15vmax;
	animation: sm-blob-drift-2 26s ease-in-out infinite alternate;
}

@keyframes sm-blob-drift-1 {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(8vmax, 6vmax) scale(1.15); }
}
@keyframes sm-blob-drift-2 {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-6vmax, -8vmax) scale(1.1); }
}

.sm-auth-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.sm-auth-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 420px;
	background-color: rgba(23, 27, 44, .62);
	border: 1px solid rgba(255, 255, 255, .09);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: #eef0fb;
	border-radius: 1.1rem;
	box-shadow: 0 24px 60px rgba(4, 6, 20, .55);
	padding: 2.25rem 2rem;
	animation: sm-fade-up .5s ease both;
}
.sm-auth-card .form-label { color: #c9cdea; }
.sm-auth-card .text-muted { color: #9aa0c8 !important; }
.sm-auth-card .input-group-text {
	background-color: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: #c9cdea;
}
.sm-auth-card .form-control {
	background-color: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .14);
	color: #f2f3fb;
}
.sm-auth-card .form-control:focus {
	background-color: rgba(255, 255, 255, .08);
	border-color: var(--sm-accent);
	box-shadow: 0 0 0 .2rem rgba(14, 165, 164, .25);
	color: #fff;
}
.sm-auth-card .form-control::placeholder { color: #7d83ab; }
.sm-auth-card a { color: var(--sm-accent); }
.sm-auth-card a:hover { color: #5eead4; }

/* -------------------------------------------------------------------
   SweetAlert2: respeta el tema claro/oscuro de la app. SweetAlert2 no
   sabe nada de nuestras variables --sm-*, asi que se lo forzamos aqui
   una sola vez y cubre todas las llamadas Swal.fire() de todo el sitio.
   ------------------------------------------------------------------- */
[data-theme="obscuro"] .swal2-popup {
	background-color: var(--sm-surface);
	color: var(--sm-text);
}
[data-theme="obscuro"] .swal2-title,
[data-theme="obscuro"] .swal2-html-container {
	color: var(--sm-text);
}
[data-theme="obscuro"] .swal2-input,
[data-theme="obscuro"] .swal2-textarea,
[data-theme="obscuro"] .swal2-select {
	background-color: var(--sm-surface-2);
	border-color: var(--sm-border);
	color: var(--sm-text);
}
[data-theme="obscuro"] .swal2-close {
	color: var(--sm-text-muted);
}
[data-theme="obscuro"] .swal2-close:hover {
	color: var(--sm-text);
}
[data-theme="obscuro"] .swal2-timer-progress-bar {
	background: var(--sm-primary);
}

/* -------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.sm-sidebar {
		transform: translateX(-100%);
	}
	.sm-app.sm-sidebar-mobile-open .sm-sidebar {
		transform: translateX(0);
	}
	.sm-content-wrap, .sm-app.sm-sidebar-collapsed .sm-content-wrap {
		margin-left: 0;
	}
	.sm-sidebar-backdrop {
		display: none;
		position: fixed; inset: 0;
		background: rgba(0,0,0,.45);
		z-index: 1025;
	}
	.sm-app.sm-sidebar-mobile-open .sm-sidebar-backdrop { display: block; }
}

/* -------------------------------------------------------------------
   Registros inactivos: los listados de administracion ahora siempre
   traen activos + inactivos (ver CLAUDE.md "Reactivar"); esta clase
   atenua la fila para diferenciarlos sin necesitar una pantalla aparte.
   ------------------------------------------------------------------- */
tr.sm-row-inactiva { opacity: .55; }
tr.sm-row-inactiva:hover { opacity: .85; }

/* =========================================================================
   Mejoras visuales v2: encabezados con icono, tablas, modales, muestras de
   color, avatares, calendario de caja, barra de progreso, boton "subir",
   ajustes moviles y respeto a prefers-reduced-motion.
   ========================================================================= */

/* Encabezado de cada pantalla: el icono del <h4> se vuelve una "ficha"
   con degradado (aplica a todas las vistas sin tocar su markup). */
.sm-content > .sm-fade-in > div:first-child h4.fw-bold {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.sm-content > .sm-fade-in > div:first-child h4.fw-bold > i:first-child {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 12px;
	margin-right: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	color: #fff !important;
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent));
	box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
	animation: sm-pop-in .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.sm-content > .sm-fade-in > div:first-child p.text-muted { margin-left: calc(42px + .75rem); }

@keyframes sm-pop-in {
	from { opacity: 0; transform: scale(.6) rotate(-12deg); }
	to   { opacity: 1; transform: scale(1) rotate(0); }
}

.min-w-0 { min-width: 0; }

/* Tarjetas grandes (calendario, tablas largas) no deben "saltar" al pasar
   el mouse: el transform ademas rompe los popovers posicionados dentro. */
.sm-card.sm-card-estatica:hover { transform: none; }

/* Tablas */
.sm-card .table { --bs-table-bg: transparent; margin-bottom: 0; }
.sm-card .table > thead th {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sm-text-muted);
	font-weight: 700;
	border-bottom-width: 1px;
	white-space: nowrap;
}
.sm-card .table-hover > tbody > tr { transition: background-color .15s ease; }
.sm-card .table-hover > tbody > tr:hover { --bs-table-hover-bg: rgba(79, 70, 229, .06); }
.sm-card .table > tbody > tr > td:last-child { white-space: nowrap; }
.sm-card .table .btn-sm { border-radius: .5rem; }

/* DataTables: buscador redondeado, controles apilados en movil */
.dataTables_wrapper .dataTables_filter input {
	border-radius: 999px;
	padding-left: .9rem;
	background-color: var(--sm-surface-2);
	border-color: var(--sm-border);
}
.dataTables_wrapper .dataTables_info { color: var(--sm-text-muted); font-size: .82rem; }
.dataTables_wrapper .pagination .page-link { border-radius: .5rem; margin: 0 .1rem; }
.sm-dt-vacio { padding: 1.5rem 0; color: var(--sm-text-muted); }
.sm-dt-vacio i { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .5; }

/* Modales: entrada con zoom suave y cabecera con linea de color */
.modal.fade .modal-dialog { transform: scale(.94) translateY(12px); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.modal.show .modal-dialog { transform: none; }
.modal-content.sm-card:hover { transform: none; }
.modal-content { overflow: hidden; }
.modal-header { position: relative; }
.modal-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--sm-primary), var(--sm-accent));
}
.modal-title i { color: var(--sm-primary); }
/* Cuando un <form> envuelve header/body/footer, el modal "scrollable"
   necesita que el form se encoja para que solo el body haga scroll. */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Insignias suaves de estado reutilizables */
.sm-badge-soft { font-weight: 600; padding: .38em .7em; border-radius: 999px; font-size: .75em; display: inline-flex; align-items: center; gap: .3em; }
.sm-badge-soft.success { background: rgba(22, 163, 74, .14); color: var(--sm-success); }
.sm-badge-soft.danger  { background: rgba(220, 38, 38, .13); color: var(--sm-danger); }
.sm-badge-soft.warning { background: rgba(217, 119, 6, .15); color: var(--sm-warning); }
.sm-badge-soft.info    { background: rgba(14, 165, 164, .15); color: var(--sm-accent); }
.sm-badge-soft.muted   { background: var(--sm-surface-2); color: var(--sm-text-muted); }
.sm-badge-soft.primary { background: rgba(79, 70, 229, .13); color: var(--sm-primary); }

/* Muestra de color (catalogo de colores, inventario, POS) */
.sm-swatch {
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	border: 2px solid var(--sm-surface);
	box-shadow: 0 0 0 1px var(--sm-border), 0 2px 6px rgba(0, 0, 0, .12);
	vertical-align: middle;
	flex-shrink: 0;
	transition: transform .2s ease;
}
.sm-swatch-lg { width: 2.4rem; height: 2.4rem; border-width: 3px; }
.sm-swatch-vacio {
	background: repeating-linear-gradient(45deg, var(--sm-surface-2), var(--sm-surface-2) 3px, var(--sm-border) 3px, var(--sm-border) 6px);
}
tr:hover .sm-swatch { transform: scale(1.2); }

/* Avatares de distintos tamanos (tablas de usuarios, modal de detalle) */
.sm-avatar-sm { width: 36px; height: 36px; font-size: .78rem; flex-shrink: 0; }
.sm-avatar-xl {
	width: 112px;
	height: 112px;
	font-size: 2.2rem;
	border: 4px solid var(--sm-surface);
	box-shadow: 0 10px 28px rgba(23, 26, 45, .22);
}
.sm-user-cell { display: flex; align-items: center; gap: .65rem; min-width: 180px; }
.sm-user-cell .sm-avatar { transition: transform .2s ease; }
tr:hover .sm-user-cell .sm-avatar { transform: scale(1.08); }
.sm-fila-clic { cursor: pointer; }

/* Ficha de detalle de usuario (modal del reporte) */
.sm-perfil-banner {
	height: 96px;
	margin: -1rem -1rem 0;
	background: linear-gradient(120deg, var(--sm-primary), var(--sm-accent));
	position: relative;
	overflow: hidden;
}
.sm-perfil-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% -20%, rgba(255, 255, 255, .35), transparent 55%);
}
.sm-perfil-cabecera { margin-top: -56px; position: relative; z-index: 1; text-align: center; }
.sm-dato { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--sm-border); }
.sm-dato:last-child { border-bottom: 0; }
.sm-dato > i { width: 1.25rem; text-align: center; color: var(--sm-primary); margin-top: .2rem; }
.sm-dato small { display: block; color: var(--sm-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.sm-seccion-titulo { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sm-text-muted); margin: 1rem 0 .25rem; }

/* Mini tarjetas de estadistica (desglose de caja, detalle de usuario) */
.sm-stat {
	background: var(--sm-surface-2);
	border: 1px solid var(--sm-border);
	border-radius: .7rem;
	padding: .7rem .85rem;
	height: 100%;
	animation: sm-fade-up .35s ease both;
}
.sm-stat .sm-stat-label { font-size: .72rem; color: var(--sm-text-muted); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .35rem; }
.sm-stat .sm-stat-valor { font-size: 1.1rem; font-weight: 700; margin-top: .15rem; word-break: break-word; }
.sm-stat.sm-stat-destacado { background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent)); color: #fff; border: 0; }
.sm-stat.sm-stat-destacado .sm-stat-label { color: rgba(255, 255, 255, .85); }

/* Esqueleto de carga para contenido que llega por AJAX */
.sm-skeleton {
	border-radius: .5rem;
	background: linear-gradient(90deg, var(--sm-surface-2) 25%, var(--sm-border) 37%, var(--sm-surface-2) 63%);
	background-size: 400% 100%;
	animation: sm-shimmer 1.2s ease infinite;
	min-height: 1rem;
}
@keyframes sm-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* -------------------------------------------------------------------
   Calendario de caja (FullCalendar v6, tema ligado a las variables --sm-*)
   ------------------------------------------------------------------- */
.sm-calendario, .sm-calendario.fc {
	--fc-border-color: var(--sm-border);
	--fc-page-bg-color: var(--sm-surface);
	--fc-neutral-bg-color: var(--sm-surface-2);
	--fc-list-event-hover-bg-color: var(--sm-surface-2);
	--fc-today-bg-color: rgba(79, 70, 229, .08);
	--fc-button-bg-color: var(--sm-surface-2);
	--fc-button-border-color: var(--sm-border);
	--fc-button-text-color: var(--sm-text);
	--fc-button-hover-bg-color: var(--sm-primary);
	--fc-button-hover-border-color: var(--sm-primary);
	--fc-button-active-bg-color: var(--sm-primary);
	--fc-button-active-border-color: var(--sm-primary);
	--fc-event-border-color: transparent;
	--fc-event-bg-color: transparent;
	--fc-event-text-color: inherit;
	color: var(--sm-text);
}
/* FullCalendar pinta .fc-event-main en blanco; el color lo decide la clase
   de estado del dia (.sm-fc-positivo / negativo / neutro). */
.sm-calendario.fc .sm-fc-caja .fc-event-main { color: inherit; }
.sm-calendario.fc a { text-decoration: none; }
.sm-calendario.fc .fc-button { border-radius: .55rem; font-size: .85rem; text-transform: capitalize; box-shadow: none !important; }
.sm-calendario.fc .fc-button:hover,
.sm-calendario.fc .fc-button-active { color: #fff; }
.sm-calendario.fc .fc-toolbar-title { font-size: 1.2rem; font-weight: 700; }
.sm-calendario.fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.sm-calendario.fc .fc-col-header-cell-cushion { color: var(--sm-text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; padding: .55rem 0; }
.sm-calendario.fc .fc-daygrid-day-number { color: var(--sm-text); text-decoration: none; font-weight: 600; font-size: .85rem; }
.sm-calendario.fc .fc-daygrid-day { cursor: pointer; transition: background-color .15s ease; }
.sm-calendario.fc .fc-daygrid-day:hover { background: rgba(79, 70, 229, .05); }
.sm-calendario.fc .fc-day-today .fc-daygrid-day-number {
	background: var(--sm-primary);
	color: #fff;
	border-radius: 999px;
	min-width: 1.7rem;
	text-align: center;
	margin: .2rem;
	padding: .1rem .45rem;
}
.sm-calendario.fc .fc-day-other .fc-daygrid-day-top { opacity: .45; }
.sm-calendario.fc .fc-daygrid-event.sm-fc-caja { border-radius: .55rem; padding: .3rem .45rem; margin: 0 .3rem .3rem !important; white-space: normal; transition: transform .15s ease, box-shadow .15s ease; }
.sm-calendario.fc .fc-daygrid-event.sm-fc-caja:hover { transform: translateY(-2px); box-shadow: var(--sm-shadow-lg); }
.sm-fc-caja.sm-fc-positivo { background: rgba(22, 163, 74, .14); color: var(--sm-success); }
.sm-fc-caja.sm-fc-negativo { background: rgba(220, 38, 38, .13); color: var(--sm-danger); }
.sm-fc-caja.sm-fc-neutro { background: var(--sm-surface-2); color: var(--sm-text-muted); }
.sm-fc-contenido { line-height: 1.15; width: 100%; min-width: 0; }
.sm-fc-contenido .sm-fc-monto { font-weight: 800; font-size: .88rem; display: flex; align-items: center; gap: .3rem; overflow: hidden; text-overflow: ellipsis; }
.sm-fc-contenido .sm-fc-sub { font-size: .7rem; opacity: .85; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.sm-calendario.fc .fc-list-event { cursor: pointer; }
.sm-calendario.fc .fc-list-day-cushion { background: var(--sm-surface-2); }
.sm-leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--sm-text-muted); }
.sm-leyenda span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.sm-leyenda .pos::before { background: var(--sm-success); }
.sm-leyenda .neg::before { background: var(--sm-danger); }
.sm-leyenda .neu::before { background: var(--sm-text-muted); }

/* Lista de movimientos en el modal del dia */
.sm-mov { display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem; border-bottom: 1px solid var(--sm-border); }
.sm-mov:last-child { border-bottom: 0; }
.sm-mov-icono { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem; }
.sm-mov.cancelado { opacity: .5; }
.sm-mov.cancelado .sm-mov-texto { text-decoration: line-through; }

/* -------------------------------------------------------------------
   Topbar: ruta de navegacion y fecha
   ------------------------------------------------------------------- */
.sm-breadcrumb { font-size: .85rem; color: var(--sm-text-muted); display: flex; align-items: center; gap: .45rem; min-width: 0; }
.sm-breadcrumb strong { color: var(--sm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-breadcrumb .sep { font-size: .6rem; opacity: .6; }
.sm-fecha-chip { font-size: .78rem; color: var(--sm-text-muted); background: var(--sm-surface-2); border: 1px solid var(--sm-border); border-radius: 999px; padding: .3rem .75rem; white-space: nowrap; }
#sm-theme-toggle i { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
#sm-theme-toggle.girando i { transform: rotate(360deg); }

/* Sidebar: tarjeta de usuario al pie */
.sm-sidebar { display: flex; flex-direction: column; }
.sm-sidebar nav { flex-grow: 1; }
.sm-sidebar-user {
	margin: .75rem;
	padding: .7rem;
	border-radius: .75rem;
	background: rgba(255, 255, 255, .05);
	display: flex;
	align-items: center;
	gap: .6rem;
	color: #fff;
	font-size: .8rem;
	line-height: 1.2;
	text-decoration: none;
}
.sm-sidebar-user:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sm-sidebar-user small { color: var(--sm-sidebar-text); opacity: .75; }
.sm-sidebar-user-txt { min-width: 0; }
.sm-sidebar-user-txt strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-app.sm-sidebar-collapsed .sm-sidebar-user .sm-sidebar-user-txt { display: none; }
.sm-app.sm-sidebar-collapsed .sm-sidebar-user { justify-content: center; padding: .5rem; }

/* Barra de progreso al navegar entre pantallas */
#sm-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0;
	z-index: 2000;
	background: linear-gradient(90deg, var(--sm-accent), var(--sm-primary));
	box-shadow: 0 0 10px var(--sm-primary);
	opacity: 0;
	pointer-events: none;
}
#sm-progress.activo { opacity: 1; width: 80%; transition: width 4s cubic-bezier(.1, .6, .2, 1), opacity .2s ease; }

/* Boton flotante "volver arriba" */
#sm-arriba {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	color: #fff;
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent));
	box-shadow: var(--sm-shadow-lg);
	z-index: 1040;
	opacity: 0;
	transform: translateY(20px) scale(.8);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
#sm-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
#sm-arriba.visible:hover { transform: translateY(-3px); }

.sm-footer { padding: 1rem 1.5rem; font-size: .78rem; color: var(--sm-text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; border-top: 1px solid var(--sm-border); }

/* Pantalla de acceso denegado */
.sm-sin-permiso { max-width: 520px; margin: 3rem auto; text-align: center; }
.sm-sin-permiso-icono {
	width: 96px; height: 96px; border-radius: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 2.4rem; color: #fff;
	background: linear-gradient(135deg, var(--sm-danger), var(--sm-warning));
	box-shadow: 0 16px 36px rgba(220, 38, 38, .3);
	animation: sm-pop-in .5s cubic-bezier(.34, 1.56, .64, 1) both, sm-flotar 3s ease-in-out .5s infinite;
}
@keyframes sm-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Onda al hacer clic en botones (la agrega app.js) */
.btn { position: relative; overflow: hidden; }
.sm-onda {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(255, 255, 255, .45);
	animation: sm-onda .55s linear;
	pointer-events: none;
}
@keyframes sm-onda { to { transform: scale(3.2); opacity: 0; } }

/* -------------------------------------------------------------------
   Responsivo (complementa el bloque original)
   ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
   Selector de fecha con dial circular (assets/js/dial-fecha.js)
   ------------------------------------------------------------------- */
.sm-fecha-campo { position: relative; }
.sm-fecha-grupo { flex-wrap: nowrap; min-width: 190px; }
.sm-fecha-grupo.sm-fecha-sin-limpiar > .sm-fecha-boton { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }
.sm-fecha-grupo.input-group-sm.sm-fecha-sin-limpiar > .sm-fecha-boton { border-top-right-radius: var(--bs-border-radius-sm); border-bottom-right-radius: var(--bs-border-radius-sm); }
.sm-fecha-boton { cursor: pointer; background-color: var(--bs-body-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-fecha-boton:hover { border-color: var(--sm-primary); }
.sm-fecha-boton.is-invalid { border-color: var(--sm-danger); }
.sm-fecha-texto { font-weight: 600; }
.sm-fecha-vacia { color: var(--sm-text-muted); }
.sm-fecha-grupo .btn { transform: none !important; }
/* El input real sigue en el formulario (name/valor/validacion) pero oculto. */
.sm-fecha-original { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; border: 0 !important; padding: 0 !important; bottom: 0; left: 50%; }

.sm-dial-capa {
	position: fixed;
	inset: 0;
	z-index: 1070; /* encima de los modales de Bootstrap (1055) */
	background: rgba(12, 14, 30, .55);
	backdrop-filter: blur(3px);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: sm-dial-fondo .2s ease both;
}
.sm-dial-capa.visible { display: flex; }
.sm-dial-capa.saliendo { animation: sm-dial-fondo .18s ease reverse both; }
.sm-dial-capa.saliendo .sm-dial { animation: sm-dial-salir .18s ease both; }
@keyframes sm-dial-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-dial-entrar { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sm-dial-salir { to { opacity: 0; transform: scale(.9); } }

.sm-dial {
	width: 340px;
	max-width: 100%;
	background: var(--sm-surface);
	color: var(--sm-text);
	border-radius: 1.4rem;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	animation: sm-dial-entrar .3s cubic-bezier(.34, 1.4, .64, 1) both;
}
.sm-dial-cabecera {
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent));
	color: #fff;
	padding: 1rem 1.25rem .9rem;
}
.sm-dial-semana { font-size: .8rem; text-transform: capitalize; opacity: .85; }
.sm-dial-partes { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.sm-dial-parte {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .6);
	font-size: 1.6rem;
	font-weight: 800;
	padding: 0 .2rem;
	border-radius: .5rem;
	line-height: 1.2;
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.sm-dial-parte:hover { color: #fff; }
.sm-dial-parte.activo { color: #fff; background: rgba(255, 255, 255, .18); transform: scale(1.04); }

.sm-dial-cuerpo { padding: .75rem 1rem .25rem; }
.sm-dial-instruccion { text-align: center; font-size: .8rem; color: var(--sm-text-muted); margin-bottom: .5rem; }
.sm-dial-nav { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.sm-dial-flecha {
	width: 32px; height: 32px; flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--sm-border);
	background: var(--sm-surface-2);
	color: var(--sm-text);
	display: inline-flex; align-items: center; justify-content: center;
}
.sm-dial-flecha:hover { background: var(--sm-primary); color: #fff; border-color: var(--sm-primary); }

.sm-dial-cara {
	position: relative;
	width: 250px;
	max-width: calc(100vw - 7rem);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--sm-surface-2);
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, .08);
	touch-action: none; /* el arrastre no hace scroll en moviles */
	user-select: none;
	cursor: grab;
}
.sm-dial-cara.arrastrando { cursor: grabbing; }
.sm-dial-cara.arrastrando .sm-dial-manecilla { transition: none; }
.sm-dial-centro {
	position: absolute; left: 50%; top: 50%;
	width: 10px; height: 10px; margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--sm-primary);
	z-index: 2;
}
/* La manecilla crece desde el centro hacia arriba y se rota al valor. */
.sm-dial-manecilla {
	position: absolute;
	left: calc(50% - 1px);
	bottom: 50%;
	width: 2px;
	background: var(--sm-primary);
	transform-origin: 50% 100%;
	transition: transform .35s cubic-bezier(.34, 1.3, .64, 1), height .3s ease;
	z-index: 1;
	pointer-events: none;
}
.sm-dial-punta {
	position: absolute;
	top: 0; left: 50%;
	width: 40px; height: 40px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--sm-primary);
	opacity: .18;
}
.sm-dial-items { position: absolute; inset: 0; z-index: 3; }
.sm-dial-item {
	position: absolute;
	width: 38px; height: 38px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--sm-text);
	font-weight: 600;
	font-size: .82rem;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.sm-dial-cara[data-paso="anio"] .sm-dial-item { font-size: .72rem; width: 44px; }
.sm-dial-cara[data-paso="mes"] .sm-dial-item { font-size: .72rem; letter-spacing: .02em; }
.sm-dial-item.interno { font-size: .74rem; width: 30px; height: 30px; color: var(--sm-text-muted); }
.sm-dial-item:hover:not(:disabled) { background: rgba(79, 70, 229, .14); transform: translate(-50%, -50%) scale(1.12); }
.sm-dial-item.seleccionado,
.sm-dial-item.seleccionado.interno { background: var(--sm-primary); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, .45); }
.sm-dial-item:disabled { opacity: .25; cursor: not-allowed; }
.sm-dial-items.entrando .sm-dial-item { animation: sm-dial-item-entrar .3s ease both; }
@keyframes sm-dial-item-entrar { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.sm-dial-items.entrando .sm-dial-item:disabled { animation-name: sm-dial-item-entrar-off; }
@keyframes sm-dial-item-entrar-off { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: .25; transform: translate(-50%, -50%) scale(1); } }

.sm-dial-pie { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem .9rem; }

@media (max-width: 767.98px) {
	.sm-content { padding: 1rem; }
	.sm-topbar { padding: .55rem .9rem; }
	.sm-content > .sm-fade-in > div:first-child h4.fw-bold { font-size: 1.15rem; }
	.sm-content > .sm-fade-in > div:first-child h4.fw-bold > i:first-child { width: 36px; height: 36px; font-size: .9rem; border-radius: 10px; }
	.sm-content > .sm-fade-in > div:first-child p.text-muted { margin-left: 0; font-size: .85rem; margin-top: .35rem; }
	.sm-kpi { padding: .85rem; gap: .7rem; }
	.sm-kpi .sm-kpi-icon { width: 38px; height: 38px; font-size: .95rem; border-radius: 10px; }
	.sm-kpi .fs-4 { font-size: 1.1rem !important; }
	.dataTables_wrapper .row > div { text-align: left !important; justify-content: flex-start !important; }
	.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left !important; margin-bottom: .5rem; }
	.dataTables_wrapper .dataTables_filter label { width: 100%; }
	.dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; display: block; }
	.dataTables_wrapper .dataTables_paginate { margin-top: .5rem; }
	.dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-start !important; flex-wrap: wrap; }
	.sm-card .table { font-size: .85rem; }
	.sm-calendario.fc .fc-toolbar { flex-direction: column; gap: .5rem; }
	.sm-calendario.fc .fc-toolbar-title { font-size: 1.05rem; }
	.sm-hero { padding: 1.25rem; }
	#sm-arriba { right: .9rem; bottom: .9rem; }
	.sm-footer { padding: .8rem 1rem; }
}

@media (max-width: 575.98px) {
	.sm-card.p-4 { padding: 1rem !important; }
	.sm-auth-card { padding: 1.75rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.sm-sidebar, .sm-topbar, #sm-arriba, #sm-progress, .sm-footer { display: none !important; }
	.sm-content-wrap { margin-left: 0 !important; }
}

/* -------------------------------------------------------------------
   Punto de venta y cambios: lector de codigos + carrito
   ------------------------------------------------------------------- */
.sm-lector { position: relative; z-index: 5; }
.sm-lector-campo { position: relative; }
.sm-lector-icono {
	position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
	font-size: 1.35rem; color: var(--sm-primary); pointer-events: none;
}
.sm-lector-input.form-control {
	padding-left: 3.1rem; height: 3.4rem; font-size: 1.1rem; font-weight: 500;
	border-width: 2px; border-radius: .7rem;
}
.sm-lector-input.form-control:focus { border-color: var(--sm-primary); box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .15); }
.sm-lector-lista {
	position: absolute; left: 0; right: 0; top: calc(100% + .35rem);
	background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: .7rem;
	box-shadow: var(--sm-shadow-lg); max-height: 340px; overflow-y: auto; z-index: 20; padding: .3rem;
}
.sm-lector-opcion {
	display: flex; align-items: center; gap: .75rem; width: 100%;
	border: 0; background: transparent; color: var(--sm-text); padding: .45rem .55rem; border-radius: .55rem;
}
.sm-lector-opcion:hover, .sm-lector-opcion.activa { background: var(--sm-surface-2); }
.sm-lector-opcion img, .sm-lector-sinfoto { width: 40px; height: 40px; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.sm-lector-sinfoto { display: inline-flex; align-items: center; justify-content: center; background: var(--sm-surface-2); color: var(--sm-text-muted); }
.sm-lector-vacio { padding: .8rem; color: var(--sm-text-muted); font-size: .9rem; }
.sm-lector-aviso { margin-top: .6rem; padding: .55rem .8rem; border-radius: .6rem; font-size: .9rem; font-weight: 500; animation: sm-fade-up .25s ease both; }
.sm-lector-aviso.danger { background: rgba(220, 38, 38, .12); color: var(--sm-danger); }
.sm-lector-aviso.warning { background: rgba(217, 119, 6, .14); color: var(--sm-warning); }
.sm-lector-aviso.success { background: rgba(22, 163, 74, .13); color: var(--sm-success); }
.sm-atajo kbd { background: var(--sm-surface-2); color: var(--sm-text); border: 1px solid var(--sm-border); font-size: .75rem; }

.sm-carrito-cabecera, .sm-carrito-pie { padding: .9rem 1.1rem; }
.sm-carrito-cabecera { border-bottom: 1px solid var(--sm-border); }
.sm-carrito-pie { border-top: 1px solid var(--sm-border); background: var(--sm-surface-2); border-radius: 0 0 var(--sm-radius) var(--sm-radius); }
.sm-carrito-lista { max-height: calc(100vh - 430px); min-height: 220px; overflow-y: auto; }
.sm-carrito-vacio { text-align: center; color: var(--sm-text-muted); padding: 3.5rem 1rem; }
.sm-carrito-vacio i { font-size: 2.6rem; opacity: .45; margin-bottom: .8rem; display: block; }
.sm-carrito-item {
	display: flex; align-items: center; gap: .85rem; padding: .7rem 1.1rem;
	border-bottom: 1px dashed var(--sm-border); animation: sm-fade-up .25s ease both;
}
.sm-carrito-item:last-child { border-bottom: 0; }
.sm-carrito-item.sm-recien { background: rgba(79, 70, 229, .07); }
.sm-carrito-foto { width: 52px; height: 52px; border-radius: .6rem; object-fit: cover; flex-shrink: 0; }
.sm-carrito-foto.vacia { display: inline-flex; align-items: center; justify-content: center; background: var(--sm-surface-2); color: var(--sm-text-muted); font-size: 1.2rem; }
.sm-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--sm-border); border-radius: .55rem; overflow: hidden; flex-shrink: 0; }
.sm-cantidad button { border: 0; background: var(--sm-surface-2); color: var(--sm-text); width: 2rem; height: 2rem; }
.sm-cantidad button:hover:not(:disabled) { background: var(--sm-primary); color: #fff; }
.sm-cantidad button:disabled { opacity: .4; }
.sm-cantidad input { width: 3rem; height: 2rem; border: 0; text-align: center; background: var(--sm-surface); color: var(--sm-text); -moz-appearance: textfield; }
.sm-cantidad input::-webkit-outer-spin-button, .sm-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sm-carrito-importe { min-width: 6.5rem; text-align: right; flex-shrink: 0; }
.sm-total-grande { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--sm-primary); }
@media (max-width: 575.98px) {
	.sm-carrito-item { flex-wrap: wrap; }
	.sm-carrito-item .sm-carrito-info { flex-basis: calc(100% - 70px); }
	.sm-carrito-importe { min-width: 0; margin-left: auto; }
	.sm-carrito-lista { max-height: none; }
}

/* Selector venta / apartado del modal de cobro */
.sm-tipo-op { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sm-tipo-op .btn { text-align: left; padding: .7rem .85rem; border-radius: .7rem; border-width: 2px; }
.sm-tipo-op .btn i { font-size: 1.15rem; margin-right: .4rem; }
.sm-tipo-op .btn small { display: block; font-weight: 400; opacity: .8; font-size: .75rem; margin-top: .15rem; }
.sm-resumen-cobro { background: var(--sm-surface-2); border: 1px solid var(--sm-border); border-radius: .7rem; padding: .8rem 1rem; }
.sm-resumen-cobro .fila { display: flex; justify-content: space-between; padding: .15rem 0; }
.sm-resumen-cobro .fila.total { font-size: 1.25rem; font-weight: 800; color: var(--sm-primary); border-top: 1px dashed var(--sm-border); margin-top: .35rem; padding-top: .45rem; }
.sm-resumen-cobro .fila.cambio { font-size: 1.05rem; font-weight: 700; color: var(--sm-success); }

/* Ticket dentro de un modal (iframe) */
.sm-ticket-frame { width: 100%; height: 62vh; min-height: 380px; border: 0; border-radius: .6rem; background: #f4f6f9; }
.sm-aviso-cambio { font-size: 1.15rem; }

/* Cambios: prendas que regresa el cliente */
.sm-devolucion-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--sm-border); border-radius: .7rem; margin-bottom: .5rem; }
.sm-devolucion-item.marcada { border-color: var(--sm-warning); background: rgba(217, 119, 6, .07); }
.sm-devolucion-item.agotada { opacity: .55; }
.sm-balance { border-radius: .8rem; padding: 1rem 1.1rem; text-align: center; }
.sm-balance.paga { background: rgba(79, 70, 229, .1); color: var(--sm-primary); }
.sm-balance.devuelve { background: rgba(217, 119, 6, .13); color: var(--sm-warning); }
.sm-balance.parejo { background: rgba(22, 163, 74, .12); color: var(--sm-success); }
.sm-balance .sm-balance-monto { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }

/* -------------------------------------------------------------------
   Select2 (assets/js/sm-select2.js): mismo aspecto que .form-select de
   Bootstrap, con las variables del tema -> funciona en claro y obscuro.
   ------------------------------------------------------------------- */
.select2-container { font-size: 1rem; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	min-height: calc(1.5em + .75rem + 2px);
	background-color: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: .5rem;
	color: var(--sm-text);
}
.select2-container--default .select2-selection--single { height: auto; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--sm-text);
	line-height: 1.5;
	padding: .375rem 2.25rem .375rem .75rem;
	width: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--sm-text-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: .5rem; top: 0; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--sm-text-muted) transparent transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--sm-text-muted) transparent; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--sm-primary);
	box-shadow: 0 0 0 .25rem rgba(79, 70, 229, .15);
	outline: 0;
}
.select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--sm-surface-2); opacity: .75; cursor: not-allowed; }
.select2-container .sm-s2-sm .select2-selection__rendered { padding-top: .25rem; padding-bottom: .25rem; font-size: .875rem; }
.select2-container--default .select2-selection--single.sm-s2-sm { min-height: calc(1.5em + .5rem + 2px); }
.select2-container .sm-s2-lg .select2-selection__rendered { padding-top: .5rem; padding-bottom: .5rem; font-size: 1.15rem; }
.sm-s2-invalido .select2-selection { border-color: var(--sm-danger) !important; box-shadow: 0 0 0 .25rem rgba(220, 38, 38, .15) !important; }

.select2-dropdown {
	background-color: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: .6rem;
	box-shadow: var(--sm-shadow-lg);
	color: var(--sm-text);
	overflow: hidden;
	z-index: 1080; /* encima de los modales de Bootstrap (1055) */
}
.select2-container--open .select2-dropdown--below { border-top: 1px solid var(--sm-border); margin-top: 4px; border-radius: .6rem; }
.select2-container--open .select2-dropdown--above { border-bottom: 1px solid var(--sm-border); margin-top: -4px; border-radius: .6rem; }
.select2-search--dropdown { padding: .5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--sm-surface-2);
	color: var(--sm-text);
	border: 1px solid var(--sm-border);
	border-radius: .45rem;
	padding: .35rem .6rem;
	outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--sm-primary); }
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; padding: .25rem; }
.select2-container--default .select2-results__option { padding: .45rem .65rem; border-radius: .4rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--sm-primary); color: #fff; }
.select2-container--default .select2-results__option--selected { background-color: var(--sm-surface-2); color: var(--sm-text); font-weight: 600; }
.select2-container--default .select2-results__option--disabled { color: var(--sm-text-muted); }
.select2-container--default .select2-results__message { color: var(--sm-text-muted); }
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container:not(:first-child) .select2-selection { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .select2-container:not(:last-child) .select2-selection { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* -------------------------------------------------------------------
   Centro de notificaciones (campana del topbar)
   ------------------------------------------------------------------- */
.sm-notif-panel {
	width: 380px;
	max-width: calc(100vw - 1.5rem);
	background: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: .8rem;
	overflow: hidden;
	color: var(--sm-text);
}
.sm-notif-cabecera { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--sm-border); }
.sm-notif-filtros { display: flex; gap: .35rem; padding: .55rem 1rem; border-bottom: 1px solid var(--sm-border); overflow-x: auto; }
.sm-notif-filtro {
	border: 1px solid var(--sm-border); background: var(--sm-surface-2); color: var(--sm-text-muted);
	border-radius: 999px; padding: .15rem .65rem; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.sm-notif-filtro span { opacity: .75; margin-left: .15rem; }
.sm-notif-filtro.activo { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; }
.sm-notif-lista { max-height: 380px; overflow-y: auto; }
.sm-notif-item {
	display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem;
	color: var(--sm-text); text-decoration: none; border-bottom: 1px solid var(--sm-border);
}
.sm-notif-item:last-child { border-bottom: 0; }
.sm-notif-item:hover { background: var(--sm-surface-2); color: var(--sm-text); }
.sm-notif-item.no-leida { background: rgba(79, 70, 229, .06); }
.sm-notif-icono { width: 2.2rem; height: 2.2rem; border-radius: .6rem !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: .95rem !important; flex-shrink: 0; }
.sm-notif-tipo { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sm-notif-punto { width: .55rem; height: .55rem; border-radius: 50%; background: transparent; flex-shrink: 0; }
.sm-notif-item.no-leida .sm-notif-punto { background: var(--sm-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.sm-notif-vacio { text-align: center; color: var(--sm-text-muted); padding: 2rem 1rem; }
.sm-notif-vacio i { display: block; font-size: 1.8rem; opacity: .5; margin-bottom: .5rem; }
.sm-notif-pie { display: block; text-align: center; padding: .65rem; font-weight: 600; font-size: .88rem; border-top: 1px solid var(--sm-border); text-decoration: none; background: var(--sm-surface-2); }
.sm-notif-pie:hover { background: var(--sm-surface); }

/* Registro de ventas agrupado por dia (filas expandibles) */
.sm-tabla-dias tr.sm-fila-dia { cursor: pointer; }
.sm-dia-toggle { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: .45rem; background: var(--sm-surface-2); color: var(--sm-primary); transition: transform .2s ease; }
.sm-tabla-dias tr.sm-fila-dia.abierta .sm-dia-toggle { transform: rotate(90deg); background: var(--sm-primary); color: #fff; }
.sm-tabla-dias tr.sm-fila-dia.abierta > td { border-bottom-color: transparent; }
.sm-tabla-dias tr.sm-dia-hijo > td { padding: 0 0 .75rem 2.4rem; background: transparent; }
.sm-dia-detalle { border-left: 3px solid var(--sm-primary); background: var(--sm-surface-2); border-radius: 0 .6rem .6rem 0; padding: .35rem .6rem; animation: sm-fade-up .2s ease both; }
.sm-dia-detalle .table { --bs-table-bg: transparent; font-size: .9rem; }
.sm-dia-detalle .table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sm-text-muted); }
@media (max-width: 767.98px) { .sm-tabla-dias tr.sm-dia-hijo > td { padding-left: 0; } }

/* -------------------------------------------------------------------
   Permisos del rol (Configuracion/PermisosRole)
   ------------------------------------------------------------------- */
.sm-rol-avatar { width: 3rem; height: 3rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent)); flex-shrink: 0; }
.sm-chip-usuario { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; background: var(--sm-surface-2); border: 1px solid var(--sm-border); }
.sm-chip-usuario.inactivo { opacity: .55; text-decoration: line-through; }
.sm-modulo { padding: 0; overflow: hidden; border-top: 3px solid var(--sm-border); }
.sm-modulo.completo { border-top-color: var(--sm-success); }
.sm-modulo:not(.completo):not(.vacio) { border-top-color: var(--sm-warning); }
.sm-modulo-cabecera { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--sm-border); }
.sm-modulo-icono { width: 2.3rem; height: 2.3rem; border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(79, 70, 229, .12); color: var(--sm-primary); flex-shrink: 0; }
.sm-modulo-lista { padding: .35rem; }
.sm-permiso { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: .6rem; cursor: pointer; margin: 0; border: 1px solid transparent; }
.sm-permiso:hover { background: var(--sm-surface-2); }
.sm-permiso-icono { width: 2rem; height: 2rem; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center; background: var(--sm-surface-2); color: var(--sm-text-muted); flex-shrink: 0; }
.sm-permiso.activo .sm-permiso-icono { background: rgba(22, 163, 74, .14); color: var(--sm-success); }
.sm-permiso.cambiado { border-color: rgba(217, 119, 6, .45); background: rgba(217, 119, 6, .06); }
.sm-permiso .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.sm-modulo-cabecera .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.sm-barra-cambios {
	position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 150%); z-index: 1030;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	width: min(760px, calc(100vw - 2rem)); padding: .75rem 1rem;
	background: var(--sm-surface); color: var(--sm-text); border: 1px solid var(--sm-border); border-radius: .9rem; box-shadow: var(--sm-shadow-lg);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sm-barra-cambios.visible { transform: translate(-50%, 0); }
@media (min-width: 992px) { .sm-app:not(.sm-sidebar-collapsed) .sm-barra-cambios { left: calc(50% + 130px); } }

/* Etiquetas (impresion masiva) */
.sm-tabla-etiquetas tbody tr { cursor: pointer; }
.sm-tabla-etiquetas tbody tr.sm-fila-sel { background: rgba(79, 70, 229, .07); }
.sm-tabla-etiquetas thead th { position: sticky; top: 0; background: var(--sm-surface); z-index: 1; }
.sm-lista-seleccion:empty { display: none; }
.sm-lista-seleccion { border-top: 1px dashed var(--sm-border); border-bottom: 1px dashed var(--sm-border); padding: .35rem 0; }
@media (min-width: 1200px) { .sm-hoja-config { position: sticky; top: 80px; } }

/* Mi Perfil: foto grande con capa "Cambiar foto" y medidor de contrasenia */
#formDatosPerfil .sm-perfil-banner { height: 130px; border-radius: var(--sm-radius) var(--sm-radius) 0 0; }
.sm-perfil-cabecera.sm-miperfil-foto-zona { margin-top: -90px; }
.sm-miperfil-foto {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	border: 5px solid var(--sm-surface);
	box-shadow: 0 12px 30px rgba(23, 26, 45, .25);
	background: linear-gradient(135deg, var(--sm-primary), var(--sm-accent));
	transition: transform .2s ease, box-shadow .2s ease, outline-color .2s ease;
	outline: 3px dashed transparent;
	outline-offset: 4px;
}
.sm-miperfil-foto:hover, .sm-miperfil-foto:focus-visible { transform: scale(1.03); box-shadow: 0 16px 36px rgba(23, 26, 45, .32); }
.sm-miperfil-foto.sm-arrastrando { outline-color: var(--sm-primary); transform: scale(1.05); }
.sm-miperfil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-miperfil-iniciales { color: #fff; font-size: 3.4rem; font-weight: 700; letter-spacing: .02em; }
.sm-miperfil-foto-capa {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	background: rgba(15, 18, 35, .55);
	opacity: 0;
	transition: opacity .2s ease;
}
.sm-miperfil-foto-capa i { font-size: 1.6rem; }
.sm-miperfil-foto:hover .sm-miperfil-foto-capa,
.sm-miperfil-foto:focus-visible .sm-miperfil-foto-capa,
.sm-miperfil-foto.sm-arrastrando .sm-miperfil-foto-capa { opacity: 1; }
@media (max-width: 575.98px) {
	.sm-miperfil-foto { width: 150px; height: 150px; }
	.sm-perfil-cabecera.sm-miperfil-foto-zona { margin-top: -75px; }
}

.sm-pwd-fuerza .progress { background-color: var(--sm-surface-2); }
.sm-pwd-fuerza .progress-bar { transition: width .3s ease, background-color .3s ease; }
.sm-pwd-reglas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .75rem; }
.sm-pwd-reglas li { color: var(--sm-text-muted); display: flex; align-items: baseline; gap: .4rem; }
.sm-pwd-reglas li i { color: var(--sm-danger); opacity: .7; }
.sm-pwd-reglas li.ok { color: var(--sm-text); }
.sm-pwd-reglas li.ok i { color: var(--sm-success); opacity: 1; }
@media (max-width: 400px) { .sm-pwd-reglas { grid-template-columns: 1fr; } }

/* Mi Perfil: modal "Tomar foto" */
.sm-camara-marco {
	position: relative;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	border-radius: var(--sm-radius);
	overflow: hidden;
	background: #0b0e1a;
}
.sm-camara-marco video, .sm-camara-marco canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-camara-marco video.sm-espejo { transform: scaleX(-1); }
.sm-camara-guia {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	box-shadow: 0 0 0 999px rgba(11, 14, 26, .45);
	border: 2px dashed rgba(255, 255, 255, .7);
	pointer-events: none;
}
.sm-camara-estado {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	color: #fff;
	font-size: .9rem;
	background: rgba(11, 14, 26, .75);
}

/* Formas de pago (assets/js/formas-pago.js) */
.sm-pagos-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: .4rem; margin-bottom: .75rem; }
.sm-pago-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	padding: .55rem .35rem;
	border: 1px solid var(--sm-border);
	border-radius: .6rem;
	background: var(--sm-surface);
	color: var(--sm-text-muted);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.sm-pago-chip i { font-size: 1.15rem; }
.sm-pago-chip:hover { border-color: var(--sm-primary); color: var(--sm-text); }
.sm-pago-chip.activo { border-color: var(--sm-primary); background: rgba(79, 70, 229, .1); color: var(--sm-primary); box-shadow: inset 0 0 0 1px var(--sm-primary); }
.sm-pago-chip:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; }
.sm-pago-linea { margin-bottom: .5rem; }
.sm-pago-linea:not(.unica) { padding: .5rem; border: 1px dashed var(--sm-border); border-radius: .6rem; }
.sm-pago-fila { display: flex; gap: .4rem; align-items: center; }
.sm-pago-fila .sm-pago-forma { flex: 0 0 44%; }
.sm-pago-fila .sm-pago-monto-grupo { flex: 1 1 auto; }
.sm-pago-ref { margin-top: .35rem; }
.sm-pago-rapidos { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.sm-pagos-estado { font-size: .85rem; margin-top: .35rem; min-height: 1.3rem; }
.sm-pagos-cambio { color: var(--sm-success); }
.sm-pagos-cambio strong { font-size: 1.05rem; }
/* Desglose por forma de pago (caja, corte, detalles) */
.sm-formas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.sm-forma-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--sm-border); border-radius: .6rem; background: var(--sm-surface-2); }
.sm-forma-item i { width: 1.6rem; text-align: center; color: var(--sm-primary); font-size: 1.05rem; }
.sm-forma-item .valor { font-weight: 700; }
.sm-forma-item small { color: var(--sm-text-muted); display: block; font-size: .72rem; }
/* Arqueo: conteo por denominacion */
.sm-arqueo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .4rem; }
.sm-arqueo-den { display: flex; align-items: center; gap: .4rem; }
.sm-arqueo-den label { flex: 0 0 58px; text-align: right; font-weight: 600; font-size: .82rem; }
.sm-arqueo-den input { text-align: center; }
.sm-arqueo-resultado { border-radius: .6rem; padding: .6rem .8rem; font-weight: 600; }
.sm-arqueo-resultado.cuadra { background: rgba(22, 163, 74, .12); color: var(--sm-success); }
.sm-arqueo-resultado.sobra { background: rgba(217, 119, 6, .12); color: var(--sm-warning); }
.sm-arqueo-resultado.falta { background: rgba(220, 38, 38, .12); color: var(--sm-danger); }

/* Nombre/apellidos en mayusculas (ver .sm-mayus en app.js) */
.sm-mayus { text-transform: uppercase; }
.sm-mayus::placeholder { text-transform: none; }

/* ---- Escaner con camara (escaner-camara.js) ---- */
.sm-camara-envoltura { position: relative; }
.form-control.sm-con-camara { padding-right: 2.9rem; }
.sm-camara-btn {
	position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 2.3rem; height: 2.3rem; border: 0; border-radius: .55rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; color: var(--sm-primary); font-size: 1.05rem; cursor: pointer;
}
.sm-camara-btn:hover, .sm-camara-btn:focus-visible { background: var(--sm-surface-2); outline: none; }
.dataTables_filter .sm-camara-btn { width: 1.9rem; height: 1.9rem; font-size: .9rem; }
.sm-escaner-visor { position: relative; background: #000; aspect-ratio: 4 / 3; overflow: hidden; }
.sm-escaner-visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-escaner-marco {
	position: absolute; left: 12%; right: 12%; top: 26%; bottom: 26%;
	border: 2px solid rgba(255, 255, 255, .85); border-radius: .8rem;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); pointer-events: none;
}
.sm-escaner-linea {
	position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
	background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: sm-escaner-barrido 1.8s ease-in-out infinite alternate;
}
@keyframes sm-escaner-barrido { from { top: 12%; } to { top: 88%; } }
.sm-escaner-estado {
	position: absolute; left: .75rem; right: .75rem; bottom: .75rem; text-align: center;
	color: #fff; font-size: .88rem; background: rgba(0, 0, 0, .55); border-radius: .5rem; padding: .35rem .6rem;
}
.sm-escaner-leido { padding: .5rem .9rem; font-size: .9rem; background: rgba(22, 163, 74, .13); color: var(--sm-success); word-break: break-all; }