/*
 * D'Angel Fashion: capa visual de pantalla (versión B "Etiqueta tejida").
 *
 * - Se carga después de stylus/main.css y solo sobreescribe estilos.
 * - Todo vive dentro de @media screen: la impresión (print.styl, tickets, facturas) no cambia.
 * - Respeta las clases que usa el JS: .is-hidden sigue siendo display:none, y los estados
 *   isActive, isSelected, is-menu-open, user-data-open, .btn-*, .gv-*, .modal-* y data-field
 *   conservan su significado.
 * - Las fuentes están en css/fonts/ (sin dependencia de internet en el mostrador).
 */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/sofia-sans-latin-var-normal.woff2") format("woff2"); }
@font-face { font-family: "Sofia Sans Condensed"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/sofia-sans-condensed-latin-var-normal.woff2") format("woff2"); }
@font-face { font-family: "Sofia Sans Extra Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/sofia-sans-extra-condensed-latin-800-normal.woff2") format("woff2"); }
@media screen {
:root {
	--font: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
	--fs-xs: 12px; --fs-sm: 13px; --fs-table: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
	--r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px;

	--canvas: #ECEEF1; --surface: #FFFFFF;
	--ink: #16181D; --ink-2: #4B5160; --ink-3: #636A79;
	--line: #D9DCE2; --line-soft: #ECEEF1; --line-strong: #BFC4CC;
	--hover: #F1F2F4; --row-hover: #F7F8FA; --table-head: #F5F6F8;
	--field: #FFFFFF; --field-line: #9097A3; --field-disabled: #F1F2F4; --placeholder: #6B7281; --adorn: #F5F6F8;
	--focus: #16181D; --focus-ring: rgba(22, 24, 29, .14);
	--selection: rgba(215, 38, 46, .14);
	--link: #16181D; --link-hover: #C4252C;
	--accent: #D7262E; --accent-ink: #FFFFFF;

	--bar: #FFFFFF; --bar-line: #E1E4E9;
	--avatar-bg: #16181D; --avatar-ink: #FFFFFF;

	--rail: #17191E; --rail-line: #17191E; --rail-hover: #23262D; --rail-active: #262A31;
	--rail-ink: #B9BEC8; --rail-ink-2: #959BA7; --rail-ink-3: #959BA7; --rail-ink-strong: #FFFFFF; --rail-ink-active: #FFFFFF;
	--rail-marker: #E0313A; --rail-field: #23262D; --rail-field-line: #30343C; --rail-field-focus: #262A31;

	--btn-go: #1D7A4E; --btn-go-hover: #17653F; --btn-go-ink: #FFFFFF;
	--danger: #C4252C; --danger-line: #E5A3A6; --danger-soft: #FCEEEE; --danger-soft-field: #FFF8F8; --danger-ink: #8E1B20;
	--ok-soft: #EAF6EF; --ok-line: #BFE3CD; --ok-ink: #14532D;
	--warn-soft: #FFF6DD; --warn-line: #F1D58A; --warn-ink: #6B4A00;
	--info-soft: #EEF1F6; --info-line: #CAD2DF; --info-ink: #1F2A3D;
	--selected: #2A2E36; --selected-ink: #FFFFFF;
	--chip: #17191E; --chip-ink: #FFFFFF; --chip-on: #17191E; --chip-on-ink: #FFFFFF;
	--kbd: #3A3F48; --kbd-ink: #FFFFFF;
	--check: #17191E;
	--scrim: rgba(17, 19, 23, .5);
	--scroll-thumb: #C3C7CF; --scroll-thumb-hover: #9CA2AE;
	--total-bg: #F5F6F8; --total-label: #4B5160; --total-ink: #16181D;

	--shadow-card: 0 1px 2px rgba(16, 18, 22, .06), 0 1px 1px rgba(16, 18, 22, .04);
	--shadow-pop: 0 8px 24px rgba(16, 18, 22, .14), 0 2px 6px rgba(16, 18, 22, .08);
	--shadow-modal: 0 20px 48px rgba(16, 18, 22, .24);

	--login-bg: #ECEEF1; --login-field: #FFFFFF; --login-field-line: #9097A3; --login-ink: #16181D;
	--login-placeholder: #6B7281; --login-icon: #636A79; --login-btn: #17191E; --login-btn-ink: #FFFFFF; --login-btn-hover: #2A2E36;
	--login-error: #C4252C; --login-footer: transparent; --login-footer-ink: #636A79;

	--hover-strong: #E1E4E9;
	--rail-w: 64px; --rail-w-open: 252px;
	--rail-shadow: 0 8px 24px rgba(16, 18, 22, .18);
	--rail-shadow-open: 0 16px 40px rgba(16, 18, 22, .30);
	--rail-focus: #7B818D; --rail-tree: #2E323A; --rail-scrim: rgba(17, 19, 23, .28);
}
/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
html body {
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--font) !important;
	font-size: var(--fs-md);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
html body input,
html body label,
html body p,
html body b,
html body li,
html body a,
html body button,
html body select,
html body textarea,
html body th,
html body td,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
	font-family: var(--font) !important;
}
html body ::selection { background: var(--selection); color: var(--ink); }
html body a { color: var(--link); }
html body a:hover { color: var(--link-hover); }
html body :focus { outline: none; }
html body :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: content-box;
	height: auto !important;
}
html body ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

/* ------------------------------------------------------------------
   Header: embedded in the canvas (no bar), user controls float top-right
   ------------------------------------------------------------------ */
html body header {
	background: transparent;
	box-shadow: none;
	border: none;
	height: 64px;
}
html body header section.head-right { margin-top: 0; line-height: 64px; padding-right: 12px; }
html body header section.head-right ul.user-options li { height: 64px; padding: 0 8px; }
html body header section.head-right ul.user-options li.area-user {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
html body header section.head-right ul.user-options li.area-user i.flaticon-houses {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ink-2);
	transition: background-color .15s ease, color .15s ease;
}
html body header section.head-right ul.user-options li.area-user i.flaticon-houses::before { font-size: 20px; margin: 0; }
html body header section.head-right ul.user-options li.area-user i.flaticon-houses:hover { background: var(--hover-strong); color: var(--ink); }
html body header section.head-right ul.user-options li.area-user a.user-info {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	line-height: 44px;
	padding: 0 12px 0 6px;
	width: auto;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background-color .15s ease;
}
html body header section.head-right ul.user-options li.area-user a.user-info:hover { background: var(--hover-strong); }
html body header section.head-right ul.user-options li.area-user a.user-info i.profileNav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--avatar-bg);
	color: var(--avatar-ink);
}
html body header section.head-right ul.user-options li.area-user a.user-info i.profileNav::before { font-size: 17px; margin: 0; }
html body header section.head-right ul.user-options li.area-user a.user-info div.nombreUser {
	top: 0;
	margin: 0;
	color: var(--ink);
	font-size: var(--fs-md);
	font-weight: 600;
	white-space: nowrap;
}
html body header section.head-right i.icon-chevron-down { top: 0; color: var(--ink-3); font-size: 11px; }

/* User dropdown: JS toggles .user-data-open; it fades in as a floating card */
html body ul.user-menu {
	top: 60px;
	right: 20px;
	width: 220px;
	margin: 0;
	padding: 6px !important;
	z-index: 10 !important;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
html body ul.user-menu.user-data-open {
	top: 60px !important;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .15s ease, transform .15s ease;
}
html body ul.user-menu li {
	height: auto;
	line-height: 1.2;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--r-md);
}
html body ul.user-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--ink) !important;
	font-size: var(--fs-md);
	font-weight: 500;
	text-decoration: none;
}
html body ul.user-menu li:hover { background: var(--hover) !important; }
html body ul.user-menu li:hover a { color: var(--ink) !important; }

/* ------------------------------------------------------------------
   Floating rail
   Collapsed: icons only. Expanded on hover, on keyboard focus, or with
   the toggle (.menu button, existing app.js handler adds .is-menu-open).
   ------------------------------------------------------------------ */
html body nav {
	top: 12px;
	left: 12px !important;
	bottom: 12px;
	height: auto;
	width: var(--rail-w);
	padding: 10px !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--rail);
	box-shadow: var(--rail-shadow);
	z-index: 9;
	contain: layout paint;
	transition: width .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease;
}
html body nav:hover,
html body nav.is-menu-open {
	width: var(--rail-w-open);
	box-shadow: var(--rail-shadow-open);
}
/* :has() kept in its own rules: a browser without it drops only these */
html body nav:has(:focus-visible) {
	width: var(--rail-w-open);
	box-shadow: var(--rail-shadow-open);
}
html body nav:hover { transition-delay: .12s; }
html body nav > br { display: none; }

/* Logo tile: mark only when collapsed, full lockup when expanded */
html body nav .head-left {
	margin: 0 0 6px !important;
	width: 100%;
	height: 44px;
	flex: none;
	background: transparent;
	border: none !important;
	text-align: left;
}
html body nav .head-left img {
	display: block;
	width: 44px;
	height: 44px;
	padding: 4px;
	box-sizing: border-box;
	border-radius: 12px;
	background: #FFFFFF;
	object-fit: cover;
	object-position: left center;
}
html body nav:hover .head-left img,
html body nav.is-menu-open .head-left img { width: 100%; object-fit: contain; padding: 5px 10px; }
html body nav:has(:focus-visible) .head-left img { width: 100%; object-fit: contain; padding: 5px 10px; }

/* Menu search */
html body nav .busqueda { padding: 0; position: relative; flex: none; }
html body nav .busqueda span { display: block; position: relative; }
html body nav .busqueda i {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--rail-ink-3);
	z-index: 1;
	pointer-events: none;
}
html body nav input.txtBusqueda,
html body nav input {
	margin: 0 !important;
	width: 100% !important;
	box-sizing: border-box;
	height: 44px !important;
	line-height: 44px;
	padding: 0 12px 0 40px !important;
	border-radius: 12px !important;
	background-color: var(--rail-field) !important;
	border: 1px solid var(--rail-field-line) !important;
	color: var(--rail-ink-strong) !important;
	font-size: var(--fs-sm) !important;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease;
}
html body nav input::-webkit-input-placeholder { color: var(--rail-ink-3) !important; font-size: var(--fs-sm) !important; }
html body nav input:focus { border-color: var(--rail-focus) !important; background-color: var(--rail-field-focus) !important; box-shadow: none !important; }

/* First level */
html body nav ul.menu-n1,
html body nav ul.search-n1 {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 4px 0;
	background: transparent;
}
html body nav ul.menu-n1::-webkit-scrollbar,
html body nav ul.search-n1::-webkit-scrollbar { width: 0; }
html body nav ul.menu-n1 > li,
html body nav ul.search-n1 > li {
	padding: 0 !important;
	line-height: 1.2;
	font-weight: 400;
	border-radius: 12px;
	margin-bottom: 2px;
}
html body nav ul.menu-n1 > li.has-submenu { padding-top: 0 !important; }
html body nav ul.menu-n1 > li.has-submenu .lineRed {
	left: 0;
	top: 12px;
	width: 3px;
	height: 20px;
	border-radius: 0 3px 3px 0;
	background: transparent;
	z-index: 1;
}
html body nav ul.menu-n1 > li > a {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 0 12px;
	box-sizing: border-box;
	border-radius: 12px;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
html body nav ul.menu-n1 > li > a i {
	position: static;
	margin: 0;
	width: 20px;
	text-align: center;
	color: var(--rail-ink-2);
	flex: none;
}
html body nav ul.menu-n1 > li > a i::before { font-size: 19px; margin: 0; }
html body nav ul.menu-n1 > li > a label.textMenu {
	margin: 0 !important;
	font-size: var(--fs-md) !important;
	font-weight: 600;
	color: var(--rail-ink);
	cursor: pointer;
	line-height: 1;
	width: auto !important;
	opacity: 0;
	transition: opacity .15s ease;
}
html body nav:hover ul.menu-n1 > li > a label.textMenu,
html body nav.is-menu-open ul.menu-n1 > li > a label.textMenu { opacity: 1; }
html body nav:has(:focus-visible) ul.menu-n1 > li > a label.textMenu { opacity: 1; }
html body nav ul.menu-n1 > li:hover { background: transparent; }
html body nav ul.menu-n1 > li:hover > a { background: var(--rail-hover); }
html body nav ul.menu-n1 > li:hover > a label,
html body nav ul.menu-n1 > li:hover > a i { color: var(--rail-ink-strong) !important; }
html body nav ul.menu-n1 > li:hover .lineRed { background: transparent; }
html body nav ul.menu-n1 > li.isActive { background: transparent; }
html body nav ul.menu-n1 > li.isActive > a { background: var(--rail-active); }
html body nav ul.menu-n1 > li.isActive > a label,
html body nav ul.menu-n1 > li.isActive > a i { color: var(--rail-ink-active) !important; }
html body nav ul.menu-n1 > li.isActive .lineRed { background: var(--rail-marker); }

/* Second level: jQuery slideUp/slideDown owns its display; while the rail
   is collapsed the open group is kept out of view and returns on expand */
html body nav:not(:hover):not(.is-menu-open) ul.menu-n2 { display: none !important; }
/* keyboard focus expands the rail too; a group jQuery left closed (inline display: none) stays closed */
html body nav:has(:focus-visible) ul.menu-n2:not([style*="none"]) { display: block !important; }
html body nav ul.menu-n2 {
	margin: 2px 0 6px 21px !important;
	padding: 2px 0 2px 0;
	border-left: 1px solid var(--rail-tree);
	background: transparent;
}
html body nav ul.menu-n2 li {
	padding: 0 !important;
	line-height: 1.2;
	font-size: var(--fs-sm);
	font-weight: 400;
	border-radius: var(--r-md);
}
html body nav ul.menu-n2 li a {
	display: block;
	position: static;
	height: auto;
	width: auto;
	left: 0;
	top: 0;
	margin-left: 8px;
	padding: 8px 12px;
	color: var(--rail-ink-2) !important;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	text-decoration: none !important;
	border-radius: 10px;
	text-align: left;
	transition: background-color .15s ease, color .15s ease;
}
html body nav ul.menu-n2 li:hover { background: transparent !important; }
html body nav ul.menu-n2 li:hover a { background: var(--rail-hover); color: var(--rail-ink-strong) !important; }
html body nav ul.menu-n2 li.isActive { background: transparent !important; }
html body nav ul.menu-n2 li.isActive a { background: var(--rail-active); color: var(--rail-ink-active) !important; font-weight: 600; }

/* Menu search results (JS toggles .is-hidden) */
html body nav ul.search-n1 li { display: block; font-size: var(--fs-sm); line-height: 1.2; }
html body nav ul.search-n1 li a {
	display: block;
	position: static;
	height: auto;
	width: auto;
	left: 0;
	top: 0;
	padding: 10px 12px;
	color: var(--rail-ink) !important;
	text-decoration: none;
	border-radius: 10px;
	white-space: nowrap;
}
html body nav ul.search-n1 li:hover a { background: var(--rail-hover); color: var(--rail-ink-strong) !important; }

/* Expand / collapse toggle (button.menu in views/main.ejs) */
html body nav button.menu {
	flex: none;
	margin: 4px 0 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rail-hover);
	color: var(--rail-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
html body nav button.menu:hover { background: var(--rail-active); color: var(--rail-ink-strong); }
html body nav button.menu i { font-size: 12px; transform: rotate(-90deg); transition: transform .2s ease; }
html body nav.is-menu-open button.menu i { transform: rotate(90deg); }

/* Scrim behind the expanded rail (existing .wrap-layer; clicking it collapses) */
html body .wrap-layer { background: var(--rail-scrim); }
html body main.is-menu-open { left: 0; }

/* ------------------------------------------------------------------
   Content area + screen titles
   ------------------------------------------------------------------ */
html body #load_content {
	background-color: var(--canvas) !important;
	padding-left: calc(var(--rail-w) + 24px) !important;
}
html body #load_content > section { padding: 0 24px 32px; box-sizing: border-box; }
html body .titulo { margin: 8px 0 16px !important; }
html body .titulo h3 {
	margin: 0;
	color: var(--ink) !important;
	font-size: var(--fs-2xl) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
html body .titulo h3 > i { display: none; }
html body .titulo span.subTitulo,
html body .titulo h3 span { color: var(--ink-3) !important; font-weight: 500; }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
html body .button,
html body .btn {
	box-shadow: none !important;
	text-shadow: none !important;
	background-image: none !important;
	font-weight: 600;
	letter-spacing: 0;
}
html body .btn,
html body .button:not(.btn) {
	height: 40px !important;
	min-width: 104px !important;
	padding: 0 16px !important;
	line-height: 38px;
	font-size: var(--fs-md) !important;
	border-radius: var(--r-md) !important;
	margin: 8px 6px 8px 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	vertical-align: middle;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html body .btn::before,
html body .button:not(.btn)::before { margin: 0 !important; font-size: 14px !important; }
html body .btn:active,
html body .button:not(.btn):active { transform: translateY(1px); }
html body .btn[disabled],
html body .btn:disabled,
html body .button:not(.btn):disabled { opacity: .45; cursor: not-allowed; transform: none; }
html body .button.expand:not(.btn) { width: 100%; }

html body .btn.btn-success,
html body .button.success:not(.btn) {
	background-color: var(--btn-go) !important;
	border: 1px solid var(--btn-go) !important;
	color: var(--btn-go-ink) !important;
}
html body .btn.btn-success:hover,
html body .btn.btn-success:focus,
html body .button.success:not(.btn):hover,
html body .button.success:not(.btn):focus { background-color: var(--btn-go-hover) !important; border-color: var(--btn-go-hover) !important; color: var(--btn-go-ink) !important; }

html body .btn.btn-primary,
html body .btn.btn-save,
html body .button:not(.btn):not(.success):not(.alert) {
	background-color: var(--surface) !important;
	border: 1px solid var(--line-strong) !important;
	color: var(--ink) !important;
}
html body .btn.btn-primary:hover,
html body .btn.btn-primary:focus,
html body .button:not(.btn):not(.success):not(.alert):hover,
html body .button:not(.btn):not(.success):not(.alert):focus,
html body .btn.btn-save:hover,
html body .btn.btn-save:focus { background-color: var(--hover) !important; color: var(--ink) !important; }

html body .btn.btn-danger,
html body .button.alert:not(.btn) {
	background-color: var(--surface) !important;
	border: 1px solid var(--danger-line) !important;
	color: var(--danger) !important;
}
html body .btn.btn-danger:hover,
html body .btn.btn-danger:focus,
html body .button.alert:not(.btn):hover,
html body .button.alert:not(.btn):focus { background-color: var(--danger-soft) !important; color: var(--danger) !important; }

/* ------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------ */
html body label { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
html body small { color: var(--ink-3); font-size: 11px; font-weight: 500; }
html body input[type="text"],
html body input[type="password"],
html body input[type="number"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="date"],
html body input:not([type]),
html body textarea,
html body select {
	border: 1px solid var(--field-line);
	border-radius: var(--r-md);
	background-color: var(--field);
	color: var(--ink);
	box-shadow: none;
	font-size: var(--fs-md);
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html body input[type="text"],
html body input[type="password"],
html body input[type="number"],
html body input:not([type]),
html body select {
	height: 40px !important;
	padding: 0 12px;
}
html body textarea { padding: 10px 12px; line-height: 1.4; }
html body select {
	padding-right: 32px;
	background-position: right 10px center;
}
html body input::-webkit-input-placeholder,
html body textarea::-webkit-input-placeholder { color: var(--placeholder) !important; font-size: var(--fs-sm) !important; font-style: normal; }
html body input:focus,
html body textarea:focus,
html body select:focus {
	border-color: var(--focus) !important;
	box-shadow: 0 0 0 3px var(--focus-ring) !important;
	background-color: var(--field);
}
html body input:not([type="checkbox"]):not([type="radio"]):not(.tt-hint):disabled,
html body textarea:disabled,
html body select:disabled {
	background-color: var(--field-disabled) !important;
	color: var(--ink-2) !important;
	border-color: var(--line) !important;
	cursor: not-allowed;
}
html body input[type="checkbox"],
html body input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	background: none;
	border: none;
	width: 18px;
	height: 18px !important;
	margin: 0 6px;
	vertical-align: middle;
	accent-color: var(--check);
}

/* Abide validation */
html body small.error,
html body .error small.error,
html body [data-abide] small.error,
html body [data-abide] .error small.error {
	background: transparent;
	color: var(--danger);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 0 0;
	margin-top: 0;
	margin-bottom: 8px;
	font-style: normal;
}
html body .error input,
html body .error textarea,
html body .error select,
html body input.error,
html body input[data-invalid] { border-color: var(--danger) !important; background-color: var(--danger-soft-field) !important; }
html body label.error,
html body .error label { color: var(--danger); }

/* Typeahead (search adornment rendered by .twitter-typeahead::before) */
html body .twitter-typeahead::before {
	background-color: var(--adorn) !important;
	color: var(--ink-3) !important;
	border: 1px solid var(--field-line) !important;
	border-right: none !important;
	border-radius: var(--r-md) 0 0 var(--r-md);
	height: 40px;
	line-height: 40px;
	width: 32px;
	font-size: 14px;
	box-sizing: border-box;
}
html body .twitter-typeahead .tt-hint,
html body .twitter-typeahead .tt-input {
	height: 40px !important;
	padding-left: 42px !important;
	padding-bottom: 0 !important;
}
html body .twitter-typeahead .tt-hint { background-color: var(--field) !important; color: var(--placeholder); }
html body .twitter-typeahead .tya-clear { top: 12px; right: 12px; color: var(--ink-3); cursor: pointer; }
html body .twitter-typeahead .tya-loading { top: 12px; right: 34px; color: var(--ink-3); }
html body .tt-dropdown-menu {
	margin-top: 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-pop);
	padding: 4px;
	max-height: 320px;
	overflow-y: auto;
}
html body .tt-suggestion { padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--ink); line-height: 1.3; }
html body .tt-suggestion.tt-cursor,
html body .tt-suggestion:hover { background: var(--selection); color: var(--ink); cursor: pointer; }

/* Date-time picker */
html body .xdsoft_datetimepicker {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop);
	padding: 8px;
	font-family: var(--font);
}
html body .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
html body .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
	background: var(--accent) !important;
	box-shadow: none !important;
	color: var(--accent-ink) !important;
}
html body .xdsoft_datetimepicker .xdsoft_calendar td:hover,
html body .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
	background: var(--hover) !important;
	color: var(--ink) !important;
}

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */
html body table {
	border: none;
	background: var(--surface);
	border-collapse: separate;
	border-spacing: 0;
}
html body table thead,
html body table tfoot { background: transparent; }
html body table tr th,
html body table tr td { font-size: var(--fs-table); line-height: 1.35; color: var(--ink); font-variant-numeric: tabular-nums; }
html body table tbody tr:nth-of-type(even) { background: transparent; }
html body table tbody tr td { border-bottom: 1px solid var(--line-soft); padding: 10px 12px; }
html body table thead tr th,
html body table.table-custom thead tr th,
html body table.table-custom thead tr.titulo {
	background: var(--table-head) !important;
	color: var(--ink-2) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
}
html body table.table-custom thead tr th span,
html body table.table-custom thead tr.titulo th span { color: var(--ink-2) !important; padding-left: 0 !important; }
html body table tbody tr:hover > td { background: var(--row-hover); }
html body table.table-custom tbody tr td i { padding: 0; border-radius: 0; }
html body table.table-custom tbody tr td.controls i,
html body table.table-custom tbody tr td.controles i { color: var(--ink-2) !important; font-size: 16px !important; }

/* Generic data grid (controles.js) */
html body .bb-grid,
html body .gvDatos {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
html body .bb-grid thead { border: none !important; }
html body .bb-grid thead tr th,
html body .bb-grid thead .gv-order {
	background: var(--table-head) !important;
	color: var(--ink-2) !important;
	border: none !important;
	border-bottom: 1px solid var(--line) !important;
	vertical-align: top;
	padding: 10px 8px 8px !important;
}
html body .bb-grid thead tr th strong span { color: var(--ink-2) !important; font-size: var(--fs-xs) !important; font-weight: 600; }
html body .bb-grid thead .gv-order.gv-asc strong span::after,
html body .bb-grid thead .gv-order.gv-desc strong span::after { color: var(--ink); margin-left: 4px; }
html body .bb-grid thead input.gv-filter,
html body input.gv-filter {
	height: 32px !important;
	margin: 6px 0 0 !important;
	padding: 0 8px !important;
	font-size: var(--fs-sm) !important;
	font-weight: 400 !important;
	text-transform: none;
	letter-spacing: 0;
	border: 1px solid var(--field-line) !important;
	border-bottom: 1px solid var(--field-line) !important;
	border-radius: var(--r-sm) !important;
	background: var(--field) !important;
	box-shadow: none !important;
	width: 100%;
	box-sizing: border-box;
}
html body input.gv-filter:focus { border-color: var(--focus) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }
html body .bb-grid tbody { border: none; }
html body .bb-grid tbody tr {
	border: none !important;
	border-bottom: none !important;
	color: var(--ink) !important;
	font-size: var(--fs-md) !important;
}
html body .bb-grid tbody tr td { padding: 10px 8px !important; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
html body .bb-grid tbody span { color: var(--ink); }
html body .bb-grid tbody tr.isSelected,
html body .bb-grid tbody tr.isSelected:hover { background-color: var(--selected) !important; }
html body .bb-grid tbody tr.isSelected td,
html body .bb-grid tbody tr.isSelected:hover > td { color: var(--selected-ink) !important; background: var(--selected) !important; font-weight: 600; }
html body .bb-grid tbody tr.isMultiSelected td { background: var(--selection) !important; }

/* Catalog grids: the Foundation row around the grid spans the content width (JS sets an inline px width) */
html body #load_content .row:has(> table.bb-grid),
html body #load_content .row:has(> table.bb-grid) ~ .row { max-width: none; }
html body #load_content .row:has(> table.bb-grid) > table.bb-grid { width: 100% !important; }

/* Pager in tfoot */
html body .bb-grid tfoot { background: var(--surface); border: none; }
html body .bb-grid tfoot tr td { border-bottom: none; padding: 6px 8px !important; }
html body .bb-grid tfoot .gv-pager .columns { height: auto; padding-top: 0; }
html body .bb-grid tfoot .gv-pager .columns > * { margin-right: 4px !important; }
html body .bb-grid tfoot .gv-pager a,
html body .bb-grid tfoot .gv-pager a:hover {
	border-color: transparent !important;
	text-align: center;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--r-md);
	background: var(--surface) !important;
	border: 1px solid var(--line);
	color: var(--ink-2) !important;
	line-height: 30px !important;
	box-sizing: border-box;
	transform: none;
	transition: background-color .15s ease;
}
html body .bb-grid tfoot .gv-pager a:hover { background: var(--hover) !important; color: var(--ink) !important; }
html body .bb-grid tfoot .gv-pager a::before { font-size: 20px !important; }
html body .bb-grid tfoot .gv-pager .gv-prev { margin-top: 0 !important; }
html body .bb-grid tfoot .gv-pages {
	height: 32px !important;
	width: 52px !important;
	margin: 0 !important;
	padding: 0 6px !important;
	text-align: center;
	font-size: var(--fs-sm) !important;
	border-radius: var(--r-md) !important;
}
html body .bb-grid tfoot .gv-pager span { color: var(--ink-2); font-size: var(--fs-sm); line-height: 32px; }

/* Ticket list status classes keep their meaning; just soften */
html body table tbody tr.pagado { color: var(--danger) !important; }

/* Foundation breadcrumbs used as filter chips */
html body ul.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	background: transparent;
	border: none;
	padding: 0;
	margin: 4px 0 16px;
}
html body ul.breadcrumbs > * { font-size: var(--fs-sm); text-transform: none; }
html body ul.breadcrumbs > *::before { content: none !important; margin: 0; }
html body ul.breadcrumbs > * a,
html body ul.breadcrumbs > * span {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body ul.breadcrumbs > * a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
html body ul.breadcrumbs > *.current a,
html body ul.breadcrumbs > *.current span,
html body ul.breadcrumbs > *.active a { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }
html body ul.breadcrumbs > *.unavailable a,
html body ul.breadcrumbs > *.unavailable span { color: var(--ink-3); background: var(--field-disabled); cursor: not-allowed; }

/* ------------------------------------------------------------------
   Modals (Foundation reveal)
   ------------------------------------------------------------------ */
html body .reveal-modal-bg { background: var(--scrim); }
html body .reveal-modal.reveal-custom {
	border: none;
	border-radius: var(--r-xl) !important;
	box-shadow: var(--shadow-modal);
	padding: 72px 24px 20px;
	background: var(--surface);
}
html body .reveal-modal.reveal-custom .pop-head,
html body .pop-head {
	height: 56px !important;
	background: var(--surface) !important;
	border-bottom: 1px solid var(--line);
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	display: flex;
	align-items: center;
	padding: 0 24px;
	box-sizing: border-box;
}
html body .pop-head label,
html body .reveal-modal.reveal-custom .pop-head label {
	margin: 0 !important;
	color: var(--ink) !important;
	font-size: var(--fs-lg) !important;
	font-weight: 700;
	position: static;
	display: flex;
	align-items: center;
	gap: 10px;
}
html body .pop-head label i { display: none; }
html body .reveal-modal.reveal-custom .pop-body { margin-top: 0; }
html body .reveal-modal.reveal-custom .pop-foot,
html body .reveal-modal.reveal-custom .pop-footer {
	border-top: 1px solid var(--line-soft);
	margin-top: 16px;
	padding-top: 8px;
}
html body .reveal-modal.reveal-custom label { margin-bottom: 4px; }
html body .reveal-modal.reveal-custom table { border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
html body .reveal-modal .close-reveal-modal {
	background: transparent !important;
	color: var(--ink-3) !important;
	border-radius: var(--r-md) !important;
	font-size: 22px !important;
	top: 14px;
	right: 16px;
	padding: 0 8px;
	line-height: 28px;
	z-index: 2;
}
html body .reveal-modal .close-reveal-modal:hover { background: var(--hover) !important; color: var(--ink) !important; }

/* ------------------------------------------------------------------
   Toasts, loader
   ------------------------------------------------------------------ */
html body .pnlAlert { margin-top: 78px; right: 16px; width: 340px; }
html body .pnlAlert .alert-box {
	border: 1px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop);
	padding: 12px 40px 12px 14px;
	font-size: var(--fs-md);
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 8px;
}
html body .pnlAlert .alert-box .spnTexto { color: inherit; }
html body .pnlAlert .alert-box.success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
html body .pnlAlert .alert-box.alert { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
html body .pnlAlert .alert-box.warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
html body .pnlAlert .alert-box.primary,
html body .pnlAlert .alert-box.info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-ink); }
html body .pnlAlert .alert-box .close {
	top: 50%;
	right: 10px;
	margin-top: -12px;
	color: inherit;
	opacity: .6;
	font-size: 20px;
	line-height: 24px;
}
html body .pnlAlert .alert-box .close:hover { opacity: 1; }

html body .loading { background-color: var(--scrim); }
html body .loading label {
	left: 50%;
	top: 45%;
	transform: translateX(-50%);
	background: var(--surface);
	border: none;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-pop);
	color: var(--ink);
	font-size: var(--fs-md);
	font-weight: 600;
	padding: 14px 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
html body .loading label i { color: var(--accent); }

/* ------------------------------------------------------------------
   Pricing-table panels (no-access panel, promotions)
   ------------------------------------------------------------------ */
html body .pricing-table {
	border: none;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	background: var(--surface);
}
html body .pricing-table .title { background: var(--table-head); color: var(--ink); font-weight: 700; font-family: var(--font); }
html body .pricing-table .bullet-item { color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }

/* ------------------------------------------------------------------
   Punto de venta
   ------------------------------------------------------------------ */
html body #punto_venta .headerPrincipal,
html body #punto_venta .footerPrincipal {
	width: auto;
	margin: 16px 0 0;
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
html body #punto_venta .headerPrincipal { height: 140px; padding-top: 6px; box-sizing: border-box; }
html body #punto_venta .headerPrincipal .contImagenProducto { display: none; }
html body #punto_venta .headerPrincipal > .small-11 { width: 100%; }

/* Input groups: label chip (icon + text) + field + search button */
html body #punto_venta .headerPrincipal .inputIcon { position: relative; }
html body #punto_venta .headerPrincipal .inputIcon i:not(.icon-searchTin) {
	position: absolute;
	left: 0;
	top: 0;
	width: 128px;
	height: 44px;
	z-index: 1;
}
html body #punto_venta .headerPrincipal .inputIcon i:not(.icon-searchTin)::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 128px;
	height: 44px;
	line-height: 44px;
	padding-left: 12px;
	box-sizing: border-box;
	font-size: 20px;
	margin: 0 !important;
	border-radius: var(--r-md) 0 0 var(--r-md);
	background: var(--chip);
	color: var(--chip-ink);
}
html body #punto_venta .headerPrincipal .inputIcon > span {
	z-index: 2;
	left: 44px;
	top: 0;
	line-height: 44px;
	color: var(--chip-ink);
	font-size: var(--fs-md);
	font-weight: 600;
}
html body #punto_venta .headerPrincipal .inputIcon > span.articuloText { top: 0 !important; line-height: 52px; }
html body #punto_venta .headerPrincipal .inputIcon > span::after {
	display: inline-block;
	margin-left: 8px;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	vertical-align: 1px;
	background: var(--kbd);
	color: var(--kbd-ink);
	content: "F1";
}
html body #punto_venta .headerPrincipal .inputIcon > span.articuloText::after { content: "F2"; }
html body #punto_venta .headerPrincipal .inputIcon input {
	padding-left: 140px;
	padding-right: 60px;
	margin: 0;
	font-size: var(--fs-lg);
}
html body #punto_venta .headerPrincipal .inputIcon input.cliente { margin-top: 10px; height: 44px !important; }
/* input margin-top collapses through .inputIcon, so absolute adornments stay at top: 0 */
html body #punto_venta .headerPrincipal .inputIcon input.producto {
	height: 52px !important;
	margin-top: 12px;
	font-size: var(--fs-lg);
	border-color: var(--line-strong);
}
html body #punto_venta .headerPrincipal .inputIcon i.flaticon-technology,
html body #punto_venta .headerPrincipal .inputIcon i.flaticon-technology::before,
html body #punto_venta .headerPrincipal .inputIcon span.articuloText { height: 52px !important; line-height: 52px; top: 0 !important; }
html body #punto_venta .headerPrincipal .inputIcon i.flaticon-technology::before { top: 0 !important; }
html body #punto_venta .headerPrincipal .inputIcon i.icon-searchTin {
	position: absolute;
	right: 0 !important;
	top: 0;
	width: 52px;
	height: 44px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--adorn);
	border: 1px solid var(--field-line);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	color: var(--ink-2);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
html body #punto_venta .headerPrincipal .inputIcon i.icon-searchTin::before {
	position: static;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1;
	font-size: 20px !important;
	background: none !important;
	border: none !important;
	color: inherit !important;
}
html body #punto_venta .headerPrincipal .inputIcon i.icon-searchTin:hover { background: var(--hover); color: var(--ink); }
html body #punto_venta .headerPrincipal .inputIcon i.icon-searchTin.icoArticulo { top: 0; right: 0 !important; height: 52px; }
html body #punto_venta .headerPrincipal .inputIcon i.icon-searchTin.icoArticulo::before { font-size: 22px !important; }

html body #punto_venta .headerPrincipal .fecha label,
html body #punto_venta .headerPrincipal .vendedor label {
	margin-top: 10px;
	height: 44px !important;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-2);
	border-right: none;
}
html body #punto_venta .headerPrincipal .fecha label input {
	height: 44px !important;
	width: auto !important;
	flex: 1;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	font-variant-numeric: tabular-nums;
}
html body #punto_venta .headerPrincipal .vendedor label span { color: var(--ink) !important; font-weight: 600; }

/* Sale grid */
html body #punto_venta .wrap-container { margin-top: 16px !important; width: 100% !important; }
html body #punto_venta .contGvVentas {
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}
html body #punto_venta .wrap-container .table-base { width: 100% !important; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; z-index: 1; }
html body #punto_venta table.table-custom thead tr th { text-align: right; }
html body #punto_venta table.table-custom thead tr th:first-child { text-align: left; padding-left: 64px; }
html body #punto_venta table.gv-punto-venta tbody tr td {
	vertical-align: middle;
	font-size: var(--fs-md);
	text-align: right;
	font-variant-numeric: tabular-nums;
	padding-top: 12px;
	padding-bottom: 12px;
}
html body #punto_venta table.gv-punto-venta tbody tr td.descripcion { text-align: left; font-weight: 600; line-height: 1.35; }
html body #punto_venta table.gv-punto-venta tbody tr td.descripcion b { color: var(--ink-3); font-weight: 500; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
html body #punto_venta table.gv-punto-venta tbody tr td.descripcion strong { color: var(--ink-3); font-weight: 600; }
html body #punto_venta table.gv-punto-venta tbody tr td span { color: var(--ink-3); font-size: var(--fs-xs); }
html body #punto_venta table.gv-punto-venta tbody tr td span.edit-tot { color: var(--ink); font-size: var(--fs-md); font-weight: 700; }
html body #punto_venta table.gv-punto-venta tbody tr td a.edit-lnk {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--ink-3);
	text-underline-offset: 3px;
	padding: 2px 4px;
	border-radius: var(--r-sm);
}
html body #punto_venta table.gv-punto-venta tbody tr td a.edit-lnk:hover { background: var(--hover); text-decoration-color: var(--ink); }
html body #punto_venta table.gv-punto-venta tbody tr td input.edit-txt { height: 32px !important; text-align: right; padding: 0 8px; width: 90px; }
html body #punto_venta table.gv-punto-venta tbody tr td.controles { width: 52px !important; text-align: center; }
html body #punto_venta table.gv-punto-venta tbody tr td.controles i,
html body table.table-custom tbody tr td i.delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--r-md);
	background: transparent !important;
	color: var(--ink-3) !important;
	font-size: 12px !important;
	padding: 0 !important;
	transition: background-color .15s ease, color .15s ease;
}
html body #punto_venta table.gv-punto-venta tbody tr td.controles i::before,
html body table.table-custom tbody tr td i.delete::before { color: inherit !important; }
html body #punto_venta table.gv-punto-venta tbody tr td.controles i:hover,
html body table.table-custom tbody tr td i.delete:hover { background: var(--danger-soft) !important; color: var(--danger) !important; }

/* Search modal + other POS lists: selected row (inline <style> in the template sets black) */
html body #punto_venta .productos.isSelected td,
html body .productos.isSelected td {
	background-color: var(--selected) !important;
	color: var(--selected-ink) !important;
}

/* Footer: comments + totals + actions */
html body #punto_venta .footerPrincipal { height: auto; min-height: 140px; display: flex; align-items: stretch; padding: 0; }
html body #punto_venta .footerPrincipal::after { content: none; }
html body #punto_venta .footerPrincipal > .column { float: none; padding: 14px 16px !important; box-sizing: border-box; }
html body #punto_venta .footerPrincipal .comentarios { border-right: 1px solid var(--line-soft); }
html body #punto_venta .footerPrincipal .comentarios label { margin-top: 0; font-size: var(--fs-sm) !important; color: var(--ink-2); display: flex; align-items: center; }
html body #punto_venta .footerPrincipal .comentarios label b { font-weight: 600; color: var(--ink-2); }
html body #punto_venta .footerPrincipal .comentarios textarea {
	margin-top: 8px;
	width: 100%;
	height: 76px !important;
	font-style: normal;
	font-size: var(--fs-sm);
	color: var(--ink);
	border-radius: var(--r-md);
	box-sizing: border-box;
}
html body #punto_venta .footerPrincipal .pnl-total { display: flex; align-items: stretch; padding: 0 !important; }
html body #punto_venta .footerPrincipal .pnl-total > .column { float: none; }
html body #punto_venta .footerPrincipal .pnl-total .iva {
	border-right: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 6px;
	padding: 14px 16px !important;
}
html body #punto_venta .footerPrincipal .total label {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--ink-2);
	font-weight: 500;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
html body #punto_venta .footerPrincipal .total label span {
	color: var(--ink) !important;
	font-size: 22px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
html body #punto_venta .footerPrincipal .pnl-total > .small-7 { display: flex; align-items: stretch; padding: 0 !important; flex: 1; }
html body #punto_venta .footerPrincipal .totalFinal {
	border-right: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 16px !important;
	background: var(--total-bg);
}
html body #punto_venta .footerPrincipal .totalFinal label { color: var(--total-label) !important; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
html body #punto_venta .footerPrincipal .totalFinal label.total {
	font-size: 44px !important;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--total-ink) !important;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}
html body #punto_venta .footerPrincipal .botones {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 12px 16px !important;
}
html body #punto_venta .footerPrincipal .botones button {
	margin: 0;
	padding: 0 12px;
	height: 44px;
	border-radius: var(--r-md);
	font-size: var(--fs-md);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html body #punto_venta .footerPrincipal .botones button i { margin: 0; padding: 0; background: transparent; border-radius: 0; color: inherit; font-size: 16px; }
html body #punto_venta .footerPrincipal .botones .ticket {
	height: 56px;
	background: var(--btn-go);
	border: 1px solid var(--btn-go);
	color: var(--btn-go-ink);
	font-size: var(--fs-lg);
}
html body #punto_venta .footerPrincipal .botones .ticket:hover,
html body #punto_venta .footerPrincipal .botones .ticket:focus { background: var(--btn-go-hover); border-color: var(--btn-go-hover); color: var(--btn-go-ink); }
html body #punto_venta .footerPrincipal .botones .cancelar {
	height: 36px;
	background: transparent;
	border: 1px solid var(--danger-line);
	color: var(--danger);
	font-weight: 600;
	font-size: var(--fs-sm);
}
html body #punto_venta .footerPrincipal .botones .cancelar:hover,
html body #punto_venta .footerPrincipal .botones .cancelar:focus { background: var(--danger-soft); color: var(--danger); }

/* Payment buttons (hidden by default; JS may show) */
html body #punto_venta .footerPrincipal button.tarjeta {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
	border-radius: var(--r-md);
}
html body #punto_venta .footerPrincipal button.tarjeta.active { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }

/* ------------------------------------------------------------------
   Login (views/index.ejs)
   ------------------------------------------------------------------ */
html body.bodyTajsa { background: var(--login-bg); overflow: auto !important; }
html body.bodyTajsa .side2 {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -54%);
	width: 420px;
	max-width: calc(100vw - 32px);
	height: auto;
	z-index: 1;
	display: block;
	padding: 36px 40px 40px;
	box-sizing: border-box;
	background: var(--surface);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card), 0 12px 32px rgba(0, 0, 0, .06);
}
html body.bodyTajsa .loginLogo { margin: 0 0 28px; width: auto; text-align: center; }
html body.bodyTajsa .loginLogo img { top: 0 !important; width: 280px; max-width: 100%; height: auto; }
html body.bodyTajsa .loginContent { margin: 0; height: auto; width: 100%; }
html body.bodyTajsa .loginControls { position: relative; }
html body.bodyTajsa .form-login { margin: 0 !important; }
html body.bodyTajsa .content-input { position: relative; margin-bottom: 12px; }
html body.bodyTajsa .content-input i {
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	pointer-events: none;
}
html body.bodyTajsa .content-input i::before {
	position: static;
	margin: 0;
	background: transparent;
	padding: 0;
	width: auto;
	font-size: 20px;
	color: var(--login-icon);
}
html body.bodyTajsa .form-login input {
	height: 46px !important;
	margin: 0;
	padding: 0 14px 0 44px;
	text-align: left !important;
	border: 1px solid var(--login-field-line);
	border-radius: var(--r-md);
	background-color: var(--login-field) !important;
	color: var(--login-ink);
	font-size: var(--fs-lg);
}
html body.bodyTajsa .form-login input::-webkit-input-placeholder { text-align: left !important; color: var(--login-placeholder) !important; font-size: var(--fs-md) !important; }
html body.bodyTajsa .form-login input:focus { border-color: var(--focus) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; }
html body.bodyTajsa .form-login br { display: none; }
html body.bodyTajsa .msnError { margin: 0 0 12px !important; display: block; text-align: left; }
html body.bodyTajsa .msnError.is-hidden { display: none !important; }
html body.bodyTajsa .error-login { color: var(--login-error); font-size: var(--fs-sm); font-weight: 500; display: inline-flex; gap: 6px; align-items: baseline; }
html body.bodyTajsa .error-login i { color: var(--login-error); margin: 0 !important; }
html body.bodyTajsa .loginBttn {
	width: 100%;
	height: 48px;
	margin: 4px 0 0;
	padding: 0 !important;
	border: none;
	border-radius: var(--r-md);
	background-color: var(--login-btn);
	color: var(--login-btn-ink);
	font-size: var(--fs-lg);
	font-weight: 700;
	transition: background-color .15s ease;
}
html body.bodyTajsa .loginBttn:hover,
html body.bodyTajsa .loginBttn:focus { background-color: var(--login-btn-hover) !important; color: var(--login-btn-ink) !important; }
html body.bodyTajsa .loginBttn[disabled] { opacity: .6; }
html body.bodyTajsa .footer {
	height: 56px !important;
	background: var(--login-footer);
	border: none;
	padding-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
html body.bodyTajsa .footer div.leftFooter { width: auto !important; }
html body.bodyTajsa .loginLogoFooter span,
html body.bodyTajsa .loginLogoFooter a {
	color: var(--login-footer-ink) !important;
	font-size: var(--fs-xs);
	position: static;
	padding: 0;
	line-height: 1.5;
	text-align: center;
	display: inline;
}
html body.bodyTajsa .loginLogoFooter { text-align: center; }

/* Safety net: JS visibility contract wins over every rule above */
html body .is-hidden { display: none !important; }

}

@media screen { :root { --logo-mark: url("/img/logo-dangel-mark-cream.svg"); } }
/* ==================================================================
   D'Angel Fashion · Versión B "Etiqueta tejida"
   Cinta tejida vino con hilo crema, paneles como etiquetas cosidas,
   notación de cuidado para los estados. Rampa neutra fija N0-N10;
   el rosa mexicano solo marca el foco.
   ================================================================== */
@media screen {
:root {
	--font: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
	--cond: "Sofia Sans Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--xcond: "Sofia Sans Extra Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--fs-xs: 12px; --fs-sm: 14px; --fs-table: 15px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 30px;
	--r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 3px; --r-pill: 2px;

	/* Rampa de hilo: los únicos neutros */
	--n0: #FFFFFF; --n1: #F7F6F5; --n2: #EFEDEB; --n3: #E2DFDC; --n4: #CDC8C4; --n5: #A9A29E;
	--n6: #847C78; --n7: #645C59; --n8: #4A4341; --n9: #2F2A29; --n10: #1C1818;

	/* Cinta y foco */
	--vino: #5C1F2F; --vino-2: #4B1825; --vino-3: #6D2A3B;
	--thread: #F2E9DA; --thread-2: #D8C8B5; --thread-stitch: rgba(242, 233, 218, .42);
	--rosa: #C8215F; --rosa-soft: rgba(200, 33, 95, .20);
	--stitch: var(--n5);
	--weave: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 3px);

	--canvas: var(--n2); --surface: var(--n0);
	--ink: var(--n10); --ink-2: var(--n8); --ink-3: var(--n7);
	--line: var(--n3); --line-soft: var(--n2); --line-strong: var(--n4);
	--hover: var(--n1); --hover-strong: var(--n3); --row-hover: var(--n1); --table-head: var(--n1);
	--field: var(--n0); --field-line: var(--n6); --field-disabled: var(--n2); --placeholder: var(--n7); --adorn: var(--n1);
	--focus: var(--rosa); --focus-ring: var(--rosa-soft);
	--selection: rgba(200, 33, 95, .18);
	--link: var(--n10); --link-hover: var(--vino);
	--accent: var(--rosa); --accent-ink: var(--n0);

	--avatar-bg: var(--vino); --avatar-ink: var(--thread);

	--rail: var(--vino); --rail-line: var(--vino); --rail-hover: rgba(255, 255, 255, .08); --rail-active: var(--thread);
	--rail-ink: #EADFCF; --rail-ink-2: #CDB9A6; --rail-ink-3: #BFA894; --rail-ink-strong: #FFF9F0; --rail-ink-active: var(--vino);
	--rail-marker: var(--rosa); --rail-field: rgba(0, 0, 0, .20); --rail-field-line: var(--thread-stitch); --rail-field-focus: rgba(0, 0, 0, .28);
	--rail-focus: var(--thread); --rail-tree: var(--thread-stitch); --rail-scrim: rgba(28, 24, 24, .30);
	--rail-w: 68px; --rail-w-open: 260px;

	--btn-go: var(--vino); --btn-go-hover: var(--vino-2); --btn-go-ink: var(--thread);
	--danger: #B42318; --danger-line: #E2A39D; --danger-soft: #FBEDEB; --danger-soft-field: #FFF8F7; --danger-ink: #7E1A12;
	--ok-soft: #EBF3EE; --ok-line: #BDD9C7; --ok-ink: #1F4D33;
	--warn-soft: #FBF2DE; --warn-line: #E9D29A; --warn-ink: #634708;
	--info-soft: var(--n1); --info-line: var(--n4); --info-ink: var(--n9);
	--selected: var(--vino); --selected-ink: var(--thread);
	--chip: var(--vino); --chip-ink: var(--thread); --chip-on: var(--vino); --chip-on-ink: var(--thread);
	--kbd: var(--thread); --kbd-ink: var(--vino);
	--check: var(--vino);
	--scrim: rgba(28, 24, 24, .52);
	--scroll-thumb: var(--n4); --scroll-thumb-hover: var(--n5);
	--total-bg: var(--n0); --total-label: var(--n8); --total-ink: var(--n10);

	--shadow-card: none;
	--shadow-pop: 0 10px 26px rgba(28, 24, 24, .16), 0 2px 6px rgba(28, 24, 24, .08);
	--shadow-modal: 0 22px 52px rgba(28, 24, 24, .26);

	--login-bg: var(--n2); --login-field: #FBF6EE; --login-field-line: transparent; --login-ink: var(--n10);
	--login-placeholder: var(--n7); --login-icon: var(--vino); --login-btn: var(--thread); --login-btn-ink: var(--vino); --login-btn-hover: #FFFFFF;
	--login-error: #FFD3DE; --login-footer: transparent; --login-footer-ink: var(--n7);
}

html body { caret-color: var(--rosa); }
/* Hilván: el foco es una puntada rosa */
html body :focus-visible { outline: 2px dashed var(--rosa) !important; outline-offset: 2px !important; }
/* Sobre la cinta vino el hilván va en crema: el rosa no llega a 3:1 contra el vino */
html body nav :focus-visible { outline-color: var(--thread) !important; }

/* ------------------------------------------------------------------
   Cinta tejida: menú flotante con orillo pespunteado
   ------------------------------------------------------------------ */
html body nav {
	border-radius: var(--r-sm);
	padding: 14px 10px 12px !important;
	background-color: var(--vino);
	background-image: var(--weave);
	outline: 1px dashed var(--thread-stitch);
	outline-offset: -5px;
	box-shadow: 0 1px 2px rgba(28, 24, 24, .22), 0 10px 24px rgba(92, 31, 47, .20);
}
html body nav:hover,
html body nav.is-menu-open { box-shadow: 0 2px 4px rgba(28, 24, 24, .22), 0 18px 40px rgba(92, 31, 47, .30); }
html body nav:has(:focus-visible) { box-shadow: 0 2px 4px rgba(28, 24, 24, .22), 0 18px 40px rgba(92, 31, 47, .30); }

/* Logo tejido en crema; con la cinta cerrada solo se ve el ala */
html body nav .head-left { position: relative; height: 58px; margin: 0 0 12px !important; }
html body nav .head-left img,
html body nav:hover .head-left img,
html body nav.is-menu-open .head-left img {
	width: 100%;
	height: 100%;
	padding: 4px 10px;
	border-radius: 0;
	background: transparent;
	object-fit: contain;
	object-position: center;
}
html body nav:has(:focus-visible) .head-left img { width: 100%; padding: 4px 10px; object-fit: contain; }
html body nav .head-left img { opacity: 0; transition: opacity .15s ease; }
html body nav .head-left::before {
	content: "";
	position: absolute;
	inset: 8px 0;
	background: var(--logo-mark) center / contain no-repeat;
	transition: opacity .15s ease;
}
html body nav .head-left::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: -6px;
	border-top: 1px dashed var(--thread-stitch);
}
html body nav:hover .head-left img,
html body nav.is-menu-open .head-left img { opacity: 1; }
html body nav:hover .head-left::before,
html body nav.is-menu-open .head-left::before { opacity: 0; }
html body nav:has(:focus-visible) .head-left img { opacity: 1; }
html body nav:has(:focus-visible) .head-left::before { opacity: 0; }

html body nav input.txtBusqueda,
html body nav input { border-radius: var(--r-sm) !important; border-style: dashed !important; }

html body nav ul.menu-n1 > li,
html body nav ul.search-n1 > li { border-radius: var(--r-sm); }
html body nav ul.menu-n1 > li > a { height: 44px; border-radius: var(--r-sm); }
html body nav ul.menu-n1 > li > a label.textMenu {
	font-family: var(--cond) !important;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
html body nav ul.menu-n1 > li.has-submenu .lineRed,
html body nav ul.menu-n1 > li:hover .lineRed,
html body nav ul.menu-n1 > li.isActive .lineRed { background: transparent; }
/* Activo = tejido invertido: fondo crema, letra vino */
html body nav ul.menu-n1 > li.isActive > a { background: var(--thread); }
html body nav ul.menu-n2 { border-left: 1px dashed var(--rail-tree); margin-left: 22px !important; }
html body nav ul.menu-n2 li a { border-radius: var(--r-sm); font-size: 14px; }
html body nav ul.menu-n2 li.isActive a { background: var(--thread); color: var(--vino) !important; }
html body nav ul.search-n1 li a { border-radius: var(--r-sm); }
html body nav button.menu { border-radius: var(--r-sm); background: rgba(0, 0, 0, .22); }
html body nav button.menu:hover { background: rgba(0, 0, 0, .32); }

/* ------------------------------------------------------------------
   Títulos: rango por caja y peso, no por color
   ------------------------------------------------------------------ */
html body .titulo { margin: 12px 0 18px !important; }
html body .titulo h3 {
	font-family: var(--cond) !important;
	font-size: var(--fs-2xl) !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink) !important;
}
html body .titulo span.subTitulo,
html body .titulo h3 span {
	font-family: var(--font) !important;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-3) !important;
}

/* ------------------------------------------------------------------
   Botones: la acción principal es una etiqueta cosida
   ------------------------------------------------------------------ */
html body .btn,
html body .button:not(.btn) {
	font-family: var(--cond) !important;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: var(--r-sm) !important;
}
html body .btn.btn-success,
html body .button.success:not(.btn) { outline: 1px dashed var(--thread-stitch); outline-offset: -5px; }
html body .btn.btn-primary,
html body .btn.btn-save,
html body .button:not(.btn):not(.success):not(.alert) { border-color: var(--n6) !important; }
/* No disponible: tachado en diagonal, como en la notación de cuidado */
html body .btn[disabled],
html body .btn:disabled,
html body .button:not(.btn):disabled {
	opacity: .6;
	background-image: linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 0px), transparent calc(50% + 0px)) !important;
}

/* ------------------------------------------------------------------
   Tablas impresas como etiqueta de cuidado: reglas finas, densas
   ------------------------------------------------------------------ */
html body .bb-grid,
html body .gvDatos { box-shadow: none; border: 1px solid var(--n4); border-radius: var(--r-sm); }
html body table thead tr th,
html body table.table-custom thead tr th,
html body table.table-custom thead tr.titulo,
html body .bb-grid thead tr th strong span {
	font-family: var(--cond) !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--n8) !important;
}
html body .bb-grid thead tr th,
html body .bb-grid thead .gv-order { border-bottom: 1px solid var(--n4) !important; }
html body .bb-grid thead tr th + th,
html body .bb-grid tbody tr td + td { box-shadow: inset 1px 0 0 var(--n2); }
html body table tbody tr td,
html body .bb-grid tbody tr td { border-bottom-color: var(--n3); }
html body .bb-grid tbody tr td { padding: 8px 8px !important; }
html body ul.breadcrumbs > * a,
html body ul.breadcrumbs > * span { border-radius: var(--r-sm); font-family: var(--cond) !important; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
html body .pricing-table { box-shadow: none; border: 1px solid var(--n4); }
html body .pricing-table .title { font-family: var(--cond) !important; text-transform: uppercase; letter-spacing: .06em; }

/* Modales: la costura separa el encabezado */
html body .reveal-modal.reveal-custom { border-radius: var(--r-lg) !important; }
html body .reveal-modal.reveal-custom .pop-head,
html body .pop-head { border-bottom: 1px dashed var(--stitch); border-radius: var(--r-lg) var(--r-lg) 0 0; }
html body .pop-head label,
html body .reveal-modal.reveal-custom .pop-head label {
	font-family: var(--cond) !important;
	font-size: 19px !important;
	letter-spacing: .05em;
	text-transform: uppercase;
}
html body .reveal-modal.reveal-custom .pop-foot,
html body .reveal-modal.reveal-custom .pop-footer { border-top: 1px dashed var(--stitch); }
html body .reveal-modal.reveal-custom table { box-shadow: 0 0 0 1px var(--n4); border-radius: var(--r-sm); }

html body .pnlAlert .alert-box { border-radius: var(--r-sm); }
html body .loading label { border-radius: var(--r-sm); font-family: var(--cond) !important; letter-spacing: .05em; text-transform: uppercase; }

/* ------------------------------------------------------------------
   Punto de venta
   ------------------------------------------------------------------ */
html body #punto_venta .headerPrincipal,
html body #punto_venta .footerPrincipal {
	box-shadow: none;
	border: 1px solid var(--n3);
	border-radius: var(--r-sm);
}
html body #punto_venta .contGvVentas { box-shadow: none; border: 1px solid var(--n3); border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm); }
html body #punto_venta .wrap-container .table-base { border: 1px solid var(--n3); border-bottom: none; border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* Cliente y Artículo como etiquetas de talla */
html body #punto_venta .headerPrincipal .inputIcon i:not(.icon-searchTin)::before {
	background-color: var(--vino);
	background-image: var(--weave);
	color: var(--thread);
	border-radius: var(--r-sm) 0 0 var(--r-sm);
}
html body #punto_venta .headerPrincipal .inputIcon > span {
	font-family: var(--cond) !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
html body #punto_venta .headerPrincipal .inputIcon > span::after { border-radius: 2px; font-family: var(--cond); font-size: 13px; letter-spacing: .04em; }
html body #punto_venta .headerPrincipal .inputIcon i.icon-searchTin { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
html body #punto_venta .headerPrincipal .fecha label,
html body #punto_venta .headerPrincipal .vendedor label { font-family: var(--cond) !important; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
html body #punto_venta .headerPrincipal .vendedor label span { font-family: var(--font) !important; text-transform: none; letter-spacing: 0; font-size: 15px; }

/* Chip Cliente / Artículo ancho para la etiqueta en versales y la tecla */
html body #punto_venta .headerPrincipal .inputIcon i:not(.icon-searchTin),
html body #punto_venta .headerPrincipal .inputIcon i:not(.icon-searchTin)::before { width: 164px; }
html body #punto_venta .headerPrincipal .inputIcon input { padding-left: 178px; }

html body #punto_venta table.gv-punto-venta tbody tr td.descripcion { font-weight: 600; }

/* El total: una etiqueta cosida con cifras condensadas */
html body #punto_venta .footerPrincipal .totalFinal {
	background: var(--n0);
	outline: 1px dashed var(--stitch);
	outline-offset: -7px;
	box-shadow: inset 0 0 0 1px var(--n3);
	padding: 14px 22px !important;
}
html body #punto_venta .footerPrincipal .totalFinal label {
	font-family: var(--cond) !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
}
html body #punto_venta .footerPrincipal .totalFinal label.total {
	font-family: var(--xcond) !important;
	font-size: 58px !important;
	font-weight: 800;
	line-height: .95;
	letter-spacing: 0;
}
html body #punto_venta .footerPrincipal .total label { font-family: var(--cond) !important; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
html body #punto_venta .footerPrincipal .total label span { font-family: var(--xcond) !important; font-size: 26px; font-weight: 800; letter-spacing: 0; }
html body #punto_venta .footerPrincipal .botones .ticket {
	height: 62px;
	border-radius: var(--r-sm);
	background-image: var(--weave);
	outline: 1px dashed var(--thread-stitch);
	outline-offset: -5px;
	font-family: var(--cond) !important;
	font-size: 17px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 0 12px;
	justify-content: center;
	gap: 6px;
}
/* flaticon.css da margin-left:20px a todo ::before; el ícono del Ticket queda centrado */
html body #punto_venta .footerPrincipal .botones button i::before { margin: 0 !important; font-size: 18px; }
html body #punto_venta .footerPrincipal .botones .cancelar {
	border-radius: var(--r-sm);
	font-family: var(--cond) !important;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
html body #punto_venta .footerPrincipal .comentarios label { font-family: var(--cond) !important; letter-spacing: .05em; text-transform: uppercase; }

/* ------------------------------------------------------------------
   Login: la etiqueta principal de la marca
   ------------------------------------------------------------------ */
html body.bodyTajsa { background: var(--n2); }
html body.bodyTajsa .side1 { display: none; }
html body.bodyTajsa .side2 {
	width: 440px;
	padding: 46px 52px 46px;
	background-color: var(--vino);
	background-image: var(--weave);
	border-radius: var(--r-sm);
	outline: 1px dashed var(--thread-stitch);
	outline-offset: -11px;
	box-shadow: inset 16px 0 0 rgba(0, 0, 0, .16), inset -16px 0 0 rgba(0, 0, 0, .16), 0 2px 4px rgba(28, 24, 24, .2), 0 22px 48px rgba(92, 31, 47, .26);
}
html body.bodyTajsa .loginLogo { margin: 0 0 30px; }
html body.bodyTajsa .loginLogo img { width: 290px; }
html body.bodyTajsa .loginLogo::after {
	content: "DAMA \B7  CABALLERO \B7  NIÑOS \B7  ACCESORIOS";
	display: block;
	margin-top: 18px;
	color: var(--thread-2);
	font-family: var(--cond);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-align: center;
}
html body.bodyTajsa .form-login input { border-radius: var(--r-sm); border-color: transparent; }
html body.bodyTajsa .form-login input:focus { border-color: var(--thread) !important; box-shadow: 0 0 0 3px rgba(242, 233, 218, .28) !important; }
html body.bodyTajsa .loginBttn {
	border-radius: var(--r-sm);
	font-family: var(--cond) !important;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
html body.bodyTajsa .loginBttn:focus-visible { outline-color: var(--thread) !important; }
html body.bodyTajsa .error-login { font-weight: 600; }

/* ------------------------------------------------------------------
   Casillas: cuadro de etiqueta (main.css las escala con zoom:2 y top:3px)
   ------------------------------------------------------------------ */
html body input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px !important;
	flex: none;
	border: 1px solid var(--field-line);
	border-radius: var(--r-sm);
	background: var(--n0) center / 12px 12px no-repeat;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
html body input[type="checkbox"]:checked { background-color: var(--vino); border-color: var(--vino); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjJFOURBIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIuNSA2LjJsMi40IDIuNCA0LjYtNSIvPjwvc3ZnPg=="); }
html body input[type="checkbox"]:disabled { background-color: var(--n2); cursor: not-allowed; }
html body input[type="checkbox"]:disabled:checked { background-color: var(--n6); border-color: var(--n6); }
html body label input[type="checkbox"] {
	zoom: 1 !important;
	height: 18px !important;
	line-height: normal !important;
	position: static !important;
	top: 0 !important;
	margin: 0 0 0 8px !important;
}
html body .bb-grid tbody input[type="checkbox"] { border: 1px solid var(--field-line) !important; width: 18px !important; height: 18px !important; margin: 0 !important; }
html body #punto_venta .footerPrincipal .comentarios label { display: flex; align-items: center; height: 24px; }

/* ------------------------------------------------------------------
   Íconos de línea: imprimir y ajustes con el mismo trazo que ver
   ------------------------------------------------------------------ */
html body .icon-preview::before,
html body .icon-print::before,
html body .icon-settings::before {
	content: "" !important;
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
html body .icon-print::before { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNyA4VjMuNWgxMFY4Ii8+PHJlY3QgeD0iMyIgeT0iOCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjkiIHJ4PSIyIi8+PHBhdGggZD0iTTcgMTMuNWgxMFYyMC41SDd6Ii8+PC9zdmc+"); }
html body .icon-preview::before { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMi41IDEyczMuNS02LjUgOS41LTYuNSA5LjUgNi41IDkuNSA2LjUtMy41IDYuNS05LjUgNi41UzIuNSAxMiAyLjUgMTJ6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIvPjwvc3ZnPg=="); }
html body .icon-settings::before { --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTguNTkgOS42M0wyMS4wNiAxMC40MkwyMS4wNiAxMy41OEwxOC41OSAxNC4zN0wxOC4zMyAxNC45OEwxOS41MyAxNy4yOUwxNy4yOSAxOS41M0wxNC45OCAxOC4zM0wxNC4zNyAxOC41OUwxMy41OCAyMS4wNkwxMC40MiAyMS4wNkw5LjYzIDE4LjU5TDkuMDIgMTguMzNMNi43MSAxOS41M0w0LjQ3IDE3LjI5TDUuNjcgMTQuOThMNS40MSAxNC4zN0wyLjk0IDEzLjU4TDIuOTQgMTAuNDJMNS40MSA5LjYzTDUuNjcgOS4wMkw0LjQ3IDYuNzFMNi43MSA0LjQ3TDkuMDIgNS42N0w5LjYzIDUuNDFMMTAuNDIgMi45NEwxMy41OCAyLjk0TDE0LjM3IDUuNDFMMTQuOTggNS42N0wxNy4yOSA0LjQ3TDE5LjUzIDYuNzFMMTguMzMgOS4wMloiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIzIi8+PC9zdmc+"); }

/* ------------------------------------------------------------------
   Caja y Tickets: misma gramática que catálogo y punto de venta
   ------------------------------------------------------------------ */
html body #caja .row,
html body #tickets .row { max-width: none; margin-left: 0; margin-right: 0; }
html body #caja table.gv-tickets,
html body #tickets table.gv-creditos { width: 100%; border: 1px solid var(--n4); border-radius: var(--r-sm); }
html body #caja table.gv-tickets tbody td:nth-child(2),
html body #tickets table.gv-creditos tbody td:nth-child(5),
html body #tickets table.gv-creditos tbody td:nth-child(6) { white-space: nowrap; font-variant-numeric: tabular-nums; }
html body #caja table.gv-tickets tbody td:nth-child(7),
html body #tickets table.gv-creditos tbody td:nth-child(12),
html body #tickets table.gv-creditos tbody td:nth-child(14) { white-space: nowrap; text-align: right !important; font-variant-numeric: tabular-nums; }
html body #caja table.gv-tickets thead tr th:nth-child(7),
html body #tickets table.gv-creditos thead tr th:nth-child(13),
html body #tickets table.gv-creditos thead tr th:nth-child(14) { text-align: right !important; }
/* Acciones del ticket en línea; los "|" literales de la plantilla no se muestran */
html body #tickets table.gv-creditos tbody td.controls { white-space: nowrap; font-size: 0; }
html body #tickets table.gv-creditos tbody td.controls i { font-size: 17px !important; margin: 0 5px; cursor: pointer; }
html body #tickets table.gv-creditos tbody td.controls i:hover { color: var(--vino) !important; }

/* ------------------------------------------------------------------
   Punto de venta en monitores altos: la venta crece en vez de dejar lienzo vacío.
   body y html llevan zoom:90% (escala real 0.81); a 768 px de alto da los 400 px de siempre.
   ------------------------------------------------------------------ */
html body #punto_venta .contGvVentas { height: max(400px, calc(400px + (100vh - 699px) / .81)); }

/* Enter cobra: la tecla se muestra como F1 y F2 */
html body .btn.btn-cobrar::after {
	content: "Enter";
	margin-left: 4px;
	padding: 0 6px;
	border-radius: 2px;
	background: var(--kbd);
	color: var(--kbd-ink);
	font-family: var(--cond);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 18px;
	text-transform: none;
}
}