/* Fuentes self-hosted (antes desde fonts.googleapis.com).
   Razón: el <link> a Google Fonts es render-bloqueante; cuando un cliente
   tiene timeout contra fonts.googleapis.com (proxy corporativo, DNS, etc.)
   el sistema entero tarda 5-30 s en aparecer. Los archivos viven en css/font/.
   Roboto v51 es una variable font: un solo .woff2 cubre los pesos 100-900. */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url('css/font/roboto-v51-latin-variable.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fredoka One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('css/font/fredoka-one-v15-latin-regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.divider {
	height: 3px;
	display: block;
	background-color: rgba(0,0,0,.1);
	margin: 1em 0;
	width: 30px;
}

/* Cash Dashboard */
.cash-dashboard-wrap {
	width: 100%;
	max-width: 1320px;
}

.cash-state-item {
	border: 1px solid #d9e2ec;
	border-radius: 10px;
	background: linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
	padding: 12px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cash-state-item.alt {
	background: linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%);
}

.cash-state-item:hover {
	border-color: #7a98b7;
	box-shadow: 0 0 0 2px rgba(122,152,183,0.2);
}

.cash-state-title {
	font-size: 1rem;
	font-weight: 600;
}

.cash-state-meta {
	margin-top: 4px;
}

.cash-metric-box {
	border: 1px solid #e6edf3;
	border-radius: 8px;
	background: #ffffff;
	padding: 8px;
	margin: 4px;
	min-height: 66px;
}

.cash-metric-box.zero-margin {
	margin: 0;
}

.cash-metric-label {
	font-size: 0.75rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cash-metric-value {
	font-size: 0.9rem;
	font-weight: 600;
}

.cash-restricted-note {
	font-size: 0.85rem;
	color: #7c6a00;
	background: #fff8db;
	border: 1px dashed #e3cf73;
	border-radius: 8px;
	padding: 6px 10px;
}

.cash-summary-note {
	background: #eef7ff;
	border: 1px solid #c9deef;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 0.9rem;
	color: #2a4d69;
	margin-bottom: 12px;
}

.cash-summary-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.cash-summary-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f4f8fb;
	border: 1px solid #d8e3ee;
	font-size: 0.82rem;
	color: #395067;
}

.cash-summary-pill strong {
	font-size: 0.9rem;
	font-weight: 700;
	color: #1e2f3f;
}

.cash-kpi-grid {
	min-width: 520px;
	max-width: 720px;
}

.cash-kpi-strip {
	display: grid;
	grid-template-columns: repeat(4,minmax(150px,1fr));
	gap: 8px;
}

.cash-kpi-strip-global {
	margin-bottom: 10px;
}

.cash-kpi-strip-point {
	min-width: 620px;
	max-width: 760px;
}

.cash-kpi-cell {
	border: 1px solid #dbe7f2;
	border-radius: 10px;
	background: #ffffff;
	padding: 10px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 86px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, padding 0.15s ease;
}

.cash-kpi-cell .kpi-label {
	font-size: 0.72rem;
	color: #64778b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cash-kpi-cell .kpi-label i {
	font-size: inherit;
	margin-right: 2px;
}

.cash-kpi-cell .kpi-icon {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 0.9rem;
}

.cash-kpi-cell.kpi-info {
	border-color: #cde6f5;
}

.cash-kpi-cell.kpi-info .kpi-icon {
	background: #17a2b8;
}

.cash-kpi-cell.kpi-info .kpi-label i {
	color: #17a2b8;
}

.cash-kpi-cell.kpi-danger {
	border-color: #f1c8cd;
}

.cash-kpi-cell.kpi-danger .kpi-icon {
	background: #dc3545;
}

.cash-kpi-cell.kpi-danger .kpi-label i {
	color: #dc3545;
}

.cash-kpi-cell.kpi-success {
	border-color: #cde8d4;
}

.cash-kpi-cell.kpi-success .kpi-icon {
	background: #28a745;
}

.cash-kpi-cell.kpi-success .kpi-label i {
	color: #28a745;
}

.cash-kpi-cell.kpi-primary {
	border-color: #cddbf4;
}

.cash-kpi-cell.kpi-primary .kpi-icon {
	background: #0d6efd;
}

.cash-kpi-cell.kpi-primary .kpi-label i {
	color: #0d6efd;
}

.cash-kpi-value {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.cash-kpi-card .card-body {
	min-height: 96px;
}

.cash-methods-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(118px,1fr);
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 2px;
}

.cash-method-cell {
	border: 1px solid #e2eaf3;
	border-radius: 8px;
	background: #ffffff;
	padding: 6px 8px;
	min-height: 56px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, padding 0.15s ease;
}

.cash-method-label {
	font-size: 0.68rem;
	color: #6f8296;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cash-method-value {
	font-size: 0.84rem;
	font-weight: 600;
	color: #1f3346;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.cash-state-title {
		font-size: 0.95rem;
	}
	.cash-metric-value {
		font-size: 0.85rem;
	}
	.cash-summary-pill {
		font-size: 0.78rem;
	}
	.cash-kpi-strip {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	.cash-kpi-strip-point {
		min-width: 100%;
		max-width: 100%;
		margin-top: 8px;
	}
	.cash-kpi-cell {
		min-height: 78px;
	}
	.cash-kpi-cell .kpi-icon {
		width: 30px;
		height: 30px;
	}
	.cash-kpi-grid {
		min-width: 100%;
		max-width: 100%;
		margin-top: 8px;
	}
	.cash-kpi-value {
		font-size: 1.05rem;
		white-space: normal;
	}
	.cash-kpi-card .card-body {
		min-height: 88px;
	}
	.cash-method-cell {
		min-height: 52px;
	}
	.cash-method-value {
		font-size: 0.8rem;
	}
}

.cashlane-wrap {
	width: 100%;
	max-width: 1320px;
}

.cashlane-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 4px;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cashlane-item:hover {
	box-shadow: 0 0 0 2px rgba(122,152,183,0.18);
}

.cashlane-item.s-open    { border-left-color: #28a745; }
.cashlane-item.s-closed  { border-left-color: #9aa5b1; }
.cashlane-item.s-closing { border-left-color: #f0ad4e; }

.cashlane-top {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.cashlane-top::before {
	content: "";
	position: absolute;
	top: 0;
	right: 18%;
	bottom: 0;
	width: 55%;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.cashlane-item.s-open    .cashlane-top::before,
.cashlane-item.s-closing .cashlane-top::before {
	background-image: url('images/svg/caja_atendida.svg');
}

.cashlane-item.s-closed  .cashlane-top::before {
	background-image: url('images/svg/caja_vacia.svg');
}

.cashlane-avatar,
.cashlane-info,
.cashlane-side {
	position: relative;
	z-index: 1;
}

.cashlane-avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	color: #ffffff;
	background: #6c7a89;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px #d9e2ec;
	text-transform: uppercase;
	align-self: center;
}

.cashlane-avatar i {
	font-size: 1.4rem;
}

.cashlane-avatar.s-open    { background: #28a745; color: #ffffff; }
.cashlane-avatar.s-closing { background: #f0ad4e; color: #5a4200; box-shadow: 0 0 0 1px #d6a955; }
.cashlane-avatar.s-closed  { background: #e6edf3; color: #6c7a89; box-shadow: 0 0 0 1px #cdd6df; }

.cashlane-info {
	flex: 1 1 220px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cashlane-info-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.1;
	color: #1f2d3d;
}

.cashlane-info-user {
	margin-top: 4px;
	font-size: 0.85rem;
	color: #2a3d4f;
}

.cashlane-info-user.empty {
	color: #8693a2;
	font-style: italic;
}

.cashlane-info-time {
	margin-top: 2px;
	font-size: 0.78rem;
	color: #6c7a89;
}

.cashlane-metrics {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e6edf3;
}

.cashlane-metric {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 6px;
	padding: 4px 6px;
	text-align: center;
	min-height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cashlane-metric-label {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}

.cashlane-metric-value {
	font-size: 0.86rem;
	font-weight: 600;
	color: #2a3d4f;
	line-height: 1.1;
}

.cashlane-metric.metric-total {
	background: #eef7ff;
	border-color: #c9deef;
}

.cashlane-metric.metric-total .cashlane-metric-value {
	color: #1c4e80;
}

.cashlane-metric-restricted {
	font-size: 0.75rem;
	color: #8693a2;
	font-style: italic;
}

.cashlane-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-left: auto;
	align-self: stretch;
}

.cashlane-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.cashlane-actions .btn {
	white-space: nowrap;
}

.cashlane-status {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
	align-items: center;
}

.cashlane-status .badge {
	font-size: 0.9rem;
	padding: 6px 12px;
	line-height: 1.1;
	font-weight: 600;
}

.cashlane-status .badge i {
	font-size: 0.9em;
}

.cashlane-restricted-banner {
	background: #fff8db;
	border: 1px dashed #e3cf73;
	color: #7c6a00;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 0.85rem;
	margin-bottom: 10px;
}

/* Variante summary (fila "Todas las Cajas/Terminales" al final del listado) */
.cashlane-item.is-summary {
	background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 60%);
	border-color: #c9deef;
	border-left-color: #1c4e80;
	border-left-width: 5px;
	margin-top: 16px;
}

.cashlane-item.is-summary .cashlane-info-title {
	color: #1c4e80;
}

.cashlane-avatar.s-summary {
	background: #1c4e80;
	color: #ffffff;
	box-shadow: 0 0 0 1px #154361;
}

/* Drawer lateral reutilizable */
.cashlane-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: 7000; /* Top global SiReTT: por encima del menú/chat, por debajo del modal y loader */
	opacity: 0;
	transition: opacity 0.2s ease;
}

.cashlane-drawer-backdrop.is-open {
	opacity: 1;
}

.cashlane-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 480px;
	max-width: 92vw;
	background: #ffffff;
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
	z-index: 7001;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.cashlane-drawer.is-open {
	transform: translateX(0);
}

.cashlane-drawer .drawer-header {
	background: linear-gradient(90deg, #1c4e80 0%, #2a6bb0 100%);
	color: #ffffff;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cashlane-drawer .drawer-header .drawer-title-info {
	flex-grow: 1;
	min-width: 0;
}

.cashlane-drawer .drawer-header .drawer-title-main {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
}

.cashlane-drawer .drawer-header .drawer-title-meta {
	font-size: 0.75rem;
	opacity: 0.88;
	margin-top: 2px;
}

.cashlane-drawer .drawer-close {
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 1.1rem;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.78;
}

.cashlane-drawer .drawer-close:hover {
	opacity: 1;
}

.cashlane-drawer .drawer-body {
	flex-grow: 1;
	overflow-y: auto;
	padding: 14px 16px;
}

.cashlane-drawer .drawer-footer {
	padding: 8px 12px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
}

.cashlane-drawer .drawer-footer .drawer-hint {
	color: #64748b;
	flex-grow: 1;
}

/* Bloques del contenido del drawer */
.cashlane-drawer-section {
	margin-bottom: 14px;
}

.cashlane-drawer-section-title {
	font-size: 0.7rem;
	color: #64778b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px dashed #cbd5e1;
}

.cashlane-drawer-kpi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 6px;
}

.cashlane-drawer-kpi {
	background: #ffffff;
	border: 1px solid #dbe7f2;
	border-radius: 8px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cashlane-drawer-kpi .kpi-label {
	font-size: 0.7rem;
	color: #64778b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cashlane-drawer-kpi .kpi-value {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1f2d3d;
	font-variant-numeric: tabular-nums;
}

.cashlane-drawer-kpi.kpi-primary { background: #eef7ff; border-color: #c9deef; }
.cashlane-drawer-kpi.kpi-primary .kpi-value { color: #1c4e80; }
.cashlane-drawer-kpi.kpi-success { background: #ecfdf3; border-color: #b6e5c8; }
.cashlane-drawer-kpi.kpi-success .kpi-value { color: #1e6f3a; }
.cashlane-drawer-kpi.kpi-info    { background: #eef9ff; border-color: #bfdcee; }
.cashlane-drawer-kpi.kpi-info    .kpi-value { color: #1a5b85; }
.cashlane-drawer-kpi.kpi-danger  { background: #fdecec; border-color: #f0b9b9; }
.cashlane-drawer-kpi.kpi-danger  .kpi-value { color: #8a1a1a; }

.cashlane-drawer-method-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cashlane-drawer-method-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 0.86rem;
}

.cashlane-drawer-method-row:nth-child(odd) {
	background: #f7f9fc;
}

.cashlane-drawer-method-row .method-label {
	color: #475569;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cashlane-drawer-method-row .method-label i {
	color: #94a3b8;
	width: 16px;
	text-align: center;
}

.cashlane-drawer-method-row .method-value {
	font-weight: 600;
	color: #1f2d3d;
	font-variant-numeric: tabular-nums;
}

.cashlane-drawer-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
	font-size: 0.83rem;
}

.cashlane-drawer-meta-grid .meta-label {
	color: #64778b;
}

.cashlane-drawer-meta-grid .meta-value {
	color: #1f2d3d;
	font-weight: 600;
	text-align: right;
}

.cashlane-drawer-grand-total {
	margin-top: 10px;
	background: #1c4e80;
	color: #ffffff;
	border-radius: 8px;
	padding: 12px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cashlane-drawer-grand-total .grand-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.85;
}

.cashlane-drawer-grand-total .grand-value {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cartv2-shell {
	--cartv2-primary: #0e7f82;
	--cartv2-secondary: #f18f01;
	--cartv2-ink: #1f2d3d;
	--cartv2-muted: #5b6b7a;
	--cartv2-border: #dbe6ef;
	--cartv2-head-bg: #029c7d;
	--cartv2-head-bg-dark: #027A62;
	--cartv2-head-bg-darker: #01614E;
	--cartv2-head-bg-soft: rgba(2, 156, 125, 0.88);
	--cartv2-head-tx: #000000;
	--cartv2-head-tx-strong: #000000;
	--cartv2-head-tx-soft: rgba(0, 0, 0, 0.22);
	--cartv2-head-tx-border: rgba(0, 0, 0, 0.45);
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	border-radius: 1rem;
	background: linear-gradient(145deg, #f2f8fb 0%, #f8f4ea 100%);
	animation: cartv2FadeIn 0.45s ease-out;
	text-align: left;
}

.cartv2-shell .cartv2-blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(6px);
	opacity: 0.28;
	z-index: 0;
	pointer-events: none;
}

.cartv2-shell .cartv2-blob-a {
	width: 320px;
	height: 320px;
	background: #83d0c9;
	top: -180px;
	right: -120px;
}

.cartv2-shell .cartv2-blob-b {
	width: 260px;
	height: 260px;
	background: #ffd58a;
	bottom: -150px;
	left: -110px;
}

.cartv2-shell .cartv2-card {
	position: relative;
	z-index: 1;
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 1rem;
	background: rgba(255,255,255,0.84);
	backdrop-filter: blur(8px);
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.cartv2-shell .cartv2-card.cartv2-explore-card-normal {
	width: 1260px;
	min-width: 1260px;
	max-width: none;
}

.cartv2-shell .cartv2-card.cartv2-explore-card-plus {
	max-width: 1200px;
}

@media (max-width: 991.98px) {
	.cartv2-shell {
		padding: 0.85rem;
	}
	.cartv2-shell .cartv2-title {
		font-size: 1.1rem;
	}
}

@keyframes cartv2FadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.cartv2-shell .cartv2-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid var(--cartv2-border);
	background: linear-gradient(92deg, var(--cartv2-head-bg-darker) 0%, var(--cartv2-head-bg) 55%, var(--cartv2-head-bg-soft) 100%);
	color: var(--cartv2-head-tx);
}
.cartv2-shell .cartv2-title-wrap {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.cartv2-shell .cartv2-title-icon {
	display: inline-flex;
	width: 2.3rem;
	height: 2.3rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.7rem;
	background: var(--cartv2-head-tx-soft);
	font-size: 1rem;
}
.cartv2-shell .cartv2-title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.cartv2-shell .cartv2-subtitle {
	margin: 0;
	font-size: 0.83rem;
	opacity: 0.92;
}
.cartv2-shell .cartv2-chip {
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--cartv2-head-tx-border);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.cartv2-shell .cartv2-panel {
	border: 1px solid var(--cartv2-border);
	border-radius: 0.9rem;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 35, 60, 0.06);
}
.cartv2-shell .cartv2-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 0.95rem;
	border-bottom: 1px solid #edf3f8;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--cartv2-ink);
}
.cartv2-shell .cartv2-panel-head i {
	color: var(--cartv2-primary);
}
.cartv2-shell .cartv2-detail-host {
	padding: 0.85rem;
	min-height: 180px;
}
.cartv2-shell .cartv2-metric-box {
	margin-top: 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.75rem;
	background: #f7fbff;
	border: 1px solid #e4edf5;
	color: var(--cartv2-muted);
	font-size: 0.86rem;
}
.cartv2-shell .cartv2-totals {
	margin: 0;
	padding: 0.65rem 0.95rem 0.2rem 0.95rem;
}
.cartv2-shell .cartv2-totals dt,
.cartv2-shell .cartv2-totals dd {
	margin-bottom: 0.55rem;
	font-size: 0.88rem;
}
.cartv2-shell .cartv2-totals dt {
	color: var(--cartv2-muted);
	font-weight: 600;
}
.cartv2-shell .cartv2-totals dd {
	text-align: right;
	font-weight: 700;
	color: var(--cartv2-ink);
}
.cartv2-shell .cartv2-total-row dt,
.cartv2-shell .cartv2-total-row dd {
	font-size: 1.23rem;
	color: #0d4f67;
}
.cartv2-shell .cartv2-form {
	border-top: 1px solid #edf3f8;
	padding: 0.85rem 0.95rem 0.95rem 0.95rem;
}
.cartv2-shell .cartv2-form label {
	font-size: 0.8rem;
	font-weight: 700;
	color: #31475e;
	margin-bottom: 0.3rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.cartv2-shell .cartv2-form .input-group-text {
	background: #f3f8fd;
	border-color: #d8e6f3;
	color: #54718e;
}
.cartv2-shell .cartv2-form .form-control {
	border-color: #d8e6f3;
}
.cartv2-shell .cartv2-submit {
	margin-top: 0.85rem;
	border: none;
	border-radius: 0.65rem;
	padding: 0.7rem 0.95rem;
	background: linear-gradient(100deg, #0e7f82, #13a6a3);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cartv2-shell .cartv2-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 18px rgba(14,127,130,0.24);
}
.cartv2-shell .cartv2-guest {
	border-top: 1px solid #edf3f8;
	padding: 0.9rem;
}
.cartv2-shell .cartv2-guest-card {
	padding: 0.85rem;
	border-radius: 0.7rem;
	background: linear-gradient(130deg, #f4fbff, #fff8ed);
	border: 1px solid #e4edf5;
	margin-bottom: 0.75rem;
	font-size: 0.88rem;
	color: #42586f;
}
.cartv2-shell .cartv2-guest .btn {
	border-radius: 0.6rem;
	font-weight: 700;
}
.cartv2-shell .cartv2-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
}
.cartv2-shell .cartv2-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.78rem;
	border: 1px solid #e4edf5;
	border-radius: 0.8rem;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	box-shadow: 0 8px 18px rgba(18, 37, 64, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cartv2-shell .cartv2-item:hover {
	transform: translateY(-1px);
	border-color: #cfe2f4;
	box-shadow: 0 12px 22px rgba(18, 37, 64, 0.08);
}
.cartv2-shell .cartv2-item-media {
	width: 88px;
	flex-shrink: 0;
}
.cartv2-shell .cartv2-item-media img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 0.7rem;
	border: 1px solid #dfeaf4;
	background: #f8fcff;
}
.cartv2-shell .cartv2-item-body {
	width: 100%;
	min-width: 0;
}
.cartv2-shell .cartv2-item-top {
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}
.cartv2-shell .cartv2-code {
	display: inline-block;
	font-size: 0.72rem;
	padding: 0.12rem 0.45rem;
	border-radius: 999px;
	background: #ecf7fb;
	color: #1a708a;
	font-weight: 700;
	margin-bottom: 0.4rem;
}
.cartv2-shell .cartv2-title-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.23;
	color: var(--cartv2-ink);
	font-weight: 700;
}
.cartv2-shell .cartv2-tags {
	margin-top: 0.42rem;
}
.cartv2-shell .cartv2-price-box {
	text-align: right;
	flex-shrink: 0;
}
.cartv2-shell .cartv2-price-box small {
	display: block;
	font-size: 0.69rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #67809a;
}
.cartv2-shell .cartv2-price-box strong {
	font-size: 1.03rem;
	color: #0f5f79;
}
.cartv2-shell .cartv2-old-price {
	display: block;
	font-size: 0.77rem;
	color: #a06d6d;
	margin-top: 0.16rem;
}
.cartv2-shell .cartv2-combo-list {
	margin-top: 0.5rem;
	padding: 0.5rem 0.55rem;
	border-radius: 0.6rem;
	background: #f4faf5;
	border: 1px dashed #c9ddcb;
}
.cartv2-shell .cartv2-combo-line {
	font-size: 0.76rem;
	color: #3f5b49;
	margin-bottom: 0.16rem;
}
.cartv2-shell .cartv2-combo-line:last-child {
	margin-bottom: 0;
}
.cartv2-shell .cartv2-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.7rem;
	margin-top: 0.62rem;
	padding-top: 0.55rem;
	border-top: 1px solid #edf3f8;
}
.cartv2-shell .cartv2-qty-display {
	min-width: 52px;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: #203347;
}
.cartv2-shell .cartv2-qty-btn {
	width: 32px;
	height: 32px;
	border: 1px solid #d9e7f3;
	border-radius: 0.55rem;
	background: #fff;
	color: #3d5a76;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cartv2-shell .cartv2-qty-btn:hover {
	background: #edf6ff;
	color: #124f76;
	border-color: #bfd8ec;
}
.cartv2-shell .cartv2-qty-btn.cartv2-danger:hover {
	background: #fff0f0;
	color: #9c3030;
	border-color: #efc2c2;
}
.cartv2-shell .cartv2-subtotal small {
	display: block;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6c8399;
}
.cartv2-shell .cartv2-subtotal strong {
	font-size: 1.02rem;
	color: #1b4f68;
}
.cartv2-shell .cartv2-empty {
	padding: 1.1rem 0.95rem;
	border-radius: 0.8rem;
	border: 1px dashed #c9dcec;
	background: #f8fcff;
	text-align: center;
	color: #51697f;
}

@media (max-width: 767.98px) {
	.cartv2-shell .cartv2-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.65rem;
	}
	.cartv2-shell .cartv2-item {
		flex-direction: column;
	}
	.cartv2-shell .cartv2-item-media {
		width: 100%;
	}
	.cartv2-shell .cartv2-item-media img {
		width: 100%;
		height: 170px;
	}
	.cartv2-shell .cartv2-item-top {
		flex-direction: column;
	}
	.cartv2-shell .cartv2-price-box {
		text-align: left;
	}
	.cartv2-shell .cartv2-item-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

.watermarked {
	position: relative;
}

.watermarked:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('images/sin_stock.png');
	background-size: 100px 100px;
	background-position: 0px 0;
	background-repeat: no-repeat;
	opacity: 0.9;
}

/* Default Font Styles */
.label { display: block; padding-left: 15px; text-indent: -15px; }

.pntr { cursor: pointer; }

/* Main Format for Index.php */
.main_table {
	height: 100%;
	width: 100%;
	background-color: #FFFFFF;
	font-size: 10px;
}

.main_table_data {
	padding: 0;
}

.status_div_cell {
	text-align: right;
	height: 14px;
	background: url('images/gradient.png') repeat-x scroll 50% center #111111;
	padding: 2px;
}

.status_div_body {
	color: #FFFFFF;
	font-size: 11px;
	padding: 2px;
}

.main_div {
	margin: 0;
	min-height: 500px;
	/* background-color SIEMPRE se aplica: en modo Solo Color es el fondo unico, y en
	   modos con imagen actua como base sobre la que se mezcla el patron transparente
	   (los SVG del catalogo son semitransparentes a proposito para combinar con este color). */
	background-color: #ffffff;
}

.main_div > center {
	padding: 4px;
	border-radius: 4px;
	background-color: #FFFFFF;
	background-image: none;
	display: inline-block;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.chat_to_div {
	padding: 8px;
	margin: 6px;
	border: 2px solid #B1BDED;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #B1CEED;
}

.chat_from_div {
	padding: 8px;
	margin: 6px;
	border: 2px solid #FFBB33;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 15px;
	background-color: #FFCC33;
}

.iteminfo_div {
	padding: 0;
	margin: 0;
	height: 180px;
	width: 100%;
	overflow: auto;
	text-overflow: ellipsis;
}

.opacity_5 {
	opacity: 0.5;
}

.item_master_box {
	font-weight: bold;
	font-size: 12px;
	padding: 3px 5px;
	margin: 5px;
	white-space: nowrap;
	color: #000000;
	border: 1px solid #FFFFFF;
	background-color: #029c7d;
	display: inline-block;
	cursor: pointer;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.item_slave_box {
	font-size: 12px;
	padding: 3px 5px;
	margin: 5px;
	white-space: nowrap;
	color: #000000;
	border: 1px solid #029c7d;
	background-color: #029c7d;
	display: inline-block;
	cursor: pointer;
}

.item_slave_box:hover {
	border: 1px solid #000000;
}

.color_master_box {
	padding: 0;
	margin: 5px;
	white-space: nowrap;
	color: #000000;
	border: 1px solid #FFFFFF;
	background-color: #029c7d;
	display: inline-block;
	cursor: pointer;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.color_slave_box {
	padding: 0;
	margin: 5px;
	white-space: nowrap;
	color: #000000;
	border: 1px solid #029c7d;
	background-color: #029c7d;
	display: inline-block;
	cursor: pointer;
}

.color_slave_box:hover {
	border: 1px solid #000000;
}

.thumb_div {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 250px;
	height: 250px;
	margin: 3px 3px;
	border: 1px solid #CCCCCC;
	box-shadow: 3px 3px 3px black;
}

.thumb_div a {
	display: block;
	width: 250px;
	height: 250px;
}

.mini_div {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	margin: 3px 3px;
	border: 2px solid #CCCCCC;
	box-shadow: 3px 3px 3px black;
}

.mini_div a {
	display: block;
	width: 50px;
	height: 50px;
}

.catalog_div {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 160px;
	height: 160px;
	margin: 3px 3px;
	border: 1px solid #CCCCCC;
	box-shadow: 3px 3px 3px black;
}

.eval_div {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 160px;
	height: 160px;
	border: 1px solid #CCCCCC;
	box-shadow: 3px 3px 3px black;
	margin: auto;
}

.familia_div {
	cursor: pointer;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin: 3px 3px;
	border: 1px solid #CCCCCC;
	border-radius: 50%;
	opacity: 0.5;
}

.familia_div:hover {
	border: 1px solid orange;
	opacity: 1;
}

.n_familia_div {
	cursor: pointer;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin: 3px 3px;
	border: 1px solid #CCCCCC;
	border-radius: 50%;
}

.userpic_div {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 48px;
	height: 48px;
}

.userpic_div_lg {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid #DDDDDD;
	margin: 0 auto;
}

/* Encabezado y pie estándar para listados de resultados.
   Comparten estilo (centrado, padding, rounded, font-weight) para enmarcar el listado.
   Alias .user_card_results_header se conserva por compatibilidad. */
.results_header,
.results_footer,
.user_card_results_header {
	background-color: #029c7d;
	color: #000000;
	padding: 8px 14px;
	border-radius: 6px;
	font-weight: 600;
	text-align: center;
}
.results_header,
.user_card_results_header { margin-bottom: 4px; }
.results_footer { margin-top: 8px; font-size: 0.85rem; }

.user_card_section {
	font-weight: 600;
	color: #495057;
	padding: 14px 4px 4px 4px;
}

/* Diseño tipo "predoc-item" (ver pre_ajustes-moderno.php): borde lateral por estado,
   avatar circular clickeable, chips de estado y metadatos, botón Abrir a la derecha. */
.user_card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #d9e2ec;
	border-left-width: 4px;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user_card:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }

.user_card.is-blocked   { border-left-color: #DC3545; border-left-width: 5px; }
.user_card.is-partial   { border-left-color: #FD7E14; border-left-width: 5px; }
.user_card.is-active    { border-left-color: #28A745; border-left-width: 5px; }
.user_card.is-stale     { border-left-color: #FFC107; border-left-width: 5px; }
.user_card.is-warn      { border-left-color: #FD7E14; border-left-width: 5px; }
.user_card.is-abandoned { border-left-color: #B02A37; border-left-width: 7px; }

.user_card__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.user_card__avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #F1F3F5;
	border: 2px solid #FFFFFF;
	box-shadow: 0 0 0 1px #d9e2ec;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.15s ease;
	overflow: hidden;
}
.user_card__avatar:hover { transform: scale(1.08); box-shadow: 0 0 0 2px #1c4e80; }
.user_card__avatar i { font-size: 1.6rem; color: #B8BFC6; }
.user_card__avatar .user_card__photo {
	width: 100%; height: 100%;
	background-size: cover; background-position: center;
}

.user_card.is-blocked   .user_card__avatar { box-shadow: 0 0 0 2px #DC3545; }
.user_card.is-partial   .user_card__avatar { box-shadow: 0 0 0 2px #FD7E14; }
.user_card.is-abandoned .user_card__avatar { box-shadow: 0 0 0 2px #B02A37; }

.user_card__info {
	flex: 1 1 320px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.user_card_id {
	display: inline-block;
	background: #eef2f7;
	color: #1c4e80;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 6px;
	margin-right: 6px;
	vertical-align: 1px;
}

.user_card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
	align-items: center;
}

.user_card_chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 10px;
	background: #eef2f7;
	color: #4a5568;
	border: 1px solid #dce3ea;
	white-space: nowrap;
}
.user_card_chip i { font-size: 0.85em; color: #8693a2; }

.user_card__side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	margin-left: auto;
}

/* Fila de botones (Abrir + manejador de llaves) y, debajo, fila de badges de estado (actividad + llaves). */
.user_card__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}
.user_card__actions .btn { white-space: nowrap; }

.user_card__status {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
	align-items: center;
}

.user_card_sep { color: #c4cdd6; margin: 0 4px; }

/* Dentro del row de chips, el badge de estado adopta el tamaño compacto de los chips
   para que la fila luzca homogénea. */
.user_card__chips .user_card_badge {
	padding: 2px 8px;
	font-size: 0.7rem;
	border-radius: 10px;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.user_filters_bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 4px 0 8px 0;
}

.user_filter_chip {
	cursor: pointer;
	user-select: none;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.user_filter_chip:hover {
	transform: translateY(-1px);
}

.user_filter_chip.is-on {
	box-shadow: 0 0 0 3px rgba(0,0,0,.2);
}

.user_filter_count {
	font-weight: 700;
	margin-right: 3px;
	font-size: 13px;
}

.user_results.is-filtered .user_filter_chip:not(.is-on) { opacity: .35; }
.user_results.is-filtered .user_card_section { display: none; }

.user_results.filter-connected .user_card:not(.g-connected) { display: none; }
.user_results.filter-inactive  .user_card:not(.g-inactive)  { display: none; }
.user_results.filter-stale     .user_card:not(.g-stale)     { display: none; }
.user_results.filter-abandoned .user_card:not(.g-abandoned) { display: none; }
.user_results.filter-partial   .user_card:not(.g-partial)   { display: none; }
.user_results.filter-blocked   .user_card:not(.g-blocked)   { display: none; }

.user_card_name {
	font-size: 15px;
	font-weight: 600;
	color: #212529;
	line-height: 1.2;
	margin-bottom: 4px;
}
.user_card_name.is-blocked { color: #DC3545; }

.user_card_meta {
	font-size: 12px;
	color: #6C757D;
	line-height: 1.4;
}
.user_card_meta b { color: #495057; font-weight: 600; }

.user_card_dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}
.user_card_dot.online {
	background-color: #FFFFFF;
	animation: user_dot_pulse 1.8s infinite;
}
.user_card_dot.idle { background-color: #FFFFFF; }
.user_card_dot.away { background-color: #FFFFFF; opacity: .85; }
.user_card_dot.gone { background-color: #FFFFFF; opacity: .6; }

@keyframes user_dot_pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
	70%  { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.user_card_badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	color: #FFFFFF;
	white-space: nowrap;
	letter-spacing: .2px;
}
.user_card_badge.b-online    { background-color: #28A745; }
.user_card_badge.b-idle      { background-color: #FFC107; color: #5A4500; }
.user_card_badge.b-away      { background-color: #6C757D; }
.user_card_badge.b-gone      { background-color: #495057; }
.user_card_badge.b-active    { background-color: #28A745; }
.user_card_badge.b-stale     { background-color: #FFC107; color: #5A4500; }
.user_card_badge.b-warn      { background-color: #FD7E14; }
.user_card_badge.b-partial   { background-color: #FD7E14; }
.user_card_badge.b-blocked   { background-color: #DC3545; }
.user_card_badge.b-abandoned {
	background-color: #B02A37;
	box-shadow: 0 0 0 2px rgba(176,42,55,.18);
}
.user_card_badge.b-keys      { background-color: #6f42c1; }

/* ----- Dashboard de Seguridad (secdash-*) ----- */
.secdash-gauge {
	width: 116px; height: 116px; border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	color: #ffffff; line-height: 1;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.secdash-gauge .secdash-grade { font-size: 2.4rem; font-weight: 800; }
.secdash-gauge .secdash-score { font-size: 0.8rem; font-weight: 600; opacity: .92; margin-top: 2px; }

.secdash-item {
	display: flex; align-items: flex-start; gap: 10px;
	background: #ffffff; border: 1px solid #e6edf3; border-left-width: 5px;
	border-radius: 8px; padding: 9px 12px; margin-bottom: 8px;
}
.secdash-item.sev-alta  { border-left-color: #DC3545; }
.secdash-item.sev-media { border-left-color: #FD7E14; }
.secdash-item.sev-baja  { border-left-color: #FFC107; }
.secdash-item.sev-ok    { border-left-color: #28A745; }
.secdash-item.sev-info  { border-left-color: #6C757D; }
.secdash-item-icon { font-size: 1.2rem; width: 26px; text-align: center; flex: 0 0 26px; margin-top: 2px; }
.secdash-item.sev-alta  .secdash-item-icon { color: #DC3545; }
.secdash-item.sev-media .secdash-item-icon { color: #FD7E14; }
.secdash-item.sev-baja  .secdash-item-icon { color: #C99700; }
.secdash-item.sev-ok    .secdash-item-icon { color: #28A745; }
.secdash-item.sev-info  .secdash-item-icon { color: #6C757D; }
.secdash-item-body { flex: 1 1 auto; min-width: 0; }
.secdash-item-title { font-weight: 600; color: #1f2d3d; }
.secdash-item-detail { font-size: 0.84rem; color: #5a6b7b; margin-top: 2px; }
.secdash-item-side { flex: 0 0 auto; display: flex; align-items: center; }
.secdash-cat { font-weight: 700; color: #1c4e80; margin: 14px 0 8px 0; font-size: 0.95rem; }
.secdash-cat:first-child { margin-top: 0; }

/* Element Styles */
.print_div {
	padding: 25px;
	min-height: 300px;
	max-height: 600px;
	position: relative;
	overflow: auto;
	border: 1px solid #9F9F9F;
	background-color: #FFFFFF;
}

.text_div {
	padding: 10px;
	width: 800px;
	max-height: 450px;
	position: relative;
	overflow: auto;
	border: 1px solid #9F9F9F;
	background-color: #B1CEED;
	font-size: 12px;
}

/* Table Headers */
.table_2nd {
	font-size: 11px;
	color: #1D3652;
	background: url('images/gradient.png') repeat-x scroll 50% center #D5DDE5;
	padding: 5px;
}

.table_bottom {
	text-align: center;
	font-weight: bold;
	font-size: 11px;
	color: #1D3652;
	background: url('images/gradient.png') repeat-x scroll 50% center #D5DDE5;
	padding: 5px;
}

/* Cell Body */
.cell_notice {
	background-color: #EEF3F8;
	border-width: 1px 1px 4px;
	border-style: solid;
	border-color: #D5DDE5;
	padding: 10px;
}

.row_title {
	font-weight: bold;
	font-size: 11px;
	background-color: #D5DDE5;
	color: #1D3652;
	padding: 2px 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	text-align: left;
	width: 10px;
	white-space: nowrap;
}

.row_title_up {
	font-weight: bold;
	font-size: 11px;
	background-color: #D5DDE5;
	color: #1D3652;
	padding: 2px 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	text-align: center;
	white-space: nowrap;
}

.row_data {
	font-size: 11px;
	background-color: #FFFFFF;
	color: #000000;
	padding: 2px 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border: 1px solid #D5DDE5;
	text-align: left;
}

.row_data_x {
	font-size: 11px;
	background-color: #FFFFFF;
	color: #000000;
	padding: 2px 5px;
	border: 1px solid #D5DDE5;
	text-align: left;
}

.fixcell {
	width: 1%;
	white-space: nowrap;
}

.lls {
	padding: 2px 3px;
	color: #1C2837;
	font-size: 9px;
}

/* Table with Result display */
.lh { font-weight: bold; font-size: 11px; background-color: #457b9d; color: #ffffff; padding: 4px 2px; white-space: nowrap; }
.lhu { font-weight: bold; font-size: 11px; background-color: #457b9d; color: #ffffff; padding: 2px 2px 0; white-space: nowrap; }
.lhd { font-size: 10px; background-color: #457b9d; color: #ffffff; padding: 2px; white-space: nowrap; }
.row_class { background-color: #457b9d; color: #ffffff; border-bottom: 1px solid #fff; border-top: 1px solid #fff; }
.row_class_2 { background-color: #457b9d; color: #ffffff; border-bottom: 1px solid #fff; border-top: 1px solid #fff; }

.sep_left { border-left: 1px solid #FFFFFF; }
.sep_right { border-right: 1px solid #FFFFFF; }

.ll { padding: 2px; color: #1C2837; border-bottom: 1px solid #D5DDE5; }

.list_split { border-top: 1px solid #B6C7DB; height: 5px; }

.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }

.highlight:hover { background-color: #FFFFCC; }
.col_00 { background-color: #E4EBF2; }
.col_00:hover { background-color: #FFFFCC; }
.col_01 { background-color: #F1F4F7; }
.col_01:hover { background-color: #FFFFCC; }
.col_10 { background-color: #EEF3F8; }
.col_10:hover { background-color: #FFFFCC; }
.col_11 { background-color: #FAFBFC; }
.col_11:hover { background-color: #FFFFCC; }

/* Labels for Inputs */
.input_label {
	color: #1C2837;
	font-size: 12px;
	margin-right: 6px;
}

.search_statistics_title {
	font-size: 11px;
	color: #606060;
	padding: 1px 2px;
}

.search_statistics_data {
	font-size: 11px;
	color: #000000;
	text-align: right;
	padding: 1px 2px;
}

/* Quick Links */
.link_text {
	cursor: pointer;
	color: #D5DDE5;
	font-size: 10px;
	font-weight: bold;
	text-decoration: underline;
}

.link_text:hover {
	color: #FFFFFF;
}

.desc_td {
	font-size: 9px;
	color: #606060;
}

.f_14 {
	font-size: 14px;
}

/* Statistics */
.text_statistics_header {
	font-size: 12px;
	color: #1C2837;
}

/* Catalogo */
.cat_h1 {
	font-size: 11px;
}

.cat_h2 {
	font-weight: bold;
	font-size: 12px;
}

.cat_sep {
	background-color: #B1CEED;
	width: 5px;
}

/* List Styles */
.text_title_1 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	font-weight: 700!important;
}

.text_title_2 {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 12px;
}

.text_title_2:hover {
	font-weight: 700!important;
}

.text_style_1 {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 16px;
	color: #1C2837;
	display: block;
}

.text_style_2 {
	font-weight: bold;
	color: #1C2837;
}

.text_style_3 {
	font-size: 9px;
	color: #606060;
	margin-bottom: 4px;
	display: block;
}

.text_style_4 {
	font-weight: bold;
	font-size: 16px;
	color: #1C2837;
	display: block;
}

.text_style_5 {
	font-size: 9px;
	color: #606060;
	display: block;
}

.b_black {
	font-weight: bold;
	color: black;
}

.b_red {
	font-weight: bold;
	color: red;
}

.b_dgrey {
	font-weight: bold;
	color: darkgrey;
}

.b_grey {
	font-weight: bold;
	color: grey;
}

.b_lgrey {
	font-weight: bold;
	color: lightgrey;
}

.b_lblue {
	font-weight: bold;
	color: lightblue;
}

.b_dblue {
	font-weight: bold;
	color: darkblue;
}

.b_blue {
	font-weight: bold;
	color: blue;
}

.b_lgreen {
	font-weight: bold;
	color: lightgreen;
}

.b_dgreen {
	font-weight: bold;
	color: darkgreen;
}

.b_green {
	font-weight: bold;
	color: green;
}

.b_orange {
	font-weight: bold;
	color: darkorange;
}

.b_ored {
	font-weight: bold;
	color: orangered;
}

.b_yellow {
	font-weight: bold;
	color: yellow;
}

.b_lsblue {
	font-weight: bold;
	color: lightskyblue;
}

.b { font-weight: bold; }

/* Input Text Designs */
.input_text_shortest,
.input_text_short,
.input_text_small,
.input_text,
.input_text_medium,
.input_text_large,
.input_text_largest,
.input_text_file,
.input_text_huge,
.input_text_extrahuge,
.input_text_area,
.input_select,
.input_text_int,
.input_text_money,
.input_cantidad_3,
.input_cantidad_2,
.input_cantidad_1,
.input_cantidad_0,
.input_cantidad_0_s,
.input_text_integer,
.input_text_longint,
.input_text_longestint,
.input_text_smallint,
.input_text_shortint,
.input_text_tinyint,
.input_text_cantidad
{
	border: 1px solid #ced4da;
	border-radius: .2rem;
	padding: 0px 2px 0px 2px;
	font-size: 11px;
	color: #1C2837;
	height: 20px;
	background-color: #FFFFFF;
}

.input_text_shortest:disabled, .input_text_shortest:read-only,
.input_text_short:disabled, .input_text_short:read-only,
.input_text_small:disabled, .input_text_small:read-only,
.input_text:disabled, .input_text:read-only,
.input_text_medium:disabled, .input_text_medium:read-only,
.input_text_large:disabled, .input_text_large:read-only,
.input_text_largest:disabled, .input_text_largest:read-only,
.input_text_file:disabled,
.input_text_huge:disabled, .input_text_huge:read-only,
.input_text_extrahuge:disabled, .input_text_extrahuge:read-only,
.input_text_area:disabled, .input_text_area:read-only,
.input_select:disabled,
.input_text_int:disabled, .input_text_int:read-only,
.input_text_money:disabled, .input_text_money:read-only,
.input_cantidad_3:disabled, .input_cantidad_3:read-only,
.input_cantidad_2:disabled, .input_cantidad_2:read-only,
.input_cantidad_1:disabled, .input_cantidad_1:read-only,
.input_cantidad_0:disabled, .input_cantidad_0:read-only,
.input_cantidad_0_s:disabled, .input_cantidad_0_s:read-only,
.input_text_integer:disabled, .input_text_integer:read-only,
.input_text_longint:disabled, .input_text_longint:read-only,
.input_text_longestint:disabled, .input_text_longestint:read-only,
.input_text_smallint:disabled, .input_text_smallint:read-only,
.input_text_shortint:disabled, .input_text_shortint:read-only,
.input_text_tinyint:disabled, .input_text_tinyint:read-only
{
	background: none repeat scroll 0% 0% #B6C7DB;
}

.input_text_shortest { width: 45px; }
.input_text_short { width: 85px; }
.input_text_small { width: 125px; }
.input_text { width: 165px; }
.input_text_medium { width: 225px; }
.input_text_large { width: 325px; }
.input_text_largest { width: 405px; }
.input_text_file { height: auto; width: 350px; padding: 2px; }
.input_text_huge { width: 565px; }
.input_text_extrahuge { width: 965px; }
.input_text_area { resize: none; font-family: Arial,Helvetica,sans-serif; height: auto; }
.input_select { min-width: 40px; }

optgroup { font-size: 10px; color: #000000; }

.input_text_int { width: 60px; text-align: right; }
.input_text_money { width: 80px; text-align: right; }
.input_cantidad_3 { width: 50px; text-align: right; }
.input_cantidad_2 { width: 50px; text-align: right; }
.input_cantidad_1 { width: 50px; text-align: right; }
.input_cantidad_0 { width: 50px; text-align: right; }
.input_cantidad_0_s { width: 30px; text-align: right; }
.input_text_integer { width: 70px; text-align: right; }
.input_text_longint { width: 80px; text-align: right; }
.input_text_longestint { width: 120px; text-align: right; }
.input_text_smallint { width: 40px; text-align: right; }
.input_text_shortint { width: 45px; text-align: right; }
.input_text_tinyint { width: 40px; text-align: right; }
.input_text_cantidad { color: orange; font-weight: bold; font-size: 20px; width: 65px; text-align: right; height: auto; }

.searcher_table { margin: 0; padding: 0; border-spacing: 0; width: 100%; min-width: 1260px; max-width: 1900px; }
.print_table { margin: 0; padding: 0; border-spacing: 0; width: 1000px; }
.view_table { margin: 0; padding: 0; border-spacing: 0; width: 1260px; }
.smallform_table { margin: 0; padding: 0; border-spacing: 0; width: 700px; }
.data_table { margin: 0; padding: 0; border-spacing: 0; width: 100%; border: 3px solid #457b9d; }
.t-flush { margin: 0; padding: 0; border-spacing: 0; width: 100%; }

.results_div { padding: 0; min-height: 300px; max-height: 1000px; position: relative; overflow: auto; }

/* Item shop / distribución, ayudas y controles */
.itemshop-help-block { background-color: lightgray; font-size: 9px; border-radius: 6px; padding: 10px; }
.itemshop-modebtn { width: 100px; }

/* Tarjeta de anotacion del cliente -------------------------------------------------------------------
   Nacio dentro del cajon de anotaciones y ahora la comparten DOS vistas: el cajon --angosto, sobre fondo
   claro-- y la pestania Anotaciones de la ficha, que es ancha. Vive aqui y no en el cajon porque
   `cliente_ver.php` no monta el cajon, asi que su CSS no llegaba a la pestania.

   El modificador `.zxn-wide` es lo unico que las diferencia: mas aire y letra mas grande. La tarjeta, los
   colores de bitacora y el chip de origen son los mismos en las dos, y eso importa: el usuario los lee como
   un codigo --azul cliente, verde recepcion, naranja tecnicos, morado administradores-- y un codigo que
   cambia de aspecto segun donde se mire deja de serlo. */
.zxn-nota { border-left: 3px solid #d9a441; background: #fff; border-radius: 3px; padding: 6px 8px; margin-bottom: 6px; }
.zxn-nota-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #94a3b8; }
.zxn-nota-autor { font-weight: 700; color: #12233a; }
.zxn-nota-msg { font-size: 12px; color: #37474f; white-space: pre-wrap; margin-top: 2px; }
.zxn-flag { display: inline-block; width: 15px; height: 15px; border-radius: 50%; color: #fff;
	font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
.zxn-origen { cursor: pointer; text-decoration: underline dotted; }
/* Origen sin destino --el documento se borro--: se apaga y deja de invitar al clic. Con el mismo aspecto de
   enlace, el usuario lo pulsa y no pasa nada, que es peor que decirlo. */
.zxn-origen.zxn-origen-off { cursor: default; text-decoration: none; opacity: .6; }

/* Vista ancha (pestania Anotaciones de la ficha del cliente) */
.zxn-wide .zxn-nota { padding: 9px 12px; margin-bottom: 8px; border-left-width: 4px; border: 1px solid #e6e9ee; border-left: 4px solid #d9a441; }
.zxn-wide .zxn-nota:hover { border-color: #d3d9e0; border-left-color: #c08d2e; }
.zxn-wide .zxn-nota-cab { font-size: 12px; gap: 8px; }
.zxn-wide .zxn-nota-msg { font-size: 13px; margin-top: 5px; line-height: 1.45; }
/* Una nota dirigida al cliente que todavia no ha leido: es la unica que pide una accion, asi que es la
   unica que se destaca. Las demas se leen y ya. */
.zxn-wide .zxn-nota.zxn-pendiente { border-left-color: #c0392b; background: #fffaf7; }
.zxn-acc { cursor: pointer; opacity: .55; transition: opacity .12s; }
.zxn-acc:hover { opacity: 1; }
.zxn-vacio { text-align: center; color: #94a3b8; padding: 26px 10px; font-size: 12px; }
.zxn-vacio i { display: block; font-size: 26px; margin-bottom: 8px; opacity: .5; }

/* Barra de herramientas de icono (detalle de documentos) --------------------------------------------
   Estos controles eran iconos sueltos de jQuery UI: 16 px, sin cromo, y con su color. Al pasarlos a
   Font Awesome se envolvieron en `btn btn-2 btn-sm`, y eso trajo dos problemas:

     - el fondo, el borde, la sombra y el relleno del boton triplicaron el alto de la fila, en una
       barra que solo son atajos y no acciones principales;
     - `.btn-2` fija `color: ... !important`, asi que las clases `n_red`/`n_blue`/`n_green`/`n_orange`
       que venian en el marcado dejaron de pintar. El color, que era la unica pista para distinguir
       "imprimir para la empresa" de "imprimir para el cliente", desaparecio sin que nadie lo notara.

   `.zx-tool` devuelve el tamano y el color, pero NO la falta de afordancia: en reposo no tiene cromo y
   al pasar por encima aparece fondo y borde, asi que se sigue leyendo como algo que se pulsa. Los
   colores se declaran en compuesto --`.zx-tool.n_red`-- porque una clase suelta empataria en
   especificidad con `.zx-tool` y ganaria la que este mas abajo en la hoja. */
.zx-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.zx-tool {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 26px; padding: 0;
	background: transparent; border: 1px solid transparent; border-radius: 4px;
	color: #5a6772; font-size: 14px; line-height: 1; cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
.zx-tool:hover  { background: #eceff2; border-color: #d5dae0; }
.zx-tool:focus  { outline: none; box-shadow: 0 0 0 2px rgba(28,78,128,.28); }
.zx-tool:active { background: #dfe4e9; }
.zx-tool.n_red    { color: red; }
.zx-tool.n_blue   { color: blue; }
.zx-tool.n_green  { color: green; }
.zx-tool.n_orange { color: darkorange; }
/* Estado sostenido: el candado cerrado, o el modo de vista activo. */
.zx-tool.zx-tool-on { background: #e4eef9; border-color: #b6d0ec; }
/* Separador entre grupos: hace legible la fila sin gastar el alto que gastaba un `btn-group`. */
.zx-tool-sep { width: 1px; height: 18px; background: #dde2e7; margin: 0 5px; flex: 0 0 auto; }

/* Buscadores de Reportes (patrón unificado) */
.form-report-card { width: 100%; min-width: 1260px; max-width: 1900px; }
.form-report-card .card-header { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; }
.form-report-card .card-header h5 { margin: 0; }

.form-report-filters-primary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem .75rem; padding: .6rem .9rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.form-report-filters-primary .form-group { margin-bottom: 0; }
.form-report-filters-primary label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: .15rem; }

.form-report-advanced-toggle { display: flex; align-items: center; justify-content: space-between; padding: .4rem .9rem; background: #f1f5f9; cursor: pointer; user-select: none; border-bottom: 1px solid #e5e7eb; font-size: .82rem; font-weight: 600; color: #334155; }
.form-report-advanced-toggle i.form-report-chevron { transition: transform .15s; }
.form-report-advanced-toggle.open i.form-report-chevron { transform: rotate(90deg); }

.form-report-advanced-body { padding: .75rem .9rem; border-bottom: 1px solid #e5e7eb; display: none; }
.form-report-advanced-body.open { display: block; }
.form-report-advanced-body .form-report-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: .5rem 0 .35rem; font-weight: 600; }
.form-report-advanced-body .form-report-section-title:first-child { margin-top: 0; }
.form-report-advanced-body .form-group { margin-bottom: .4rem; }
.form-report-advanced-body label { font-size: .78rem; margin-bottom: .15rem; color: #475569; }

.form-report-entity-banner {
	--fr-entity-bg:        #457b9d;
	--fr-entity-bg-dark:   #36607A;
	--fr-entity-bg-darker: #2B4C61;
	--fr-entity-tx:        #000000;
	--fr-entity-tx-soft:   rgba(0, 0, 0, 0.18);
	--fr-entity-tx-label:  rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .75rem 1rem;
	background: linear-gradient(90deg, var(--fr-entity-bg-darker) 0%, var(--fr-entity-bg) 100%);
	color: var(--fr-entity-tx);
	border-bottom: 1px solid var(--fr-entity-bg-dark);
}
.form-report-entity-banner .form-report-entity-icon   { font-size: 1.6rem; opacity: .85; flex-shrink: 0; }
.form-report-entity-banner .form-report-entity-meta   { flex-grow: 1; min-width: 0; }
.form-report-entity-banner .form-report-entity-label  { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fr-entity-tx-label); margin-bottom: .1rem; }
.form-report-entity-banner .form-report-entity-codigo { display: inline-block; background: var(--fr-entity-tx-soft); padding: .1rem .5rem; border-radius: .25rem; font-family: monospace; font-weight: 700; font-size: .95rem; margin-right: .5rem; }
.form-report-entity-banner .form-report-entity-desc   { font-size: .95rem; font-weight: 500; }

/* ============================================================
 * clbsc-* — Buscador de Clientes (reports/cliente_resultados.php)
 * Tarjetas en grilla con badges de alerta y paginador.
 * ============================================================ */
.clbsc-results { padding: 0; }
.clbsc-empty { padding: 3rem 1rem; text-align: center; color: #94a3b8; }
.clbsc-empty i { display: block; margin-bottom: 1rem; opacity: .5; }
.clbsc-empty-title { font-size: 1.1rem; font-weight: 600; color: #475569; margin-bottom: .25rem; }
.clbsc-empty-sub { font-size: .85rem; }
.clbsc-notice { margin: .75rem 1rem 0; padding: .5rem .75rem; background: #fef3c7; border-left: 3px solid #f59e0b; color: #78350f; font-size: .8rem; border-radius: .25rem; }
.clbsc-notice i { color: #f59e0b; margin-right: .35rem; }
.clbsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: .75rem; padding: .75rem; }

.clbsc-card { display: flex; gap: .75rem; padding: .65rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; min-width: 0; }
.clbsc-card:hover { border-color: #93c5fd; box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.clbsc-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; background-color: #f3f4f6; border: 1px solid #e5e7eb; }
.clbsc-content { flex: 1; min-width: 0; }

.clbsc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .35rem; margin-bottom: .2rem; flex-wrap: wrap; }
.clbsc-code { font-family: Consolas, "Courier New", monospace; font-size: .75rem; font-weight: 700; color: #1e3a8a; background: #eff6ff; padding: .1rem .4rem; border-radius: .25rem; white-space: nowrap; }
.clbsc-badges { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: flex-end; }
.clbsc-badge { font-size: .62rem; font-weight: 700; padding: .12rem .4rem; border-radius: .25rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; line-height: 1.4; }
.clbsc-badge i { margin-right: .2rem; font-size: .68rem; }
.clbsc-badge-danger  { background: #fee2e2; color: #991b1b; }
.clbsc-badge-warning { background: #fef3c7; color: #92400e; }
.clbsc-badge-success { background: #d1fae5; color: #065f46; }
.clbsc-badge-incobr  { background: #7f1d1d; color: #fff; }

.clbsc-name { font-size: .92rem; font-weight: 700; color: #111827; line-height: 1.25; word-break: break-word; }
.clbsc-comercial { font-size: .78rem; color: #6b7280; font-style: italic; margin-bottom: .35rem; word-break: break-word; }

.clbsc-meta { font-size: .75rem; color: #4b5563; line-height: 1.55; margin-top: .35rem; }
.clbsc-meta > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clbsc-meta i { color: #94a3b8; margin-right: .3rem; width: 1em; text-align: center; }
.clbsc-meta .text-muted { color: #cbd5e1 !important; font-style: italic; font-size: .72rem; }
.clbsc-meta a.clbsc-sirett { color: #0f766e; font-weight: 700; text-decoration: none; }
.clbsc-meta a.clbsc-sirett:hover { text-decoration: underline; }
.clbsc-meta > div:has(a.clbsc-sirett) i { color: #0f766e; }

.clbsc-chips { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.clbsc-chip { font-size: .65rem; padding: .15rem .45rem; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-weight: 600; }
.clbsc-chip i { margin-right: .2rem; }
.clbsc-chip-pink { background: #fce7f3; color: #9d174d; }
.clbsc-chip-blue { background: #dbeafe; color: #1e40af; }

.clbsc-paginator { display: flex; justify-content: space-between; align-items: center; padding: .65rem .9rem; border-top: 1px solid #e5e7eb; background: #f8fafc; flex-wrap: wrap; gap: .5rem; }
.clbsc-paginator-info { font-size: .78rem; color: #64748b; }
.clbsc-paginator-nav { display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; }
.clbsc-paginator-nav button { background: #fff; border: 1px solid #e5e7eb; padding: .25rem .55rem; font-size: .78rem; border-radius: .25rem; cursor: pointer; color: #475569; transition: background .1s, border-color .1s; min-width: 2rem; }
.clbsc-paginator-nav button:hover:not(:disabled):not(.active) { background: #e0e7ff; border-color: #c7d2fe; }
.clbsc-paginator-nav button.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; cursor: default; font-weight: 600; }
.clbsc-paginator-nav button:disabled { opacity: .4; cursor: not-allowed; }
.clbsc-paginator-ellipsis { padding: 0 .25rem; font-size: .85rem; color: #94a3b8; }

.barcode_image {
	text-align: center;
	color: #000000;
	border-width: 1px;
	border-style: solid;
	padding: 4px;
	background-color: #FFFFFF;
	border-color: lightgray darkgrey darkgrey lightgray;
}

/* Invoice Format */
.invoice_line1 {
	font-size: 16px;
	font-weight: bold;
}

.invoice_line2 {
	font-size: 14px;
}

.invoice_title {
	font-size: 16px;
}

.invoice_number {
	font-size: 20px;
}

.n_red { color: red; }
.n_dblue { color: darkblue; }
.n_lblue { color: lightblue; }
.n_blue { color: blue; }
.n_ored { color: orangered; }
.n_purple { color: purple; }
.n_yellow { color: yellow; }
.n_orange { color: darkorange; }
.n_lgreen { color: lightgreen; }
.n_dgreen { color: darkgreen; }
.n_green { color: green; }
.n_grey { color: grey; }
.n_pink { color: pink; }
.n_black { color: black; }

.tachar {
	text-decoration: line-through;
}

.nav_familia {
	display: none;
	font-size: 10px;
	color: orange;
	height: auto;
	width: 100%;
}

/******************************
 * Nuevos Botones para SiReTT *
 ******************************/

.input_submit,
.input_submit_s1,
.input_submit_s2,
.input_submit_s3,
.input_special,
.input_special_active {
	cursor: pointer;
	border-radius: 4px;
	text-decoration: none;
	font-size: 11px;
	line-height: 1;
	padding: 3px 5px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.input_submit,
.input_submit_s1,
.input_submit_s2,
.input_submit_s3,
.input_special,
.input_special_active,
.btn-0, .btn-1, .btn-2, .btn-3,
.btn-h, .btn-m, .btn-w, .btn-t {
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16), 0 2px 6px 0 rgba(0,0,0,0.12);
}

.input_submit:hover,
.input_submit_s1:hover,
.input_submit_s2:hover,
.input_submit_s3:hover,
.input_special:hover,
.input_special_active:hover,
.btn-0:hover, .btn-1:hover, .btn-2:hover, .btn-3:hover,
.btn-h:hover, .btn-m:hover, .btn-w:hover, .btn-t:hover {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/* Dentro de un GRUPO: sin sombra y SIN SOLAPE.
   Son dos cosas distintas y hacen falta las dos.

   1) La sombra de las reglas de arriba está pensada para un botón suelto, que flota sobre el fondo. En un
      grupo cae sobre el vecino y ensucia la unión.

   2) El solape es el que de verdad se ve. Bootstrap monta los botones de un grupo 1px
      (`margin-left: -1px`) para que compartan un borde de 1px en vez de dibujar dos. Eso funciona con
      bordes OPACOS, pero los de aquí llevan alpha (`border: solid rgba(...,.8) 1px`): donde los dos se
      pisan, las dos capas translúcidas se suman y aparece una línea más oscura, como si un botón estuviera
      montado sobre el otro. Se nota sobre todo con los botones DESHABILITADOS, porque Bootstrap les baja la
      opacidad y el conjunto se aclara mientras esa línea se mantiene.

      Por eso no basta con oscurecer o igualar el color del borde: hay que quitar el solape. Cada botón a
      partir del segundo pierde su borde izquierdo y se pega sin montarse, así que la unión queda de un solo
      trazo. Comprobado contra las tres variantes -sombra sola, borde opaco y esta- en el navegador: es la
      única que deja la unión limpia. */
.btn-group > .btn-0, .btn-group > .btn-1, .btn-group > .btn-2, .btn-group > .btn-3,
.btn-group > .btn-h, .btn-group > .btn-m, .btn-group > .btn-w, .btn-group > .btn-t,
.btn-group > .input_submit, .btn-group > .input_submit_s1,
.btn-group > .input_submit_s2, .btn-group > .input_submit_s3,
.btn-group > .btn-0:hover, .btn-group > .btn-1:hover, .btn-group > .btn-2:hover, .btn-group > .btn-3:hover,
.btn-group > .btn-h:hover, .btn-group > .btn-m:hover, .btn-group > .btn-w:hover, .btn-group > .btn-t:hover,
.btn-group > .input_submit:hover, .btn-group > .input_submit_s1:hover,
.btn-group > .input_submit_s2:hover, .btn-group > .input_submit_s3:hover {
	box-shadow: none;
}

/* El solape. Va sobre `.btn` y no sobre las clases del proyecto: el grupo puede mezclar botones de
   Bootstrap con los propios, y basta uno montado para que se vea la línea. `styles.php` se carga después
   de `bootstrap.min.css`, así que gana el empate de especificidad contra `.btn-group > .btn:not(:first-child)`. */
.btn-group > .btn + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
	margin-left: 0;
	border-left: 0;
}

.input_submit, .btn-0 { color: #ffffff!important; background: #1d3557!important; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit:hover, .btn-0:hover { color: #ffffff!important; background: rgba(29, 53, 87, 0.8)!important; border: solid #1d3557 1px; }
.input_submit_s1, .btn-1 { color: #ffffff!important; background: #1d3557!important; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_s1:hover, .btn-1:hover { color: #ffffff!important; background: rgba(29, 53, 87, 0.8)!important; border: solid #1d3557 1px; }
.input_submit_s2, .btn-2 { color: #ffffff!important; background: #1d3557!important; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_s2:hover, .btn-2:hover { color: #ffffff!important; background: rgba(29, 53, 87, 0.8)!important; border: solid #1d3557 1px; }
.input_submit_s3, .btn-3 { color: #ffffff!important; background: #1d3557!important; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_s3:hover, .btn-3:hover { color: #ffffff!important; background: rgba(29, 53, 87, 0.8)!important; border: solid #1d3557 1px; }

.input_special, .btn-t { color: #ffffff!important; background: #457b9d!important; border: solid rgba(69, 123, 157, 0.8) 1px; }
.input_special:hover, .btn-t:hover { color: #ffffff!important; background: rgba(69, 123, 157, 0.8)!important; border: solid #457b9d 1px; }

.input_special_active, .btn-w { color: #000000!important; background: #029c7d!important; border: solid rgba(2, 156, 125, 0.8) 1px; }
.input_special_active:hover, .btn-w:hover { color: #000000!important; background: rgba(2, 156, 125, 0.8)!important; border: solid #029c7d 1px; }

.btn-h { color: #000000!important; background: #ffffff!important; border: solid rgba(255, 255, 255, 0.8) 1px; }
.btn-h:hover { color: #000000!important; background: rgba(255, 255, 255, 0.8)!important; border: solid #ffffff 1px; }

.btn-m { color: #000000!important; background: #04dcb1!important; border: solid rgba(4, 220, 177, 0.8) 1px; }
.btn-m:hover { color: #000000!important; background: rgba(4, 220, 177, 0.8)!important; border: solid #04dcb1 1px; }

.pills-0 .nav-link.active{ color: #ffffff!important; background: #1d3557!important; }
.pills-1 .nav-link.active{ color: #ffffff!important; background: #1d3557!important; }
.pills-2 .nav-link.active{ color: #ffffff!important; background: #1d3557!important; }
.pills-3 .nav-link.active{ color: #ffffff!important; background: #1d3557!important; }

.head-h, .head-m, .head-w, .head-t {
	font-family: "Fredoka One";
	font-weight: 1100;
	letter-spacing: 1px;
}

.head-h {
	color: #000000;
	text-shadow: 1px 1px 0 #ffffff,
		-1px 1px 0 #ffffff,
		1px -1px 0 #ffffff,
		-1px -1px 0 #ffffff,
		0px 1px 0 #ffffff,
		0px -1px 0 #ffffff,
		-1px 0px 0 #ffffff,
		1px 0px 0 #ffffff,
		2px 2px 1px #ffffff,
		-2px 2px 1px #ffffff,
		2px -2px 1px #ffffff,
		-2px -2px 1px #ffffff,
		0px 2px 0 #ffffff,
		0px -2px 0 #ffffff,
		-2px 0px 0 #ffffff,
		2px 0px 0 #ffffff,
		1px 2px 0 #ffffff,
		-1px 2px 0 #ffffff,
		1px -2px 0 #ffffff,
		-1px -2px 0 #ffffff,
		2px 1px 0 #ffffff,
		-2px 1px 0 #ffffff,
		2px -1px 0 #ffffff,
		-2px -1px 0 #ffffff;
}

.head-m {
	color: #000000;
	text-shadow: 1px 1px 0 #04dcb1,
		-1px 1px 0 #04dcb1,
		1px -1px 0 #04dcb1,
		-1px -1px 0 #04dcb1,
		0px 1px 0 #04dcb1,
		0px -1px 0 #04dcb1,
		-1px 0px 0 #04dcb1,
		1px 0px 0 #04dcb1,
		2px 2px 1px #04dcb1,
		-2px 2px 1px #04dcb1,
		2px -2px 1px #04dcb1,
		-2px -2px 1px #04dcb1,
		0px 2px 0 #04dcb1,
		0px -2px 0 #04dcb1,
		-2px 0px 0 #04dcb1,
		2px 0px 0 #04dcb1,
		1px 2px 0 #04dcb1,
		-1px 2px 0 #04dcb1,
		1px -2px 0 #04dcb1,
		-1px -2px 0 #04dcb1,
		2px 1px 0 #04dcb1,
		-2px 1px 0 #04dcb1,
		2px -1px 0 #04dcb1,
		-2px -1px 0 #04dcb1;
}

.head-w {
	color: #000000;
	text-shadow: 1px 1px 0 #029c7d,
		-1px 1px 0 #029c7d,
		1px -1px 0 #029c7d,
		-1px -1px 0 #029c7d,
		0px 1px 0 #029c7d,
		0px -1px 0 #029c7d,
		-1px 0px 0 #029c7d,
		1px 0px 0 #029c7d,
		2px 2px 1px #029c7d,
		-2px 2px 1px #029c7d,
		2px -2px 1px #029c7d,
		-2px -2px 1px #029c7d,
		0px 2px 0 #029c7d,
		0px -2px 0 #029c7d,
		-2px 0px 0 #029c7d,
		2px 0px 0 #029c7d,
		1px 2px 0 #029c7d,
		-1px 2px 0 #029c7d,
		1px -2px 0 #029c7d,
		-1px -2px 0 #029c7d,
		2px 1px 0 #029c7d,
		-2px 1px 0 #029c7d,
		2px -1px 0 #029c7d,
		-2px -1px 0 #029c7d;
}

.head-t {
	color: #ffffff;
	text-shadow: 1px 1px 0 #457b9d,
		-1px 1px 0 #457b9d,
		1px -1px 0 #457b9d,
		-1px -1px 0 #457b9d,
		0px 1px 0 #457b9d,
		0px -1px 0 #457b9d,
		-1px 0px 0 #457b9d,
		1px 0px 0 #457b9d,
		2px 2px 1px #457b9d,
		-2px 2px 1px #457b9d,
		2px -2px 1px #457b9d,
		-2px -2px 1px #457b9d,
		0px 2px 0 #457b9d,
		0px -2px 0 #457b9d,
		-2px 0px 0 #457b9d,
		2px 0px 0 #457b9d,
		1px 2px 0 #457b9d,
		-1px 2px 0 #457b9d,
		1px -2px 0 #457b9d,
		-1px -2px 0 #457b9d,
		2px 1px 0 #457b9d,
		-2px 1px 0 #457b9d,
		2px -1px 0 #457b9d,
		-2px -1px 0 #457b9d;
}

.grupo_box,
.sel_grupo_box {
	border-radius: 4px;
	padding: 1px 4px;
	white-space: nowrap;
	display: inline;
	cursor: pointer;
}

.grupo_box { color: #000000; background: url('images/gradient.png') repeat-x scroll left 50% #04dcb1; }
.sel_grupo_box { color: #ffffff; background: url('images/gradient.png') repeat-x scroll left 50% #457b9d; }

.split_header_div {
	padding: 3px;
	margin: 3px 0px 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	color: #ffffff;
	background-color: #457b9d;
	border: 1px solid #ced4da;
}

.split_body_div {
	padding: 3px;
	margin: 0px 0px 3px;
	border: 2px solid #457b9d;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

/*****************************************
 * Nuevos Botones para SiReTT / Imagenes *
 *****************************************/

.input_submit_image_0,
.input_submit_image_1,
.input_submit_image_2,
.input_submit_image_3 {
	cursor: pointer;
	border-radius: 4px;
	padding: 2px;
	margin-top: 1px;
	margin-bottom: 1px;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,0.16), 0 2px 6px 0 rgba(0,0,0,0.12);
	vertical-align: baseline;
	box-sizing: content-box;
}

.input_submit_image_0:hover,
.input_submit_image_1:hover,
.input_submit_image_2:hover,
.input_submit_image_3:hover {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.input_submit_image_0 { color: #ffffff; background: #1d3557; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_image_0:hover { background: rgba(29, 53, 87, 0.8); border: solid #1d3557 1px; }
.input_submit_image_1 { color: #ffffff; background: #1d3557; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_image_1:hover { background: rgba(29, 53, 87, 0.8); border: solid #1d3557 1px; }
.input_submit_image_2 { color: #ffffff; background: #1d3557; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_image_2:hover { background: rgba(29, 53, 87, 0.8); border: solid #1d3557 1px; }
.input_submit_image_3 { color: #ffffff; background: #1d3557; border: solid rgba(29, 53, 87, 0.8) 1px; }
.input_submit_image_3:hover { background: rgba(29, 53, 87, 0.8); border: solid #1d3557 1px; }

/*****************************************
 * RECUADROS                             *
 *****************************************/

.shop_div, .ajuste_div, .compra_div, .orden_div {
	padding: 4px;
	margin: 3px;
	border-radius: 4px;
	background-color: #fff;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
	line-height: 1.4;
}

.shop_div, .ajuste_div, .compra_div, .orden_div { color: #ffffff; background-color: rgba(69, 123, 157, 1.0); }

.shop_box, .ajuste_box, .compra_box, .orden_box {
	padding: 2px 4px;
	white-space: nowrap;
	border-radius: 4px;
	display: inline;
	cursor: pointer;
}

.shop_box {
	color: blue;
	background-color: #77d5f7;
}


.ajuste_box {
	color: red;
	background-color: #FFDD28;
}


.compra_box {
	color: green;
	background-color: #acdd4a;
}


.orden_box {
	color: orange;
	background-color: #FFFF66;
}

/*****************************************
 * Diseños para UP / DOWN*
 *****************************************/

.input_add {
	cursor: pointer;
	background: #006f00;
	background-image: -webkit-linear-gradient(top, #006f00, #00ab00);
	background-image: -moz-linear-gradient(top, #006f00, #00ab00);
	background-image: -ms-linear-gradient(top, #006f00, #00ab00);
	background-image: -o-linear-gradient(top, #006f00, #00ab00);
	background-image: linear-gradient(to bottom, #006f00, #00ab00);
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	text-shadow: 1px 1px 3px #666666;
	text-decoration: none;
	-webkit-box-shadow: 0px 0px 6px #666666;
	-moz-box-shadow: 0px 0px 6px #666666;
	box-shadow: 0px 0px 6px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
	padding: 3px 5px 3px 5px;
	margin-top: 2px;
	border: solid #004b00 1px;
}

.input_add:hover {
	background: #00ab00;
	background-image: -webkit-linear-gradient(top, #00ab00, #00e700);
	background-image: -moz-linear-gradient(top, #00ab00, #00e700);
	background-image: -ms-linear-gradient(top, #00ab00, #00e700);
	background-image: -o-linear-gradient(top, #00ab00, #00e700);
	background-image: linear-gradient(to bottom, #00ab00, #00e700);
}

.input_sub {
	cursor: pointer;
	background: #930025;
	background-image: -webkit-linear-gradient(top, #930025, #ad566b);
	background-image: -moz-linear-gradient(top, #930025, #ad566b);
	background-image: -ms-linear-gradient(top, #930025, #ad566b);
	background-image: -o-linear-gradient(top, #930025, #ad566b);
	background-image: linear-gradient(to bottom, #930025, #ad566b);
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	text-shadow: 1px 1px 3px #666666;
	text-decoration: none;
	-webkit-box-shadow: 0px 0px 6px #666666;
	-moz-box-shadow: 0px 0px 6px #666666;
	box-shadow: 0px 0px 6px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size: 12px;
	line-height: 1;
	padding: 3px 5px 3px 5px;
	margin-bottom: 2px;
	border: solid #5d0019 1px;
}

.input_sub:hover {
	background: #ad566b;
	background-image: -webkit-linear-gradient(top, #ad566b, #bb8895);
	background-image: -moz-linear-gradient(top, #ad566b, #bb8895);
	background-image: -ms-linear-gradient(top, #ad566b, #bb8895);
	background-image: -o-linear-gradient(top, #ad566b, #bb8895);
	background-image: linear-gradient(to bottom, #ad566b, #bb8895);
}

/*****************************************
 * Experimentos                          *
 *****************************************/
.hide_images img { opacity: 0.8; }
.hide_images button { opacity: 0.8; }
.hide_images tr:hover img { opacity: 1; }
.hide_images tr:hover button { opacity: 1; }

/*****************************************
 * Extras para jquery UI                 *
 *****************************************/

li.ui-menu-item {
	font-size: 11px !important;
}

.ui-autocomplete {
	max-height: 200px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.ui-autocomplete-loading {
	background: url('css/jquery/images/ui-anim_basic_16x16.gif') no-repeat right center;
}

.ui-autocomplete-category {
	color: orange;
	font-weight: bold;
	padding: .2em .3em;
	margin: .8em 0 .2em;
	line-height: 1.3;
}

/*****************************************
 * Select Multiple Styles
 *****************************************/

.ms-options-wrap,
.ms-options-wrap * {
	box-sizing: border-box;
	border-radius: 5px;
}

.ms-options-wrap > button:focus,
.ms-options-wrap > button {
	position: relative;
	width: 100%;
	text-align: left;
	border: 1px solid #aaa;
	background-color: #fff;
	padding: 3px 20px 3px 3px;
	margin-top: 1px;
	font-size: 11px;
	color: #aaa;
	outline: none;
	white-space: nowrap;
}

.ms-options-wrap > button[disabled] {
	background-color: #e5e9ed;
	color: #808080;
	opacity: 0.6;
}

.ms-options-wrap > button:after {
	content: ' ';
	height: 0;
	position: absolute;
	top: 50%;
	right: 5px;
	width: 0;
	border: 6px solid rgba(0, 0, 0, 0);
	border-top-color: #999;
	margin-top: -3px;
}

.ms-options-wrap > .ms-options {
	position: absolute;
	left: 0;
	width: 100%;
	margin-top: 1px;
	margin-bottom: 20px;
	background: white;
	z-index: 200; /* Capa Top de módulo: sobre fixed-top-* (100/101) — el dropdown debe salir del navbar */
	border: 1px solid #aaa;
	overflow: auto;
	visibility: hidden;
}

.ms-options-wrap > .ms-options.ms-active {
	visibility: visible
}

.ms-options-wrap > .ms-options > .ms-search input {
	width: 100%;
	padding: 4px 5px;
	border: none;
	border-bottom: 1px groove;
	outline: none;
}

.ms-options-wrap > .ms-options .ms-selectall {
	display: inline-block;
	font-size: 11px;
	text-transform: lowercase;
	text-decoration: none;
}
.ms-options-wrap > .ms-options .ms-selectall:hover {
	text-decoration: underline;
}

.ms-options-wrap > .ms-options > .ms-selectall.global {
	margin: 4px 5px;
}

.ms-options-wrap > .ms-options > ul,
.ms-options-wrap > .ms-options > ul > li.optgroup ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.ms-options-wrap > .ms-options > ul li.ms-hidden {
	display: none;
}

.ms-options-wrap > .ms-options > ul > li.optgroup {
	padding: 5px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
	border-top: 1px solid #aaa;
}

.ms-options-wrap > .ms-options > ul > li.optgroup .label {
	display: block;
	padding: 5px 0 0 0;
	font-weight: bold;
}

.ms-options-wrap > .ms-options > ul label {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 2px;
	margin: 1px 0;
	border: 1px dotted transparent;
}

.ms-options-wrap > .ms-options > ul label.focused,
.ms-options-wrap > .ms-options > ul label:hover {
	background-color: #efefef;
	border-color: #999;
}

.ms-options-wrap > .ms-options > ul li.selected label {
	background-color: #efefef;
	border-color: transparent;
}

.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
	margin: 0 5px 0 0;
	position: absolute;
	left: 4px;
	top: 7px;
}

.ms-options-wrap > .ms-options.hide-checkbox > ul input[type="checkbox"] {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.message_box {
	background-color: #DDDDDD;
	padding: 5px;
	color: #3E4934;
	line-height: 150%;
}

.message_box_title {
	font-size: 11px;
	text-align: left;
	vertical-align: middle;
	padding: 2px;
	background-color: #029c7d;
	color: #000000;
}

.message_box_left {
	background-color: #029c7d;
	color: #000000;
	padding: 2px;
	line-height: 150%;
	width: 24px;
	vertical-align: top;
	text-align: center;
}

.searcher_box {
	background-color: #F1F4F7;
	padding: 3px;
	color: #3E4934;
	line-height: 150%;
}

.b_gold {
	color: gold;
	font-weight: bold;
}

.header_logo {
	max-height: 50px;
	width: auto;
}

.main_banner {
	max-width: 100%;
	height: auto;
}

.main_header {
	text-align: center;
	vertical-align: top;
	background-color: #ffffff;
}

.list_begin {
	border-bottom: 1px solid #04dcb1;;
	height: 4px;
}

.list_footer {
	border-top: 1px solid #04dcb1;
	height: 4px;
}

.table_1st {
	font-size: 13px;
	color: #000000;
	background: #029c7d;
	padding: 4px;
}

.desc_text { font-size: 9px; margin-left: 4px; display: block; }
.desc_text_div { font-size: 9px; margin-left: 4px; display: block; }
.desc_text_white { font-size: 9px; display: block; }
.desc_text_2nd { font-size: 11px; display: block; }

.cat_producto {
	font-size: 17px;
}

.fam_grupo_box {
	font-family: Impact, Charcoal, sans-serif;
	font-size: 18px;
	color: #ffffff;
	background: url('images/gradient.png') repeat-x scroll left 50% #457b9d;
	border-radius: 4px;
	padding: 2px 5px;
	white-space: nowrap;
}

/* Custom JqueryUI mods */
.ui-widget-header{border:1px solid #ced4da;background:#029c7d;color:#000000;font-weight:bold}
.ui-widget-header a{color:#000000}

.ui-widget{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:11px}
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:11px}
.ui-accordion .ui-accordion-content{padding:5px 5px;border-top:0;overflow:auto}
.ui-tabs .ui-tabs-panel{display:block;border-width:0;padding:5px 5px;background:none}
.ui-button{padding:0px 6px 0px 3px;display:inline-block;position:relative;line-height:normal;margin-left:0px;margin-right:.1em;cursor:pointer;vertical-align:top;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:visible}
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active{border:1px solid #ced4da;background:#029c7d;font-weight:normal;color:#000000;}
.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited,a.ui-button,a:link.ui-button,a:visited.ui-button,.ui-button{color:#000000;text-decoration:none;}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus{border:1px solid #ced4da;background:#457b9d;font-weight:normal;color:#ffffff;}
.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus{color:#ffffff;text-decoration:none}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover{border:1px solid #ced4da;background:#457b9d;font-weight:normal;color:#ffffff;}
.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#ffffff;text-decoration:none}

.select2-results{display:block;font-size:11px;line-height:1.0;}

.h7 { font-size: 0.75rem; }

/*****************************************
 * ESTRUCTURAS BASE DE LA PAGINA
 *****************************************/

.fixed-top-1 {
	z-index: 101; /* Top de módulo: navbar principal — nada del main_div debe pasar por encima */
	background-color: #ffffff!important;
	color: #000000!important;
}

.fixed-top-1 .navbar-toggler {
	color: #000000!important;
	border-color: rgba(0, 0, 0, 0.1);
}

.fixed-top-1 a {
	color: #000000!important;
	font-weight: 400;
}

.fixed-top-2 {
	margin-top: 73px;
	z-index: 100; /* Top de módulo: banner secundario — bajo fixed-top-1 (101), sobre el main_div */
	background-color: #04dcb1!important;
	color: #000000!important;
}

.fixed-top-2 .navbar-toggler {
	color: #000000!important;
	border-color: rgba(0, 0, 0, 0.1);
}

.fixed-top-2 .nav-item > a {
	font-size: 14px!important;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.7);
}

.fixed-top-2 .nav-item > a:hover {
	color: rgba(0, 0, 0, 1.0);
}

.fixed-top-2 .nav-item > .dropdown-menu a {
	padding: .3rem .5rem;
	font-size: 1rem;
	font-weight: 400;
}

.page-footer-1 {
	background-color: #ffffff!important;
	color: #000000!important;
}

.page-footer-1 h1, .page-footer-1 h2, .page-footer-1 h3, .page-footer-1 h4, .page-footer-1 h5, .page-footer-1 h6, .page-footer-1 #SiReTT_copyright {
	color: #000000!important;
}

.page-footer-c {
	color: rgba(0, 0, 0, 0.7);
}

.nav_icon { display: inline-block; width: 16px; }

.body_data {
	margin-top: 118px;
	position: relative;
	width: 100%;
	overflow: auto;
}

.body_data .input-group-sm > .input-group-append > .input-group-text {
	font-size: 11px;
}

#main_div > .container {
	font-size: 1rem;
}

/* FIX para MDB */
table td { font-size: inherit; font-weight: inherit; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-weight: 400; }
.btn { text-transform: none; margin: inherit; border-radius: .25rem; padding: .375rem .75rem; font-size: 1rem; }
.btn.btn-sm { padding: .375rem .75rem; font-size: .8rem; }
.btn-group-lg > .btn, .btn-lg, .btn.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; }

/* Botón cuadrado compacto para acciones por fila (íconos solamente) en tablas de edición.
   Uso: <button class="btn btn-2 btn-icon-sm" title="..."><i class="fa-solid fa-barcode"></i></button>
   El margen vertical ensancha ligeramente la fila para dar aire. Combinar con btn-0..btn-3 para color. */
.btn.btn-icon-sm { width: 26px; height: 26px; padding: 0; margin-top: .25rem; margin-bottom: .25rem; display: inline-flex; align-items: center; justify-content: center; }
.navbar-nav .dropdown-menu { position: static!important; float: none; }
.roboto { font-family: Roboto,sans-serif; }

/* Corrección para quitar el FIXED en Top a los navbar en celulares de poca resolución */
@media (max-width: 991px), (max-height: 768px) {
	#header_data, #main_menu {
		position: relative;
	}
	.fixed-top-2 {
		margin-top: 0;
	}
	.body_data {
		margin-top: 0;
	}
}

@media (max-width: 991px) {
	.fixed-top-2 .nav-item > .dropdown-menu-right {
		right: auto;
		left: 0;
	}
	.fixed-top-2 .nav-item > a {
		font-size: 1.25rem!important;
	}
}

@media (min-width: 992px) {
	.fixed-top-2 .nav-link {
		padding-right: 5px!important;
		padding-left: 5px!important;
	}
	.navbar-nav .dropdown-menu {
		position: absolute!important;
	}
}

dl dd { min-height: 17px; }

/*****************************************
 * FONDOS CONFIGURADOS
 *****************************************/

.bg-hnf {
	background-color: #ffffff;
	color: #000000;
}

.bg-mmenu {
	background-color: #04dcb1;
	color: #000000;
}

.bg-window {
	background-color: #029c7d;
	color: #000000;
}

.bg-table {
	background-color: #457b9d;
	color: #ffffff;
}

.bg-0 { color: #ffffff!important; background: #1d3557!important; }
.bg-1 { color: #ffffff!important; background: #1d3557!important; }
.bg-2 { color: #ffffff!important; background: #1d3557!important; }
.bg-3 { color: #ffffff!important; background: #1d3557!important; }

.pagination.pg-hnf .page-item.active .page-link { background-color: #ffffff; color: #000000; }
.pagination.pg-hnf .page-item.active .page-link:hover { background-color: #ffffff; color: #000000; }
.pagination.pg-mmenu .page-item.active .page-link { background-color: #04dcb1; color: #000000; }
.pagination.pg-mmenu .page-item.active .page-link:hover { background-color: #04dcb1; color: #000000; }
.pagination.pg-window .page-item.active .page-link { background-color: #029c7d; color: #000000; }
.pagination.pg-window .page-item.active .page-link:hover { background-color: #029c7d; color: #000000; }
.pagination.pg-table .page-item.active .page-link { background-color: #457b9d; color: #ffffff; }
.pagination.pg-table .page-item.active .page-link:hover { background-color: #457b9d; color: #ffffff; }

/*****************************************
 * SIDENAV
 *****************************************/

.navOverlay {
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 6000; /* Top global SiReTT: por encima del chat, debajo de los drawers */
}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 6001; /* Top global SiReTT: sobre su propio overlay */
	top: 0;
	left: 0;
	background-color: #FFF;
	overflow: hidden;
	transition: 0.4s ease-in-out;
	box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

.sidenav-header {
	height: 60px;
	color: #fff;
}

.sidenav-body {
	overflow-x: hidden;
	overflow-y: auto;
	height: calc(100% - 60px);
}

.sidenav .list-group-item {
	transition: all 0.2s;
	font-size: 14px;
}

.sidenav .list-group-item:hover {
	background-color: #f8f9fa;
	padding-left: 30px!important;
}

.sidenav .opacity-50 {
	opacity: 0.5;
}

/*****************************************
 * EXPLORAR PANEL
 *****************************************/

.itemex-panel {
	border: 1px solid #e4edf5;
	border-radius: 0.75rem;
	background: #fff;
	overflow: hidden;
}

.itemex-panel-col-normal {
	width: 315px;
	min-width: 315px;
	max-width: 315px;
}

.itemex-normal-row {
	flex-wrap: wrap;
}

.itemex-results-col-normal {
	min-width: 0;
}

.itemex-share-row {
	white-space: nowrap;
}

.itemex-share-row .input_text_largest {
	max-width: 100%;
}

@media (min-width: 992px) {
	.itemex-normal-row {
		flex-wrap: nowrap;
	}
}

.itemex-panel .sidenav-header {
	height: auto;
	min-height: 60px;
}

.itemex-panel-body {
	overflow: visible;
	max-height: none;
}

.itemex-filter-link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	color: #334a61;
	transition: all 0.2s;
}

.itemex-filter-link:hover {
	background-color: #f8f9fa;
	padding-left: 30px !important;
	text-decoration: none;
	color: #1c3852;
}

.itemex-filter-link.is-active {
	background: #eef6ff;
	color: #0d4f67;
	font-weight: 700;
}

.itemex-filter-label {
	flex: 1 1 auto;
	min-width: 0;
}

.itemex-filter-count {
	font-size: 11px;
	opacity: 0.7;
	white-space: nowrap;
}

.itemex-filter-family {
	padding-left: var(--ix-family-pad, 20px) !important;
}

.itemex-filter-family:hover {
	padding-left: calc(var(--ix-family-pad, 20px) + 10px) !important;
}

.itemex-rate-link {
	gap: 0.8rem;
}

.itemex-rate-stars {
	min-width: 94px;
	font-size: 11px;
	white-space: nowrap;
	color: #f5b91d;
}

.itemex-rate-stars .grey-text {
	color: #d5dde6 !important;
}

.itemex-color-grid {
	padding: 0.65rem 0.9rem 0.75rem;
}

.itemex-color-icon {
	transition: transform 0.15s;
}

.itemex-color-icon:hover {
	transform: translateY(-1px);
}

.itemex-scroll-200 {
	max-height: 200px;
	overflow: auto;
}

.itemex-scroll-400 {
	max-height: 400px;
	overflow: auto;
}

/*****************************************
 * EXPLORAR PLUS
 *****************************************/

.itemex-plus-wrap {
	padding-top: 0.2rem;
}

.itemex-plus-header {
	border: 1px solid #e3edf6;
	border-radius: 0.9rem;
	padding: 0.95rem 1rem;
	background: linear-gradient(145deg, var(--cartv2-head-bg-soft) 0%, rgba(255,255,255,0.96) 68%);
	box-shadow: 0 8px 24px rgba(25,47,69,0.08);
}

.itemex-plus-breadcrumb {
	background: transparent;
	padding: 0;
}

.itemex-plus-breadcrumb .breadcrumb-item,
.itemex-plus-breadcrumb .breadcrumb-item a {
	font-size: 11px;
	color: var(--cartv2-head-tx-strong);
	opacity: 0.9;
}

.itemex-plus-breadcrumb .breadcrumb-item.active {
	color: var(--cartv2-head-tx-strong);
	font-weight: 600;
	opacity: 1;
}

.itemex-plus-title-main {
	font-weight: 700;
	color: var(--cartv2-head-tx-strong);
}

.itemex-plus-subtitle {
	font-size: 12px;
	color: var(--cartv2-head-tx-strong);
	opacity: 0.85;
}

.itemex-plus-go-cart {
	background: linear-gradient(135deg, var(--cartv2-head-bg-dark) 0%, var(--cartv2-head-bg) 100%);
	color: var(--cartv2-head-tx) !important;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	padding: 0.45rem 0.95rem;
	box-shadow: 0 8px 18px var(--cartv2-head-tx-soft);
}

.itemex-plus-go-cart:hover {
	background: linear-gradient(135deg, var(--cartv2-head-bg-darker) 0%, var(--cartv2-head-bg-dark) 100%);
}

.itemex-plus-banner {
	width: 100%;
	max-height: 190px;
	object-fit: cover;
	border-radius: 0.7rem;
	border: 1px solid #e6eef7;
}

.itemex-plus-toolbar {
	border: 1px solid #e5edf6;
	border-radius: 0.75rem;
	background: #f8fbff;
	padding: 0.55rem 0.85rem;
}

.itemex-plus-results {
	color: #23384c;
	font-size: 14px;
}

.itemex-plus-pagehint {
	color: #5f7388;
	font-size: 12px;
}

.itemex-plus-empty {
	border-radius: 0.8rem;
}

.itemex-plus-card {
	border: 1px solid #dfe8f2;
	border-radius: 0.9rem;
	background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
	box-shadow: 0 10px 22px rgba(22,39,56,0.08);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.itemex-plus-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(22,39,56,0.14);
}

.itemex-plus-media {
	position: relative;
	display: block;
	padding-top: 72%;
	background: radial-gradient(circle at 18% 10%, #f4f9ff 0%, #eef3f8 42%, #e3ebf4 100%);
	overflow: hidden;
	cursor: pointer;
}

.itemex-plus-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	transition: transform 0.3s ease;
}

.itemex-plus-card:hover .itemex-plus-media img {
	transform: scale(1.04);
}

.itemex-plus-badges {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	right: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	z-index: 2;
}

.itemex-plus-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 0.15rem 0.5rem;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
}

.itemex-plus-badge-brand {
	background: #edf3fa;
	color: #3e5469;
	border: 1px solid #dde7f2;
}

.itemex-plus-badge-new {
	background: #d4f5d8;
	color: #1d6b30;
	border: 1px solid #b8e8c0;
}

.itemex-plus-badge-stock {
	background: #ffe6e6;
	color: #a42f2f;
	border: 1px solid #ffd0d0;
}

.itemex-plus-body {
	padding: 0.82rem 0.9rem 0.88rem;
	min-height: 240px;
}

.itemex-plus-code {
	font-size: 10px;
	letter-spacing: 0.03em;
	color: #6e8194;
	margin-bottom: 0.24rem;
}

.itemex-plus-title {
	font-size: 14px;
	line-height: 1.35;
	font-weight: 700;
	color: #1f354a;
	margin-bottom: 0.36rem;
	min-height: 2.85rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.itemex-plus-title.itemex-plus-title-3l {
	min-height: 5.15rem;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.itemex-plus-rating {
	font-size: 11px;
	margin-bottom: 0.44rem;
	color: #f5ba22;
}

.itemex-plus-rating .grey-text {
	color: #cfdae5 !important;
}

.itemex-plus-price-wrap {
	margin-bottom: 0.58rem;
}

.itemex-plus-price-main {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	color: #1a8b4d;
}

.itemex-plus-price-main-muted {
	font-size: 13px;
	font-weight: 600;
	color: #475e73;
}

.itemex-plus-price-tax {
	font-size: 11px;
	color: #6d8195;
	margin-left: 0.2rem;
}

.itemex-plus-price-old {
	font-size: 12px;
	color: #8597aa;
	text-decoration: line-through;
}

.itemex-plus-price-discount {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #cb6f11;
}

.itemex-plus-price-note {
	display: block;
	font-size: 10px;
	color: #6f8498;
}

.itemex-plus-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.itemex-plus-actions-split {
	flex-direction: column;
	align-items: stretch;
}

.itemex-plus-actions-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.itemex-plus-rating-inline {
	margin-bottom: 0;
	white-space: nowrap;
}

.itemex-plus-incart {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 600;
	color: #2a6f92;
	background: #e6f4ff;
	border: 1px solid #d0eaff;
	border-radius: 999px;
	padding: 0.2rem 0.5rem;
	white-space: nowrap;
}

.itemex-plus-btn-cart {
	background: var(--cartv2-head-bg);
	color: var(--cartv2-head-tx) !important;
	border: 0;
	border-radius: 999px;
	padding: 0.28rem 0.7rem;
	font-size: 12px;
	font-weight: 700;
}

.itemex-plus-btn-cart:hover {
	background: var(--cartv2-head-bg-dark);
}

.itemex-plus-pagination nav,
.itemex-plus-pagination .pagination {
	margin-bottom: 0;
}

@media (max-width: 1199.98px) {
	.itemex-plus-title {
		min-height: 2.65rem;
	}
}

@media (max-width: 767.98px) {
	.itemex-plus-header {
		padding: 0.75rem 0.8rem;
	}
	.itemex-plus-go-cart {
		width: 100%;
	}
	.itemex-plus-body {
		min-height: 220px;
	}
}

/*****************************************
 * ITEM SHOP PLUS
 *****************************************/

.cartv2-shell .cartv2-card.cartv2-shop-card {
	max-width: 1200px;
}

.itemshop-plus-header {
	border: 1px solid #e3edf6;
	border-radius: 0.9rem;
	padding: 0.95rem 1rem;
	background: linear-gradient(145deg, var(--cartv2-head-bg-soft) 0%, rgba(255,255,255,0.96) 68%);
	box-shadow: 0 8px 24px rgba(25,47,69,0.08);
}

.itemshop-plus-breadcrumb {
	background: transparent;
	padding: 0;
}

.itemshop-plus-breadcrumb .breadcrumb-item,
.itemshop-plus-breadcrumb .breadcrumb-item a {
	font-size: 11px;
	color: var(--cartv2-head-tx-strong);
	opacity: 0.9;
}

.itemshop-plus-breadcrumb .breadcrumb-item.active {
	color: var(--cartv2-head-tx-strong);
	font-weight: 700;
	opacity: 1;
}

.itemshop-plus-title-main {
	font-weight: 700;
	color: var(--cartv2-head-tx-strong);
}

.itemshop-plus-subtitle {
	font-size: 12px;
	color: var(--cartv2-head-tx-strong);
	opacity: 0.88;
}

.itemshop-plus-back-btn {
	background: linear-gradient(135deg, var(--cartv2-head-bg-dark) 0%, var(--cartv2-head-bg) 100%);
	color: var(--cartv2-head-tx) !important;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	padding: 0.45rem 0.95rem;
	box-shadow: 0 8px 18px var(--cartv2-head-tx-soft);
}

.itemshop-plus-back-btn:hover {
	background: linear-gradient(135deg, var(--cartv2-head-bg-darker) 0%, var(--cartv2-head-bg-dark) 100%);
}

.itemshop-plus-main {
	border-radius: 1rem;
	background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
	box-shadow: 0 12px 28px rgba(20,38,56,0.08);
	border: 1px solid #e2ebf5 !important;
}

.itemshop-plus-main-image {
	width: 100%;
	border-radius: 0.85rem;
	border: 1px solid #e5edf6;
	background: radial-gradient(circle at 20% 10%, #f5f9ff 0%, #edf3f9 45%, #e6eef7 100%);
	object-fit: contain;
	padding: 0.85rem;
}

.itemshop-plus-thumbgrid {
	margin: 0 -0.2rem;
}

.itemshop-plus-thumbgrid figure {
	margin: 0;
	padding: 0.2rem;
}

.itemshop-plus-thumbgrid img {
	width: 100%;
	border-radius: 0.6rem;
	border: 1px solid #e3ebf4;
	background: #fff;
}

.itemshop-plus-product-title {
	font-size: 1.4rem;
	line-height: 1.3;
	color: #1d3449;
}

.itemshop-plus-tag {
	border-radius: 999px;
	padding: 0.35rem 0.72rem;
	font-size: 11px;
	font-weight: 700;
}

.itemshop-plus-tag-brand {
	background: #ffe7ec;
	color: #8f2951;
}

.itemshop-plus-tag-group {
	background: #e8f4ff;
	color: #235173;
}

.itemshop-plus-divider {
	border-top: 1px solid #e4edf6;
}

.itemshop-plus-rating {
	font-size: 12px;
	color: #f5ba22;
}

.itemshop-plus-rating .grey-text {
	color: #ced9e4 !important;
}

.itemshop-plus-price-panel {
	border: 1px solid #e2ebf5;
	border-radius: 0.85rem;
	background: #fbfdff;
	padding: 0.8rem 0.9rem;
}

.itemshop-plus-price-panel h4 {
	color: #1a8b4d;
}

.itemshop-plus-field-title {
	font-size: 13px;
	font-weight: 700;
	color: #2a4359;
}

.itemshop-plus-select {
	border-radius: 0.7rem;
	border-color: #dfe8f2;
}

.itemshop-plus-color-chip {
	background: #fff;
	border-color: #dce6f1 !important;
	transition: transform 0.15s, box-shadow 0.15s;
}

.itemshop-plus-color-chip:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 12px rgba(30,51,72,0.12) !important;
}

.itemshop-plus-buybox {
	background: linear-gradient(155deg, rgba(255,255,255,0.92) 0%, rgba(244,249,255,0.94) 100%);
	border: 1px solid #dce7f3;
	box-shadow: 0 8px 18px rgba(28,48,68,0.1);
}

.itemshop-plus-qty-input {
	text-align: right;
}

.itemshop-plus-whatsapp h4 {
	font-size: 1.3rem;
}

.itemshop-plus-stock-footer {
	border-top: 1px solid #e2ebf4;
	background: #f7fbff;
}

.itemshop-plus-sections {
	margin-top: 0.5rem;
}

.itemshop-plus-sections > h4.h4-responsive {
	font-size: 1.15rem;
	font-weight: 700;
	color: #1f384f;
	margin-bottom: 0.55rem !important;
}

.itemshop-plus-sections > hr {
	margin-top: 0;
	border-top: 1px solid #e2ebf4;
}

.itemshop-plus-sections > dl.row {
	background: #fff;
	border: 1px solid #e1ebf5;
	border-radius: 0.95rem;
	padding: 0.9rem 0.6rem;
}

.itemshop-plus-sections > dl.row dt {
	color: #35516a;
	font-weight: 700;
}

.itemshop-plus-sections > dl.row dd {
	color: #556f86;
}

.itemshop-plus-sections .carousel.slide {
	background: #fff;
	border-color: #e1ebf5 !important;
	box-shadow: 0 10px 22px rgba(24,41,59,0.08);
	overflow: hidden;
}

.itemshop-plus-rel-header {
	font-size: 1rem;
	font-weight: 700;
	color: #1f3a50;
	background: linear-gradient(135deg, #f4f8fd 0%, #eef4fb 100%);
	border-bottom: 1px solid #e1ebf4;
	padding: 0.7rem 1rem;
}

.itemshop-plus-sections .carousel-item .row {
	padding: 0.75rem 0.55rem;
}

.itemshop-plus-sections .itemshop-rel-card {
	box-shadow: 0 10px 22px rgba(22,39,56,0.1);
}

.itemshop-plus-sections .itemshop-rel-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(22,39,56,0.16);
}

.itemshop-plus-sections .itemshop-rel-card .itemex-plus-media {
	padding-top: 68%;
}

.itemshop-plus-sections .itemshop-rel-card .itemex-plus-body {
	min-height: 185px;
	padding: 0.72rem 0.8rem 0.78rem;
}

.itemshop-plus-sections .itemshop-rel-card .itemex-plus-title {
	font-size: 13px;
	min-height: 2.45rem;
	margin-bottom: 0.34rem;
}

.itemshop-plus-sections .itemshop-rel-card .itemex-plus-code {
	font-size: 10px;
}

.itemshop-plus-sections .itemshop-rel-card .itemex-plus-rating {
	font-size: 10px;
	margin-bottom: 0.4rem;
}

.itemshop-plus-sections .itemshop-rel-card .itemex-plus-btn-cart {
	font-size: 11px;
	padding: 0.24rem 0.62rem;
}

.itemshop-plus-rel-dots {
	position: static !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 0;
	margin: 0.35rem 0 0.65rem !important;
}

.itemshop-plus-rel-dots li {
	flex: 0 0 auto;
	width: 10px !important;
	height: 10px !important;
	margin: 0 4px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-radius: 50%;
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	text-indent: -9999px;
	background: #b6c6d8;
	opacity: 1;
}

.itemshop-plus-rel-dots li.active {
	background: var(--cartv2-head-bg-dark);
}

.google-reviews-plus {
	border: 1px solid #dde8f3;
	border-radius: 0.95rem;
	background: #ffffff;
	box-shadow: 0 14px 28px rgba(23,38,55,0.08);
	overflow: hidden;
}

.google-reviews-plus-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.95rem 1.1rem;
	background: linear-gradient(120deg, var(--cartv2-head-bg-soft) 0%, #f6faff 100%);
	border-bottom: 1px solid #d9e6f2;
}

.google-reviews-plus-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1f3b52;
}

.google-reviews-plus-place {
	font-size: 0.82rem;
	color: #567188;
}

.google-reviews-plus-score {
	flex: 0 0 auto;
}

.google-reviews-plus-stars {
	font-size: 0.88rem;
	color: #f3b200;
	letter-spacing: 1px;
}

.google-reviews-plus-meta {
	font-size: 0.8rem;
	color: #4f677c;
}

.google-reviews-plus-body {
	padding: 0.95rem 0.95rem 0.75rem;
}

.google-reviews-plus-card {
	border: 1px solid #e0eaf4;
	border-radius: 0.85rem;
	background: #ffffff;
	box-shadow: 0 8px 18px rgba(24,40,58,0.08);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
}

.google-reviews-plus-card-top {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.45rem;
}

.google-reviews-plus-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(140deg, #e3ecf8 0%, #d6e5f7 100%);
	border: 1px solid #cddff2;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #31506b;
	font-weight: 700;
}

.google-reviews-plus-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.google-reviews-plus-author-name {
	font-size: 0.86rem;
	font-weight: 700;
	color: #223f55;
	line-height: 1.1;
}

.google-reviews-plus-author-name a {
	color: inherit;
	text-decoration: none;
}

.google-reviews-plus-author-name a:hover {
	text-decoration: underline;
}

.google-reviews-plus-author-time {
	font-size: 0.74rem;
	color: #678196;
}

.google-reviews-plus-card-stars {
	font-size: 0.76rem;
	color: #f3b200;
	letter-spacing: 0.8px;
	margin-bottom: 0.4rem;
}

.google-reviews-plus-card-text {
	font-size: 0.82rem;
	color: #425e73;
	line-height: 1.35;
	min-height: 4.7rem;
	margin-bottom: 0.55rem;
}

.google-reviews-plus-card-foot {
	margin-top: auto;
}

.google-reviews-plus-link {
	font-size: 0.76rem;
	font-weight: 700;
	color: #1f587d;
	text-decoration: none;
}

.google-reviews-plus-link:hover {
	color: #16435f;
	text-decoration: underline;
}

.google-reviews-plus-link-disabled {
	font-size: 0.76rem;
	color: #7891a7;
}

@media (max-width: 991.98px) {
	.itemshop-plus-main-image {
		max-height: 340px;
	}
	.google-reviews-plus-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.google-reviews-plus-score {
		text-align: left !important;
	}
}

@media (max-width: 767.98px) {
	.itemshop-plus-header {
		padding: 0.75rem 0.8rem;
	}
	.itemshop-plus-back-btn {
		width: 100%;
	}
	.itemshop-plus-main .card-body {
		padding: 0.75rem !important;
	}
	.itemshop-plus-product-title {
		font-size: 1.18rem;
	}
}

.col_HL {
	padding: 2px 4px; /* Place content 60px from the top */
}

.col_HL:hover {
	background-color: #FFFFCC;
}

.text_title_3 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 13px;
}

.text_title_3:hover {
	font-weight: 700!important;
}

.col_HT {
	font-size: 14px;
	font-weight: 500!important;
	color: #000000;
	background-color: #029c7d; /* Black*/
	padding: 4px; /* Place content 60px from the top */
	border-radius: 5px;
}

/*****************************************
 * DROPDOWN MENU
 *****************************************/

.login_icon {
	text-align: center;
	vertical-align: middle;
	background: url('images/gradient.png') repeat-x scroll left 50% #B6C7DB;
	width: 80px;
	height: 80px;
	border-radius: 5px;
}

.col_MD {
	font-size: 16px!important;
}

.social-icons a
{
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	font-size: 18px;
	margin-right: 0;
	border-radius: 100%;
	transition: all .2s linear;
	color: #fff;
	display: inline-block;
	opacity: 1;
}

.social-icons a > i {
	line-height: 34px;
}

.social-icons li.title
{
	margin-right: 15px;
	text-transform: uppercase;
	color: #96a2b2;
	font-weight: 700;
	font-size: 13px;
}

.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
	opacity: 0.7;
}

.foot_facebook { background: #3B5998; }
.foot_google { background: #dd4b39; }
.foot_whatsapp { background: #25D366; }
.foot_youtube { background: #bb0000; }
.foot_twitter { background: #55ACEE; }
.foot_linkedin { background: #007bb5; }
.foot_instagram { background: #125688; }
.foot_website { background: #333; }

/* The heart of the matter */

.btn-matrix > .btn:nth-child(3n+4) { clear: left; margin-left: 0; }
.btn-matrix > .btn:nth-child(n+4) { margin-top: -1px; }
.btn-matrix > .btn:first-child { border-bottom-left-radius: 0; }
.btn-matrix > .btn:nth-child(3) { border-top-right-radius: 4px !important; }
.btn-matrix > .btn:nth-last-child(3) { border-bottom-left-radius: 4px !important; }
.btn-matrix > .btn:last-child { border-top-right-radius: 0; }
.btn-matrix { flex-wrap: wrap; }

.form-check-input[type="checkbox"].filled-in:not(:checked) + .form-check-label:after {
	border: 2px solid #1d3557;
	background-color: #ffffff;
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	margin: 4px;
	border-radius: 0;
	transform: none;
	-webkit-transform: none;
	transition: none;
	-webkit-transition: none;
}

.form-check-input[type='checkbox'].filled-in:checked + .form-check-label:after {
	border: 2px solid #1d3557;
	background-color: #ffffff;
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	margin: 4px;
	border-radius: 0;
	transform: none;
	-webkit-transform: none;
	transition: none;
	-webkit-transition: none;
}

.form-check-input[type='checkbox'].filled-in:not(:checked) + .form-check-label:before {
	transform: none;
	transition: none;
	-webkit-transition: none;
}

.form-check-input[type='checkbox'].filled-in:checked + .form-check-label:before {
	border: none;
	background-color: #1d3557;
	width: 8px;
	height: 8px;
	top: 8px;
	left: 8px;
	margin: 0;
	border-radius: 0;
	transform: none;
	transition: none;
	-webkit-transition: none;
}

.form-check-input[type="radio"]:checked + .form-check-label:after {
	border: 2px solid #1d3557;
	background-color: #1d3557;
}

.form-check-input[type="radio"]:not(:checked) + .form-check-label:before {
	border: 2px solid #1d3557;
	background-color: #ffffff;
}

.carousel-multi-item .carousel-indicators li { background-color: #04dcb1; }
.carousel-multi-item .carousel-indicators .active { background-color: #04dcb1; }

.carousel-indicators, .carousel-caption { z-index: 2; }

.card-ecommerce {
	transition: all 0.3s ease;
	border: none;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	border-radius: 12px;
	overflow: hidden;
}

.card-ecommerce:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.card-ecommerce .view img {
	transition: transform 0.5s ease;
}

.card-ecommerce:hover .view img {
	transform: scale(1.05);
}

.card-ecommerce .card-title {
	font-size: 0.95rem;
	height: 2.8rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.4;
}

.badge-float {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 5px 10px;
	border-radius: 20px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.price-main {
	font-size: 1.25rem;
	color: #2e7d32;
	font-weight: 700;
}

.price-old {
	text-decoration: line-through;
	color: #9e9e9e;
	font-size: 0.85rem;
	margin-left: 5px;
}

.btn-cart-float {
	position: absolute;
	bottom: 15px;
	right: 15px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	transition: all 0.3s ease;
}

.btn-cart-float:hover {
	transform: scale(1.1) rotate(15deg);
}

.section-title {
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 30px;
	text-align: center;
}

.section-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: #04dcb1;
	border-radius: 2px;
}

.family-card {
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	background-color: #FFFFFF;
}

.family-card:hover {
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	transform: translateY(-5px);
}

.family-card .card-title {
	background-color: #04dcb1;
	color: #000000;
	margin: 0;
	padding: 12px 10px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.family-card:hover .card-title {
	background-color: #03B08E;
}

/*****************************************
 * ORDSTATUS SHELL
 *****************************************/

.ordstatus-shell {
	--ordstatus-primary: #0e7f82;
	--ordstatus-ink: #1f2d3d;
	--ordstatus-muted: #5b6b7a;
	--ordstatus-border: #dbe6ef;
	--ordstatus-head-bg: #029c7d;
	--ordstatus-head-bg-dark: #027A62;
	--ordstatus-head-bg-darker: #01614E;
	--ordstatus-head-bg-soft: rgba(2, 156, 125, 0.88);
	--ordstatus-head-tx: #000000;
	--ordstatus-head-tx-soft: rgba(0, 0, 0, 0.22);
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	border-radius: 1rem;
	background: linear-gradient(145deg, #f2f8fb 0%, #f8f4ea 100%);
	animation: ordstatusFadeIn 0.45s ease-out;
	text-align: left;
}
.ordstatus-shell .ordstatus-blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(6px);
	opacity: 0.28;
	z-index: 0;
	pointer-events: none;
}
.ordstatus-shell .ordstatus-blob-a {
	width: 320px;
	height: 320px;
	background: #83d0c9;
	top: -180px;
	right: -120px;
}
.ordstatus-shell .ordstatus-blob-b {
	width: 260px;
	height: 260px;
	background: #ffd58a;
	bottom: -150px;
	left: -110px;
}
.ordstatus-shell .ordstatus-card {
	position: relative;
	z-index: 1;
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 1rem;
	background: rgba(255,255,255,0.84);
	backdrop-filter: blur(8px);
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.ordstatus-shell .ordstatus-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid var(--ordstatus-border);
	border-radius: 1rem 1rem 0 0;
	background: linear-gradient(92deg, var(--ordstatus-head-bg-darker) 0%, var(--ordstatus-head-bg) 55%, var(--ordstatus-head-bg-soft) 100%);
	color: var(--ordstatus-head-tx);
}
.ordstatus-shell .ordstatus-title-wrap {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.ordstatus-shell .ordstatus-title-icon {
	display: inline-flex;
	width: 2.3rem;
	height: 2.3rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.7rem;
	background: var(--ordstatus-head-tx-soft);
	font-size: 1rem;
}
.ordstatus-shell .ordstatus-title {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.ordstatus-shell .ordstatus-subtitle {
	margin: 0;
	font-size: 0.83rem;
	opacity: 0.92;
}
.ordstatus-shell .card-body .table {
	margin-bottom: 0;
}
.ordstatus-shell .card-body .table thead th {
	border-top: 0;
	color: var(--ordstatus-muted);
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ordstatus-shell .card-body .table tbody tr {
	cursor: pointer;
	transition: background 0.15s;
}
.ordstatus-shell .card-body .table tbody tr:hover {
	background: #f0f7fb;
}
.ordstatus-shell .ordstatus-footer {
	padding: 0.65rem 1.15rem;
	border-top: 1px solid var(--ordstatus-border);
	color: var(--ordstatus-muted);
	font-size: 0.85rem;
	text-align: justify;
}

@media (max-width: 767.98px) {
	.ordstatus-shell {
		padding: 0.75rem;
	}
	.ordstatus-shell .ordstatus-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.65rem;
	}
}

@keyframes ordstatusFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/*****************************************
 * GUARDADOS PARA DESPUES
 *****************************************/

.guardados-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--cartv2-border, #eef2f7);
	transition: background 0.15s;
}
.guardados-item:last-child { border-bottom: 0; }
.guardados-item:hover { background: #f8fbfd; }
.guardados-thumb {
	width: 52px;
	height: 52px;
	border-radius: 0.5rem;
	object-fit: cover;
	border: 1px solid var(--cartv2-border, #eef2f7);
	flex-shrink: 0;
}
.guardados-info { flex: 1; min-width: 0; }
.guardados-code { font-size: 0.78rem; color: var(--cartv2-muted, #5b6b7a); font-weight: 600; }
.guardados-desc { font-size: 0.92rem; font-weight: 600; color: var(--cartv2-ink, #1f2d3d); margin: 0.1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guardados-meta { font-size: 0.8rem; color: var(--cartv2-muted, #5b6b7a); }
.guardados-stock { white-space: nowrap; text-align: center; min-width: 100px; }
.guardados-stock .badge { font-size: 0.82rem; padding: 0.35em 0.7em; }
.guardados-actions { white-space: nowrap; display: flex; gap: 0.4rem; }
.guardados-actions .btn { font-size: 0.78rem; padding: 0.25rem 0.6rem; }

@media (max-width: 767.98px) {
	.guardados-item { flex-wrap: wrap; }
	.guardados-stock { width: 100%; text-align: left; margin: 0.3rem 0; }
	.guardados-actions { width: 100%; }
}

/*****************************************
 * WISHLIST
 *****************************************/

.wish-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.7rem 0.25rem;
	border-bottom: 1px solid var(--ordstatus-border, #eef2f7);
	transition: background 0.15s;
}
.wish-item:last-child { border-bottom: 0; }
.wish-item:hover { background: #f0f7fb; }
.wish-thumb {
	width: 56px;
	height: 56px;
	border-radius: 0.5rem;
	object-fit: cover;
	border: 1px solid var(--ordstatus-border, #eef2f7);
	flex-shrink: 0;
}
.wish-info { flex: 1 1 0; min-width: 0; }
.wish-code { font-size: 0.78rem; color: var(--ordstatus-muted, #5b6b7a); font-weight: 600; }
.wish-desc {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ordstatus-ink, #1f2d3d);
	margin: 0.1rem 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.wish-meta { font-size: 0.8rem; color: var(--ordstatus-muted, #5b6b7a); display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; align-items: center; }
.wish-stock { white-space: nowrap; text-align: center; flex-shrink: 0; }
.wish-stock .badge { font-size: 0.82rem; padding: 0.35em 0.7em; }
.wish-actions { white-space: nowrap; display: flex; gap: 0.4rem; flex-shrink: 0; }
.wish-actions .btn { font-size: 0.78rem; padding: 0.25rem 0.6rem; }

@media (max-width: 991.98px) {
	.wish-info { flex-basis: calc(100% - 56px - 0.75rem); }
	.wish-stock { width: 100%; text-align: left; margin-top: 0.1rem; }
	.wish-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 480px) {
	.wish-actions .btn { flex: 1 1 auto; }
}

/*****************************************
 * PRIMITIVAS COMPARTIDAS (zx-*)
 *****************************************
 * Clases de uso general para páginas modernizadas.
 * Componer con clases específicas del módulo cuando haga falta.
 *****************************************/

/* --- Grid responsivo de tarjetas --- */
.zx-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--zx-card-min, 280px), 1fr));
	gap: var(--zx-card-gap, 0.75rem);
}

/* --- Avatar circular (texto o ícono sobre fondo de color) --- */
.zx-avatar {
	flex-shrink: 0;
	width: var(--zx-avatar-size, 40px);
	height: var(--zx-avatar-size, 40px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--zx-avatar-bg, #6366f1);
	font-size: var(--zx-avatar-fs, 0.9rem);
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(17, 24, 39, 0.1);
}
.zx-avatar-sm { --zx-avatar-size: 32px; --zx-avatar-fs: 0.8rem; }
.zx-avatar-lg { --zx-avatar-size: 48px; --zx-avatar-fs: 1rem; }

/* --- Tarjeta con borde izquierdo acentuado --- */
.zx-side-card {
	position: relative;
	display: flex;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.6rem;
	border-left: 4px solid var(--zx-accent, #6366f1);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.zx-side-card.is-vertical { flex-direction: column; gap: 0.5rem; }

/* --- Helpers de contenido interno de tarjetas --- */
.zx-card-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.zx-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	font-size: 0.78rem;
	color: #6b7280;
}
.zx-card-meta b { color: #1f2d3d; font-weight: 600; }
.zx-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-top: 1px dashed #e5e7eb;
	padding-top: 0.5rem;
	gap: 0.5rem;
}
.zx-card-stat { display: flex; flex-direction: column; }
.zx-card-stat .label { font-size: 0.7rem; color: #6b7280; text-transform: uppercase; }
.zx-card-stat .value { font-size: 1rem; font-weight: 700; color: var(--zx-accent, #0ea5e9); }
.zx-card-open { font-size: 0.8rem; color: var(--zx-accent, #0ea5e9); font-weight: 600; }
.zx-card-open i { transition: transform 0.15s ease; }
.zx-hover-lift:hover .zx-card-open i { transform: translateX(3px); }

/* --- Efecto hover con elevación (componer con tarjetas) --- */
.zx-hover-lift { cursor: pointer; }
.zx-hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
	border-color: var(--zx-accent, #0ea5e9);
}

/* --- Encabezado de panel con gradient indigo --- */
.zx-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.6rem;
	overflow: hidden;
}
.zx-panel-head {
	padding: 0.6rem 0.9rem;
	background: linear-gradient(135deg, #eef2ff, #f5f3ff);
	border-bottom: 1px solid #e5e7eb;
	font-weight: 600;
	font-size: 0.9rem;
	color: #3730a3;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.zx-panel-body { padding: 0.9rem; }

/* --- Empty state genérico --- */
.zx-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: #6b7280;
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 0.5rem;
}
.zx-empty .zx-empty-icon {
	display: block;
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: #9ca3af;
}

/* --- Tag de serie / IMEI (monospace rojo) --- */
.zx-serie-tag {
	font-family: monospace;
	font-weight: 700;
	color: #b91c1c;
	font-size: 0.92rem;
}

/* --- Encabezado de sección sobre card-grid (con contador) --- */
.zx-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.75rem 0 0.5rem 0;
	font-size: 0.82rem;
	color: #4b5563;
	font-weight: 600;
}
.zx-section-head + .zx-card-grid { margin-bottom: 0.25rem; }

/* --- Título compacto interno de tarjeta --- */
.zx-card-title {
	font-size: 0.9rem;
	color: #1f2d3d;
	font-weight: 600;
}

/* =====================================================================
   Explorador de artículos (factura_agregar-item_explorar.php)
   Lista densa con miniatura, badges y estado vacío. Se carga dentro de
   #factura_find_div del panel "Explorar" en factura_agregar.php.
   ===================================================================== */
.expl-count {
	padding: 0.35rem 0.6rem;
	font-size: 0.74rem;
	color: #64748b;
	background: #f8fafc;
	border-bottom: 1px dashed #e2e8f0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.expl-count .expl-count-hint { margin-left: auto; color: #94a3b8; font-size: 0.7rem; }
.expl-count .expl-count-hint kbd {
	background: #e2e8f0;
	color: #334155;
	font-size: 0.68rem;
	padding: 0 0.3rem;
	border-radius: 0.2rem;
	border: 1px solid #cbd5e1;
}
.expl-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.35rem;
}
.expl-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.5rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.4rem;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s, background 0.15s;
}
.expl-row:hover {
	border-color: #3b82f6;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}
.expl-row:active { transform: scale(0.998); }
.expl-row-endoc { border-color: #10b981; background: #ecfdf5; }
.expl-row-endoc:hover { border-color: #059669; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.18); }
.expl-thumb {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 0.3rem;
	object-fit: cover;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
}
.expl-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.expl-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	min-height: 1.1rem;
}
.expl-codigo {
	font-family: var(--bs-font-monospace, monospace);
	font-weight: 700;
	font-size: 0.82rem;
	color: #0f172a;
}
.expl-head .badge {
	font-weight: 500;
	padding: 0.2rem 0.4rem;
	font-size: 0.68rem;
}
.expl-head .badge i.fa-fw { font-size: 0.7rem; }
/* Código local vinculado (clickeable) junto al código de sincronización */
.expl-vinc { cursor: pointer; color: #16a34a; font-weight: 600; font-family: var(--bs-font-monospace, monospace); }
.expl-vinc:hover { text-decoration: underline; }
.expl-vinc-sep { color: #cbd5e1; }
/* Marca / Familia bajo la descripción */
.expl-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.expl-meta .badge { font-weight: 500; padding: 0.2rem 0.4rem; font-size: 0.68rem; }
.expl-meta .badge i.fa-fw { font-size: 0.7rem; }
.expl-desc {
	font-size: 0.82rem;
	color: #334155;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
	word-break: break-word;
}
.expl-stock {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	min-width: 100px;
}
.expl-stock .badge {
	font-weight: 500;
	padding: 0.28rem 0.45rem;
	font-size: 0.72rem;
}
.expl-precio {
	flex: 0 0 auto;
	min-width: 110px;
	text-align: right;
	padding-left: 0.5rem;
	border-left: 1px solid #e2e8f0;
}
/* Columna "mía" (datos locales del vínculo): mismo formato que expl-precio, sin el borde divisor,
   para que precio/divisa/cantidad queden a la misma altura que la columna del proveedor. */
.expl-mine {
	flex: 0 0 auto;
	min-width: 110px;
	text-align: right;
}
.expl-money {
	font-weight: 700;
	font-size: 0.95rem;
	color: #0f172a;
	white-space: nowrap;
}
.expl-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: #64748b;
}
.expl-empty-icon {
	font-size: 3rem;
	color: #cbd5e1;
	margin-bottom: 0.5rem;
}
.expl-empty-title { font-weight: 700; color: #334155; }

/* Variante de fila no clickeable (cuando la tarjeta tiene botones de acción propios) */
.expl-row-static { cursor: default; }
.expl-row-static:hover { border-color: #e2e8f0; box-shadow: none; }

/* Columna de acciones por tarjeta (Vincular / Crear / Ver / Desvincular) */
.expl-actions {
	flex: 0 0 auto;
	min-width: 134px;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-left: 0.5rem;
	border-left: 1px solid #e2e8f0;
}
.expl-actions .btn { white-space: nowrap; }

/* Controles de paginación */
.expl-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.5rem;
	flex-wrap: wrap;
}
.expl-pager-info { color: #64748b; font-size: 0.8rem; }

/* Galería comparativa de imágenes (locales vs remotas) para importación */
.expl-gallery { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.35rem; }
.expl-gallery-cell { width: 120px; text-align: center; }
.expl-gallery-cell img {
	width: 120px; height: 120px; object-fit: cover; display: block;
	border-radius: 0.4rem; border: 1px solid #e2e8f0; background: #f1f5f9;
}
.expl-gallery-cell .expl-gallery-meta { font-size: 0.72rem; color: #64748b; margin-top: 0.2rem; word-break: break-word; }
.expl-gallery-sep { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.3rem; font-weight: 600; color: #334155; }

/* Sin comportamiento responsive: las vistas que usan estas tarjetas (catálogo remoto del proveedor,
   exploradores de item) son de ancho fijo, por lo que las tarjetas mantienen siempre su layout horizontal. */

/* =====================================================================
   Panel de Favoritos (factura_agregar-favoritos.php)
   Lista enriquecida con captura consolidada (tipo_precio + bodega
   compartidos), miniatura, sparkline de ventas 90/60/30d, semáforo de
   stock y última compra humanizada. Se carga en #factura_int_div.
   ===================================================================== */
.fav-panel { background: #fff; border-radius: 0.4rem; overflow: hidden; }
.fav-head {
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 0.6rem 0.75rem;
	position: sticky;
	top: 0;
	z-index: 2;
}
.fav-head-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: #0f172a;
}
.fav-head-title .fav-count {
	margin-left: auto;
	color: #64748b;
	font-weight: 400;
	font-size: 0.75rem;
}
.fav-head-title .fav-count-hint { color: #f59e0b; font-weight: 600; }
.fav-head-row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}
.fav-head-group { flex: 1 1 200px; min-width: 180px; }
.fav-head-note {
	font-size: 0.72rem;
	color: #64748b;
	display: inline-flex;
	align-items: center;
}
.fav-body {
	max-height: calc(100vh - 380px);
	min-height: 240px;
	overflow-y: auto;
	padding: 0.5rem;
}
.fav-group { margin-bottom: 0.75rem; }
.fav-group-title {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.55rem;
	background: linear-gradient(90deg, #eef2ff 0%, #f8fafc 100%);
	border-radius: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #334155;
	margin-bottom: 0.25rem;
	border-left: 3px solid #6366f1;
}
.fav-group-title .fav-group-count {
	margin-left: auto;
	background: #e0e7ff;
	color: #4338ca;
	border-radius: 0.8rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
}
.fav-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.5rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.4rem;
	margin-bottom: 0.25rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.fav-row:hover {
	border-color: #3b82f6;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}
.fav-thumb {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 0.3rem;
	object-fit: cover;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
}
.fav-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.fav-item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	min-height: 1.1rem;
}
.fav-codigo {
	font-family: var(--bs-font-monospace, monospace);
	font-weight: 700;
	font-size: 0.82rem;
	color: #0f172a;
}
.fav-item-head .badge {
	font-weight: 500;
	padding: 0.2rem 0.4rem;
	font-size: 0.68rem;
}
.fav-desc {
	font-size: 0.82rem;
	color: #334155;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.25;
	word-break: break-word;
}
.fav-spark {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 0.15rem;
	height: 48px;
	min-width: 72px;
	padding: 0 0.35rem;
	border-left: 1px solid #f1f5f9;
	border-right: 1px solid #f1f5f9;
}
.fav-spark-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 18px;
	height: 100%;
	cursor: help;
}
.fav-spark-bar-track {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.fav-spark-bar {
	width: 10px;
	min-height: 1px;
	border-radius: 2px 2px 0 0;
	background: #e2e8f0;
	transition: height 0.25s ease;
}
.fav-spark-bar-30 { background: #10b981; }
.fav-spark-bar-60 { background: #3b82f6; }
.fav-spark-bar-90 { background: #94a3b8; }
.fav-spark-lbl {
	font-size: 0.58rem;
	color: #94a3b8;
	margin-top: 2px;
	line-height: 1;
}
.fav-stock {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	min-width: 110px;
}
.fav-stock .badge {
	font-weight: 500;
	padding: 0.28rem 0.45rem;
	font-size: 0.72rem;
}
.fav-last {
	font-size: 0.68rem;
	color: #64748b;
	white-space: nowrap;
}
.fav-last-recent { color: #059669; font-weight: 600; }
.fav-last-mid { color: #2563eb; }
.fav-last-old { color: #94a3b8; }
.fav-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding-left: 0.5rem;
	border-left: 1px solid #e2e8f0;
}
.fav-qty {
	width: 72px;
	text-align: right;
	font-size: 0.82rem;
	padding: 0.15rem 0.35rem;
	height: auto;
}
.fav-actions .btn { padding: 0.25rem 0.5rem; }
.fav-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: #64748b;
}
.fav-empty-icon {
	font-size: 3rem;
	color: #cbd5e1;
	margin-bottom: 0.5rem;
}
.fav-empty-title { font-weight: 700; color: #334155; }

@media (max-width: 991.98px) {
	.fav-row { flex-wrap: wrap; }
	.fav-spark { border: none; padding: 0; }
	.fav-stock { flex: 1 1 auto; flex-direction: row; align-items: center; min-width: 0; }
	.fav-actions {
		flex: 1 1 100%;
		border-left: none;
		border-top: 1px dashed #e2e8f0;
		padding-left: 0;
		padding-top: 0.3rem;
		margin-top: 0.1rem;
		justify-content: flex-end;
	}
}

/* --------------------------------------------------------------------
 * Bitácora de Pre-Venta (factura_agregar-bitacora.php)
 * -------------------------------------------------------------------- */
.bit-panel { background: #fff; border-radius: 0.4rem; overflow: hidden; }
.bit-head {
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	padding: 0.6rem 0.75rem;
}
.bit-head-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: #0f172a;
	margin-bottom: 0.2rem;
}
.bit-head-title .btn { padding: 0.2rem 0.5rem; font-size: 0.75rem; }
.bit-head-note {
	font-size: 0.72rem;
	color: #64748b;
	display: flex;
	align-items: center;
}

.bit-form-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.4rem;
	padding: 0.75rem;
	margin: 0.5rem;
}
.bit-form-row {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;
}
.bit-form-row:last-of-type { margin-bottom: 0.4rem; }
.bit-form-group { flex: 0 0 auto; min-width: 170px; }
.bit-form-group-grow { flex: 1 1 220px; min-width: 200px; }
.bit-form-group-full { flex: 1 1 100%; min-width: 0; }
.bit-form-group label { font-size: 0.72rem; font-weight: 600; }
.bit-textarea { font-size: 0.85rem; resize: vertical; min-height: 70px; }

.bit-prio-pills {
	display: flex;
	gap: 0.25rem;
	flex-wrap: nowrap;
}
.bit-prio-pill {
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #64748b;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.bit-prio-pill:hover { border-color: #cbd5e1; background: #f8fafc; }
.bit-prio-pill-active.bit-prio-pill-baja  { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.bit-prio-pill-active.bit-prio-pill-media { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.bit-prio-pill-active.bit-prio-pill-alta  { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

.bit-switch { padding-top: 0.35rem; }
.bit-switch .custom-control-label { font-size: 0.82rem; color: #334155; }

.bit-form-actions {
	display: flex;
	justify-content: flex-end;
	border-top: 1px dashed #e2e8f0;
	padding-top: 0.6rem;
	margin-top: 0.3rem;
}
.bit-form-actions .btn { font-size: 0.82rem; }

.bit-list-section {
	padding: 0.5rem;
	padding-top: 0;
}
.bit-list-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.3rem 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #334155;
}
.bit-list-head .bit-count {
	margin-left: auto;
	color: #64748b;
	font-weight: 400;
	font-size: 0.72rem;
}

.bit-list { display: flex; flex-direction: column; gap: 0.4rem; }
.bit-entry {
	display: flex;
	gap: 0.6rem;
	padding: 0.55rem 0.65rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.4rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.bit-entry:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.bit-entry-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}
.bit-entry-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.bit-entry-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}
.bit-entry-code {
	font-family: var(--bs-font-monospace, monospace);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}
.bit-entry-code-label {
	font-size: 0.72rem;
	color: #64748b;
	font-weight: 500;
}
.bit-entry-prio {
	font-size: 0.66rem;
	font-weight: 600;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bit-prio-baja  { background: #dbeafe; color: #1d4ed8; }
.bit-prio-media { background: #fef3c7; color: #b45309; }
.bit-prio-alta  { background: #fee2e2; color: #b91c1c; }
.bit-entry-bell { color: #d97706; font-size: 0.72rem; }
.bit-entry-time {
	font-size: 0.72rem;
	color: #64748b;
	white-space: nowrap;
}
.bit-entry-detail {
	font-size: 0.85rem;
	color: #1f2937;
	line-height: 1.35;
	word-break: break-word;
}
.bit-entry-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	color: #64748b;
	padding-top: 0.25rem;
	border-top: 1px dashed #f1f5f9;
	margin-top: 0.2rem;
}
.bit-entry-foot > span { display: inline-flex; align-items: center; gap: 0.2rem; }
.bit-entry-user { color: #334155; font-weight: 600; }
.bit-entry-taller { color: #475569; }
.bit-entry-ref { color: #4338ca; }
.bit-entry-exact { font-family: var(--bs-font-monospace, monospace); color: #94a3b8; }

.bit-pager {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.3rem 0.2rem;
	flex-wrap: wrap;
}
.bit-pager-info { font-size: 0.72rem; color: #64748b; }
.bit-pager-ctrls {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
}
.bit-pager-ctrls .btn { padding: 0.2rem 0.5rem; }
.bit-pager-page { font-size: 0.72rem; color: #334155; padding: 0 0.4rem; }

.bit-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: #64748b;
}
.bit-empty-icon {
	font-size: 2.8rem;
	color: #cbd5e1;
	margin-bottom: 0.4rem;
}
.bit-empty-title { font-weight: 700; color: #334155; }

@media (max-width: 767.98px) {
	.bit-form-row { gap: 0.4rem; }
	.bit-form-group, .bit-form-group-grow { flex: 1 1 100%; min-width: 0; }
	.bit-entry { flex-wrap: wrap; }
	.bit-entry-icon { flex: 0 0 30px; width: 30px; height: 30px; font-size: 0.8rem; }
}

/* ------------------------------------------------------------------
   loglist-* — estructura compartida entre visores de log
   (performance_log.php, webservice_log.php).
   Cada módulo define sus propias columnas con el sufijo correspondiente.
   ------------------------------------------------------------------ */
.loglist-section { margin-bottom: 0.9rem; }
.loglist-section-title {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #334155;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.35rem;
}
.loglist-top-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	padding: 0.1rem 0;
}
.loglist-top-row .badge { min-width: 2.2rem; }
.loglist-top-row code {
	background: #f1f5f9;
	padding: 0.1rem 0.35rem;
	border-radius: 0.25rem;
	color: #334155;
	word-break: break-all;
}
.loglist-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.loglist-filters .form-control { max-width: 240px; }
.loglist-filters .loglist-filter-text { max-width: 360px; flex: 1 1 240px; }
.loglist-count { font-size: 0.75rem; color: #64748b; }

.loglist-table-wrap { overflow-x: auto; }
.loglist-table {
	width: 100%;
	border-spacing: 0;
}
.loglist-table thead td {
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	white-space: nowrap;
}
.loglist-col-type    { width: 78px; }
.loglist-col-date    { width: 160px; }
.loglist-col-time    { width: 90px; }
.loglist-col-user    { width: 110px; }
.loglist-col-ip      { width: 130px; }
.loglist-col-met     { width: 62px; }
.loglist-col-func    { width: 190px; word-break: break-all; }
.loglist-col-actor   { width: 110px; }
.loglist-col-bid     { width: 70px; }
.loglist-col-doc     { width: 140px; word-break: break-all; }
.loglist-col-mod     { max-width: 340px; word-break: break-all; }
.loglist-col-detail  { max-width: 460px; }
.loglist-detail-q {
	display: block;
	cursor: help;
	background: #f8fafc;
	padding: 0.15rem 0.4rem;
	border-radius: 0.25rem;
	font-size: 0.78rem;
}
.loglist-detail-ctx {
	font-size: 0.72rem;
	color: #64748b;
	margin-top: 0.2rem;
}

/* =========================================================================
 * Monitor de Bodega (bodega_monitor.php)
 * Prefijo: bm-*
 * ========================================================================= */
.bm-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e5e7eb;
}
.bm-header-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #1e293b;
}
.bm-header-actions { display: flex; gap: 0.5rem; }

.bm-progress-wrap {
	position: relative;
	height: 6px;
	background: #f1f5f9;
	border-radius: 3px;
	overflow: hidden;
	margin: 0.5rem 0 1rem 0;
}
.bm-progress-bar {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0%;
	background: linear-gradient(90deg, #10b981 0%, #f59e0b 70%, #ef4444 100%);
	transition: width 0.25s linear;
}

.bm-content { min-height: 200px; }
.bm-loading { text-align: center; padding: 2rem 0; }
.bm-footer {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e5e7eb;
	text-align: center;
	font-size: 0.78rem;
	color: #64748b;
}

/* Tarjetas KPI */
.bm-kpi-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.6rem;
	margin-bottom: 1rem;
}
.bm-kpi {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.8rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.bm-kpi:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	border-color: #cbd5e1;
}
.bm-kpi-active {
	border-color: #1e293b;
	box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.15);
}
.bm-kpi-icon {
	width: 38px; height: 38px;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: #f1f5f9;
	color: #475569;
	font-size: 1.05rem;
}
.bm-kpi-body { flex: 1; min-width: 0; }
.bm-kpi-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bm-kpi-count {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: #0f172a;
}
.bm-kpi-meta {
	font-size: 0.72rem;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Colores por tipo (aplicados al ícono de la tarjeta y de la fila) */
.bm-kpi.bm-t-inmediata .bm-kpi-icon,      .bm-row.bm-t-inmediata      .bm-cell-tipo i { background: #dbeafe; color: #1d4ed8; }
.bm-kpi.bm-t-alisto .bm-kpi-icon,         .bm-row.bm-t-alisto         .bm-cell-tipo i { background: #cffafe; color: #0e7490; }
.bm-kpi.bm-t-logistica_init .bm-kpi-icon, .bm-row.bm-t-logistica_init .bm-cell-tipo i { background: #fef3c7; color: #b45309; }
.bm-kpi.bm-t-empaque .bm-kpi-icon,        .bm-row.bm-t-empaque        .bm-cell-tipo i { background: #ffedd5; color: #c2410c; }
.bm-kpi.bm-t-etiqueta .bm-kpi-icon,       .bm-row.bm-t-etiqueta       .bm-cell-tipo i { background: #f3e8ff; color: #7e22ce; }
.bm-kpi.bm-t-recoleccion .bm-kpi-icon,    .bm-row.bm-t-recoleccion    .bm-cell-tipo i { background: #fee2e2; color: #b91c1c; }
.bm-kpi.bm-kpi-total .bm-kpi-icon                                                     { background: #1e293b; color: #fff; }

/* Toolbar (filtro de bodega + alistadores disponibles) */
.bm-toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: #f8fafc;
	border-radius: 6px;
	margin-bottom: 0.75rem;
}
.bm-toolbar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.bm-toolbar-left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	flex: 0 0 auto;
}
.bm-toolbar-alistadores {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding-top: 0.35rem;
	border-top: 1px solid #e5e7eb;
}
.bm-filter-label { font-size: 0.8rem; color: #475569; font-weight: 600; }
.bm-filter-bodega {
	padding: 0.25rem 0.5rem;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 0.82rem;
	background: #fff;
	color: #0f172a;
	cursor: pointer;
}
.bm-filter-note {
	font-size: 0.72rem;
	color: #64748b;
	font-style: italic;
}
.bm-chip-user {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	background: #dcfce7;
	color: #166534;
	border-radius: 99px;
	font-size: 0.75rem;
	font-weight: 600;
}

/* Indicador de Total Pendiente dentro del toolbar (reemplaza tarjeta KPI). Clickable, actúa como filtro "todos". */
.bm-toolbar-total {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.7rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.bm-toolbar-total:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}
.bm-toolbar-total-active {
	border-color: #1e293b;
	box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.15);
}
.bm-toolbar-total-icon {
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e293b;
	color: #fff;
	border-radius: 50%;
	font-size: 0.75rem;
}
.bm-toolbar-total-body {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.1;
}
.bm-toolbar-total-label {
	font-size: 0.72rem;
	color: #475569;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bm-toolbar-total-meta {
	font-size: 0.7rem;
	color: #64748b;
	margin-top: 0.1rem;
}
.bm-toolbar-total-count {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	min-width: 1.5rem;
	text-align: right;
}

/* Listado unificado */
.bm-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.bm-row {
	display: grid;
	grid-template-columns: 160px 110px 1fr 1fr 1fr 24px;
	gap: 0.6rem;
	align-items: center;
	padding: 0.55rem 0.75rem;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #cbd5e1;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.bm-row:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	background: #f9fafb;
}
.bm-row-bm-urg-warn { border-left-color: #f59e0b; background: #fffbeb; }
.bm-row-bm-urg-crit { border-left-color: #ef4444; background: #fef2f2; }

.bm-cell { min-width: 0; overflow: hidden; }
.bm-cell-tipo {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #1e293b;
}
.bm-cell-tipo i {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 6px;
	flex-shrink: 0;
}

.bm-urg-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.6rem;
	border-radius: 99px;
	font-size: 0.78rem;
	font-weight: 700;
	white-space: nowrap;
}
.bm-urg-ok   { background: #dcfce7; color: #166534; }
.bm-urg-warn { background: #fef3c7; color: #92400e; }
.bm-urg-crit { background: #fee2e2; color: #991b1b; }

.bm-cell-ref .bm-ref-num {
	font-weight: 700;
	color: #0f172a;
	font-size: 0.86rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bm-cell-ref .bm-ref-sub {
	font-size: 0.72rem;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bm-cell-cliente .bm-cliente-nom {
	font-size: 0.84rem;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bm-modalidad, .bm-bodega-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.45rem;
	font-size: 0.7rem;
	color: #475569;
	background: #f1f5f9;
	border-radius: 4px;
	margin-right: 0.25rem;
	margin-top: 0.15rem;
}
.bm-bodega-badge { background: #ecfdf5; color: #065f46; }

.bm-cell-extra {
	font-size: 0.78rem;
	color: #475569;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bm-cell-cta {
	text-align: center;
	color: #94a3b8;
}

/* Panel de detalle (líneas a despachar) - inline bajo la fila, siempre visible */
.bm-row-detalle {
	margin-top: -0.15rem;
	margin-bottom: 0.1rem;
	padding: 0.6rem 0.8rem;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-top: none;
	border-radius: 0 0 6px 6px;
}
.bm-detalle-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.78rem;
}
.bm-detalle-table thead th {
	text-align: left;
	padding: 0.35rem 0.5rem;
	background: #e2e8f0;
	color: #1e293b;
	font-weight: 600;
	border-bottom: 1px solid #cbd5e1;
}
.bm-detalle-table tbody td {
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid #e5e7eb;
	color: #334155;
	vertical-align: top;
}
.bm-detalle-table tbody tr:last-child td { border-bottom: none; }
.bm-detalle-table tbody tr:hover { background: #fff; }
.bm-detalle-table tfoot th {
	text-align: left;
	padding: 0.35rem 0.5rem;
	background: #f1f5f9;
	color: #475569;
	font-weight: 600;
	border-top: 1px solid #cbd5e1;
	font-size: 0.76rem;
}
.bm-detalle-table .right { text-align: right; }

/* Estado vacío */
.bm-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #475569;
}
.bm-empty-icon {
	font-size: 2.5rem;
	color: #10b981;
	display: block;
	margin-bottom: 0.5rem;
}
.bm-empty-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 0.25rem;
}
.bm-empty-sub { font-size: 0.82rem; }

/* Responsive: colapso a una columna por fila en pantallas angostas */
@media (max-width: 1100px) {
	.bm-kpi-grid { grid-template-columns: repeat(3, 1fr); }
	.bm-row {
		grid-template-columns: 140px 100px 1fr 24px;
		grid-template-areas:
			"tipo urg ref cta"
			"tipo urg cliente cta"
			"tipo urg extra cta";
	}
	.bm-cell-tipo    { grid-area: tipo; }
	.bm-cell-urg     { grid-area: urg; }
	.bm-cell-ref     { grid-area: ref; }
	.bm-cell-cliente { grid-area: cliente; }
	.bm-cell-extra   { grid-area: extra; }
	.bm-cell-cta     { grid-area: cta; }
}

/* ==============================================================================================
   Select2 — theme "bootstrap4-sm"
   ----------------------------------------------------------------------------------------------
   Duplica la base del archivo css/select2-bootstrap4.min.css aplicada al selector
   .select2-container--bootstrap4, pero bajo el sufijo "-sm" y con medidas ajustadas al tamaño
   compacto de Bootstrap 4 (form-control-sm). Úsalo así al inicializar select2:

       $('#mi_select').select2({ theme: 'bootstrap4-sm', ... });

   Esto genera la clase ".select2-container--bootstrap4-sm" en el wrapper, heredando todas las
   reglas que siguen. No interfiere con los select2 que usan theme "bootstrap4".
   ============================================================================================== */
.select2-container--bootstrap4-sm .select2-selection {
	width: 100%;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .2rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input-group .select2-container--bootstrap4-sm {
	flex: 1 1 auto;
	width: 1% !important;
}
.input-group-prepend ~ .select2-container--bootstrap4-sm .select2-selection {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.input-group > .select2-container--bootstrap4-sm:not(:last-child) .select2-selection {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.select2-container--bootstrap4-sm.select2-container--focus .select2-selection {
	border-color: #80bdff;
	box-shadow: 0 0 0 .2rem rgba(0,123,255,0.25);
}
.select2-container--bootstrap4-sm.select2-container--focus.select2-container--open .select2-selection {
	border-bottom: none;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.select2-container--bootstrap4-sm.select2-container--open.select2-container--above .select2-selection {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.select2-container--bootstrap4-sm.select2-container--open.select2-container--below .select2-selection {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.select2-container--bootstrap4-sm.select2-container--disabled .select2-selection,
.select2-container--bootstrap4-sm.select2-container--disabled.select2-container--focus .select2-selection {
	cursor: not-allowed;
	background-color: #e9ecef;
	border-color: #ced4da;
	box-shadow: none;
}
.select2-container--bootstrap4-sm.select2-container--disabled .select2-search__field,
.select2-container--bootstrap4-sm.select2-container--disabled.select2-container--focus .select2-search__field {
	background-color: transparent;
}
select.is-invalid ~ .select2-container--bootstrap4-sm .select2-selection,
form.was-validated select:invalid ~ .select2-container--bootstrap4-sm .select2-selection {
	border-color: #dc3545;
}
select.is-valid ~ .select2-container--bootstrap4-sm .select2-selection,
form.was-validated select:valid ~ .select2-container--bootstrap4-sm .select2-selection {
	border-color: #28a745;
}
.select2-container--bootstrap4-sm .select2-search {
	width: 100%;
}
.select2-container--bootstrap4-sm .select2-dropdown {
	border-color: #ced4da;
	border-radius: 0;
	font-size: .875rem;
}
.select2-container--bootstrap4-sm .select2-dropdown.select2-dropdown--below {
	border-top: none;
	border-bottom-right-radius: .2rem;
	border-bottom-left-radius: .2rem;
}
.select2-container--bootstrap4-sm .select2-dropdown.select2-dropdown--above {
	border-top: 1px solid #ced4da;
	border-top-left-radius: .2rem;
	border-top-right-radius: .2rem;
}
.select2-container--bootstrap4-sm .select2-dropdown .select2-results__option[aria-selected="true"] {
	color: #212529;
	background-color: #f2f2f2;
}
.select2-container--bootstrap4-sm .select2-results__option--highlighted,
.select2-container--bootstrap4-sm .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
	color: #fff;
	background-color: #007bff;
}
.select2-container--bootstrap4-sm .select2-results__option[role="group"] {
	padding: 0;
}
.select2-container--bootstrap4-sm .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option {
	padding-left: 1em;
}
.select2-container--bootstrap4-sm .select2-results__option {
	padding: .25rem .5rem;
}
.select2-container--bootstrap4-sm .select2-results > .select2-results__options {
	max-height: 15em;
	overflow-y: auto;
}
.select2-container--bootstrap4-sm .select2-results__group {
	display: list-item;
	padding: 4px;
	color: #6c757d;
}
.select2-container--bootstrap4-sm .select2-selection__clear {
	float: right;
	width: .8em;
	height: .8em;
	padding-left: .12em;
	margin-top: .5em;
	margin-right: .25em;
	line-height: .7em;
	color: #f8f9fa;
	background-color: #c8c8c8;
	border-radius: 100%;
}
.select2-container--bootstrap4-sm .select2-selection__clear:hover {
	background-color: #afafaf;
}
/* Selection single (tamaño sm) */
.select2-container--bootstrap4-sm .select2-selection--single {
	height: calc(1.5em + .5rem + 2px) !important;
	font-size: .875rem;
}
.select2-container--bootstrap4-sm .select2-selection--single .select2-selection__placeholder {
	line-height: calc(1.5em + .5rem);
	color: #6c757d;
}
.select2-container--bootstrap4-sm .select2-selection--single .select2-selection__arrow {
	position: absolute;
	top: 50%;
	right: 3px;
	width: 20px;
}
.select2-container--bootstrap4-sm .select2-selection--single .select2-selection__arrow b {
	position: absolute;
	top: 60%;
	left: 50%;
	width: 0;
	height: 0;
	margin-top: -2px;
	margin-left: -4px;
	border-color: #343a40 transparent transparent transparent;
	border-style: solid;
	border-width: 5px 4px 0;
}
.select2-container--bootstrap4-sm .select2-selection--single .select2-selection__rendered {
	padding-left: .5rem;
	padding-right: 1.5rem;
	line-height: calc(1.5em + .5rem);
	color: #495057;
}
.select2-container--bootstrap4-sm .select2-search--dropdown .select2-search__field {
	padding: .25rem .5rem;
	border: 1px solid #ced4da;
	border-radius: .2rem;
	font-size: .875rem;
}
/* Selection multiple (tamaño sm) */
.select2-container--bootstrap4-sm .select2-selection--multiple {
	min-height: calc(1.5em + .5rem + 2px);
	font-size: .875rem;
	overflow: auto;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-selection__rendered {
	box-sizing: border-box;
	width: 100%;
	padding: 0 .25rem;
	margin: 0;
	list-style: none;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-selection__choice {
	float: left;
	padding: 0 .4rem;
	margin-top: calc(.25rem - 1px);
	margin-right: .2rem;
	color: #495057;
	cursor: pointer;
	font-size: .75rem;
	line-height: 1.4;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-search__field {
	color: #495057;
	font-size: .875rem;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-selection__choice + .select2-search {
	width: 0;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-selection__choice__remove {
	padding-right: 3px;
	padding-left: 3px;
	margin-right: 3px;
	margin-left: 3px;
	font-weight: 700;
	color: #bdc6d0;
	border-radius: 4px;
	border-width: 1px;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #343a40;
}
.select2-container--bootstrap4-sm .select2-selection--multiple .select2-selection__clear {
	position: absolute !important;
	top: 0;
	right: .7em;
	float: none;
	margin-right: 0;
}
.select2-container--bootstrap4-sm.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
	padding: 0 5px;
	cursor: not-allowed;
}
.select2-container--bootstrap4-sm.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
	display: none;
}

/*******************************************************************************
 * PRIMITIVA zx-drawer — Panel lateral derecho reutilizable
 * Capa Top Global (ver docs/frontend.md): backdrop 7000, panel 7001.
 * Variables: --zx-drawer-bg / --zx-drawer-bg-dark / --zx-drawer-tx (header),
 *            --zx-drawer-w (ancho, def. 480px). Componer con clases del módulo.
 *******************************************************************************/
.zx-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 7000; opacity: 0; transition: opacity .2s; }
.zx-drawer-backdrop.is-open { opacity: 1; }
.zx-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: var(--zx-drawer-w, 480px); max-width: 92vw; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.18); z-index: 7001; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.zx-drawer.is-open { transform: translateX(0); }
.zx-drawer-header { background: linear-gradient(90deg, var(--zx-drawer-bg-dark, #1e293b) 0%, var(--zx-drawer-bg, #334155) 100%); color: var(--zx-drawer-tx, #fff); padding: .75rem 1rem; display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.zx-drawer-header .zx-drawer-icon { font-size: 1.3rem; opacity: .85; flex-shrink: 0; }
.zx-drawer-header .zx-drawer-titles { flex-grow: 1; min-width: 0; }
.zx-drawer-header .zx-drawer-title { font-size: 1rem; font-weight: 700; line-height: 1.15; }
.zx-drawer-header .zx-drawer-subtitle { font-size: .72rem; opacity: .85; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zx-drawer-close { background: transparent; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; padding: .25rem .5rem; opacity: .75; line-height: 1; }
.zx-drawer-close:hover { opacity: 1; }
.zx-drawer-body { flex-grow: 1; overflow-y: auto; padding: .85rem 1rem; }
.zx-drawer-footer { padding: .55rem .85rem; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.zx-drawer-footer .zx-drawer-hint { color: #64748b; font-size: .76rem; flex-grow: 1; }
.zx-drawer-footer .zx-drawer-hint i { color: #2563eb; }

.zx-drawer-section { margin-bottom: 1rem; }
.zx-drawer-section:last-child { margin-bottom: 0; }
.zx-drawer-section-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #475569; font-weight: 700; margin-bottom: .5rem; padding-bottom: .25rem; border-bottom: 2px solid #e2e8f0; display: flex; align-items: center; gap: .35rem; }
.zx-drawer-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: .55rem; padding: .4rem 0; border-bottom: 1px dashed #f1f5f9; }
.zx-drawer-row:last-child { border-bottom: none; }
.zx-drawer-row > label { margin: 0; font-size: .82rem; color: #334155; font-weight: 500; }
.zx-drawer-row .zx-drawer-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #0f172a; }

/* Proyección "antes -> después" (3 columnas) */
.zx-drawer-proj { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: .35rem; padding: .45rem 0; border-bottom: 1px dashed #f1f5f9; }
.zx-drawer-proj:last-child { border-bottom: none; }
.zx-drawer-proj .zx-proj-label { grid-column: 1 / -1; font-size: .72rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .1rem; }
.zx-drawer-proj .zx-proj-from { text-align: right; font-variant-numeric: tabular-nums; color: #64748b; }
.zx-drawer-proj .zx-proj-arrow { text-align: center; color: #94a3b8; font-size: .75rem; }
.zx-drawer-proj .zx-proj-to { text-align: left; font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }
.zx-drawer-proj .zx-proj-to.is-up { color: #166534; }
.zx-drawer-proj .zx-proj-to.is-down { color: #b91c1c; }

/* ---------------------------------------------------------------------------------------------------
   PANEL DEL CLIENTE MODERNO (`print_clientebox2`)
   Rejilla compacta de dos columnas para la ficha del cliente dentro de las pantallas de venta. Prioriza
   densidad sin apretar: el vendedor trabaja en pantallas de poca resolucion y necesita ver la cuenta entera
   sin desplazarse, pero tambien leerla de un vistazo mientras atiende.
   --------------------------------------------------------------------------------------------------- */
/* La sangria va con el selector de dos clases a proposito: `.no-gutters > [class*="col-"]` de Bootstrap
   anula `padding` con mayor especificidad que una clase suelta, y sin esto los datos quedan pegados al
   borde de la tarjeta aunque el CSS parezca correcto. */
.row > .zxc-f { display: flex; align-items: baseline; gap: 5px; padding: 2px 6px; min-width: 0; font-size: 11px; line-height: 1.35; }
.zxc-i { color: #94a3b8; font-size: 11px; flex: none; }
.zxc-r { color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; font-size: 9px; font-weight: 700; flex: none; }
.zxc-v { color: #37474f; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.zxc-cuerpo { padding: 7px 8px 6px 8px; }
.zxc-retrato { flex: none; display: flex; flex-direction: column; align-items: center; margin-right: 8px; }
.zxc-retrato .zxc-id { margin-top: 4px; }
.zxc-foto { flex: none; width: 74px; height: 74px; border-radius: 4px; border: 1px solid #e9ecef;
	background-color: #f8f9fa; background-size: cover; background-position: center; }
.zxc-foto-vacia { display: flex; align-items: center; justify-content: center; color: #ced4da; font-size: 30px; }
.zxc-nc { display: block; font-size: 10px; color: #6c7a89; font-style: italic; line-height: 1.2; }
.zxc-id { font-family: "Consolas","DejaVu Sans Mono",monospace; font-size: 11px; letter-spacing: .02em; }
/* `min-w-0` no existe en Bootstrap 4: sin el, un hijo de flex no puede encogerse y el nombre largo de un
   cliente empuja la insignia CL-000000 fuera de la tarjeta. */
.min-w-0 { min-width: 0; }

/* Franja de Estado de Credito, dentro de la MISMA tarjeta del cliente. Rotulo pequeno sobre el valor: el
   vendedor busca el numero, no la etiqueta, asi que el monto manda visualmente. Cuatro celdas por fila para
   que un importe como "¢2.500.000,00" quepa sin partirse. */
/* Los tres bloques comparten la MISMA sangria efectiva de 14px --8 del contenedor mas 6 de la celda-- para
   que el rotulo del separador, los datos del cliente y los del credito caigan sobre una sola linea vertical.
   Sin esto el credito quedaba pegado al borde de la tarjeta y se leia como si fuera otra cosa. */
.zxc-sep { background: #eef1f4; border-top: 1px solid #e3e7eb; border-bottom: 1px solid #e3e7eb; padding: 4px 14px;
	font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6c7a89; }
.zxc-sep-link { display: flex; align-items: center; transition: background .15s; }
.zxc-sep-link:hover { background: #e3e8ee; color: #37474f; }
.zxc-sep-ir { margin-left: auto; opacity: .45; }
.zxc-sep-link:hover .zxc-sep-ir { opacity: 1; }
.zxc-cred { padding: 5px 8px 8px 8px; }
.zxc-cred > .zxc-cc { padding: 3px 6px; }
.zxc-cl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.zxc-cv { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: #37474f; white-space: nowrap; }

/* Formulario de alta de linea en las pantallas de venta (proforma_agregar, y luego factura_agregar).
   `.zxp-big` conserva el tamano grande de Codigo y Cantidad: son los dos campos que el vendedor teclea sin
   mirar el teclado, y achicarlos por estetica costaria velocidad en mostrador. El resto baja a `sm` para
   que la fila entera quepa en 1000px. */
.zxp-add { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; }
/* BANDA INFORMATIVA del formulario de alta: separa lo que se DIGITA de lo que el sistema RESPONDE sobre el
   articulo encontrado. El fondo distinto no es adorno --es lo que permite que el ojo no busque ahi un campo
   que llenar-- y de paso libera el renglon de arriba para el control que facturacion tiene de mas. */
.zxp-info { background: #eef2f6; border-top: 1px solid #e0e6ec; border-radius: 0 0 3px 3px; padding: 5px 10px; gap: 6px; }
.zxp-info-i { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #8a97a4; font-weight: 700; }
.zxp-info-sep { color: #c7d0d9; margin: 0 6px; }
/* Siguen siendo <input> porque `check_use_codigo.php` los llena con .val(), pero se pintan como texto para
   que no inviten a escribir en ellos. */
.zxp-info-v { border: none; background: transparent; padding: 0; width: 62px; font-size: 13px; font-weight: 700;
	color: #37474f; font-variant-numeric: tabular-nums; }
.zxp-info-v:focus { outline: none; }
.zxp-info-v::placeholder { color: #c7d0d9; font-weight: 400; }
/* Campo de solo lectura dentro del formulario: se ve como campo para que quede claro de que dato se trata,
   pero sin el blanco de uno editable, para que nadie pierda tiempo intentando escribir en el. */
.zxp-ro { background: #f1f3f5 !important; color: #495057; font-weight: 600; cursor: default; }
.zxp-ro:focus { box-shadow: none; border-color: #ced4da; }
.zxp-big { font-size: 20px !important; font-weight: 700; height: calc(1.5em + 1rem + 2px) !important; }
.zxp-hint { font-size: 9px; color: #adb5bd; padding: 2px 2px 0 2px; white-space: nowrap; }
/* El boton "+" llena su columna, que la rejilla estira al alto de la mas alta. Sin `height: auto` el `btn`
   de Bootstrap impone el suyo y el estirado no ocurre. */
.zxp-add-btn { height: auto; width: 56px; align-self: stretch; }
/* El select2 del formulario de alta usa el tema `bootstrap4-sm` (definido mas abajo en este archivo), que ya
   resuelve alto, centrado vertical y comportamiento dentro de `input-group`. Aqui NO se redefine nada: la
   version a mano que hubo antes calculaba el alto sobre `1.5em`, y como el `em` del select2 se resuelve con
   su propia fuente, el valor quedaba 4px mas bajo y pegado al techo de la caja. */
/* Descripcion va suelta, sin `input-group`, asi que no recibe el dimensionado de `input-group-sm` y quedaba
   4px mas baja que sus vecinos. Se le da la misma altura calculada, para que la fila entera case. */
.zxp-add .zxp-desc { height: calc(1.5 * .875rem + .5rem + 2px); font-size: .875rem; }

/* SEMAFORO DE VALIDACION DEL CODIGO
   `check_use_codigo.php` reemplaza el contenido de #check_codigo por un <i> a `fa-3x m-1`, pensado para
   cuando el icono vivia suelto y grande al lado del campo. Ahora vive DENTRO del input-group, asi que hay
   que domarlo aqui: el endpoint lo comparten ajuste, balance, boleta y facturacion, y no se toca. */
#check_codigo { width: 42px; justify-content: center; }
#check_codigo .fa-3x, #check_codigo .fas, #check_codigo .fa-solid { font-size: 1.15rem !important; margin: 0 !important; }
#check_codigo .fa-check { color: #16a34a; }
#check_codigo .fa-times { color: #dc3545; }
#check_codigo .fa-search, #check_codigo .fa-magnifying-glass { color: #adb5bd; }
#check_codigo .fa-list-ol { color: #1c4e80; cursor: pointer; }

/* Etiqueta de Fuente de Costo (en el detalle del pre-ajuste) */
.zx-fuente-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: .2rem; background: #e2e8f0; color: #334155; white-space: nowrap; }
.zx-fuente-tag.is-prom { background: #dbeafe; color: #1e40af; }
.zx-fuente-tag.is-uc   { background: #ede9fe; color: #5b21b6; }
.zx-fuente-tag.is-ultc { background: #dcfce7; color: #166534; }

/* Indicador de desviación del costo de la línea vs. el costo promedio actual (ajuste_agregar_detalle). */
.zx-costdev { font-size: .95rem; }
.zx-costdev.lvl-na  { color: #cbd5e1; }
.zx-costdev.lvl-eq  { color: #94a3b8; }
.zx-costdev.lvl-up1 { color: #d97706; }
.zx-costdev.lvl-up2 { color: #ea580c; }
.zx-costdev.lvl-up3 { color: #b91c1c; }
.zx-costdev.lvl-dn1 { color: #0ea5e9; }
.zx-costdev.lvl-dn2 { color: #b91c1c; }

/*******************************************************************************
 * Loader global (popup_loading / hide_loading)
 * Overlay fullscreen con card central. Reemplaza al antiguo modal de jQuery UI.
 * El color de marca se toma de scolor_window_bg para integrarse al tema activo.
 *******************************************************************************/

.sirett-loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000; /* Top global SiReTT: por encima de todo (incluye modales, drawers, menú, chat) */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: sirett-loader-fade 0.18s ease-out;
}
.sirett-loader.d-none { display: none !important; }

@keyframes sirett-loader-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sirett-loader__card {
	background-color: #ffffff;
	min-width: 320px;
	max-width: 420px;
	padding: 26px 32px 22px;
	border-radius: 12px;
	box-shadow: 0 18px 56px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.sirett-loader__spinner {
	position: relative;
	width: 76px;
	height: 76px;
	margin: 4px auto 18px;
}
.sirett-loader__ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4px solid rgba(0, 0, 0, 0.08);
	border-top-color: #029c7d;
	border-right-color: #029c7d;
	animation: sirett-loader-spin 0.9s linear infinite;
}
.sirett-loader__core {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 28px;
	color: #029c7d;
	transform: translate(-50%, -50%);
	transform-origin: center;
	animation: sirett-loader-pulse 1.5s ease-in-out infinite;
}

@keyframes sirett-loader-spin {
	to { transform: rotate(360deg); }
}
@keyframes sirett-loader-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1;   }
	50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.7; }
}

.sirett-loader__title {
	font-family: 'Fredoka One', 'Roboto', Arial, sans-serif;
	font-size: 18px;
	color: #1f2937;
	letter-spacing: 0.3px;
	margin-bottom: 4px;
}
.sirett-loader__msg {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 14px;
}
.sirett-loader__dots span {
	display: inline-block;
	opacity: 0;
	animation: sirett-loader-dot 1.4s infinite;
}
.sirett-loader__dots span:nth-child(2) { animation-delay: 0.2s; }
.sirett-loader__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sirett-loader-dot {
	0%, 80%, 100% { opacity: 0; }
	40%           { opacity: 1; }
}

.sirett-loader__bar {
	height: 6px;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.sirett-loader__bar .progress-bar {
	background-color: #029c7d;
}

/* =====================================================================
 * Documento de Nómina (rrhh/rrhh_nomina_ver.php) — formato impreso
 * ===================================================================== */

.nomina-doc {
	--doc-ink: #1a202c;
	--doc-ink-soft: #4a5568;
	--doc-ink-faded: #94a3b8;
	--doc-line: #cbd5e0;
	--doc-line-soft: #e2e8f0;
	--doc-bg: #ffffff;
	--doc-bg-soft: #f7fafc;
	--doc-bg-zebra: #fafbfc;
	--doc-accent-bg: #029c7d;
	--doc-accent-tx: #000000;
	background: var(--doc-bg);
	color: var(--doc-ink);
	font-family: 'Segoe UI', Roboto, Tahoma, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	padding: 6mm 6mm 4mm;
}
.nomina-doc * { box-sizing: border-box; }
.nomina-doc h6 { margin: 0; }

.nomina-doc__header {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--doc-ink);
}
.nomina-doc__brand { font-size: 14px; font-weight: 700; color: var(--doc-ink); margin-bottom: .25rem; }
.nomina-doc__contact { font-size: 10.5px; color: var(--doc-ink-soft); line-height: 1.5; }
.nomina-doc__stamp {
	border: 1.5px solid var(--doc-ink);
	border-radius: 4px;
	padding: .35rem .6rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nomina-doc__stamp-title { font-size: 10px; letter-spacing: 1.5px; color: var(--doc-ink-soft); }
.nomina-doc__stamp-id { font-size: 22px; font-weight: 700; line-height: 1.1; margin: .15rem 0; }
.nomina-doc__stamp-date { font-size: 11px; color: var(--doc-ink-soft); }

.nomina-doc__meta {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .4rem;
	margin-top: .8rem;
}
.nomina-doc__chip {
	background: var(--doc-bg-soft);
	border: 1px solid var(--doc-line-soft);
	border-radius: 3px;
	padding: .3rem .5rem;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.nomina-doc__chip-label { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--doc-ink-faded); }
.nomina-doc__chip-value { font-size: 11.5px; font-weight: 600; color: var(--doc-ink); }

.nomina-doc__kpis {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: .4rem;
	margin: .8rem 0;
}
.nomina-doc__kpi {
	background: var(--doc-bg);
	border: 1px solid var(--doc-line);
	border-radius: 4px;
	padding: .45rem .6rem;
}
.nomina-doc__kpi-label { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--doc-ink-faded); }
.nomina-doc__kpi-value { font-size: 14px; font-weight: 700; color: var(--doc-ink); margin-top: 2px; }
.nomina-doc__kpi--accent { background: var(--doc-accent-bg); border-color: var(--doc-accent-bg); }
.nomina-doc__kpi--accent .nomina-doc__kpi-label,
.nomina-doc__kpi--accent .nomina-doc__kpi-value { color: var(--doc-accent-tx); }

.nomina-doc__ledger-note {
	display: flex;
	align-items: center;
	gap: .15rem;
	flex-wrap: wrap;
	font-size: 10.5px;
	color: var(--doc-ink-soft);
	background: var(--doc-bg);
	border: 1px dashed var(--doc-line);
	border-radius: 4px;
	padding: .4rem .6rem;
	margin: .2rem 0 .6rem;
}
.nomina-doc__ledger-note b { color: var(--doc-ink); }
.nomina-doc__ledger-note a { color: var(--doc-ink); font-weight: 600; text-decoration: underline; }

.nomina-doc__section { margin-top: 1rem; }
.nomina-doc__section--keep,
.nomina-doc__signatures {
	break-inside: avoid;
	page-break-inside: avoid;
}
.nomina-doc__signatures {
	break-before: avoid-page;
	page-break-before: avoid;
}
.nomina-doc__section-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 10.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--doc-ink-soft);
	padding-bottom: .2rem;
	margin-bottom: .35rem;
	border-bottom: 1px solid var(--doc-line);
}
.nomina-doc__section-title b { color: var(--doc-ink); letter-spacing: 1.5px; }

.nomina-doc__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 10.5px;
}
.nomina-doc__table thead th {
	background: var(--doc-bg-soft);
	color: var(--doc-ink-soft);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: .35rem .3rem;
	border-bottom: 1.5px solid var(--doc-ink);
	text-align: right;
}
.nomina-doc__table thead th.left { text-align: left; }
.nomina-doc__table thead th.center { text-align: center; }
.nomina-doc__table tbody td {
	padding: .3rem;
	border-bottom: 1px solid var(--doc-line-soft);
	vertical-align: top;
	text-align: right;
}
.nomina-doc__table tbody td.left { text-align: left; }
.nomina-doc__table tbody td.center { text-align: center; }
.nomina-doc__table tbody tr:nth-child(even) td { background: var(--doc-bg-zebra); }
.nomina-doc__table tbody td b { color: var(--doc-ink); }

.nomina-doc__name { font-weight: 600; color: var(--doc-ink); display: block; }
.nomina-doc__name i { font-size: 9px; color: var(--doc-ink-faded); margin-right: 3px; }
.nomina-doc__sub { font-size: 9.5px; color: var(--doc-ink-faded); display: block; }
.nomina-doc__hm { font-size: 9px; color: var(--doc-ink-faded); display: block; margin-top: 1px; }
.nomina-doc__total-cell { font-weight: 700; color: var(--doc-ink); }

.nomina-doc__totals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
	margin-top: .8rem;
}
.nomina-doc__panel {
	border: 1px solid var(--doc-line);
	border-radius: 4px;
	overflow: hidden;
}
.nomina-doc__panel-title {
	background: var(--doc-bg-soft);
	padding: .35rem .6rem;
	font-size: 10.5px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--doc-ink-soft);
	font-weight: 700;
	border-bottom: 1px solid var(--doc-line);
}
.nomina-doc__panel-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .3rem .6rem;
	border-bottom: 1px dashed var(--doc-line-soft);
}
.nomina-doc__panel-row:last-child { border-bottom: none; }
.nomina-doc__panel-row span { color: var(--doc-ink-soft); font-size: 10.5px; }
.nomina-doc__panel-row span b { color: var(--doc-ink-faded); font-weight: 500; margin-left: .3rem; font-size: 9.5px; }
.nomina-doc__panel-row b.amount { color: var(--doc-ink); font-size: 11px; font-weight: 600; }
.nomina-doc__panel-row--subtotal { background: var(--doc-bg-soft); border-top: 1px solid var(--doc-line); }
.nomina-doc__panel-row--subtotal span { font-weight: 700; color: var(--doc-ink); text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }
.nomina-doc__panel-row--subtotal b.amount { font-size: 12.5px; font-weight: 700; }

.nomina-doc__cierre {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.4fr;
	gap: .4rem;
	margin-top: .8rem;
}
.nomina-doc__cierre-cell {
	border: 1px solid var(--doc-line);
	border-radius: 4px;
	padding: .45rem .7rem;
	background: var(--doc-bg);
}
.nomina-doc__cierre-cell span { display: block; font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--doc-ink-faded); margin-bottom: 2px; }
.nomina-doc__cierre-cell b { font-size: 13px; font-weight: 700; color: var(--doc-ink); }
.nomina-doc__cierre-cell--accent { background: var(--doc-accent-bg); border-color: var(--doc-accent-bg); }
.nomina-doc__cierre-cell--accent span,
.nomina-doc__cierre-cell--accent b { color: var(--doc-accent-tx); }
.nomina-doc__cierre-cell--accent b { font-size: 16px; }

.nomina-doc__signatures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-top: 2.5rem;
	padding: 0 4rem;
}
.nomina-doc__sign { text-align: center; }
.nomina-doc__sign-line { border-top: 1px solid var(--doc-ink); margin-bottom: .25rem; }
.nomina-doc__sign-role { font-size: 10.5px; font-weight: 700; color: var(--doc-ink); text-transform: uppercase; letter-spacing: .5px; }
.nomina-doc__sign-name { font-size: 10px; color: var(--doc-ink-faded); margin-top: 1px; }

.nomina-doc__footer {
	margin-top: 1.5rem;
	padding-top: .4rem;
	border-top: 1px solid var(--doc-line-soft);
	display: flex;
	justify-content: space-between;
	font-size: 9.5px;
	color: var(--doc-ink-faded);
}

@media print {
	.nomina-doc { padding: 0; }
	.nomina-doc__kpi--accent,
	.nomina-doc__cierre-cell--accent {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* =================================================================================================
 * Reportes "modernos" — base común (rpt-*)
 * Consumidores: reports/taller_analisis_data.php, reports/taller_analisis_m_data.php,
 *               reports/co_antiguedad_resultados.php, reports/cxc_resultados.php
 *
 * Cada reporte combina su wrapper namespace propio (`.ta-rpt`, `.cs-rpt`, `.cxc-rpt`) con `.rpt-doc`
 * para acceder a la base, y agrega un bloque <style> corto sólo con los modificadores específicos
 * que no aplican al resto.
 * ================================================================================================= */
.rpt-doc { font-family: 'Segoe UI', 'Roboto', sans-serif; color: #1e293b; max-width: 100%; padding: 0.5rem; }
/* Headings dentro de .rpt-doc heredan tamaño/peso del contenedor: sin esto, el reset de Bootstrap
   (h3=1.75rem, h2=2rem, h1=2.5rem) sobrescribe el font-size: 0.95rem que cada section-header define
   en su flex, generando títulos enormes en pantalla y en print_DIV. Los pocos lugares que sí quieren
   un tamaño específico (.rpt-header h1/h2) lo declaran explícitamente y siguen funcionando. */
.rpt-doc h1, .rpt-doc h2, .rpt-doc h3, .rpt-doc h4 { margin: 0; font-size: inherit; font-weight: inherit; }

/* Header gradient azul-índigo con datos de la empresa + título del reporte. */
.rpt-doc .rpt-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.9rem 1.1rem; background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%); color: #fff; border-radius: 0.45rem; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.rpt-doc .rpt-header h1 { font-size: 1.05rem; font-weight: 700; }
.rpt-doc .rpt-header h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.rpt-doc .rpt-header-meta { font-size: 0.78rem; opacity: 0.95; line-height: 1.5; }
.rpt-doc .rpt-header-right { text-align: right; }

/* Tabla base (antes ta-table / cs-doc-table / cxc-doc-table). */
.rpt-doc .rpt-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.rpt-doc .rpt-table th, .rpt-doc .rpt-table td { padding: 0.28rem 0.45rem; border-bottom: 1px solid #f1f5f9; }
.rpt-doc .rpt-table thead th { background: #f1f5f9; color: #475569; font-weight: 600; text-align: left; border-bottom: 1px solid #cbd5e1; }
.rpt-doc .rpt-table th.num, .rpt-doc .rpt-table td.num { text-align: right; font-family: 'Consolas', 'Monaco', monospace; }
.rpt-doc .rpt-table tbody tr:hover { background: #f8fafc; }

/* Sub-cabecera "Documentos de EMPRESA — CAJA" dentro de la tabla (cs y cxc). */
.rpt-doc .rpt-table .rpt-caja-row td { background: #fef3c7; color: #92400e; font-weight: 600; font-size: 0.78rem; padding: 0.35rem 0.55rem; cursor: default; }
.rpt-doc .rpt-table .rpt-caja-row:hover td { background: #fef3c7; }

/* Celda inline de moneda dentro de la tabla — pequeña píldora monospace upper (cs y cxc). */
.rpt-doc .rpt-table .rpt-mon-cell { font-family: 'Consolas', monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: #475569; text-transform: uppercase; }

/* Sección por Encargado (cs y cxc). */
.rpt-doc .rpt-encargado-section { background: #fff; border: 1px solid #e2e8f0; margin-top: 0.9rem; border-radius: 0.45rem; overflow: hidden; }
.rpt-doc .rpt-encargado-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; font-size: 0.95rem; font-weight: 600; color: #15803d; background: #f0fdf4; border-bottom: 2px solid #15803d; }
.rpt-doc .rpt-encargado-header i { font-size: 1rem; }
.rpt-doc .rpt-encargado-name { font-weight: 700; }

/* Card por Cliente (cs y cxc). */
.rpt-doc .rpt-cliente-card { padding: 0.7rem 0.9rem; border-bottom: 1px dashed #e2e8f0; }
.rpt-doc .rpt-cliente-card:last-child { border-bottom: 0; }
.rpt-doc .rpt-cliente-header { display: flex; align-items: baseline; gap: 0.6rem; padding-bottom: 0.4rem; margin-bottom: 0.4rem; border-bottom: 1px solid #e2e8f0; }
.rpt-doc .rpt-cliente-name { font-size: 0.9rem; font-weight: 700; color: #1d4ed8; }
.rpt-doc .rpt-cliente-code { font-family: 'Consolas', monospace; font-size: 0.78rem; background: #1d4ed8; color: #fff; padding: 0.1rem 0.45rem; border-radius: 0.2rem; font-weight: 600; }

/* Badges de tipo F (factura) / N (nota crédito) y resaltes de vencimiento/saldo. */
.rpt-doc .rpt-tipo-F { background: #1d4ed8; color: #fff; padding: 0.05rem 0.35rem; border-radius: 0.15rem; font-size: 0.7rem; font-weight: 700; }
.rpt-doc .rpt-tipo-N { background: #c2410c; color: #fff; padding: 0.05rem 0.35rem; border-radius: 0.15rem; font-size: 0.7rem; font-weight: 700; }
.rpt-doc .rpt-vence-overdue { color: #b91c1c; font-weight: 600; }
.rpt-doc .rpt-saldo-neg { color: #b91c1c; font-weight: 600; }

/* Badge de moneda (ta y cxc). */
.rpt-doc .rpt-currency-badge { background: #475569; color: #fff; padding: 0.1rem 0.45rem; border-radius: 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }

/* Footers acumuladores. El verde para encargado, el dark para total final. */
.rpt-doc .rpt-manager-footer { padding: 0.6rem 1rem; background: #f0fdf4; border-top: 1px solid #15803d; }
.rpt-doc .rpt-grand-footer   { padding: 0.7rem 1rem; background: #1e293b; color: #fff; border-radius: 0.45rem; margin-top: 0.9rem; }

/* Print: page-break + color-adjust en lo que tenga fondos coloreados. */
@media print {
	body { background: #fff !important; }
	.rpt-doc { font-size: 8.5pt; padding: 0; }
	.rpt-doc .rpt-encargado-section,
	.rpt-doc .rpt-cliente-card { page-break-inside: avoid; }
	.rpt-doc .rpt-table tbody tr { page-break-inside: avoid; }
	.rpt-doc .rpt-header { background: #1e40af !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.rpt-doc .rpt-encargado-header,
	.rpt-doc .rpt-table thead th,
	.rpt-doc .rpt-table .rpt-caja-row td,
	.rpt-doc .rpt-tipo-F,
	.rpt-doc .rpt-tipo-N,
	.rpt-doc .rpt-cliente-code,
	.rpt-doc .rpt-currency-badge,
	.rpt-doc .rpt-manager-footer,
	.rpt-doc .rpt-grand-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.rpt-doc .no-print { display: none !important; }
}

/* =================================================================================================
 * Modificadores para el documento de Alisto (factura_pos_alisto.php) — namespace .al-rpt
 * Patrones reutilizables (KPI tiles, info cards, items section, foot row) que pueden adoptarse
 * en futuros rediseños — el plan a mediano plazo es promoverlos a `.rpt-*` cuando 2+ documentos
 * los usen. Mantener acá (en styles.php) y no en el archivo de la página: print_DIV() copia el
 * innerHTML del div pero no los <style> externos a él, así que sólo lo cargado por index.php llega
 * a la ventana de impresión.
 * ================================================================================================= */
.al-rpt .al-summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.al-rpt .al-summary-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.al-rpt .al-summary-tile { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.4rem; padding: 0.55rem 0.75rem; display: flex; align-items: center; gap: 0.6rem; }
.al-rpt .al-summary-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 0.3rem; color: #fff; font-size: 0.95rem; flex-shrink: 0; }
.al-rpt .al-summary-icon.tile-lineas  { background: #1d4ed8; }
.al-rpt .al-summary-icon.tile-piezas  { background: #0891b2; }
.al-rpt .al-summary-icon.tile-peso    { background: #c2410c; }
.al-rpt .al-summary-icon.tile-volumen { background: #7c3aed; }
.al-rpt .al-summary-icon.tile-monto   { background: #15803d; }
.al-rpt .al-summary-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.al-rpt .al-summary-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.al-rpt .al-summary-value { font-size: 0.95rem; color: #1e293b; font-weight: 700; font-family: 'Consolas', monospace; }

.al-rpt .al-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.7rem; }
.al-rpt .al-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.4rem; overflow: hidden; }
.al-rpt .al-info-card-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; font-size: 0.9rem; font-weight: 600; border-bottom: 2px solid currentColor; }
.al-rpt .al-info-card-header i { font-size: 0.95rem; }
.al-rpt .al-info-card-cliente   .al-info-card-header { color: #1d4ed8; background: #eff6ff; }
.al-rpt .al-info-card-documento .al-info-card-header { color: #15803d; background: #f0fdf4; }
.al-rpt .al-info-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.al-rpt .al-info-table th { width: 105px; padding: 0.32rem 0.7rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #f1f5f9; vertical-align: top; white-space: nowrap; }
.al-rpt .al-info-table td { padding: 0.32rem 0.7rem; color: #1e293b; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.al-rpt .al-info-table tr:last-child th, .al-rpt .al-info-table tr:last-child td { border-bottom: 0; }
.al-rpt .al-origen-badge { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 0.2rem; font-size: 0.72rem; font-weight: 700; color: #fff; letter-spacing: 0.03em; }
.al-rpt .al-origen-preventa { background: #b91c1c; }
.al-rpt .al-origen-apartado { background: #15803d; }
.al-rpt .al-origen-factura  { background: #1d4ed8; }

.al-rpt .al-items-section { margin-top: 0.7rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.4rem; overflow: hidden; }
.al-rpt .al-items-section-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; font-size: 0.93rem; font-weight: 600; color: #b45309; background: #fef3c7; border-bottom: 2px solid #b45309; }
.al-rpt .al-items-section-desc { font-size: 0.78rem; color: #92400e; margin-left: auto; font-weight: 400; }
.al-rpt .rpt-table.al-items { font-size: 0.82rem; }
.al-rpt .rpt-table.al-items th, .al-rpt .rpt-table.al-items td { padding: 0.32rem 0.55rem; vertical-align: middle; }
.al-rpt .rpt-table.al-items thead th { background: #1e293b; color: #fff; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 0; }
.al-rpt .rpt-table.al-items tbody tr:nth-child(even) { background: #f8fafc; }
.al-rpt .rpt-table.al-items tbody tr:hover { background: #f1f5f9; }
.al-rpt .rpt-table.al-items .al-check-col { width: 28px; text-align: center; font-size: 1.05rem; color: #94a3b8; }
.al-rpt .rpt-table.al-items .al-rownum { width: 30px; text-align: right; color: #94a3b8; font-size: 0.72rem; font-family: 'Consolas', monospace; }
.al-rpt .rpt-table.al-items .al-codigo { font-family: 'Consolas', monospace; font-weight: 700; color: #b91c1c; white-space: nowrap; }
.al-rpt .rpt-table.al-items .al-bodega { width: 40px; text-align: center; font-family: 'Consolas', monospace; background: #fef3c7; color: #92400e; font-weight: 700; }
.al-rpt .rpt-table.al-items .al-ubicacion { font-family: 'Consolas', monospace; color: #c2410c; white-space: nowrap; }
.al-rpt .rpt-table.al-items .al-cant { background: #eff6ff; color: #1d4ed8; font-weight: 700; font-family: 'Consolas', monospace; }
.al-rpt .rpt-table.al-items .al-desc { color: #1e293b; }
.al-rpt .rpt-table.al-items .al-stock { color: #15803d; font-weight: 600; font-family: 'Consolas', monospace; }
.al-rpt .rpt-table.al-items .al-comp { color: #b91c1c; font-weight: 600; font-family: 'Consolas', monospace; }
.al-rpt .rpt-table.al-items .al-serie-list { margin-top: 0.2rem; font-family: 'Consolas', monospace; font-size: 0.72rem; color: #64748b; line-height: 1.5; }
.al-rpt .rpt-table.al-items .al-recibido { min-width: 90px; background: #fffbeb; }

.al-rpt .al-foot-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0.7rem; margin-top: 0.9rem; }
.al-rpt .al-foot-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.4rem; padding: 0.6rem 0.85rem; min-height: 70px; display: flex; flex-direction: column; }
.al-rpt .al-foot-label { font-size: 0.72rem; color: #64748b; text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.al-rpt .al-foot-sign { border-bottom: 1px solid #1e293b; flex: 1; min-height: 32px; }
.al-rpt .al-foot-obs { color: #1e293b; font-size: 0.82rem; white-space: pre-wrap; flex: 1; }
.al-rpt .al-foot-obs-empty { color: #94a3b8; font-style: italic; }

/* Variantes adicionales de info-card para documentos financieros (prefactura_reporte.php). */
.al-rpt .al-info-card-comentarios .al-info-card-header { color: #b45309; background: #fef3c7; }
.al-rpt .al-info-card-totales     .al-info-card-header { color: #1e293b; background: #e2e8f0; }
.al-rpt .al-info-card-envio       .al-info-card-header { color: #4338ca; background: #e0e7ff; }

/* Celda monetaria alineada a la derecha (al-info-table) y fila final destacada (Total). */
.al-rpt .al-info-table td.al-money { text-align: right; font-family: 'Consolas', monospace; color: #1e293b; font-weight: 600; white-space: nowrap; }
.al-rpt .al-info-table tr.al-tr-total th { color: #1e293b; font-weight: 700; padding-top: 0.55rem; border-top: 2px solid #1e293b; font-size: 0.8rem; }
.al-rpt .al-info-table tr.al-tr-total td { font-weight: 700; color: #15803d; padding-top: 0.55rem; border-top: 2px solid #1e293b; font-size: 0.95rem; text-align: right; font-family: 'Consolas', monospace; white-space: nowrap; }

/* Columnas adicionales para al-items en documentos financieros (precio unitario, IVA, %desc, sub-total). */
.al-rpt .rpt-table.al-items .al-precio   { font-family: 'Consolas', monospace; text-align: right; white-space: nowrap; }
.al-rpt .rpt-table.al-items .al-iva      { text-align: center; color: #64748b; font-size: 0.85em; }
.al-rpt .rpt-table.al-items .al-pct      { font-family: 'Consolas', monospace; text-align: right; color: #c2410c; white-space: nowrap; }
.al-rpt .rpt-table.al-items .al-subtotal { font-family: 'Consolas', monospace; text-align: right; font-weight: 700; color: #15803d; white-space: nowrap; }
.al-rpt .rpt-table.al-items .al-lista    { color: #64748b; font-size: 0.85em; }

/* Helpers específicos para cierre_reporte.php (Moderno) */
.al-rpt .cl-monedas { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.65rem 0.85rem; background: #fff; }
.al-rpt .cl-moneda-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 999px; font-size: 0.82rem; color: #1e293b; font-family: 'Consolas', monospace; }
.al-rpt .cl-moneda-chip b { color: #1d4ed8; font-weight: 700; }
.al-rpt .cl-monedas-empty { color: #94a3b8; font-style: italic; padding: 0.65rem 0.85rem; }

.al-rpt .cl-anotaciones { padding: 0.7rem 0.9rem; background: #fffbeb; border-left: 3px solid #f59e0b; color: #1e293b; font-size: 0.85rem; white-space: pre-wrap; line-height: 1.5; }
.al-rpt .cl-anotaciones-empty { color: #94a3b8; font-style: italic; padding: 0.7rem 0.9rem; }

/* Tabla de desglose por usuario (igual estilo que al-items pero sin la columna check) */
.al-rpt .rpt-table.cl-users { font-size: 0.82rem; }
.al-rpt .rpt-table.cl-users th, .al-rpt .rpt-table.cl-users td { padding: 0.32rem 0.55rem; vertical-align: middle; }
.al-rpt .rpt-table.cl-users thead th { background: #1e293b; color: #fff; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 0; }
.al-rpt .rpt-table.cl-users tbody tr:nth-child(even) { background: #f8fafc; }
.al-rpt .rpt-table.cl-users tbody tr:hover { background: #f1f5f9; }
.al-rpt .rpt-table.cl-users .cl-user-name { font-family: 'Consolas', monospace; font-weight: 700; color: #b91c1c; }
.al-rpt .rpt-table.cl-users .cl-num { text-align: right; font-family: 'Consolas', monospace; color: #1e293b; }
.al-rpt .rpt-table.cl-users .cl-num-zero { color: #cbd5e1; }

/* Card de variante info adicional / conciliación */
.al-rpt .al-info-card-conciliar    .al-info-card-header { color: #c2410c; background: #ffedd5; }
.al-rpt .al-info-card-adicional    .al-info-card-header { color: #6b21a8; background: #f3e8ff; }
.al-rpt .al-info-card-facturacion  .al-info-card-header { color: #1d4ed8; background: #eff6ff; }
.al-rpt .al-info-card-apartados    .al-info-card-header { color: #15803d; background: #f0fdf4; }

/* Tabla unificada de Documentos del cierre (Ventas + NC + ND) — moderna */
.cl-docs-scroll { border: 1px solid #e2e8f0; border-radius: 0.4rem; margin-top: 0.7rem; }
.cl-docs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }
.cl-docs-table thead th { background: #1e293b; color: #fff; padding: 0.5rem 0.6rem; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; border-bottom: 0; }
.cl-docs-table thead th.cl-right { text-align: right; }
.cl-docs-table tbody tr { cursor: pointer; transition: background 0.12s ease; }
.cl-docs-table tbody tr:nth-child(even) { background: #f8fafc; }
.cl-docs-table tbody tr:hover { background: #eff6ff; }
.cl-docs-table tbody tr.is-anulada { background: #f1f5f9; color: #94a3b8; }
.cl-docs-table tbody tr.is-anulada td { text-decoration: line-through; text-decoration-color: #cbd5e1; }
.cl-docs-table tbody tr.is-anulada:hover { background: #e2e8f0; }
.cl-docs-table tbody td { padding: 0.4rem 0.6rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cl-docs-table tbody td.cl-right { text-align: right; }
.cl-docs-table .cl-doc-numero { font-family: 'Consolas', monospace; font-weight: 700; color: #1e293b; }
.cl-docs-table .cl-doc-cliente-id { font-family: 'Consolas', monospace; font-size: 0.76rem; color: #1d4ed8; font-weight: 600; margin-right: 0.4rem; white-space: nowrap; }
.cl-docs-table .cl-doc-cliente-nombre { color: #1e293b; }
.cl-docs-table .cl-doc-emisor { color: #b91c1c; font-family: 'Consolas', monospace; font-size: 0.82rem; }
.cl-docs-table .cl-doc-fecha { color: #475569; font-size: 0.82rem; white-space: nowrap; }
.cl-docs-table .cl-doc-hora { color: #94a3b8; font-size: 0.76rem; margin-left: 0.25rem; }
.cl-docs-table .cl-doc-monto { font-family: 'Consolas', monospace; font-weight: 700; white-space: nowrap; font-size: 0.88rem; }
.cl-docs-table .cl-doc-monto-cur { font-size: 0.7rem; color: #64748b; font-weight: 600; margin-right: 0.3rem; }
.cl-docs-table .cl-monto-pos { color: #15803d; }
.cl-docs-table .cl-monto-neg { color: #c2410c; }
.cl-docs-table .cl-monto-nd  { color: #b45309; }

.cl-doc-type-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 0.18rem 0.5rem; border-radius: 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; font-family: 'Consolas', monospace; }
.cl-doc-type-F  { background: #1d4ed8; }
.cl-doc-type-T  { background: #0891b2; }
.cl-doc-type-A  { background: #15803d; }
.cl-doc-type-NC { background: #c2410c; }
.cl-doc-type-ND { background: #b45309; }

/* Fila título de sección dentro de tabla cl-docs (agrupación por caja/terminal).
   Mismo lenguaje visual que .ta-section-pagos de taller_analisis_data.php. */
.cl-docs-table tbody tr.cl-section-row { cursor: default; background: #f0fdf4; }
.cl-docs-table tbody tr.cl-section-row:hover { background: #f0fdf4; }
.cl-docs-table tbody tr.cl-section-row td { background: #f0fdf4; color: #15803d; padding: 0.55rem 0.95rem; border-bottom: 2px solid currentColor; }
.cl-docs-table tbody tr.cl-section-row .cl-section-inner { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; }
.cl-docs-table tbody tr.cl-section-row .cl-section-inner i { font-size: 1rem; }
.cl-docs-table tbody tr.cl-section-row .cl-section-desc { font-size: 0.78rem; color: #64748b; margin-left: auto; font-weight: 400; }

/* Pills de método de pago (tabla de Ingresos) */
/* Pills de tipo en Flujo de Efectivo (I=Ingreso / G=Gasto / A=Ajuste) */
.cl-flow-type-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 0.18rem 0.5rem; border-radius: 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; font-family: 'Consolas', monospace; }
.cl-flow-type-I { background: #15803d; }
.cl-flow-type-G { background: #b91c1c; }
.cl-flow-type-A { background: #6b21a8; }

.cl-met-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 0.18rem 0.5rem; border-radius: 0.25rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; font-family: 'Consolas', monospace; }
.cl-met-0 { background: #15803d; } /* Efectivo */
.cl-met-1 { background: #b45309; } /* Cheque */
.cl-met-2 { background: #1d4ed8; } /* Depósito */
.cl-met-3 { background: #c2410c; } /* Nota de Crédito */
.cl-met-4 { background: #6b21a8; } /* Tarjeta */
.cl-met-5 { background: #be185d; } /* Puntos de Regalo */
.cl-met-6 { background: #0891b2; } /* Certificado */
.cl-met-7 { background: #0d9488; } /* SINPE Móvil */
.cl-met-8 { background: #4338ca; } /* Plataforma Digital */

.cl-docs-empty { padding: 1.4rem; text-align: center; color: #94a3b8; font-style: italic; }

/* Asientos Contables — card por asiento con cabecera + detalle de líneas */
.cl-asiento { background: #fff; border: 1px solid #c9deef; border-radius: 0.45rem; margin-top: 0.7rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.cl-asiento.is-pending { border-color: #f0d97a; }
.cl-asiento.is-unbalanced { border-color: #f0b9b9; }

.cl-asiento-header { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; padding: 0.6rem 0.9rem; background: #eff6ff; border-bottom: 1px solid #c9deef; cursor: pointer; transition: background 0.15s ease; align-items: center; }
.cl-asiento-header:hover { background: #dbeafe; }
.cl-asiento.is-pending .cl-asiento-header { background: #fef9e7; border-bottom-color: #f0d97a; }
.cl-asiento.is-pending .cl-asiento-header:hover { background: #fef3c7; }

.cl-asiento-id { display: flex; align-items: center; gap: 0.55rem; font-family: 'Consolas', monospace; font-size: 1rem; font-weight: 700; color: #1c4e80; white-space: nowrap; }
.cl-asiento.is-pending .cl-asiento-id { color: #b45309; }
.cl-asiento-id .as-flag { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #1c4e80; color: #fff; font-size: 0.78rem; }
.cl-asiento.is-pending .cl-asiento-id .as-flag { background: #b45309; }

.cl-asiento-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; color: #475569; }
.cl-asiento-meta .empresa { font-size: 0.95rem; font-weight: 700; color: #1e293b; }
.cl-asiento-meta .descripcion { font-size: 0.82rem; color: #1e293b; }
.cl-asiento-meta .meta-row { display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; font-size: 0.78rem; color: #64748b; }
.cl-asiento-meta .meta-row b { color: #1e293b; font-weight: 600; }
.cl-asiento-meta .meta-row .badge-mini { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.45rem; background: #e2e8f0; color: #475569; border-radius: 0.25rem; font-size: 0.7rem; font-family: 'Consolas', monospace; font-weight: 600; }

.cl-asiento-totals { display: flex; gap: 0.85rem; align-items: center; }
.cl-asiento-total { display: flex; flex-direction: column; align-items: flex-end; }
.cl-asiento-total .label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; font-weight: 600; color: #64748b; }
.cl-asiento-total .value { font-family: 'Consolas', monospace; font-size: 0.92rem; font-weight: 700; color: #1e293b; }
.cl-asiento-total.is-bad .label { color: #b91c1c; }
.cl-asiento-total.is-bad .value { color: #b91c1c; }

.cl-asiento-detail { padding: 0; }
.cl-asiento-detail .as-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
.cl-asiento-detail .as-table thead th { background: #f8fafc; padding: 0.32rem 0.6rem; text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; font-weight: 600; border-bottom: 1px solid #e2e8f0; }
.cl-asiento-detail .as-table thead th.cl-right { text-align: right; }
.cl-asiento-detail .as-table tbody td { padding: 0.32rem 0.6rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cl-asiento-detail .as-table tbody tr:last-child td { border-bottom: 0; }
.cl-asiento-detail .as-table tbody td.cl-right { text-align: right; }
.cl-asiento-detail .as-codigo { font-family: 'Consolas', monospace; font-weight: 700; color: #1c4e80; white-space: nowrap; }
.cl-asiento-detail .as-subcuenta { color: #1e293b; }
.cl-asiento-detail .as-concepto { color: #64748b; font-size: 0.78rem; }
.cl-asiento-detail .as-monto { font-family: 'Consolas', monospace; font-weight: 600; white-space: nowrap; color: #1e293b; }
.cl-asiento-detail .as-monto-empty { color: #cbd5e1; font-weight: 400; }
.cl-asiento-detail .as-totals td { background: #f8fafc; font-family: 'Consolas', monospace; font-weight: 700; color: #1e293b; border-top: 1px solid #cbd5e1; padding: 0.4rem 0.6rem; text-align: right; white-space: nowrap; }
.cl-asiento-detail .as-totals td.label { font-family: inherit; text-align: right; color: #475569; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; font-weight: 700; }

.cl-asientos-empty { padding: 1.5rem; text-align: center; color: #94a3b8; font-style: italic; }

/* Toolbar de filtro + paginador (Artículos Vendidos) */
.cl-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.7rem; }
.cl-toolbar-filter { flex: 1 1 280px; min-width: 240px; }
.cl-toolbar-filter .input-group-text { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.cl-toolbar-pager { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #475569; }
.cl-toolbar-pager .pager-info { padding: 0 0.55rem; font-weight: 500; white-space: nowrap; }
.cl-toolbar-pager .pager-info b { color: #1e293b; font-weight: 700; }
.cl-toolbar-pager .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Sección de gráfico (Formas/Métodos de Pago) */
.cl-chart-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.45rem; margin-top: 0.7rem; overflow: hidden; }
.cl-chart-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; font-size: 0.95rem; font-weight: 600; color: #1d4ed8; background: #eff6ff; border-bottom: 2px solid currentColor; }
.cl-chart-header i { font-size: 1rem; }
.cl-chart-header .chart-desc { font-size: 0.78rem; color: #64748b; margin-left: auto; font-weight: 400; }
.cl-chart-canvas { width: 100%; height: 460px; padding: 0.5rem; }

/* Fila de totales dentro de cl-docs-table */
.cl-docs-table tbody tr.cl-totals-row { cursor: default; background: #f0fdf4; }
.cl-docs-table tbody tr.cl-totals-row:hover { background: #f0fdf4; }
.cl-docs-table tbody tr.cl-totals-row td { background: #f0fdf4; color: #15803d; padding: 0.5rem 0.7rem; font-weight: 700; font-size: 0.88rem; border-top: 2px solid #15803d; border-bottom: 0; }
.cl-docs-table tbody tr.cl-totals-row td.cl-totals-label { text-transform: uppercase; letter-spacing: 0.04em; }
.cl-docs-table tbody tr.cl-totals-row td .cl-totals-na { color: #94a3b8; font-weight: 400; font-style: italic; }

/* Resumen por divisa (cards al pie de la tabla unificada) */
.cl-currency-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.7rem; margin-top: 0.85rem; }
.cl-currency-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.45rem; padding: 0.65rem 0.85rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.cl-currency-card-header { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.45rem; margin-bottom: 0.4rem; border-bottom: 1px solid #e2e8f0; }
.cl-currency-card-header .cl-currency-badge { background: #1e293b; color: #fff; padding: 0.12rem 0.5rem; border-radius: 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; font-family: 'Consolas', monospace; }
.cl-currency-card-header .cl-currency-name { font-size: 0.82rem; color: #475569; }
.cl-currency-row { display: flex; justify-content: space-between; align-items: center; padding: 0.2rem 0; font-size: 0.83rem; }
.cl-currency-row .label { color: #475569; display: flex; align-items: center; gap: 0.4rem; }
.cl-currency-row .value { font-family: 'Consolas', monospace; font-weight: 600; color: #1e293b; }
.cl-currency-row .count-badge { display: inline-block; background: #e2e8f0; color: #475569; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1.35; min-width: 1.4rem; text-align: center; margin-left: 0.35rem; }
.cl-currency-row.row-fac .label i  { color: #1d4ed8; }
.cl-currency-row.row-nc  .label i  { color: #c2410c; }
.cl-currency-row.row-nc  .value    { color: #c2410c; }
.cl-currency-row.row-nd  .label i  { color: #b45309; }
.cl-currency-row.row-nd  .value    { color: #b45309; }
.cl-currency-row.row-neto { border-top: 2px solid #1e293b; margin-top: 0.35rem; padding-top: 0.5rem; font-weight: 700; }
.cl-currency-row.row-neto .label  { color: #1e293b; }
.cl-currency-row.row-neto .value  { color: #15803d; font-size: 1rem; }

/* Compactación para impresión de la tabla unificada de Documentos del cierre. Usa pt
   explícitos (las clases screen usan rem y no escalan al imprimir). */
@media print {
	.cl-docs-scroll { max-height: none; overflow: visible; border: 1px solid #cbd5e1; border-radius: 0; }
	.cl-docs-table { font-size: 7.5pt; }
	.cl-docs-table thead th { position: static; padding: 0.2rem 0.35rem; font-size: 6.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-docs-table tbody tr { page-break-inside: avoid; }
	.cl-docs-table tbody td { padding: 0.2rem 0.35rem; }
	.cl-docs-table .cl-doc-numero        { font-size: 7.5pt; }
	.cl-docs-table .cl-doc-cliente-id    { font-size: 6.5pt; margin-right: 0.25rem; }
	.cl-docs-table .cl-doc-cliente-nombre{ font-size: 7.5pt; }
	.cl-docs-table .cl-doc-emisor        { font-size: 7pt; }
	.cl-docs-table .cl-doc-fecha         { font-size: 7pt; }
	.cl-docs-table .cl-doc-hora          { font-size: 6.5pt; margin-left: 0.18rem; }
	.cl-docs-table .cl-doc-monto         { font-size: 7.5pt; }
	.cl-docs-table .cl-doc-monto-cur     { font-size: 6.5pt; margin-right: 0.2rem; }

	.cl-doc-type-pill { font-size: 6.5pt; padding: 0.06rem 0.35rem; min-width: 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-met-pill { font-size: 6.5pt; padding: 0.06rem 0.35rem; min-width: 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-flow-type-pill { font-size: 6.5pt; padding: 0.06rem 0.35rem; min-width: 24px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

	.cl-asiento { box-shadow: none; page-break-inside: avoid; margin-top: 0.4rem; }
	.cl-asiento-header { padding: 0.3rem 0.6rem; gap: 0.55rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-asiento-id { font-size: 8.5pt; gap: 0.35rem; }
	.cl-asiento-id .as-flag { width: 18px; height: 18px; font-size: 6.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-asiento-meta .empresa { font-size: 8pt; }
	.cl-asiento-meta .descripcion { font-size: 7.5pt; }
	.cl-asiento-meta .meta-row { font-size: 6.5pt; gap: 0.3rem 0.6rem; }
	.cl-asiento-total .label { font-size: 5.5pt; }
	.cl-asiento-total .value { font-size: 7.5pt; }
	.cl-asiento-detail .as-table { font-size: 7pt; }
	.cl-asiento-detail .as-table thead th { padding: 0.2rem 0.4rem; font-size: 6pt; }
	.cl-asiento-detail .as-table tbody td { padding: 0.2rem 0.4rem; }
	.cl-asiento-detail .as-codigo { font-size: 6.5pt; }
	.cl-asiento-detail .as-subcuenta { font-size: 7pt; }
	.cl-asiento-detail .as-concepto { font-size: 6.5pt; }
	.cl-asiento-detail .as-monto { font-size: 7pt; }
	.cl-docs-table tbody tr.cl-section-row td { padding: 0.25rem 0.55rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-docs-table tbody tr.cl-section-row .cl-section-inner { font-size: 8pt; }
	.cl-docs-table tbody tr.cl-section-row .cl-section-inner i { font-size: 8pt; }
	.cl-docs-table tbody tr.cl-section-row .cl-section-desc { font-size: 6.5pt; }

	.cl-docs-table tbody tr.cl-totals-row td { padding: 0.3rem 0.55rem; font-size: 8pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

	.cl-chart-section { page-break-inside: avoid; margin-top: 0.4rem; }
	.cl-chart-header { padding: 0.3rem 0.6rem; font-size: 8.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-chart-header .chart-desc { font-size: 7pt; }
	.cl-chart-canvas { height: 340px; padding: 0.3rem; }

	.cl-currency-summary { gap: 0.4rem; margin-top: 0.5rem; }
	.cl-currency-card { padding: 0.4rem 0.6rem; box-shadow: none; border: 1px solid #cbd5e1; page-break-inside: avoid; }
	.cl-currency-card-header { padding-bottom: 0.3rem; margin-bottom: 0.25rem; }
	.cl-currency-card-header .cl-currency-badge { font-size: 6.5pt; padding: 0.06rem 0.35rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-currency-card-header .cl-currency-name  { font-size: 7pt; }
	.cl-currency-row { padding: 0.12rem 0; font-size: 7pt; }
	.cl-currency-row .count-badge { font-size: 6pt; padding: 0 0.3rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cl-currency-row.row-neto { margin-top: 0.2rem; padding-top: 0.3rem; }
	.cl-currency-row.row-neto .value { font-size: 8.5pt; }
}

@media print {
	.al-rpt .al-summary-tile,
	.al-rpt .al-info-card,
	.al-rpt .al-items-section,
	.al-rpt .al-foot-card { box-shadow: none !important; border: 1px solid #cbd5e1; }
	.al-rpt .al-info-card-header,
	.al-rpt .al-info-card-comentarios .al-info-card-header,
	.al-rpt .al-info-card-totales .al-info-card-header,
	.al-rpt .al-info-card-envio .al-info-card-header,
	.al-rpt .al-items-section-header,
	.al-rpt .al-summary-icon,
	.al-rpt .al-origen-badge,
	.al-rpt .rpt-table.al-items thead th,
	.al-rpt .rpt-table.al-items .al-bodega,
	.al-rpt .rpt-table.al-items .al-cant { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.al-rpt .rpt-table.al-items tbody tr { page-break-inside: avoid; }

	/* Compactación para impresión: las clases del documento usan rem (root-based) y por eso
	   no escalan con .rpt-doc { font-size: 8.5pt; }. Acá se fuerza un tamaño explícito en pt
	   para cada elemento y se reduce el padding, manteniendo legibilidad y densidad alta. */
	.al-rpt .rpt-header { padding: 0.5rem 0.7rem; }
	.al-rpt .rpt-header h1 { font-size: 11pt; }
	.al-rpt .rpt-header h2 { font-size: 10pt; }
	.al-rpt .rpt-header-meta { font-size: 7pt; line-height: 1.35; }

	.al-rpt .al-summary-grid { gap: 0.3rem; margin-top: 0.4rem; }
	.al-rpt .al-summary-tile { padding: 0.3rem 0.5rem; gap: 0.4rem; }
	.al-rpt .al-summary-icon { width: 22px; height: 22px; font-size: 8pt; }
	.al-rpt .al-summary-label { font-size: 6.5pt; }
	.al-rpt .al-summary-value { font-size: 9pt; }

	.al-rpt .al-info-grid { gap: 0.4rem; margin-top: 0.4rem; }
	.al-rpt .al-info-card-header { font-size: 8.5pt; padding: 0.3rem 0.6rem; }
	.al-rpt .al-info-table { font-size: 7.5pt; }
	.al-rpt .al-info-table th { font-size: 6.5pt; width: 85px; padding: 0.2rem 0.5rem; }
	.al-rpt .al-info-table td { padding: 0.2rem 0.5rem; }
	.al-rpt .al-info-table tr.al-tr-total th { font-size: 7.5pt; padding-top: 0.3rem; }
	.al-rpt .al-info-table tr.al-tr-total td { font-size: 8.5pt; padding-top: 0.3rem; }
	.al-rpt .al-origen-badge { font-size: 6.5pt; padding: 0.06rem 0.35rem; }

	.al-rpt .al-items-section { margin-top: 0.4rem; }
	.al-rpt .al-items-section-header { font-size: 8.5pt; padding: 0.3rem 0.6rem; }
	.al-rpt .al-items-section-desc { font-size: 7pt; }
	.al-rpt .rpt-table.al-items { font-size: 7.5pt; }
	.al-rpt .rpt-table.al-items th, .al-rpt .rpt-table.al-items td { padding: 0.2rem 0.35rem; }
	.al-rpt .rpt-table.al-items thead th { font-size: 6.5pt; }
	.al-rpt .rpt-table.al-items .al-check-col { font-size: 9pt; }
	.al-rpt .rpt-table.al-items .al-rownum { font-size: 6pt; }

	.al-rpt .al-foot-row { gap: 0.4rem; margin-top: 0.5rem; }
	.al-rpt .al-foot-card { padding: 0.4rem 0.6rem; min-height: 50px; }
	.al-rpt .al-foot-label { font-size: 6.5pt; margin-bottom: 0.2rem; }
	.al-rpt .al-foot-obs { font-size: 7.5pt; }
	.al-rpt .al-foot-sign { min-height: 24px; }
}

/* =================================================================================================
 * Modificadores para el Informe D-104 (reports/inf_conta_D104_2_data.php e inf_conta_D104_2p_data.php)
 * — combina con .rpt-doc .al-rpt. Las columnas numéricas (Sub-Total, Impuesto, Exoneración, Total)
 * usan ancho fijo para alinearse entre todas las tablas: más holgado en pantalla, compacto al imprimir.
 * ================================================================================================= */
.al-rpt col.d104-col-num { width: 160px; }
@media print {
	.al-rpt col.d104-col-num { width: 110px; }
}

/* =================================================================================================
 * Modificadores para el documento de Acción de Personal (rrhh/rrhh_accion-ver.php /
 * rrhh/rrhh_accion-imprimir.php) — namespace .ap-rpt, combina con .rpt-doc. Diseño "Moderno",
 * mismo lenguaje visual que el documento de Alisto (.al-rpt).
 * ================================================================================================= */
.ap-rpt .ap-badge { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 0.2rem; font-size: 0.72rem; font-weight: 700; color: #fff; letter-spacing: 0.03em; }
.ap-rpt .ap-badge-borrador { background: #64748b; }
.ap-rpt .ap-badge-emitido  { background: #15803d; }
.ap-rpt .ap-badge-anulado  { background: #b91c1c; }

.ap-rpt .ap-banner { margin-top: 0.7rem; padding: 0.5rem 0.85rem; border-radius: 0.4rem; font-size: 0.82rem; font-weight: 600; }
.ap-rpt .ap-banner-borrador { background: #f1f5f9; color: #475569; border: 1px dashed #94a3b8; }
.ap-rpt .ap-banner-anulado  { background: #fef2f2; color: #b91c1c; border: 1px dashed #b91c1c; }

.ap-rpt .ap-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.7rem; }
.ap-rpt .ap-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.4rem; overflow: hidden; }
.ap-rpt .ap-info-card-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; font-size: 0.9rem; font-weight: 600; border-bottom: 2px solid currentColor; }
.ap-rpt .ap-info-card-header i { font-size: 0.95rem; }
.ap-rpt .ap-info-card-empleado .ap-info-card-header { color: #1d4ed8; background: #eff6ff; }
.ap-rpt .ap-info-card-accion   .ap-info-card-header { color: #15803d; background: #f0fdf4; }
.ap-rpt .ap-info-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ap-rpt .ap-info-table th { width: 135px; padding: 0.32rem 0.7rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.ap-rpt .ap-info-table td { padding: 0.32rem 0.7rem; color: #1e293b; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.ap-rpt .ap-info-table tr:last-child th, .ap-rpt .ap-info-table tr:last-child td { border-bottom: 0; }

.ap-rpt .ap-section { margin-top: 0.7rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.4rem; overflow: hidden; }
.ap-rpt .ap-section-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; font-size: 0.9rem; font-weight: 600; color: #b45309; background: #fef3c7; border-bottom: 2px solid #b45309; }
.ap-rpt .ap-section .rpt-table th { width: 165px; color: #64748b; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: top; }
.ap-rpt .ap-section .rpt-table td.num { text-align: right; font-family: 'Consolas', monospace; }
.ap-rpt .ap-section .rpt-table tr.ap-total-row th, .ap-rpt .ap-section .rpt-table tr.ap-total-row td { font-weight: 700; background: #f0fdf4; color: #15803d; font-size: 0.85rem; }

.ap-rpt .ap-foot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.ap-rpt .ap-foot-card { padding-top: 2.4rem; }
.ap-rpt .ap-foot-sign { border-top: 1px solid #1e293b; padding-top: 0.3rem; text-align: center; font-size: 0.78rem; color: #475569; }

.ap-rpt .ap-meta-footer { margin-top: 0.9rem; padding: 0.55rem 0.95rem; background: #1e293b; color: #cbd5e1; border-radius: 0.4rem; font-size: 0.74rem; display: flex; justify-content: space-between; gap: 1rem; }
.ap-rpt .ap-meta-footer b { color: #fff; }

@media print {
	.ap-rpt .ap-info-card, .ap-rpt .ap-section { box-shadow: none !important; border: 1px solid #cbd5e1; }
	.ap-rpt .ap-info-card, .ap-rpt .ap-section, .ap-rpt .ap-foot-row { page-break-inside: avoid; }
	.ap-rpt .ap-info-card-header, .ap-rpt .ap-section-header, .ap-rpt .ap-badge,
	.ap-rpt .ap-banner, .ap-rpt .ap-meta-footer,
	.ap-rpt .ap-section .rpt-table tr.ap-total-row td,
	.ap-rpt .ap-section .rpt-table tr.ap-total-row th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =================================================================================================
 * Calendario anual de vacaciones/ausencias (reports/rrhh_accion_buscador-calendario.php)
 * — namespace .vcal. Línea de tiempo por colaborador; barras posicionadas por % (estilo inline
 * data-driven). El fondo de bandas de meses se pinta con un linear-gradient calculado en PHP.
 * ================================================================================================= */
.vcal-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 0.4rem; }
.vcal { min-width: 940px; font-size: 0.78rem; }
.vcal-head, .vcal-row, .vcal-ovrow { display: flex; align-items: stretch; }
.vcal-row, .vcal-ovrow { border-bottom: 1px solid #eef2f7; }   /* el divisor va en la FILA (cubre ambas columnas) */
.vcal-headrow { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 2px solid #e2e8f0; }
.vcal-name { flex: 0 0 200px; width: 200px; padding: 0.2rem 0.55rem; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #e2e8f0; overflow: hidden; }
.vcal-name b { font-size: 0.79rem; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcal-name .vcal-sub { color: #94a3b8; font-size: 0.67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcal-name a { color: #1e293b; text-decoration: none; }
.vcal-name a:hover b { text-decoration: underline; }
.vcal-vacused { color: #0369a1; font-weight: 700; }
.vcal-track { position: relative; flex: 1 1 auto; min-height: 30px; }   /* se estira a la altura de la fila (nombre = 2 líneas) */
.vcal-months { flex: 1 1 auto; display: flex; }
.vcal-months > div { text-align: center; font-size: 0.68rem; color: #64748b; padding: 0.25rem 0; font-weight: 600; overflow: hidden; border-left: 1px solid #e2e8f0; }
.vcal-months > div:first-child { border-left: 0; }
.vcal-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 18px; border-radius: 3px; background: var(--vcal-c, #888); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); min-width: 2px; }
.vcal-bar.is-borrador { background: transparent; border: 1.5px dashed var(--vcal-c, #888); }
.vcal-bar.is-borrador::after { content: ""; position: absolute; inset: 0; background: var(--vcal-c, #888); opacity: 0.16; border-radius: 2px; }
.vcal-ovlabel { flex: 0 0 200px; width: 200px; padding: 0 0.55rem; font-size: 0.68rem; color: #b91c1c; font-weight: 700; display: flex; align-items: center; gap: 0.3rem; border-right: 1px solid #e2e8f0; background: #fff5f5; }
.vcal-ovtrack { position: relative; flex: 1 1 auto; min-height: 18px; background: #fff5f5; }
.vcal-ov { position: absolute; top: 50%; transform: translateY(-50%); height: 12px; border-radius: 2px; background: #ef4444; }
.vcal-empty { padding: 1.4rem; text-align: center; color: #94a3b8; font-style: italic; }
.vcal-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.55rem 0.1rem; font-size: 0.75rem; align-items: center; }
.vcal-legend .sw { display: inline-block; width: 15px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 0.3rem; }
.vcal-legend .sw-b { background: transparent; border: 1.5px dashed #64748b; }
.vcal-legend .sw-ov { background: #ef4444; }

/* Meses del timeline anual: clicables para abrir el detalle de 3 meses. */
.vcal-months > div { cursor: pointer; }
.vcal-months > div:hover { background: #eff6ff; color: #1e40af; text-decoration: underline; }

/* --- Vista de detalle de 3 meses (calendario normal) --- */
.vcal-mbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .1rem .1rem .6rem; }
.vcal-mbar .vcal-mtitle { font-weight: 700; font-size: 1rem; color: #1e293b; text-transform: capitalize; }
.vcal-months3 { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; }
.vcal-month { flex: 1 1 300px; min-width: 280px; border: 1px solid #e2e8f0; border-radius: .4rem; overflow: hidden; }
.vcal-month.is-center { border-color: #1e88e5; box-shadow: 0 0 0 1px #1e88e5; }
.vcal-month-h { text-align: center; font-weight: 700; font-size: .82rem; padding: .35rem; background: #f8fafc; color: #334155; text-transform: capitalize; border-bottom: 1px solid #e2e8f0; }
.vcal-month.is-center .vcal-month-h { background: #eff6ff; color: #1e40af; }
.vcal-wdays, .vcal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.vcal-wdays > div { text-align: center; font-size: .6rem; font-weight: 700; color: #94a3b8; padding: .2rem 0; text-transform: uppercase; letter-spacing: .02em; }
.vcal-day { min-height: 54px; border-top: 1px solid #eef2f7; border-left: 1px solid #eef2f7; padding: .12rem; overflow: hidden; }
.vcal-day:nth-child(7n+1) { border-left: 0; }
.vcal-day.is-out { background: #fafafa; }
.vcal-day.is-weekend { background: #fcfcfd; }
.vcal-day-n { display: inline-block; font-size: .66rem; color: #64748b; font-weight: 700; line-height: 1.2; }
.vcal-day.is-today .vcal-day-n { background: #1e88e5; color: #fff; border-radius: 999px; padding: 0 5px; }
.vcal-mchips { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.vcal-mchip { display: block; font-size: .6rem; line-height: 1.35; border-radius: 2px; padding: 0 4px; background: var(--vcal-c, #888); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.vcal-mchip.is-borrador { background: transparent; color: #334155; border: 1px dashed var(--vcal-c, #888); }
.vcal-mmore { font-size: .58rem; color: #64748b; cursor: default; padding: 0 3px; }

/* =================================================================================================
 * Modificadores para los Cierres de Taller (reports/taller_analisis_data.php y _m_data.php)
 * — namespace .ta-rpt, combina con .rpt-doc. Bloques agrupados por sección con color propio
 * (ventas, devoluciones, débitos, contable, pagos, ingresos, efectivo, histórico) y tablas
 * compactas. El @media print fuerza pt explícitos porque las clases base usan rem.
 * ================================================================================================= */
.ta-rpt .ta-section { background: #fff; border: 1px solid #e2e8f0; margin-top: 0.7rem; border-radius: 0.4rem; overflow: hidden; }
.ta-rpt .ta-section-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; font-size: 0.95rem; font-weight: 600; border-bottom: 2px solid currentColor; }
.ta-rpt .ta-section-header i { font-size: 1rem; }
.ta-rpt .ta-section-ventas       .ta-section-header { color: #1d4ed8; background: #eff6ff; }
.ta-rpt .ta-section-devoluciones .ta-section-header { color: #c2410c; background: #fff7ed; }
.ta-rpt .ta-section-debitos      .ta-section-header { color: #b91c1c; background: #fef2f2; }
.ta-rpt .ta-section-contable     .ta-section-header { color: #1e293b; background: #f1f5f9; }
.ta-rpt .ta-section-pagos        .ta-section-header { color: #15803d; background: #f0fdf4; }
.ta-rpt .ta-section-ingresos     .ta-section-header { color: #15803d; background: #f0fdf4; }
.ta-rpt .ta-section-efectivo     .ta-section-header { color: #475569; background: #f8fafc; }
.ta-rpt .ta-section-historico    .ta-section-header { color: #c2410c; background: #fff7ed; }
.ta-rpt .ta-section-desc { font-size: 0.78rem; color: #64748b; margin-left: auto; font-weight: 400; }

.ta-rpt .ta-currency-block { padding: 0.65rem 0.95rem; border-bottom: 1px dashed #e2e8f0; }
.ta-rpt .ta-currency-block:last-child { border-bottom: 0; }
.ta-rpt .ta-currency-title { font-weight: 600; font-size: 0.83rem; color: #475569; margin-bottom: 0.45rem; display: flex; align-items: center; gap: 0.4rem; }
/* Pill de moneda con color según la sección. */
.ta-rpt .ta-section-ventas .rpt-currency-badge       { background: #1d4ed8; }
.ta-rpt .ta-section-devoluciones .rpt-currency-badge { background: #c2410c; }
.ta-rpt .ta-section-debitos .rpt-currency-badge      { background: #b91c1c; }

.ta-rpt .rpt-table { font-size: 0.8rem; }
.ta-rpt .rpt-table th, .ta-rpt .rpt-table td { padding: 0.32rem 0.55rem; }
.ta-rpt .rpt-table tbody tr.subtotal td    { font-weight: 700; background: #f1f5f9; color: #1e293b; }
.ta-rpt .rpt-table tbody tr.section-row td { font-weight: 600; color: #475569; }
.ta-rpt .rpt-table tbody tr.total-row td   { font-weight: 700; background: #1e293b; color: #fff; font-size: 0.88rem; }

.ta-rpt .ta-summary { display: flex; justify-content: flex-end; padding: 0.7rem 0.95rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.ta-rpt .ta-summary-block { text-align: right; }
.ta-rpt .ta-summary-title { font-size: 0.78rem; font-weight: 600; color: #475569; margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ta-rpt .ta-summary-table { font-size: 0.83rem; border-collapse: collapse; }
.ta-rpt .ta-summary-table th { font-size: 0.72rem; text-transform: uppercase; color: #64748b; font-weight: 600; padding: 0.25rem 0.55rem; letter-spacing: 0.03em; }
.ta-rpt .ta-summary-table td { padding: 0.3rem 0.55rem; font-family: 'Consolas', monospace; font-weight: 600; text-align: right; min-width: 90px; border-top: 1px solid #e2e8f0; }
.ta-rpt .ta-summary-table .ta-sum-pos { color: #15803d; }
.ta-rpt .ta-summary-table .ta-sum-neg { color: #b91c1c; }

.ta-rpt .ta-account-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ta-rpt .ta-account-table thead th { background: #1e293b; color: #fff; padding: 0.4rem 0.75rem; font-weight: 600; }
.ta-rpt .ta-account-table thead th.num { text-align: right; }
.ta-rpt .ta-account-table tbody td { padding: 0.34rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
.ta-rpt .ta-account-table tbody td.num { text-align: right; font-family: 'Consolas', monospace; }
.ta-rpt .ta-account-table tbody td.debit  { color: #1d4ed8; }
.ta-rpt .ta-account-table tbody td.credit { color: #15803d; }

.ta-rpt .ta-empty { padding: 0.8rem 1rem; color: #94a3b8; font-style: italic; text-align: center; }

@media print {
	.ta-rpt .ta-section { page-break-inside: avoid; box-shadow: none !important; border: 1px solid #cbd5e1; margin-top: 3mm; }
	.ta-rpt .ta-section-header,
	.ta-rpt .rpt-table tbody tr.subtotal td,
	.ta-rpt .rpt-table tbody tr.total-row td,
	.ta-rpt .ta-summary,
	.ta-rpt .ta-account-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

	/* Compactación para impresión: las clases del documento usan rem (root-based) y por eso
	   no escalan con .rpt-doc { font-size: 8.5pt; }. Se fuerza un tamaño explícito en pt
	   para cada elemento y se reduce el padding, manteniendo legibilidad y densidad alta. */
	.ta-rpt .rpt-header { padding: 0.5rem 0.7rem; }
	.ta-rpt .rpt-header h1 { font-size: 11pt; }
	.ta-rpt .rpt-header h2 { font-size: 10pt; }
	.ta-rpt .rpt-header-meta { font-size: 7pt; line-height: 1.35; }

	.ta-rpt .ta-section-header { font-size: 8.5pt; padding: 0.3rem 0.6rem; }
	.ta-rpt .ta-section-header i { font-size: 9pt; }
	.ta-rpt .ta-section-desc { font-size: 7pt; }

	.ta-rpt .ta-currency-block { padding: 0.4rem 0.6rem; }
	.ta-rpt .ta-currency-title { font-size: 7.5pt; margin-bottom: 0.3rem; }

	.ta-rpt .rpt-table { font-size: 7.5pt; }
	.ta-rpt .rpt-table thead th, .ta-rpt .rpt-table tbody td { font-size: 7.5pt; padding: 0.2rem 0.4rem; }
	.ta-rpt .rpt-table tbody tr.total-row td { font-size: 8pt; }
	.ta-rpt .rpt-table .rpt-caja-row td { font-size: 7pt; padding: 0.22rem 0.45rem; }
	.ta-rpt .rpt-table .rpt-mon-cell { font-size: 6.5pt; }
	.ta-rpt .rpt-currency-badge { font-size: 6.5pt; padding: 0.06rem 0.35rem; }

	.ta-rpt .ta-summary { padding: 0.4rem 0.6rem; }
	.ta-rpt .ta-summary-title { font-size: 6.5pt; margin-bottom: 0.25rem; }
	.ta-rpt .ta-summary-table { font-size: 7.5pt; }
	.ta-rpt .ta-summary-table th { font-size: 6.5pt; padding: 0.18rem 0.4rem; }
	.ta-rpt .ta-summary-table td { font-size: 7.5pt; padding: 0.2rem 0.4rem; min-width: 70px; }

	.ta-rpt .ta-account-table { font-size: 7.5pt; }
	.ta-rpt .ta-account-table thead th { font-size: 7pt; padding: 0.25rem 0.5rem; }
	.ta-rpt .ta-account-table tbody td { font-size: 7.5pt; padding: 0.22rem 0.5rem; }

	.ta-rpt .ta-empty { font-size: 7.5pt; padding: 0.5rem 0.7rem; }
}

/* =================================================================================================
 * Documento clásico de Alisto (factura_pos_alisto.php diseño "Clásico") — namespace .al-clasico-doc
 * Tablas .al-cls-info / .al-cls-foot / .al-cls-items: mismo tamaño compacto (11px) que el clásico
 * original, pero unificadas con un único borde exterior y celdas sin redondeo individual para que
 * los pares título/dato no se vean como pastillas pegadas.
 * ================================================================================================= */
.al-clasico-doc .al-cls-info,
.al-clasico-doc .al-cls-foot {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}
.al-clasico-doc .al-cls-info td.row_title,
.al-clasico-doc .al-cls-foot td.row_title {
	border-radius: 0;
	background-color: #eef2f5;
	color: #1d3652;
	font-weight: 600;
	font-size: 11px;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	text-align: left;
	white-space: nowrap;
	border-right: 1px solid #cbd5e1;
	border-bottom: 1px solid #e2e8f0;
	width: 1%;
}
.al-clasico-doc .al-cls-info td.row_data,
.al-clasico-doc .al-cls-foot td.row_data {
	border-radius: 0;
	border: none;
	background-color: #fff;
	color: #000;
	font-size: 11px;
	padding: 4px 8px;
	text-align: left;
	border-right: 1px solid #cbd5e1;
	border-bottom: 1px solid #e2e8f0;
}
.al-clasico-doc .al-cls-info td.row_data.right,
.al-clasico-doc .al-cls-foot td.row_data.right { text-align: right; }
.al-clasico-doc .al-cls-info td.row_data.center,
.al-clasico-doc .al-cls-foot td.row_data.center { text-align: center; }
.al-clasico-doc .al-cls-info tr > *:last-child,
.al-clasico-doc .al-cls-foot tr > *:last-child { border-right: none; }
.al-clasico-doc .al-cls-info tr:last-child > *,
.al-clasico-doc .al-cls-foot tr:last-child > * { border-bottom: none; }
.al-clasico-doc .al-cls-foot td.row_data.top { vertical-align: top; }

.al-clasico-doc .al-cls-items {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	overflow: hidden;
	font-size: 11px;
}
.al-clasico-doc .al-cls-items thead th { border-bottom: 1px solid #cbd5e1; }
.al-clasico-doc .al-cls-items tbody td { border-bottom: 1px solid #eef2f5; }
.al-clasico-doc .al-cls-items tbody tr:last-child td { border-bottom: none; }

@media print {
	.al-clasico-doc .al-cls-info,
	.al-clasico-doc .al-cls-foot,
	.al-clasico-doc .al-cls-items { border-color: #94a3b8; }
	.al-clasico-doc .al-cls-info td.row_title,
	.al-clasico-doc .al-cls-foot td.row_title { background-color: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ======================================================================
 * Diálogo informativo del sistema (popup, *_ask_popup, function_ask_popup)
 * Look Bootstrap card sobre motor jQuery UI dialog. La card interna trae su
 * propio header "bg-window" con el rótulo "Mensaje del Sistema", por eso
 * ocultamos el titlebar nativo del dialog y eliminamos el padding del content
 * para que la card ocupe todo el espacio. El buttonpane del dialog conserva
 * la barra inferior pero recibe un retoque de borde y padding más sobrio.
 *
 * IMPORTANTE: este tratamiento aplica SÓLO a #dialog-message-info. El otro
 * dialog del sistema (#dialog-message-form) mantiene su titlebar nativo de
 * jQuery UI con el rótulo "Formulario del Sistema", porque varias funciones
 * que construyen formularios en JS (fac_edit_detalle, item_edit_costo,
 * fac_item_manual, etc.) no tienen un header propio en el contenido y
 * dependen de ese titlebar para identificar qué se está editando.
 * ====================================================================== */
.ui-dialog:has(> #dialog-message-info) > .ui-dialog-titlebar { display: none; }
.ui-dialog:has(> #dialog-message-info) > .ui-dialog-content { padding: 0; }

.ui-dialog:has(> #dialog-message-info) > .ui-dialog-buttonpane {
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, .08);
	margin-top: 0;
	padding: .5rem .75rem;
}
.ui-dialog:has(> #dialog-message-info) > .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog:has(> #dialog-message-info) > .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button { margin-left: .35rem; }

/* Fallback para navegadores sin :has() — la clase explícita 'sirett-info-dialog' la
 * pasan las funciones popup/*_ask_popup en index.php cuando abren el info-dialog. */
.sirett-info-dialog.ui-dialog .ui-dialog-titlebar { display: none; }
.sirett-info-dialog.ui-dialog .ui-dialog-content { padding: 0; }

/* ============================================================================
 * Z-index de los modales de confirmación SiReTT.
 * jQuery UI dialog hereda .ui-front (z-index: 100 estático) y el widget lo sube
 * dinámicamente al apilar varios diálogos — pero queda muy por debajo de los
 * drawers (7001) y del menú lateral (6001), por lo que el modal acaba debajo y
 * no se puede clickar. Forzamos el orden global SiReTT: el modal debe estar
 * solo por debajo del sirett-loader (9000) y por encima de TODO lo demás.
 * Aplica a CUALQUIER ui-dialog del sistema (info, form, etc.) y a su backdrop.
 * ============================================================================ */
.ui-dialog              { z-index: 8000 !important; }
.ui-widget-overlay      { z-index: 7999 !important; }

/* ============================================================================
 * Modales en móvil: en pantallas chicas el .ui-dialog se ensancha al ancho del
 * viewport y los inputs/labels crecen lo suficiente para ser tap-friendly. Esto
 * evita que el usuario tenga que mover/zoom-pinchar el navegador para llenar el
 * formulario. No usamos transform: scale() (difumina texto) ni manipulación del
 * viewport meta (afectaría toda la página).
 * Breakpoint sm de BS4: <576px = teléfonos en portrait.
 * ============================================================================ */
@media (max-width: 575.98px) {
	.ui-dialog {
		max-width: calc(100vw - 8px) !important;
		min-width: calc(100vw - 8px) !important;
		left: 4px !important;
	}
	.ui-dialog .ui-dialog-content {
		max-width: 100% !important;
		max-height: calc(100vh - 120px) !important;
	}
	/* Inputs / selects / textareas más altos y con tipografía cómoda. iOS también
	 * deja de hacer auto-zoom cuando el font-size del input es >= 16px. */
	.ui-dialog .form-control,
	.ui-dialog .input-group-text,
	.ui-dialog .custom-select {
		font-size: 1rem !important;
		min-height: 38px !important;
	}
	.ui-dialog .input-group-sm .form-control,
	.ui-dialog .input-group-sm .input-group-text,
	.ui-dialog .input-group-sm .custom-select,
	.ui-dialog .form-control-sm,
	.ui-dialog .custom-select-sm {
		font-size: 1rem !important;
		min-height: 36px !important;
	}
	.ui-dialog .input-group-lg .form-control,
	.ui-dialog .input-group-lg .input-group-text {
		font-size: 1.2rem !important;
		min-height: 46px !important;
	}
	.ui-dialog label,
	.ui-dialog .form-text,
	.ui-dialog small {
		font-size: .9rem !important;
	}
	/* Botones de la barra inferior: más altos y con tipografía mayor. */
	.ui-dialog .ui-dialog-buttonpane button,
	.ui-dialog .ui-dialog-buttonpane .ui-button {
		font-size: 1rem !important;
		padding: .5rem 1rem !important;
	}
	/* Padding general del contenido para que no quede pegado al borde. */
	.ui-dialog .ui-dialog-content { padding: .75rem !important; }
}

/* =================================================================================================
 * Gafete de Identificación (rrhh/rrhh_usuario_card.php)
 *
 * Se imprime como dos paneles lado a lado (frente + reverso) con doblez central. Tamaño físico de
 * cada panel: 85mm × 110mm — al doblar queda como gafete corporativo vertical que cabe en porta-
 * tarjetas estándar tipo ID-1 grande. Las unidades en mm/pt garantizan que la impresión salga al
 * tamaño real independiente del DPI/zoom del navegador. Este bloque debe vivir en styles.php para
 * que la ventana de print_DIV lo cargue (ver scripts.js).
 * ================================================================================================= */
.gafete-id { font-family: 'Segoe UI', 'Roboto', sans-serif; color: #1e293b; }

.gafete-id .gafete-wrap {
	display: inline-flex;
	align-items: stretch;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	margin: 4mm 0;
}

.gafete-id .gafete-panel {
	width: 85mm;
	height: 110mm;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #1e293b;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.gafete-id .gafete-fold {
	width: 0;
	border-left: 1px dashed #94a3b8;
	align-self: stretch;
}

.gafete-id .gafete-header {
	padding: 3mm 3mm;
	background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
	color: #fff;
	text-align: center;
	flex-shrink: 0;
}
.gafete-id .gafete-header-title { font-size: 10.5pt; font-weight: 700; line-height: 1.15; }
.gafete-id .gafete-header-sub   { font-size: 7pt; opacity: .95; letter-spacing: .05em; text-transform: uppercase; margin-top: 0.6mm; }

.gafete-id .gafete-photo-wrap { text-align: center; padding: 3mm 0 0; }
.gafete-id .gafete-photo {
	width: 38mm;
	height: 38mm;
	margin: 0 auto;
	border: 2px solid #1d4ed8;
	border-radius: 2mm;
	background-size: cover;
	background-position: center;
	background-color: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gafete-id .gafete-photo i { font-size: 20mm; color: #94a3b8; }

.gafete-id .gafete-name {
	text-align: center;
	font-size: 11pt;
	font-weight: 700;
	color: #1e293b;
	padding: 2.5mm 3mm 0;
	line-height: 1.15;
}

.gafete-id .gafete-puesto-wrap { text-align: center; margin-top: 1.5mm; }
.gafete-id .gafete-puesto {
	display: inline-block;
	padding: 0.6mm 2.5mm;
	background: #fef3c7;
	color: #92400e;
	border-radius: 2mm;
	font-size: 8.5pt;
	font-weight: 700;
	letter-spacing: .02em;
}

.gafete-id .gafete-id-row { text-align: center; margin-top: 1.2mm; font-size: 7.5pt; color: #475569; }
.gafete-id .gafete-id-row .label { color: #64748b; text-transform: uppercase; font-size: 6.5pt; letter-spacing: .05em; }
.gafete-id .gafete-id-row .value { color: #1e293b; font-weight: 700; font-family: 'Consolas', monospace; }

.gafete-id .gafete-barcode {
	margin-top: auto;
	padding: 2mm 3mm 1.5mm;
	text-align: center;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
}
.gafete-id .gafete-barcode img { max-height: 11mm; max-width: 100%; }
.gafete-id .gafete-barcode-code { font-family: 'Consolas', monospace; font-size: 7.5pt; letter-spacing: .12em; color: #475569; margin-top: 0.5mm; }

.gafete-id .gafete-footer {
	padding: 1.2mm 3mm;
	text-align: center;
	background: #1e293b;
	color: #fff;
	font-size: 7pt;
	letter-spacing: .05em;
	flex-shrink: 0;
}
.gafete-id .gafete-footer b { color: #fcd34d; }

/* Reverso: panel con coordenadas */
.gafete-id .gafete-back-title {
	background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
	color: #fff;
	padding: 3mm;
	text-align: center;
	flex-shrink: 0;
}
.gafete-id .gafete-back-title h3 { font-size: 10pt; font-weight: 700; margin: 0; letter-spacing: .03em; }
.gafete-id .gafete-back-title .gafete-back-sub { font-size: 7pt; opacity: .95; text-transform: uppercase; letter-spacing: .05em; margin-top: 0.6mm; }

.gafete-id .gafete-coords-wrap { display: flex; align-items: center; justify-content: center; padding: 2mm 0; }
.gafete-id .gafete-coords { border-collapse: collapse; font-size: 9pt; }
.gafete-id .gafete-coords th, .gafete-id .gafete-coords td {
	border: 1px solid #cbd5e1;
	width: 6.2mm;
	height: 6.2mm;
	text-align: center;
	padding: 0;
	font-family: 'Consolas', monospace;
}
.gafete-id .gafete-coords thead th { background: #1e293b; color: #fff; font-size: 7pt; font-weight: 700; }
.gafete-id .gafete-coords tbody th { background: #e2e8f0; color: #1e293b; font-size: 7pt; font-weight: 700; }
.gafete-id .gafete-coords tbody td { background: #fff; color: #1d4ed8; font-weight: 700; }
.gafete-id .gafete-coords tbody tr:nth-child(even) td { background: #f8fafc; }

.gafete-id .gafete-back-note {
	padding: 2mm 3mm;
	background: #fef9c3;
	border-top: 1px solid #fde68a;
	font-size: 7pt;
	color: #78350f;
	line-height: 1.35;
	text-align: center;
}
.gafete-id .gafete-back-note b { color: #b45309; }

/* Reverso: panel sin coordenadas (info corporativa de devolución) */
.gafete-id .gafete-info-section {
	padding: 3mm 3mm 2mm;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.gafete-id .gafete-info-row { font-size: 8pt; padding: 1mm 0; border-bottom: 1px dotted #e2e8f0; line-height: 1.25; }
.gafete-id .gafete-info-row:last-child { border-bottom: 0; }
.gafete-id .gafete-info-row .label { display: block; color: #64748b; font-weight: 700; text-transform: uppercase; font-size: 6.5pt; letter-spacing: .05em; }
.gafete-id .gafete-info-row .value { display: block; color: #1e293b; font-weight: 600; font-size: 8.5pt; word-wrap: break-word; }

.gafete-id .gafete-warning {
	background: #fef3c7;
	border-left: 3px solid #b45309;
	padding: 2mm 3mm;
	margin-top: auto;
	font-size: 7pt;
	color: #78350f;
	line-height: 1.4;
}
.gafete-id .gafete-warning .warning-title { font-weight: 700; font-size: 7.5pt; color: #b45309; display: block; margin-bottom: 0.5mm; letter-spacing: .03em; }

/* Marca visual de doblez/corte (solo guía en pantalla, también imprime tenue) */
.gafete-id .gafete-cuts {
	text-align: center;
	font-size: 8pt;
	color: #94a3b8;
	margin-top: 1.5mm;
	font-style: italic;
	letter-spacing: .04em;
}
.gafete-id .gafete-cuts i { margin: 0 0.4em; }

/* =====================================================================================================
   Inventario Físico (módulo nuevo en Fase 1). Ver docs/proyectos/terminados/conteo.md.
   Primitivas `inv-*` reutilizables por las pantallas de captura, reconciliación y dashboard.
   Las primitivas `invlane-*` siguen el patrón de `cashlane-*` (caja_estado.php) — tarjetas con
   barra lateral por estado, avatar, info, badges y métricas en grid.
   ===================================================================================================== */

/* min-width fija el ancho de trabajo: bajo este umbral aparece scroll horizontal en vez de
   comprimir el grid de métricas (`invlane-metrics` no es responsive — ver bitácora Fase 4). */
.invlane-wrap { width: 100%; min-width: 1000px; max-width: 1320px; }

.invlane-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 4px;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.invlane-item:hover {
	box-shadow: 0 0 0 2px rgba(122,152,183,0.18);
}

/* Barra lateral por estado */
.invlane-item.s-planificado   { border-left-color: #f0ad4e; }
.invlane-item.s-congelado     { border-left-color: #17a2b8; }
.invlane-item.s-contando      { border-left-color: #007bff; }
.invlane-item.s-reconciliando { border-left-color: #fd7e14; }
.invlane-item.s-aplicado      { border-left-color: #28a745; }
.invlane-item.s-cerrado       { border-left-color: #6c757d; }
.invlane-item.s-cancelado     { border-left-color: #dc3545; }

.invlane-top {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.invlane-avatar,
.invlane-info,
.invlane-side {
	position: relative;
	z-index: 1;
}

.invlane-avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	color: #ffffff;
	background: #6c7a89;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px #d9e2ec;
	align-self: center;
}

.invlane-avatar i { font-size: 1.4rem; }

/* Cuando el avatar es clickeable (lleva onclick inline), muestra cursor de mano y un leve scale
   en hover, mismo gesto visual que .predoc-avatar para reforzar que es un atajo para "Abrir". */
.invlane-avatar[onclick], .predoc-avatar[onclick] { cursor: pointer; }
.invlane-avatar[onclick]:hover { transform: scale(1.08); transition: transform 0.12s ease; }

.invlane-avatar.s-planificado   { background: #f0ad4e; color: #5a4200; box-shadow: 0 0 0 1px #d6a955; }
.invlane-avatar.s-congelado     { background: #17a2b8; }
.invlane-avatar.s-contando      { background: #007bff; }
.invlane-avatar.s-reconciliando { background: #fd7e14; }
.invlane-avatar.s-aplicado      { background: #28a745; }
.invlane-avatar.s-cerrado       { background: #e6edf3; color: #6c7a89; box-shadow: 0 0 0 1px #cdd6df; }
.invlane-avatar.s-cancelado     { background: #dc3545; }

/* Estados para Ordenes de Alisto (packings). Reusan las primitivas .invlane-* con clases dedicadas
   para mantener separada la semantica del dominio (no compartir nombres con estados de inventario). */
.invlane-item.s-pack-espera     { border-left-color: #6c757d; }
.invlane-item.s-pack-alisto     { border-left-color: #28a745; }
.invlane-item.s-pack-alistado   { border-left-color: #1c4e80; }
.invlane-item.s-pack-revision   { border-left-color: #fd7e14; }
.invlane-item.s-pack-revisado   { border-left-color: #155724; }
.invlane-item.s-pack-anulado    { border-left-color: #dc3545; }

.invlane-avatar.s-pack-espera   { background: #e6edf3; color: #6c7a89; box-shadow: 0 0 0 1px #cdd6df; }
.invlane-avatar.s-pack-alisto   { background: #28a745; }
.invlane-avatar.s-pack-alistado { background: #1c4e80; }
.invlane-avatar.s-pack-revision { background: #fd7e14; }
.invlane-avatar.s-pack-revisado { background: #155724; }
.invlane-avatar.s-pack-anulado  { background: #dc3545; }

/*******************************************************************************
 * PRIMITIVA zxmes — Navegador de periodo (mes + año)
 *******************************************************************************
 * Barra compacta para módulos que muestran datos "de un mes": el periodo se
 * elige con los selects o se salta con los botones (año/mes atrás y adelante),
 * y "Hoy" vuelve al mes corriente. La pinta `nav_periodo_mes()` (core-selects.php);
 * el módulo solo aporta la función JS que recarga con el nuevo periodo.
 *
 * Se compone con el color de ventana del sistema vía --zxmes-bg, así que hereda
 * la identidad de cada instalación en vez de traer un azul propio.
 *******************************************************************************/
.zxmes {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid #d9e2ec;
	border-radius: 0.5rem;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(16,24,40,.05);
	overflow: hidden;
	vertical-align: middle;
}

.zxmes-nav {
	border: 0;
	background: #f8fafc;
	color: #64748b;
	padding: 0 .6rem;
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.zxmes-nav:hover:not(:disabled) { background: var(--zxmes-bg, #1c4e80); color: #ffffff; }
.zxmes-nav:disabled { opacity: .35; cursor: default; }
/* Los saltos de año llevan icono igual que los de mes (fa-angles-*), así que no ajustan tipografía:
   la clase queda solo para poder ocultarlos en pantallas estrechas. */

.zxmes-center {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .3rem .5rem;
	border-left: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
	background: #ffffff;
}

/* Los selects se ven como texto hasta que se les pasa por encima: el periodo se lee
   como un título, pero sigue siendo elegible con un clic. */
.zxmes-center select {
	border: 1px solid transparent;
	background: transparent;
	font-weight: 700;
	color: #1f2937;
	padding: .1rem .35rem;
	border-radius: .3rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-align: center;
	text-align-last: center;
}
.zxmes-center select:hover { border-color: #cbd5e1; background: #f8fafc; }
.zxmes-center select:focus { outline: 0; border-color: var(--zxmes-bg, #1c4e80); background: #ffffff; }
.zxmes-mes  { font-size: .95rem; min-width: 8.5rem; }
.zxmes-anio { font-size: .95rem; min-width: 5rem; }

.zxmes-hoy {
	border: 0;
	border-left: 1px solid #e5e7eb;
	background: #f8fafc;
	color: #64748b;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 0 .7rem;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.zxmes-hoy:hover:not(:disabled) { background: var(--zxmes-bg, #1c4e80); color: #ffffff; }
.zxmes-hoy:disabled { opacity: .35; cursor: default; }

/* Marca de que el periodo mostrado NO es el mes corriente: el punto evita que alguien
   lea datos de otro mes creyendo que son los de hoy. */
.zxmes.is-otro .zxmes-center { background: #fffbeb; }
.zxmes.is-otro .zxmes-hoy { color: #b45309; font-weight: 700; }

@media ( max-width: 640px ) {
	.zxmes { width: 100%; }
	.zxmes-center { flex: 1 1 auto; justify-content: center; }
	.zxmes-nav.zxmes-salto { display: none; }
}

/* Estados para Planes de Pago a Proveedores (pagos_planes-lista.php). Reusan las primitivas .invlane-*
   con clases dedicadas, igual que packings y cobros periódicos: la semántica del dominio no se mezcla. */
.invlane-item.s-pago-borrador   { border-left-color: #f0ad4e; }
.invlane-item.s-pago-aprobado   { border-left-color: #007bff; }
.invlane-item.s-pago-ejecucion  { border-left-color: #fd7e14; }
.invlane-item.s-pago-cerrado    { border-left-color: #28a745; }
.invlane-item.s-pago-anulado    { border-left-color: #dc3545; }

.invlane-avatar.s-pago-borrador  { background: #f0ad4e; color: #5a4200; box-shadow: 0 0 0 1px #d6a955; }
.invlane-avatar.s-pago-aprobado  { background: #007bff; }
.invlane-avatar.s-pago-ejecucion { background: #fd7e14; }
.invlane-avatar.s-pago-cerrado   { background: #28a745; }
.invlane-avatar.s-pago-anulado   { background: #dc3545; }

/* Estados para Cobros Periódicos (cronjobs_lista_data.php). Reusan las primitivas .invlane-* con
   clases dedicadas, más una barra de progreso compuesta del contrato (cobrados / pendientes /
   eliminados / por emitir) para leer su avance de un vistazo. */
.invlane-item.s-cj-activo      { border-left-color: #28a745; }
.invlane-item.s-cj-finalizado  { border-left-color: #6c757d; }
.invlane-item.s-cj-cancelado   { border-left-color: #dc3545; }

.invlane-avatar.s-cj-activo     { background: #28a745; }
.invlane-avatar.s-cj-finalizado { background: #e6edf3; color: #6c7a89; box-shadow: 0 0 0 1px #cdd6df; }
.invlane-avatar.s-cj-cancelado  { background: #dc3545; }

.cjlane-progress { margin-top: 8px; }
.cjlane-progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.cjlane-stack { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: #e6edf3; margin: 4px 0 3px 0; }
.cjlane-stack > i { display: block; height: 100%; }
.cjlane-s-apl  { background: #28a745; }
.cjlane-s-esp  { background: #fd7e14; }
.cjlane-s-elim { background: #dc3545; }
.cjlane-s-anul { background: #adb5bd; }
.cjlane-legend { font-size: 0.72rem; color: #6c7a89; }
.cjlane-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 3px 0 0; vertical-align: baseline; }
.cjlane-d-apl  { background: #28a745; }
.cjlane-d-esp  { background: #fd7e14; }
.cjlane-d-elim { background: #dc3545; }
.cjlane-d-gen  { background: #adb5bd; }

.cjl-pager { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.invlane-info {
	flex: 1 1 220px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.invlane-info-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1f2d3d;
}

.invlane-info-title .invlane-id {
	display: inline-block;
	background: #eef2f7;
	color: #1c4e80;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 6px;
	margin-right: 6px;
	vertical-align: 1px;
}

.invlane-info-sub {
	margin-top: 4px;
	font-size: 0.85rem;
	color: #2a3d4f;
}

.invlane-info-time {
	margin-top: 2px;
	font-size: 0.78rem;
	color: #6c7a89;
}

.invlane-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-left: auto;
	align-self: stretch;
}

.invlane-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.invlane-actions .btn { white-space: nowrap; }

.invlane-status {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
	align-items: center;
}

.invlane-status .badge {
	font-size: 0.9rem;
	padding: 6px 12px;
	line-height: 1.1;
	font-weight: 600;
}

.invlane-status .badge i { font-size: 0.9em; }

/* Métricas en grid (6 celdas: SKUs, Capturas, Líneas, Aplicadas, Avance, Diferencia) */
.invlane-metrics {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e6edf3;
}

.invlane-metric {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 6px;
	padding: 4px 6px;
	text-align: center;
	min-height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.invlane-metric-label {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}

.invlane-metric-value {
	font-size: 0.86rem;
	font-weight: 600;
	color: #2a3d4f;
	line-height: 1.1;
}

.invlane-metric.metric-avance { background: #eef7ff; border-color: #c9deef; }
.invlane-metric.metric-avance .invlane-metric-value { color: #1c4e80; }

/* Mini barra de progreso bajo el valor de avance */
.invlane-progress {
	height: 4px;
	border-radius: 2px;
	background: #d9e2ec;
	margin-top: 4px;
	overflow: hidden;
}
.invlane-progress > span {
	display: block;
	height: 100%;
	background: #28a745;
	width: 0;
	transition: width 0.2s ease;
}

/* El combo de Mes (select_month) necesita ancho extra: meses largos como
   "Septiembre" quedan apretados con el ancho automático del input-group. */
.invlane-wrap #f_mes { min-width: 120px; }

/* ----- Reconciliación (inventario_conciliar.php) ----- */

/* Stat cards clickeables (filtros por estado) */
.invconc-stat-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	padding-right: 10px;
}
.invconc-stat {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 8px 6px;
	text-align: center;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
	user-select: none;
}
.invconc-stat:hover { background: #eef2f7; border-color: #c9d6e2; }
.invconc-stat:active { transform: scale(0.98); }
.invconc-stat.is-active {
	background: #eef7ff;
	border-color: #1c4e80;
	box-shadow: inset 0 0 0 1px #1c4e80;
}
.invconc-stat-icon { font-size: 1.1rem; color: #6c7a89; line-height: 1; }
.invconc-stat.is-active .invconc-stat-icon { color: #1c4e80; }
.invconc-stat-count {
	font-size: 1.3rem;
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.1;
	margin-top: 2px;
}
.invconc-stat-label {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin-top: 2px;
}

/* Tarjeta lateral "Valor pendiente" */
.invconc-value-card {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 8px 12px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: right;
}
.invconc-value-card.n_red { background: #fff5f5; border-color: #f1c2c2; }
.invconc-value-card.n_blue { background: #f0f7ff; border-color: #c9deef; }
.invconc-value-label {
	font-size: 0.72rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.invconc-value-amount {
	font-size: 1.45rem;
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.1;
	margin-top: 2px;
}
.invconc-value-card.n_red .invconc-value-amount { color: #c0392b; }
.invconc-value-card.n_blue .invconc-value-amount { color: #1c4e80; }
.invconc-value-sub {
	font-size: 0.7rem;
	color: #8693a2;
	font-style: italic;
	margin-top: 1px;
}

/* Tabla — colores suaves de fila por dirección de la diferencia */
.invconc-table tr.invconc-row-ok  > td { background-color: #f3fbf3 !important; }
.invconc-table tr.invconc-row-fal > td { background-color: #fff5f5 !important; }
.invconc-table tr.invconc-row-sob > td { background-color: #f0f7ff !important; }

/* Línea de doble conteo con los dos ciclos sin reconciliar (discrepancia o
   segundo conteo pendiente). Tinte ámbar para distinguirla de los colores por
   diferencia: la línea está bloqueada hasta resolver los ciclos. */
.invconc-table tr.invconc-row-ciclo > td { background-color: #fdeede !important; }

/* Marca "FA" en la columna Estado para SKUs capturados sin estar en el alcance
   congelado (no aparecen en inventario_snapshot). Mismo naranja del badge
   "fuera de alcance" del módulo Captura, en formato circular para no crecer
   la columna verticalmente. */
.invconc-fa {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    border-radius: 50%;
    background: #fd7e14;
    color: #fff;
    margin-left: 4px;
    margin-top: 4px;
    vertical-align: middle;
}

/* Resaltado al editar (motivo / notas / ubicación sin guardar).
   El marco se dibuja con bordes en las celdas: top/bottom en todas forman las
   líneas horizontales continuas; left/right solo en los extremos cierran el
   recuadro. Así el realce es de la fila completa, no de cada celda. */
.invconc-table tr.invconc-row-dirty > td {
	background-color: #fff7d6 !important;
	border-top: 2px solid #f0ad4e;
	border-bottom: 2px solid #f0ad4e;
}
.invconc-table tr.invconc-row-dirty > td:first-child {
	border-left: 2px solid #f0ad4e;
}
.invconc-table tr.invconc-row-dirty > td:last-child {
	border-right: 2px solid #f0ad4e;
}

/* Celda Ubicación — info bajo el input: ubicación previa del sistema y aviso de
   ubicaciones múltiples (cuando el artículo se capturó en más de un sitio). */
.invconc-ubic-info {
	margin-top: 3px;
	font-size: 0.72rem;
	line-height: 1.5;
}
.invconc-ubic-prev { color: #6c7a89; }
.invconc-ubic-multi { color: #946200; font-weight: 600; }

/* Series (Parte C) — resumen plegable bajo la descripción y fila de detalle de series */
.invconc-serie-toggle { color: #1c4e80; white-space: nowrap; }
.invconc-serie-toggle:hover { text-decoration: underline; }
.invconc-serie-mal { color: #946200; }
.invconc-serie-mal-badge { background-color: #946200; color: #ffffff; }
.invconc-table tr.invconc-serie-detail > td {
	background-color: #f7f9fc !important;
	padding: 6px 10px 6px 38px;
}
.invconc-serie-grp { font-size: 0.8rem; margin: 2px 0; line-height: 1.6; }

/* Paginador genérico del módulo de inventario (reconciliación y listado) */
.inv-pager {
	display: flex;
	align-items: center;
	gap: 2px;
}
.inv-pager > button {
	background: #ffffff;
	border: 1px solid #d9e2ec;
	color: #2a3d4f;
	padding: 2px 9px;
	font-size: 0.85rem;
	min-width: 32px;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1.4;
}
.inv-pager > button:hover:not([disabled]) {
	background: #eef2f7;
	border-color: #c9d6e2;
}
.inv-pager > button.active {
	background: #1c4e80;
	border-color: #1c4e80;
	color: #ffffff;
	font-weight: 700;
}
.inv-pager > button[disabled] {
	color: #b3bdc7;
	cursor: not-allowed;
}
.inv-pager-ellipsis {
	padding: 0 4px;
	color: #8693a2;
}

@media (max-width: 991.98px) {
	.invconc-stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.invconc-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================================================
   Slotting Dinámico — primitivas `slot-*`
   Listado, editor, importador, métricas y migrador del módulo (bodega_slotting*.php).
   Mismo wrap de ancho fijo que `invlane-wrap` pero con namespace propio para desacoplar el módulo
   del namespace de inventarios. Fase 4 (mapa visual) introducirá primitivas adicionales
   (grid de posiciones, color por ocupación, panel lateral).
   ===================================================================================================== */

/* Wrap del módulo: ancho fijo (1000px–1320px). Por debajo de 1000px aparece scroll horizontal en lugar
   de comprimir la grilla. Mismo comportamiento que invlane-wrap.
   table-layout: fixed en la tabla envoltoria evita que contenido con nowrap empuje el ancho del módulo
   más allá del max-width del wrap. */
.slot-wrap { width: 100%; min-width: 1000px; max-width: 1320px; }
.slot-wrap > .t-flush { table-layout: fixed; }

/* Chip de restricción (P/L/R/S/NA/Res) junto al código de una posición en el editor y reportes. */
.slot-flag-chip {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 1px 5px;
	margin-right: 3px;
	border-radius: 3px;
	background-color: #6c757d;
	color: #ffffff;
	vertical-align: middle;
}

/* ----- Listado de bodegas con Slotting (slot-lane-*) -----
   Sigue el mismo patrón visual que `.invlane-*` (inventario_lista.php): tarjeta con barra
   lateral por estado, avatar circular, columna de info, columna lateral con acciones y
   estado, y grilla de métricas al pie. Namespace propio para desacoplar el módulo. */

.slot-lane-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 4px;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slot-lane-item:hover {
	box-shadow: 0 0 0 2px rgba(122,152,183,0.18);
}

.slot-lane-item.s-slot-activa   { border-left-color: #28a745; }
.slot-lane-item.s-slot-inactiva { border-left-color: #6c757d; }

.slot-lane-top {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.slot-lane-avatar,
.slot-lane-info,
.slot-lane-side {
	position: relative;
	z-index: 1;
}

.slot-lane-avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	color: #ffffff;
	background: #6c7a89;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px #d9e2ec;
	align-self: center;
}

.slot-lane-avatar i { font-size: 1.4rem; }

.slot-lane-avatar.s-slot-activa   { background: #28a745; }
.slot-lane-avatar.s-slot-inactiva { background: #e6edf3; color: #6c7a89; box-shadow: 0 0 0 1px #cdd6df; }

.slot-lane-info {
	flex: 1 1 220px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.slot-lane-info-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1f2d3d;
}

.slot-lane-info-title .slot-lane-id {
	display: inline-block;
	background: #eef2f7;
	color: #1c4e80;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 6px;
	margin-right: 6px;
	vertical-align: 1px;
}

.slot-lane-info-sub {
	margin-top: 4px;
	font-size: 0.85rem;
	color: #2a3d4f;
}

.slot-lane-info-time {
	margin-top: 2px;
	font-size: 0.78rem;
	color: #6c7a89;
}

.slot-lane-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-left: auto;
	align-self: stretch;
}

.slot-lane-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.slot-lane-actions .btn { white-space: nowrap; }

.slot-lane-status {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
	align-items: center;
}

.slot-lane-status .badge {
	font-size: 0.9rem;
	padding: 6px 12px;
	line-height: 1.1;
	font-weight: 600;
}

.slot-lane-status .badge i { font-size: 0.9em; }

/* Grilla de métricas al pie: 5 celdas (Posiciones, Activas, Items con Stock,
   Canonizados, Cobertura). */
.slot-lane-metrics {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e6edf3;
}

.slot-lane-metric {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 6px;
	padding: 4px 6px;
	text-align: center;
	min-height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.slot-lane-metric-label {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}

.slot-lane-metric-value {
	font-size: 0.86rem;
	font-weight: 600;
	color: #2a3d4f;
	line-height: 1.1;
}

.slot-lane-metric.metric-cobertura { background: #eef7ff; border-color: #c9deef; }
.slot-lane-metric.metric-cobertura .slot-lane-metric-value { color: #1c4e80; }

/* Mini barra de cobertura bajo el valor */
.slot-lane-progress {
	height: 4px;
	border-radius: 2px;
	background: #d9e2ec;
	margin-top: 4px;
	overflow: hidden;
}
.slot-lane-progress > span {
	display: block;
	height: 100%;
	background: #28a745;
	width: 0;
	transition: width 0.2s ease;
}
.slot-lane-progress > span.cov-mid  { background: #fd7e14; }
.slot-lane-progress > span.cov-low  { background: #d9e2ec; }

/* ----- Editor de la bodega (bodega_slotting-editar.php) -----
   Primitivas para el slider de pesos del puntaje, las posiciones compactas tipo lane,
   la ilustración del modelo de bodega y el preview de código en vivo. */

/* Slider tricolor de pesos. Usa jQuery UI .ui-slider con range:true (dos cursores) y
   variables CSS --p1 / --p2 actualizadas por JS para colorear las tres regiones. */
.slot-weight-slider {
	--p1: 50%;
	--p2: 70%;
	--vel-color: #1c4e80;
	--aso-color: #fd7e14;
	--erg-color: #28a745;
}

.slot-weight-slider .ui-slider {
	position: relative;
	height: 14px;
	border-radius: 8px;
	border: 1px solid #d9e2ec;
	background: linear-gradient(to right,
		var(--vel-color) 0%,
		var(--vel-color) var(--p1),
		var(--aso-color) var(--p1),
		var(--aso-color) var(--p2),
		var(--erg-color) var(--p2),
		var(--erg-color) 100%
	);
	margin: 6px 12px 18px 12px;
	cursor: pointer;
}

.slot-weight-slider .ui-slider-range {
	background: transparent;
	border: none;
}

.slot-weight-slider .ui-slider-handle {
	width: 22px;
	height: 22px;
	top: -5px;
	margin-left: -11px;
	background: #ffffff;
	border: 2px solid #2a3d4f;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	cursor: grab;
	outline: none;
}
.slot-weight-slider .ui-slider-handle:active { cursor: grabbing; }
.slot-weight-slider .ui-slider-handle:hover {
	border-color: #1c4e80;
	box-shadow: 0 0 0 4px rgba(28,78,128,0.18);
}

/* Tres badges con el % actual debajo del slider. */
.slot-weight-badges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 12px;
}
.slot-weight-badge {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 6px;
	padding: 6px 8px;
	text-align: center;
	border-left-width: 4px;
}
.slot-weight-badge.b-vel { border-left-color: #1c4e80; }
.slot-weight-badge.b-aso { border-left-color: #fd7e14; }
.slot-weight-badge.b-erg { border-left-color: #28a745; }
.slot-weight-badge-label {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.slot-weight-badge-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1f2d3d;
	line-height: 1.1;
	margin-top: 2px;
}

/* Lane compacta para posiciones existentes. Una sola fila ~36px. */
.slot-pos-lane {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 3px;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 36px;
	transition: box-shadow 0.12s ease;
}
.slot-pos-lane:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }

.slot-pos-lane.s-activa   { border-left-color: #28a745; }
.slot-pos-lane.s-inactiva { border-left-color: #adb5bd; background: #f7f9fc; }
.slot-pos-lane.is-editing { background: #fff8e1; border-color: #f0ad4e; box-shadow: 0 0 0 2px rgba(240,173,78,0.25); }

.slot-pos-code {
	flex: 0 0 auto;
	min-width: 200px;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.9rem;
	color: #1c4e80;
}
.slot-pos-code b { color: #1f2d3d; }

.slot-pos-loc {
	flex: 1 1 auto;
	font-size: 0.8rem;
	color: #6c7a89;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slot-pos-meta {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 0.8rem;
	color: #2a3d4f;
}
.slot-pos-meta .badge { font-size: 0.72rem; padding: 3px 7px; }

.slot-pos-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
}
.slot-pos-actions .btn { padding: 2px 8px; font-size: 0.78rem; }

/* Filtros sobre la lista de posiciones — fila compacta con input-groups. */
.slot-pos-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
	align-items: center;
}

/* Preview en vivo del código generado para la nueva posición. */
.slot-code-preview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #eef7ff;
	border: 1px dashed #1c4e80;
	border-radius: 6px;
	padding: 6px 12px;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.95rem;
	color: #1c4e80;
}
.slot-code-preview .label {
	font-family: inherit;
	font-size: 0.75rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.slot-code-preview .code {
	font-weight: 700;
	color: #1f2d3d;
	letter-spacing: 0.5px;
}
.slot-code-preview.is-empty { background: #f7f9fc; border-color: #adb5bd; color: #6c7a89; }
.slot-code-preview.is-empty .code { color: #6c7a89; font-style: italic; font-weight: 400; }

/* Ilustración del modelo de bodega — diagrama esquemático con zonas, pasillos, racks
   y niveles. Cada segmento se resalta cuando el usuario toca el input correspondiente. */
.slot-warehouse-svg {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 10px;
	font-size: 0.7rem;
	color: #2a3d4f;
}
.slot-warehouse-svg .sw-title {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
	text-align: center;
}
.slot-warehouse-svg svg { width: 100%; height: auto; display: block; }
.slot-warehouse-svg .sw-bodega { fill: #ffffff; stroke: #6c7a89; stroke-width: 1.5; }
.slot-warehouse-svg .sw-zona { fill: #ffffff; stroke: #1c4e80; stroke-width: 1; transition: fill 0.15s ease, stroke-width 0.15s ease; }
.slot-warehouse-svg .sw-zona.is-active { fill: #d6e6f5; stroke-width: 2.5; }
.slot-warehouse-svg .sw-pasillo { fill: #f0f4f8; stroke: #adb5bd; stroke-width: 0.5; transition: fill 0.15s ease; }
.slot-warehouse-svg .sw-pasillo.is-active { fill: #ffe4c4; stroke: #fd7e14; stroke-width: 1.5; }
.slot-warehouse-svg .sw-rack { fill: #e6edf3; stroke: #6c7a89; stroke-width: 0.5; transition: fill 0.15s ease; }
.slot-warehouse-svg .sw-rack.is-active { fill: #c9deef; stroke: #1c4e80; stroke-width: 1; }
.slot-warehouse-svg .sw-nivel { fill: #ffffff; stroke: #adb5bd; stroke-width: 0.5; transition: fill 0.15s ease; }
.slot-warehouse-svg .sw-nivel.is-golden { fill: #fff3cd; stroke: #d4a017; }
.slot-warehouse-svg .sw-nivel.is-active  { fill: #28a745; stroke: #1f7e34; }
.slot-warehouse-svg .sw-nivel.is-active.is-golden { fill: #28a745; stroke: #1f7e34; }
.slot-warehouse-svg .sw-label { fill: #2a3d4f; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 9px; pointer-events: none; }
.slot-warehouse-svg .sw-label-small { fill: #6c7a89; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 7px; pointer-events: none; }
.slot-warehouse-svg .sw-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-top: 8px;
	font-size: 0.7rem;
	color: #6c7a89;
}
.slot-warehouse-svg .sw-legend .swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 4px;
	vertical-align: middle;
	border: 1px solid #adb5bd;
}
.slot-warehouse-svg .sw-legend .swatch.zona    { background: #d6e6f5; border-color: #1c4e80; }
.slot-warehouse-svg .sw-legend .swatch.pasillo { background: #ffe4c4; border-color: #fd7e14; }
.slot-warehouse-svg .sw-legend .swatch.rack    { background: #c9deef; border-color: #1c4e80; }
.slot-warehouse-svg .sw-legend .swatch.golden  { background: #fff3cd; border-color: #d4a017; }
.slot-warehouse-svg .sw-legend .swatch.activo  { background: #28a745; border-color: #1f7e34; }

/* ----- Dashboard de métricas (bodega_slotting-metricas.php) -----
   Stat cards de resumen, mini-gráfico de Pareto, lanes compactas para Top-N por velocidad y
   para asociaciones, hero card del item enfocado, dropdown de sugerencias y banner de insights. */

/* Fila de stat cards (6 cards en una grilla). Algunas son clickeables (filtran). */
.slot-stat-row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}
.slot-stat {
	background: #ffffff;
	border: 1px solid #e6edf3;
	border-left: 4px solid #adb5bd;
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: box-shadow 0.12s ease, transform 0.08s ease;
}
.slot-stat.is-clickable { cursor: pointer; }
.slot-stat.is-clickable:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.2); }
.slot-stat.is-clickable:active { transform: scale(0.98); }
.slot-stat.is-active { background: #eef7ff; border-color: #1c4e80; box-shadow: inset 0 0 0 1px #1c4e80; }
.slot-stat.v-skus     { border-left-color: #1c4e80; }
.slot-stat.v-hits     { border-left-color: #fd7e14; }
.slot-stat.v-unidades { border-left-color: #6f42c1; }
.slot-stat.v-clase-a  { border-left-color: #28a745; }
.slot-stat.v-cobert   { border-left-color: #17a2b8; }
.slot-stat.v-pares    { border-left-color: #d4a017; }
.slot-stat-label {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.slot-stat-label i { margin-right: 4px; }
.slot-stat-value {
	font-size: 1.35rem;
	font-weight: 700;
	color: #1f2d3d;
	line-height: 1.1;
}
.slot-stat-sub {
	font-size: 0.72rem;
	color: #6c7a89;
	line-height: 1.1;
}
.slot-stat-progress {
	height: 4px;
	border-radius: 2px;
	background: #e6edf3;
	margin-top: 6px;
	overflow: hidden;
}
.slot-stat-progress > span {
	display: block;
	height: 100%;
	background: #17a2b8;
	transition: width 0.25s ease;
}

/* Mini-gráfico de Pareto (SVG inline) */
.slot-pareto-box {
	background: #ffffff;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
}
.slot-pareto-title {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}
.slot-pareto-box svg { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; }
.slot-pareto-axis      { stroke: #adb5bd; stroke-width: 0.5; }
.slot-pareto-grid      { stroke: #e6edf3; stroke-width: 0.5; stroke-dasharray: 3 3; }
.slot-pareto-curve     { fill: none; stroke: #1c4e80; stroke-width: 2; }
.slot-pareto-area      { fill: rgba(28,78,128,0.10); stroke: none; }
.slot-pareto-ref       { stroke: #fd7e14; stroke-width: 1; stroke-dasharray: 4 3; }
.slot-pareto-marker    { fill: #fd7e14; stroke: #ffffff; stroke-width: 1.5; }
.slot-pareto-label     { fill: #6c7a89; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 9px; }
.slot-pareto-callout   { fill: #1c4e80; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 10px; font-weight: 700; }

/* Insight banner (alerta con CTA) */
.slot-insight {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff8e1;
	border: 1px solid #f0ad4e;
	border-left-width: 4px;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
}
.slot-insight.v-info { background: #e6f7fa; border-color: #17a2b8; }
.slot-insight.v-ok   { background: #e8f5e9; border-color: #28a745; }
.slot-insight .si-icon { font-size: 1.5rem; color: #d4a017; flex: 0 0 auto; }
.slot-insight.v-info .si-icon { color: #17a2b8; }
.slot-insight.v-ok   .si-icon { color: #28a745; }
.slot-insight .si-body { flex: 1 1 auto; font-size: 0.85rem; color: #2a3d4f; }
.slot-insight .si-body b { color: #1f2d3d; }
.slot-insight .si-action { flex: 0 0 auto; }

/* Lane del Top-N por velocidad. Una fila por SKU con avatar rank, barra de hits y métricas. */
.slot-vel-lane {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 3px;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 44px;
	transition: box-shadow 0.12s ease;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.slot-vel-lane:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }
.slot-vel-lane.abc-A { border-left-color: #28a745; }
.slot-vel-lane.abc-B { border-left-color: #17a2b8; }
.slot-vel-lane.abc-C { border-left-color: #adb5bd; }
.slot-vel-lane.abc-X { border-left-color: #d9e2ec; }

.slot-vel-rank {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #eef2f7;
	color: #1c4e80;
	font-weight: 700;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d9e2ec;
}
.slot-vel-lane.abc-A .slot-vel-rank { background: #28a745; color: #ffffff; border-color: #1f7e34; }
.slot-vel-lane.abc-B .slot-vel-rank { background: #17a2b8; color: #ffffff; border-color: #117a8b; }
.slot-vel-lane.abc-C .slot-vel-rank { background: #ffffff; color: #6c7a89; }

.slot-vel-codedesc {
	flex: 1 1 0;
	min-width: 0;
	width: 0;
	overflow: hidden;
}
.slot-vel-code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.86rem;
	color: #1c4e80;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.slot-vel-desc {
	font-size: 0.78rem;
	color: #2a3d4f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.1;
	margin-top: 2px;
	min-width: 0;
}

.slot-vel-bar {
	flex: 0 0 140px;
	height: 8px;
	border-radius: 4px;
	background: #f0f4f8;
	overflow: hidden;
	border: 1px solid #e6edf3;
}
.slot-vel-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(to right, #28a745, #17a2b8);
	transition: width 0.25s ease;
}

.slot-vel-metrics {
	flex: 0 1 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	min-width: 200px;
	max-width: 280px;
}
.slot-vel-metric {
	text-align: right;
	font-size: 0.78rem;
}
.slot-vel-metric-label {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.slot-vel-metric-value {
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.1;
}

.slot-vel-loc {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 180px;
	text-align: right;
	overflow: hidden;
}
.slot-vel-loc-chip {
	display: inline-block;
	max-width: 100%;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.78rem;
	background: #eef2f7;
	color: #1c4e80;
	padding: 2px 8px;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.slot-vel-loc-chip.is-missing { background: #fff3cd; color: #856404; }
.slot-vel-loc-chip.is-missing-a { background: #f8d7da; color: #721c24; }

.slot-vel-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
}
.slot-vel-actions .btn { padding: 2px 8px; font-size: 0.78rem; }

/* Hero card del item enfocado en la sección de asociación */
.slot-hero {
	background: linear-gradient(to right, #eef7ff 0%, #ffffff 60%);
	border: 1px solid #c9deef;
	border-left: 4px solid #1c4e80;
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.slot-hero-icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1c4e80;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: 0 0 0 4px rgba(28,78,128,0.15);
}
.slot-hero-body { flex: 1 1 0; min-width: 0; overflow: hidden; }
.slot-hero-title { font-size: 1rem; font-weight: 700; color: #1f2d3d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-hero-title .h-code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	background: #ffffff;
	color: #1c4e80;
	padding: 2px 8px;
	border-radius: 4px;
	margin-right: 8px;
	font-size: 0.9rem;
}
.slot-hero-desc { font-size: 0.85rem; color: #2a3d4f; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-hero-close { flex: 0 0 auto; align-self: flex-start; }

/* ----- Migrador asistido (bodega_slotting-migrar.php) -----
   Lane compacta con checkbox, avatar de estado, rótulo + preview de segmentos parseados,
   meta de items/unidades, badge de estado y acción. Reusa el patrón slot-stat-row para el
   resumen y slot-insight para el banner. */
.slot-mig-lane {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 3px;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 44px;
	transition: box-shadow 0.12s ease;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.slot-mig-lane:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }
.slot-mig-lane.s-vinculado { border-left-color: #28a745; }
.slot-mig-lane.s-pendiente { border-left-color: #fd7e14; background: #fffbf4; }

.slot-mig-check {
	flex: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slot-mig-avatar {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	color: #ffffff;
}
.slot-mig-lane.s-vinculado .slot-mig-avatar { background: #28a745; }
.slot-mig-lane.s-pendiente .slot-mig-avatar { background: #fd7e14; }

.slot-mig-body {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.slot-mig-rotulo {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.92rem;
	color: #1c4e80;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slot-mig-segments {
	font-size: 0.74rem;
	color: #6c7a89;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slot-mig-segments .seg-chip {
	display: inline-block;
	background: #eef2f7;
	color: #1c4e80;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	margin-right: 4px;
}
.slot-mig-segments .seg-chip i { color: #6c7a89; }
.slot-mig-segments.is-empty { color: #adb5bd; font-style: italic; }

.slot-mig-meta {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 180px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	font-size: 0.78rem;
}
.slot-mig-meta-cell {
	text-align: right;
	min-width: 0;
}
.slot-mig-meta-label {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.slot-mig-meta-value {
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.1;
}

.slot-mig-state {
	flex: 0 0 auto;
	min-width: 90px;
	text-align: center;
}
.slot-mig-action {
	flex: 0 0 auto;
	min-width: 140px;
	text-align: right;
}

/* Pill compacto del contador de seleccionadas (fila de filtros). */
.slot-mig-selcount {
	display: inline-block;
	background: #fff3cd;
	border: 1px solid #d4a017;
	color: #856404;
	padding: 4px 10px;
	border-radius: 14px;
	font-size: 0.78rem;
	font-weight: 600;
}
.slot-mig-selcount.is-empty { background: #f7f9fc; border-color: #d9e2ec; color: #6c7a89; font-weight: 400; }

/* ----- Selector modal de posiciones (bodega_slotting-selector.php) -----
   Modal Bootstrap que abre desde item_shop.php (y otros modulos que necesiten elegir una posicion
   de un layout). Lista compacta de posiciones con toda su informacion: codigo, ubicacion textual,
   flags, capacidad y conteo de items ocupantes. Una sola seleccion a la vez (highlight). */

.slot-sel-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.slot-sel-lane {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 3px;
	border-left-color: #1c4e80;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 36px;
	cursor: pointer;
	transition: box-shadow 0.10s ease, background 0.10s ease;
}
.slot-sel-lane:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); background: #f7f9fc; }
.slot-sel-lane.is-selected {
	background: #d6e6f5;
	border-left-color: #1c4e80;
	box-shadow: 0 0 0 2px rgba(28,78,128,0.40);
}
/* Opción especial "sin ubicación" — alineada al inicio, con borde mas suave */
.slot-sel-lane.is-clear {
	border-left-color: #6c757d;
	background: #f7f9fc;
}
.slot-sel-lane.is-clear.is-selected {
	background: #fff3cd;
	border-left-color: #d4a017;
	box-shadow: 0 0 0 2px rgba(212,160,23,0.40);
}

.slot-sel-code {
	flex: 0 0 auto;
	min-width: 180px;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.92rem;
	color: #1c4e80;
}
.slot-sel-code b { color: #1f2d3d; }

.slot-sel-loc {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.78rem;
	color: #6c7a89;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slot-sel-meta {
	flex: 0 0 auto;
	font-size: 0.78rem;
	color: #2a3d4f;
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Estilos para el contenedor scrolleable dentro del modal */
.slot-sel-list-box {
	max-height: 460px;
	overflow-y: auto;
	padding-right: 4px;
}

/* ----- Mapa visual de la bodega (bodega_slotting-mapa.php) -----
   SVG escalado de la bodega con racks distribuidos en sus coordenadas (x, y) reales. Cada rack
   se subdivide en sub-celdas por nivel. Click en sub-celda abre el panel inferior con los datos
   de esa posición. El mapa ocupa el 100% del card; el panel se apila debajo. */

/* Ancho fijo del modulo para que el mapa tenga siempre el mismo espacio disponible. */
.slot-wrap.slot-wrap-mapa { min-width: 1320px; max-width: 1320px; }

.slot-mapa-wrap {
	display: block;
}

.slot-mapa-canvas {
	width: 100%;
	background: #f7f9fc;
	border: 1px solid #d9e2ec;
	border-radius: 8px;
	padding: 12px;
	position: relative;
	overflow: hidden;
}
.slot-mapa-canvas svg { width: 100%; height: auto; display: block; user-select: none; }

/* Cuadro de la bodega — fondo */
.slot-mapa-bodega { fill: #ffffff; stroke: #6c7a89; stroke-width: 0.05; }

/* Rack (un (x,y) con uno o más niveles). El stroke se usa para distinguir bordes. */
.slot-mapa-rack { fill: #e6edf3; stroke: #6c7a89; stroke-width: 0.03; }

/* Punto de partida del alisto -- el muelle, la mesa de empaque, la puerta. Es desde donde el motor
   mide la cercania, asi que tiene que verse en el plano: sin el, nadie puede juzgar si lo que mas
   sale esta donde deberia. */
.slot-mapa-origen { fill: #c0651c; stroke: #ffffff; stroke-width: 0.12; }
.slot-mapa-origen-t { fill: #c0651c; font-size: 0.5px; font-weight: 700; text-anchor: middle;
	letter-spacing: 0.04px; }

/* Sub-celda por nivel dentro del rack. El color se cambia por modo (ocupación/ABC/recomendaciones)
   vía clases is-* aplicadas a cada celda en server-side. */
.slot-mapa-nivel {
	fill: #f7f9fc;
	stroke: #adb5bd;
	stroke-width: 0.02;
	cursor: pointer;
	transition: filter 0.12s ease, stroke-width 0.12s ease;
}
.slot-mapa-nivel:hover { filter: brightness(0.93); stroke-width: 0.06; stroke: #1c4e80; }
.slot-mapa-nivel.is-selected { stroke: #fd7e14; stroke-width: 0.10; }

/* Modo Ocupación: porcentaje de uso */
.slot-mapa-nivel.occ-vacia       { fill: #f1f7ff; }
.slot-mapa-nivel.occ-baja        { fill: #d8f0d8; }   /* <50% */
.slot-mapa-nivel.occ-media       { fill: #fff3c4; }   /* 50-80% */
.slot-mapa-nivel.occ-alta        { fill: #ffdfb3; }   /* 80-100% */
.slot-mapa-nivel.occ-sobre       { fill: #ffb3b3; }   /* >100% */
.slot-mapa-nivel.occ-sin-stock   { fill: #ececec; }   /* sin items */

/* Modo Clase ABC del item principal */
.slot-mapa-nivel.abc-A  { fill: #c7eccc; }
.slot-mapa-nivel.abc-B  { fill: #c9deef; }
.slot-mapa-nivel.abc-C  { fill: #e6edf3; }
.slot-mapa-nivel.abc-no { fill: #f1f7ff; }

/* Modo Recomendaciones pendientes */
.slot-mapa-nivel.rec-pendiente { fill: #ffd9a8; stroke: #fd7e14; stroke-width: 0.06; }
.slot-mapa-nivel.rec-vacio     { fill: #f7f9fc; }

/* Texto de etiqueta del rack (código abreviado) */
.slot-mapa-label {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.32px;            /* escalado al viewBox: en bodega 30m, ~ 12px en pantalla a 1300px */
	fill: #2a3d4f;
	pointer-events: none;
	text-anchor: middle;
	dominant-baseline: central;
}
.slot-mapa-label-small {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.22px;
	fill: #6c7a89;
	pointer-events: none;
}

/* Íconos de restricciones superpuestos sobre el rack (refrigerado, seguridad, reserva, etc.) */
.slot-mapa-flag {
	font-size: 0.5px;
	pointer-events: none;
}
.slot-mapa-flag.refrigerado { fill: #17a2b8; }
.slot-mapa-flag.seguridad   { fill: #28a745; }
.slot-mapa-flag.reserva     { fill: #6c757d; }

/* Línea/marca de zona (separa visualmente las zonas en el plano si están agrupadas) */
.slot-mapa-zona-label {
	font-family: sans-serif;
	font-size: 0.6px;
	fill: #1c4e80;
	font-weight: 700;
	pointer-events: none;
}

/* Panel con datos de la posición seleccionada — se apila debajo del mapa para tener mas ancho. */
.slot-mapa-panel {
	width: 100%;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 12px;
	max-height: 480px;
	overflow-y: auto;
}
.slot-mapa-panel.is-empty {
	color: #6c7a89;
	font-style: italic;
	text-align: center;
	padding: 18px;
	min-height: 0;
}
/* En el header del panel, distribuir titulo + meta a la izquierda y stats agregadas a la derecha */
.slot-mapa-panel-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	border-bottom: 1px solid #e6edf3;
	padding-bottom: 8px;
	margin-bottom: 10px;
}
.slot-mapa-panel-header .meta-block {
	flex: 1 1 auto;
	min-width: 0;
}
.slot-mapa-panel-header .stats-block {
	flex: 0 0 auto;
	font-size: 0.85rem;
	color: #2a3d4f;
	text-align: right;
}
/* Grilla de 2 columnas: ocupacion a la izquierda, items a la derecha, aprovecha el ancho */
.slot-mapa-panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 16px;
}
.slot-mapa-panel-codigo {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1c4e80;
}
.slot-mapa-panel-meta {
	font-size: 0.78rem;
	color: #6c7a89;
	margin-top: 3px;
}
.slot-mapa-panel-section {
	margin-bottom: 12px;
}
.slot-mapa-panel-section h6 {
	font-size: 0.72rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.slot-mapa-panel-items {
	font-size: 0.82rem;
}
.slot-mapa-panel-items .item-row {
	display: flex;
	gap: 6px;
	padding: 4px 0;
	border-bottom: 1px dashed #e6edf3;
}
.slot-mapa-panel-items .item-row:last-child { border-bottom: none; }
.slot-mapa-panel-items .item-row .code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	color: #1c4e80;
	font-weight: 600;
	flex: 0 0 auto;
	min-width: 80px;
}
.slot-mapa-panel-items .item-row .desc {
	flex: 1 1 auto;
	min-width: 0;
	color: #2a3d4f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slot-mapa-panel-items .item-row .qty {
	flex: 0 0 auto;
	color: #6c7a89;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.74rem;
}

/* Banner cuando hay posiciones sin coordenadas */
.slot-mapa-banner-sincoords {
	background: #fff3cd;
	border: 1px solid #d4a017;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.82rem;
	color: #856404;
	margin-bottom: 10px;
}

/* Toolbar / leyenda del mapa */
.slot-mapa-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-bottom: 10px;
}
.slot-mapa-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.74rem;
	color: #6c7a89;
	margin-left: auto;
}
.slot-mapa-leyenda .swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	margin-right: 3px;
	vertical-align: middle;
	border: 1px solid #adb5bd;
}

/* ----- Recomendaciones del motor (bodega_slotting-recomendaciones.php) -----
   Lane compacta con avatar de mejora estimada, item, transición codigo_actual → codigo_sugerido,
   razones humanas en línea fina y botonera Aplicar/Descartar. */
.slot-rec-lane {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 3px;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 50px;
	transition: box-shadow 0.12s ease;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.slot-rec-lane:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }
.slot-rec-lane.s-pendiente  { border-left-color: #1c4e80; }
.slot-rec-lane.s-aplicada   { border-left-color: #28a745; background: #f5fbf5; }
.slot-rec-lane.s-descartada { border-left-color: #6c757d; background: #f7f9fc; }
.slot-rec-lane.s-obsoleta   { border-left-color: #adb5bd; background: #f7f9fc; opacity: 0.7; }

.slot-rec-rank {
	flex: 0 0 48px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #eef2f7;
	color: #1c4e80;
	font-weight: 700;
	border: 1px solid #d9e2ec;
}
.slot-rec-rank-pct  { font-size: 0.9rem; line-height: 1; }
.slot-rec-rank-lbl  { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; margin-top: 1px; color: #6c7a89; }
.slot-rec-lane.s-pendiente .slot-rec-rank { background: #d6e6f5; color: #1c4e80; border-color: #1c4e80; }

.slot-rec-item {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.slot-rec-item .code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.86rem;
	color: #1c4e80;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slot-rec-item .desc {
	font-size: 0.78rem;
	color: #2a3d4f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}
.slot-rec-item .code a.slot-rec-code-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted transparent;
	transition: border-bottom-color 0.12s ease;
}
.slot-rec-item .code a.slot-rec-code-link:hover { border-bottom-color: #1c4e80; }
.slot-rec-item .razones {
	font-size: 0.72rem;
	color: #6c7a89;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-style: italic;
}

.slot-rec-mover {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.78rem;
	gap: 2px;
}
.slot-rec-mover .chip-actual   { background: #f7f9fc; color: #6c7a89; padding: 1px 6px; border-radius: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-rec-mover .chip-actual.is-empty { background: #fff3cd; color: #856404; font-style: italic; }
.slot-rec-mover .arrow         { font-size: 0.85rem; color: #1c4e80; }
.slot-rec-mover .chip-sugerido { background: #d6e6f5; color: #1c4e80; padding: 1px 6px; border-radius: 4px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.slot-rec-badge {
	flex: 0 0 auto;
	min-width: 80px;
	text-align: center;
}
.slot-rec-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
	min-width: 140px;
	justify-content: flex-end;
}
.slot-rec-actions .btn { padding: 3px 9px; font-size: 0.78rem; }

/* Modal-like overlay para el motivo de descarte */
.slot-rec-discard-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 200; /* Capa Top de módulo: overlay sobre fixed-top-* (100/101) */
	display: none;
	align-items: center;
	justify-content: center;
}
.slot-rec-discard-overlay.is-open { display: flex; }
.slot-rec-discard-box {
	background: #ffffff;
	border-radius: 8px;
	padding: 16px 20px;
	max-width: 480px;
	width: 90%;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.slot-rec-discard-box h6 { margin-bottom: 8px; }
.slot-rec-discard-box textarea { width: 100%; min-height: 80px; }

/* ----- Aplicación masiva de recomendaciones (Fase 5 Ola 1) -----
   Bulk-bar sticky con contador en vivo + atajos de selección rápida + botón Aplicar.
   Aparece debajo de los filtros cuando el estado activo es Pendiente. */
.slot-bulk-bar {
	position: sticky;
	top: 0;
	z-index: 8;
	background: #f0f7ff;
	border: 1px solid #d6e6f5;
	border-left: 4px solid #1c4e80;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	box-shadow: 0 1px 3px rgba(28,78,128,0.08);
}
.slot-bulk-bar .sbb-count {
	font-size: 0.85rem;
	color: #1c4e80;
	font-weight: 700;
	min-width: 140px;
}
.slot-bulk-bar .sbb-quick {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.slot-bulk-bar .sbb-quick .btn { padding: 3px 9px; font-size: 0.78rem; }
.slot-bulk-bar .sbb-apply {
	margin-left: auto;
}
.slot-bulk-bar .sbb-apply .btn { padding: 4px 12px; font-size: 0.82rem; }

/* Celda del checkbox dentro de slot-rec-lane. Aparece a la izquierda del rank.
   MDB oculta el input nativo y dibuja el círculo a través de .custom-control-label::before;
   el wrapper .custom-control de MDB trae padding-left para el círculo y min-height para el
   label de &nbsp;. Aquí ajustamos ancho y posición para que el círculo quede centrado en la
   lane (40px de alto). */
.slot-rec-check {
	flex: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slot-rec-check .custom-control {
	min-height: 1.25rem;
	padding-left: 1.25rem;
	margin: 0;
}
.slot-rec-check .custom-control-label { line-height: 1.25rem; }
.slot-rec-check .custom-control-label::before,
.slot-rec-check .custom-control-label::after {
	top: 0.125rem;
}

/* Banner de resultado de un lote ya procesado. Mismo lenguaje visual que slot-insight pero
   con paleta amber para el caso mixto y verde para el caso 100% aplicado. */
.slot-bulk-result {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid #d6e6f5;
	border-left-width: 4px;
	margin-bottom: 10px;
	background: #f5fbf5;
}
.slot-bulk-result.v-ok   { background: #f5fbf5; border-color: #28a745; }
.slot-bulk-result.v-info { background: #f0f7ff; border-color: #1c4e80; }
.slot-bulk-result.v-warn { background: #fff8e1; border-color: #e0a800; }
.slot-bulk-result .sbr-icon { font-size: 1.4rem; color: #1c4e80; flex: 0 0 auto; margin-top: 2px; }
.slot-bulk-result.v-ok   .sbr-icon { color: #28a745; }
.slot-bulk-result.v-warn .sbr-icon { color: #b8860b; }
.slot-bulk-result .sbr-body { flex: 1 1 auto; font-size: 0.85rem; color: #2a3d4f; }
.slot-bulk-result .sbr-head { margin-bottom: 2px; }

/* ----- Badge "Conteo" para lanes que provienen de señal de inventario (Fase 5 Ola 2) ----- */
.slot-rec-tag-conteo {
	display: inline-block;
	background: #fff3cd;
	color: #856404;
	border: 1px solid #e0a800;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
	vertical-align: middle;
}

/* ----- Chip "Inestable Nx" — cross-link al reporte de inestables (Fase 5 Ola 3) ----- */
.slot-rec-tag-inestable {
	display: inline-block;
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #c12a3a;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 1px 6px;
	border-radius: 3px;
	margin-left: 4px;
	vertical-align: middle;
}
.slot-rec-tag-inestable:hover { background: #f5c2c7; }

/* ----- Historial de ubicaciones (Fase 5 Ola 2, bodega_slotting-historial.php) -----
   Fragmento que se carga en #dialog-message-form. Compacto, ~9rem por fila. */
.slot-hist-wrap { font-size: 0.85rem; color: #2a3d4f; }
.slot-hist-list { display: flex; flex-direction: column; gap: 4px; }
.slot-hist-row {
	border: 1px solid #d9e2ec;
	border-radius: 6px;
	padding: 6px 10px;
	background: #ffffff;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.slot-hist-row .hist-origen {
	flex: 0 0 100px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 4px;
	text-align: center;
}
.slot-hist-row .hist-origen.v-inv    { background: #fff3cd; color: #856404; border: 1px solid #e0a800; }
.slot-hist-row .hist-origen.v-motor  { background: #d6e6f5; color: #1c4e80; border: 1px solid #1c4e80; }
.slot-hist-row .hist-origen.v-manual { background: #e9ecef; color: #495057; border: 1px solid #adb5bd; }
.slot-hist-row .hist-transicion {
	flex: 1 1 auto;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.8rem;
	min-width: 0;
}
.slot-hist-row .hist-transicion .hist-chip {
	background: #f7f9fc;
	color: #6c7a89;
	padding: 1px 6px;
	border-radius: 3px;
	display: inline-block;
}
.slot-hist-row .hist-transicion .hist-chip.is-new   { background: #d6e6f5; color: #1c4e80; font-weight: 700; }
.slot-hist-row .hist-transicion .hist-chip.is-empty { background: #fff3cd; color: #856404; font-style: italic; }
.slot-hist-row .hist-meta {
	flex: 0 0 auto;
	font-size: 0.74rem;
	color: #6c7a89;
}

/* ----- Lanes del reporte de inestables (Fase 5 Ola 3, bodega_slotting-inestables.php) -----
   Mismo lenguaje visual que slot-rec-lane pero con avatar de cambios coloreado por severidad,
   trayectoria de chips encadenados en el centro y acciones a la derecha. */
.slot-inest-lane {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left: 3px solid #d4a017;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 50px;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	transition: box-shadow 0.12s ease;
}
.slot-inest-lane:hover { box-shadow: 0 0 0 2px rgba(212,160,23,0.18); }

.slot-inest-rank {
	flex: 0 0 56px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	border: 1px solid;
}
.slot-inest-rank.is-medio   { background: #fff3cd; color: #856404; border-color: #e0a800; }
.slot-inest-rank.is-alto    { background: #fde2cf; color: #8a4a18; border-color: #d4691e; }
.slot-inest-rank.is-critico { background: #f8d7da; color: #721c24; border-color: #c12a3a; }
.slot-inest-rank-n   { font-size: 1.1rem; line-height: 1; }
.slot-inest-rank-lbl { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; margin-top: 2px; }

.slot-inest-item {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.slot-inest-item .code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.86rem;
	color: #1c4e80;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slot-inest-item .desc {
	font-size: 0.78rem;
	color: #2a3d4f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}
.slot-inest-item .meta {
	font-size: 0.72rem;
	color: #6c7a89;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.slot-inest-trail {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 340px;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.74rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slot-inest-trail .trail-chip {
	background: #f7f9fc;
	color: #6c7a89;
	padding: 1px 5px;
	border-radius: 3px;
	display: inline-block;
}
.slot-inest-trail .trail-chip.is-new {
	background: #d6e6f5;
	color: #1c4e80;
	font-weight: 700;
}

.slot-inest-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 4px;
	min-width: 150px;
	justify-content: flex-end;
}
.slot-inest-actions .btn { padding: 3px 9px; font-size: 0.78rem; }

/* ----- Dashboard ejecutivo (Fase 6 Ola 1, bodega_slotting-dashboard.php) -----
   Cards de paneles (sparkline + barras), tabla de distribución por zona y mini-bar chart. */
.slot-dash-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 12px;
	margin-top: 12px;
}
.slot-dash-card {
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-radius: 8px;
	overflow: hidden;
}
.slot-dash-card-head {
	background: #f7f9fc;
	padding: 8px 12px;
	border-bottom: 1px solid #d9e2ec;
	font-size: 0.85rem;
	color: #2a3d4f;
	display: flex;
	align-items: center;
}
.slot-dash-card-head b { color: #1c4e80; }
.slot-dash-card-body { padding: 10px 12px; }

/* Mini-bar chart de 6 meses con stack aplicadas/descartadas. */
.slot-dash-bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	height: 110px;
	padding: 0 6px;
}
.slot-dash-bars .bar-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
.slot-dash-bars .bar-stack {
	width: 26px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: #f0f3f7;
	border-radius: 3px 3px 0 0;
}
.slot-dash-bars .bar-ap { background: #1c4e80; }
.slot-dash-bars .bar-dc { background: #adb5bd; }
.slot-dash-bars .bar-label { font-size: 0.7rem; color: #6c7a89; margin-top: 4px; }
.slot-dash-bars .bar-total { font-size: 0.72rem; color: #1c4e80; font-weight: 700; }
.slot-dash-legend {
	display: flex;
	justify-content: center;
	gap: 16px;
	font-size: 0.74rem;
	color: #6c7a89;
	margin-top: 6px;
}
.slot-dash-legend .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 4px;
	vertical-align: middle;
}
.slot-dash-legend .bar-ap { background: #1c4e80; }
.slot-dash-legend .bar-dc { background: #adb5bd; }

/* Tabla de distribución por zona */
.slot-dash-zona th {
	font-size: 0.74rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	border-bottom: 1px solid #d9e2ec;
	padding: 4px 6px;
}
.slot-dash-zona td {
	padding: 4px 6px;
	border-bottom: 1px solid #eef2f7;
	font-size: 0.85rem;
}
.slot-dash-zona tr:last-child td { border-bottom: none; }
.slot-dash-zona-bar {
	height: 8px;
	background: #f0f3f7;
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
	max-width: 260px;
}
.slot-dash-zona-bar .zb-fill {
	height: 100%;
	background: linear-gradient(to right, #1c4e80, #4a90c2);
}

/* ----- Detalle por SKU (Fase 6 Ola 3, bodega_slotting-sku.php) ----- */
.slot-sku-hero {
	background: linear-gradient(135deg, #f7f9fc 0%, #eef2f7 100%);
	border: 1px solid #d9e2ec;
	border-left: 4px solid #1c4e80;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 12px;
}
.slot-sku-hero .ssh-code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 1.1rem;
	color: #1c4e80;
	font-weight: 700;
	line-height: 1.2;
}
.slot-sku-hero .ssh-desc {
	font-size: 0.9rem;
	color: #2a3d4f;
	margin-top: 4px;
	margin-bottom: 6px;
}
.slot-sku-hero .ssh-meta {
	font-size: 0.8rem;
	color: #6c7a89;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}
.slot-sku-hero .ssh-meta b { color: #1c4e80; }

.slot-hero-meta {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.78rem;
	color: #2a3d4f;
}
.slot-hero-meta b { color: #1c4e80; }

/* Lane de asociaciones. Similar a slot-vel-lane pero con barra de fuerza de asociación. */
.slot-asoc-lane {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 3px;
	border-left-color: #fd7e14;
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 4px;
	min-height: 44px;
	transition: box-shadow 0.12s ease;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.slot-asoc-lane:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }

.slot-asoc-rank {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff3cd;
	color: #856404;
	font-weight: 700;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d4a017;
}

.slot-asoc-strength {
	flex: 0 0 160px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.slot-asoc-strength-bar {
	height: 6px;
	border-radius: 3px;
	background: #f0f4f8;
	overflow: hidden;
	border: 1px solid #e6edf3;
}
.slot-asoc-strength-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(to right, #fd7e14, #d63384);
	transition: width 0.25s ease;
}
.slot-asoc-strength-val {
	font-size: 0.7rem;
	color: #6c7a89;
	text-align: center;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* Dropdown flotante de sugerencias del buscador de asociación. */
.slot-search-wrap { position: relative; }
.slot-search-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 200; /* Capa Top de módulo: dropdown sobre fixed-top-* (100/101) */
	background: #ffffff;
	border: 1px solid #c9deef;
	border-top: none;
	border-radius: 0 0 6px 6px;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 6px 14px rgba(0,0,0,0.08);
	display: none;
}
.slot-search-dropdown.is-open { display: block; }
.slot-search-dropdown .sd-item {
	display: block;
	padding: 6px 10px;
	border-bottom: 1px solid #e6edf3;
	font-size: 0.82rem;
	cursor: pointer;
	color: #2a3d4f;
	text-decoration: none;
}
.slot-search-dropdown .sd-item:hover {
	background: #eef7ff;
	color: #1c4e80;
	text-decoration: none;
}
.slot-search-dropdown .sd-item b { color: #1c4e80; }
.slot-search-dropdown .sd-empty {
	padding: 10px;
	font-size: 0.82rem;
	color: #6c7a89;
	text-align: center;
}

/* =====================================================================================================
   Pre-Ventas Activas — Vista "Moderna" (pre_facturacion-moderno.php).
   Tarjetas tipo lane con borde por antigüedad, stat cards de filtro y chips de estado.
   Sigue el patrón de `invlane-*` / `invconc-stat-*`; reutiliza el paginador genérico `.inv-pager`.
   ===================================================================================================== */

/* Ancho fijo, igual que la vista Clásica (.view_table = 1260px). */
.predoc-wrap { width: 1260px; }

/* ----- Stat cards (filtros rápidos por estado) ----- */
/* El número de columnas lo fija cada módulo inline (grid-template-columns) según cuántas
   stat cards tenga; así un mismo CSS sirve a módulos con distinta cantidad. */
.predoc-stat-row {
	display: grid;
	gap: 6px;
}
.predoc-stat {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 8px 6px;
	text-align: center;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
	user-select: none;
}
.predoc-stat:hover { background: #eef2f7; border-color: #c9d6e2; }
.predoc-stat:active { transform: scale(0.98); }
.predoc-stat.is-active {
	background: #eef7ff;
	border-color: #1c4e80;
	box-shadow: inset 0 0 0 1px #1c4e80;
}
.predoc-stat-icon { font-size: 1.1rem; color: #6c7a89; line-height: 1; }
.predoc-stat.is-active .predoc-stat-icon { color: #1c4e80; }
.predoc-stat-count {
	font-size: 1.3rem;
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.1;
	margin-top: 2px;
}
.predoc-stat-label {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin-top: 2px;
}
/* Acento de color por tipo de stat card cuando está activo */
.predoc-stat.stat-lock.is-active   { background: #f4f4f6; border-color: #6c757d; box-shadow: inset 0 0 0 1px #6c757d; }
.predoc-stat.stat-lock.is-active   .predoc-stat-icon { color: #6c757d; }
.predoc-stat.stat-aut.is-active    { background: #fff8ec; border-color: #d39e00; box-shadow: inset 0 0 0 1px #d39e00; }
.predoc-stat.stat-aut.is-active    .predoc-stat-icon { color: #d39e00; }
.predoc-stat.stat-vencer.is-active { background: #fff5f5; border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
.predoc-stat.stat-vencer.is-active .predoc-stat-icon { color: #c0392b; }
.predoc-stat.stat-prio2.is-active { background: #fff5f5; border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
.predoc-stat.stat-prio2.is-active .predoc-stat-icon { color: #c0392b; }
.predoc-stat.stat-prio1.is-active { background: #fff8ec; border-color: #d39e00; box-shadow: inset 0 0 0 1px #d39e00; }
.predoc-stat.stat-prio1.is-active .predoc-stat-icon { color: #d39e00; }

/* ----- Tarjeta de Pre-Venta ----- */
.predoc-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #d9e2ec;
	border-left-width: 4px;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.predoc-item:hover { box-shadow: 0 0 0 2px rgba(122,152,183,0.18); }

/* Borde lateral por antigüedad */
.predoc-item.predoc-edad-new    { border-left-color: #28a745; }
.predoc-item.predoc-edad-normal { border-left-color: #1c4e80; }
.predoc-item.predoc-edad-warn   { border-left-color: #fd7e14; }
.predoc-item.predoc-edad-urgent { border-left-color: #dc3545; }

.predoc-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.predoc-avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: #6c7a89;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px #d9e2ec;
	cursor: pointer;
	transition: transform 0.1s ease;
}
.predoc-avatar:hover { transform: scale(1.08); }
.predoc-avatar i { font-size: 1.2rem; }
.predoc-avatar.predoc-edad-new    { background: #28a745; }
.predoc-avatar.predoc-edad-normal { background: #1c4e80; }
.predoc-avatar.predoc-edad-warn   { background: #fd7e14; }
.predoc-avatar.predoc-edad-urgent { background: #dc3545; }

.predoc-info {
	flex: 1 1 320px;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.predoc-info-title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2d3d;
}
.predoc-id {
	display: inline-block;
	background: #eef2f7;
	color: #1c4e80;
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 6px;
	margin-right: 6px;
	vertical-align: 1px;
}
.predoc-id.is-base { background: #1c4e80; color: #ffffff; }

.predoc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
}
.predoc-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 10px;
	background: #eef2f7;
	color: #4a5568;
	border: 1px solid #dce3ea;
}
.predoc-chip i { font-size: 0.85em; }
.predoc-chip.chip-lock    { background: #f1f1f3; color: #495057; border-color: #d6d8db; }
.predoc-chip.chip-cron    { background: #e7f3fb; color: #1c5e88; border-color: #c2e0f0; }
.predoc-chip.chip-orden   { background: #eef2f7; color: #41566b; border-color: #d4dde6; }
.predoc-chip.chip-bo      { background: #fdeede; color: #8a5008; border-color: #f3d6b0; }
.predoc-chip.chip-alisto  { background: #e9f7ee; color: #1e7a3d; border-color: #c4e7d0; }
.predoc-chip.chip-aut     { background: #fff3d6; color: #8a6300; border-color: #f0d99a; }
.predoc-chip.chip-aut-act { background: #ffe9b8; color: #7a4f00; border-color: #e6bf6b; box-shadow: 0 0 0 1px #e6bf6b; }
.predoc-chip.chip-ok      { background: #e3f6e8; color: #1c7a37; border-color: #bce3c6; }
.predoc-chip.chip-ia      { background: #cffafe; color: #0e7490; border-color: #a5eef5; }
.predoc-chip.chip-ia-pend { background: #ffe3cc; color: #9a4a00; border-color: #f0c49a; box-shadow: 0 0 0 1px #f0c49a; }
.predoc-chip.chip-prio-alta  { background: #fde2e2; color: #b32a2a; border-color: #f0b8b8; }
.predoc-chip.chip-prio-media { background: #fff3d6; color: #8a6300; border-color: #f0d99a; }

/* ----- Pre-Ajustes: colores por dirección del movimiento ----- */
.predoc-item.predoc-dir-in   { border-left-color: #28a745; }
.predoc-item.predoc-dir-out  { border-left-color: #dc3545; }
.predoc-item.predoc-dir-tras { border-left-color: #1c4e80; }
.predoc-item.predoc-dir-pack { border-left-color: #8b5cf6; }
.predoc-avatar.predoc-dir-in   { background: #28a745; }
.predoc-avatar.predoc-dir-out  { background: #dc3545; }
.predoc-avatar.predoc-dir-tras { background: #1c4e80; }
.predoc-avatar.predoc-dir-pack { background: #8b5cf6; }
.predoc-chip.chip-dir-in   { background: #e9f7ee; color: #1e7a3d; border-color: #c4e7d0; }
.predoc-chip.chip-dir-out  { background: #fde2e2; color: #b32a2a; border-color: #f0b8b8; }
.predoc-chip.chip-dir-tras { background: #e7f0fb; color: #1c4e80; border-color: #c2d6ec; }
.predoc-chip.chip-dir-pack { background: #f0ebfb; color: #5a3d96; border-color: #d8caf0; }

.predoc-info-meta {
	margin-top: 5px;
	font-size: 0.78rem;
	color: #5a6b7b;
	line-height: 1.6;
}
.predoc-info-meta i { color: #8693a2; }
.predoc-meta-sep { color: #c4cdd6; }

.predoc-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	margin-left: auto;
}
.predoc-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.predoc-actions .btn { white-space: nowrap; }

.predoc-age-badge {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 8px;
	background: #eef2f7;
	color: #4a5568;
	white-space: nowrap;
}
.predoc-age-badge.predoc-edad-new    { background: #e9f7ee; color: #1e7a3d; }
.predoc-age-badge.predoc-edad-normal { background: #eef2f7; color: #41566b; }
.predoc-age-badge.predoc-edad-warn   { background: #fdeede; color: #8a5008; }
.predoc-age-badge.predoc-edad-urgent { background: #fde2e2; color: #b32a2a; }
.predoc-age-venc { font-size: 0.68rem; font-weight: 600; opacity: 0.9; }

/* Métricas (Piezas, Líneas, Monto) */
.predoc-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e6edf3;
}
.predoc-metric {
	background: #f7f9fc;
	border: 1px solid #e6edf3;
	border-radius: 6px;
	padding: 4px 6px;
	text-align: center;
}
.predoc-metric-label {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.3;
}
.predoc-metric-value {
	font-size: 0.92rem;
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.3;
}
.predoc-metric.predoc-metric-money { background: #eef7ff; border-color: #c9deef; }
.predoc-metric.predoc-metric-money .predoc-metric-value { color: #1c4e80; }

/* Leyenda del footer */
.predoc-legend {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 600;
}
.predoc-legend.predoc-edad-new    { background: #e9f7ee; color: #1e7a3d; }
.predoc-legend.predoc-edad-normal { background: #eef2f7; color: #41566b; }
.predoc-legend.predoc-edad-warn   { background: #fdeede; color: #8a5008; }
.predoc-legend.predoc-edad-urgent { background: #fde2e2; color: #b32a2a; }

/* ----- Dashboard del día (KPIs + conversión) ----- */
.predoc-dash {
	border: 1px solid #d9e2ec;
	border-radius: 10px;
	background: #fbfcfe;
	margin-bottom: 14px;
	overflow: hidden;
}
.predoc-dash-head {
	background: #eef2f7;
	border-bottom: 1px solid #e0e7ee;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Variante del hero sin cuerpo de KPIs (solo el encabezado, p.ej. Pre-Ajustes). */
.predoc-dash-solo .predoc-dash-head { border-bottom: none; }
.predoc-dash-user {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
}
.predoc-dash-avatar {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: #1c4e80;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 1px #d9e2ec;
}
.predoc-dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.predoc-dash-greeting { line-height: 1.35; }
.predoc-dash-hello {
	font-size: 1rem;
	font-weight: 700;
	color: #1f2d3d;
}
.predoc-dash-sub {
	font-size: 0.8rem;
	color: #5a6b7b;
}
.predoc-dash-tag {
	flex: 0 0 auto;
	align-self: flex-end;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6c7a89;
}
.predoc-dash-body {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px;
}
.predoc-kpi {
	flex: 1 1 150px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 10px 12px;
}
.predoc-kpi-icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: #ffffff;
	background: #6c7a89;
}
.predoc-kpi.kpi-money .predoc-kpi-icon { background: #28a745; }
.predoc-kpi.kpi-count .predoc-kpi-icon { background: #1c4e80; }
.predoc-kpi.kpi-avg   .predoc-kpi-icon { background: #6f42c1; }
.predoc-kpi-value {
	font-size: 1.15rem;
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.15;
}
.predoc-kpi-label {
	font-size: 0.7rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	margin-top: 1px;
}

/* Panel de conversión del día */
.predoc-conv {
	flex: 2 1 360px;
	background: #ffffff;
	border: 1px solid #e6edf3;
	border-radius: 8px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
}
.predoc-conv-grid {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}
.predoc-conv-bars { flex: 1 1 auto; }
.predoc-conv-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 3px 0;
}
.predoc-conv-lbl {
	flex: 0 0 118px;
	font-size: 0.74rem;
	color: #5a6b7b;
}
.predoc-conv-track {
	flex: 1 1 auto;
	height: 14px;
	background: #eef2f7;
	border-radius: 7px;
	overflow: hidden;
}
.predoc-conv-fill {
	display: block;
	height: 100%;
	border-radius: 7px;
	min-width: 2px;
}
.predoc-conv-fill.fill-creadas  { background: #1c4e80; }
.predoc-conv-fill.fill-fact     { background: #28a745; }
.predoc-conv-fill.fill-abiertas { background: #fd7e14; }
.predoc-conv-num {
	flex: 0 0 34px;
	text-align: right;
	font-size: 0.86rem;
	font-weight: 700;
	color: #2a3d4f;
}
.predoc-conv-pct {
	flex: 0 0 auto;
	text-align: center;
	padding-left: 12px;
	border-left: 1px solid #e6edf3;
}
.predoc-conv-pct-num {
	font-size: 1.7rem;
	font-weight: 700;
	color: #1c4e80;
	line-height: 1;
}
.predoc-conv-pct-lbl {
	font-size: 0.66rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 2px;
	line-height: 1.1;
}
.predoc-conv-empty {
	width: 100%;
	text-align: center;
	color: #8693a2;
	font-size: 0.85rem;
	padding: 8px;
}

/* Wrapper responsive: ocupa todo el ancho disponible hasta el tope, usable en móvil */
.inv-captura-wrap { width: 100%; max-width: 1200px; }

/* Lista de últimas capturas con altura limitada para evitar scroll de página */
.inv-captura-lista {
	max-height: 360px;
	overflow-y: auto;
}

/* Capturas recientes — lista de tarjetas (reemplaza la tabla). Las tarjetas se apilan y
   encogen con cualquier ancho, sin imponer un piso de ancho a la pantalla de captura. */
.inv-cap-list { padding: 6px; }
.inv-cap-item {
	border: 1px solid #e6edf3;
	border-radius: 6px;
	background: #ffffff;
	padding: 7px 9px;
	margin-bottom: 6px;
}
.inv-cap-item:last-child { margin-bottom: 0; }
.inv-cap-item.is-reverted { opacity: 0.55; background: #f7f9fc; }
.inv-cap-item-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.inv-cap-item-cod { font-size: 0.95rem; font-weight: 700; }
.inv-cap-item-spacer { flex: 1 1 auto; }
.inv-cap-item-desc {
	margin-top: 2px;
	font-size: 0.88rem;
	color: #2a3d4f;
}
.inv-cap-item-meta {
	margin-top: 3px;
	font-size: 0.78rem;
	color: #6c7a89;
	line-height: 1.7;
}
.inv-cap-item-meta > span:not(:first-child)::before {
	content: "\00B7";
	margin: 0 6px;
	color: #c9d6e2;
}

/* Bloque "Última captura" — tarjeta destacada. Mismo concepto que las tarjetas de "Capturas
   recientes" (encabezado, descripción y datos debajo); se encoge a cualquier ancho. */
.inv-last-capture {
	background: #f0f7ff;
	border: 1px solid #c9deef;
	border-radius: 8px;
	padding: 8px 11px;
}
.inv-last-capture.is-empty {
	background: #ffffff;
	border-color: #e6edf3;
	border-style: dashed;
	color: #8693a2;
	font-style: italic;
	text-align: center;
	padding: 14px 11px;
}
.inv-last-capture-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.inv-last-capture-cod { font-size: 1.1rem; font-weight: 700; }
.inv-last-capture-desc {
	margin-top: 2px;
	font-size: 0.9rem;
	color: #2a3d4f;
}
.inv-last-capture-meta {
	margin-top: 3px;
	font-size: 0.82rem;
	color: #4a6178;
}
/* Badges del panel "Última captura": un poco más legibles que el tamaño Bootstrap por defecto */
.inv-last-capture .badge {
	font-size: 0.8rem;
	padding: 0.35em 0.6em;
}

/* Bloques mini de "Sesión actual" (versión compacta de invconc-stat, no clickeable) */
.inv-mini-stat-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}
.inv-mini-stat {
	background: #ffffff;
	border: 1px solid #e6edf3;
	border-radius: 6px;
	padding: 5px 6px;
	text-align: center;
}
.inv-mini-stat-icon { font-size: 0.9rem; color: #6c7a89; line-height: 1; }
.inv-mini-stat-value {
	font-size: 1rem;
	font-weight: 700;
	color: #2a3d4f;
	line-height: 1.15;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.inv-mini-stat-label {
	font-size: 0.62rem;
	color: #6c7a89;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.1;
	margin-top: 1px;
}
/* Pestañas de método de captura: ícono y texto algo más grandes que el default de nav-tabs */
#cap_tabs .nav-link {
	font-size: 1.05rem;
	font-weight: 600;
	padding: 0.65rem 0.5rem;
}
#cap_tabs .nav-link i {
	font-size: 1.25rem;
	vertical-align: -2px;
}
/* Input de archivo (custom-file): el botón nativo se corta con form-control-sm; el botón
   estilizado de Bootstrap se etiqueta en español y no se recorta. */
#captab_archivo .custom-file-label::after {
	content: "Examinar";
}
@media (max-width: 575.98px) {
	.inv-mini-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Viewport de la cámara: usa relación de aspecto y overlay para guía de escaneo */
.inv-camera-wrap {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0 auto 1rem;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}
.inv-camera-wrap video {
	width: 100%;
	height: auto;
	display: block;
}
/* Overlay con marco de guía (centrado, semitransparente) */
.inv-camera-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 30%;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: 4px;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
	pointer-events: none;
}

/* Responsive: en pantallas pequeñas la captura ocupa todo el ancho disponible */
@media (max-width: 767.98px) {
	.inv-captura-wrap { padding: 0 .5rem; }
	.inv-captura-lista { max-height: 240px; }
}

/* ================================================================================================== */
/* Mesa de Servicio / Helpdesk (soporte_*) — hilo de eventos del visor de ticket (sop-*)              */
/* ================================================================================================== */
.sop-thread { display: flex; flex-direction: column; gap: .55rem; }
.sop-event {
	border: 1px solid #e2e8f0;
	border-left: 4px solid var(--sop-accent, #64748b);
	border-radius: .4rem;
	background: #fff;
	padding: .5rem .7rem;
}
.sop-event-head { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #475569; margin-bottom: .25rem; }
.sop-event-head .sop-event-icon { color: var(--sop-accent, #64748b); }
.sop-event-author { font-weight: 600; color: #1e293b; }
.sop-event-time { margin-left: auto; color: #94a3b8; white-space: nowrap; }
.sop-event-body { font-size: .9rem; color: #0f172a; white-space: pre-wrap; word-break: break-word; }
.sop-event-body img { max-width: 100%; height: auto; border-radius: .3rem; margin: .25rem 0; }
.sop-vis-badge { font-size: .66rem; text-transform: uppercase; letter-spacing: .02em; padding: .05rem .4rem; border-radius: .3rem; color: #fff; white-space: nowrap; }
/* Evento de sistema (apertura / cambios de metadato sin cuerpo): tono apagado */
.sop-event.is-system { background: #f8fafc; border-left-style: dashed; }
.sop-event.is-system .sop-event-body { color: #64748b; font-style: italic; }
/* Composer de respuesta */
.sop-composer { border: 1px solid #e2e8f0; border-radius: .4rem; background: #f8fafc; padding: .6rem .7rem; }
.sop-composer textarea { resize: vertical; min-height: 90px; }
/* Editor enriquecido (contenteditable): acepta pegar/soltar imágenes que se insertan en línea */
.sop-editor { height: auto; min-height: 180px; max-height: 420px; overflow-y: auto; background: #fff; }
.sop-editor:empty:before { content: attr(data-ph); color: #94a3b8; }
.sop-editor:focus { outline: none; }
.sop-editor img.sop-inline-img { max-width: 220px; max-height: 220px; border-radius: .3rem; vertical-align: middle; margin: .15rem; border: 1px solid #e2e8f0; }
.sop-upload-status { font-size: .8rem; color: #2563eb; margin-top: .35rem; }
/* Imágenes inline en el hilo (más grandes, con cursor de zoom) */
.sop-event-body img.sop-inline-img { max-width: 280px; max-height: 280px; cursor: zoom-in; border: 1px solid #e2e8f0; border-radius: .3rem; margin: .2rem 0; display: inline-block; }
/* Adjunto-archivo en el hilo (evento tipo 'adjunto'): chip con ícono + nombre + ver/descargar */
.sop-file-chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; border: 1px solid #e2e8f0; border-radius: .4rem; background: #fff; padding: .4rem .6rem; margin: .15rem 0; }
.sop-file-chip .sop-file-icon { font-size: 1.5rem; color: #64748b; flex: 0 0 auto; }
.sop-file-chip .sop-file-name { font-size: .88rem; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-file-chip .sop-file-btn { flex: 0 0 auto; color: #475569; padding: .1rem .4rem; border-radius: .25rem; text-decoration: none; }
.sop-file-chip .sop-file-btn:hover { background: #e0e7ff; color: #1e3a8a; }
/* Input de archivo limpio (primitiva reutilizable): oculta el boton nativo "Elegir archivo" y deja un
   campo clickeable que muestra solo el nombre del archivo. Combinable con .form-control / -sm. */
.zx-file-input { cursor: pointer; color: #475569; line-height: 1.4; }
.zx-file-input::file-selector-button { display: none; }
.zx-file-input::-webkit-file-upload-button { display: none; }
.zx-file-input::-ms-browse { display: none; }
.zx-file-input:hover { border-color: #93c5fd; background: #f8fbff; }
.zx-file-input:focus { background: #fff; }
/* Eliminar registro del hilo (botón) + lápida del evento eliminado */
.sop-event-del { margin-left: .4rem; color: #cbd5e1; text-decoration: none; cursor: pointer; }
.sop-event-del:hover { color: #ef4444; }
.sop-event.is-deleted { background: #f8fafc; border-left-style: dotted; opacity: .9; }
.sop-event.is-deleted .sop-event-author { color: #94a3b8; font-weight: 500; text-decoration: line-through; }
.sop-deleted-note { color: #94a3b8; font-style: italic; font-size: .85rem; }

/* ---- Bandeja de tickets: una tarjeta por caso -----------------------------------------------------------
   Cabecera [disco de estado + número · asunto/cliente/asignación · botones + badges] sobre una línea
   divisoria; debajo, una fila de paneles informativos con el mismo patrón .zx-side-card del panel de
   webmaster (avatar + etiqueta/valor): SLA, Canal, Apertura y Última actividad. */
.sop-rows { display: flex; flex-direction: column; gap: .6rem; }
.sop-card {
	position: relative;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: .6rem;
	border-left: 4px solid var(--zx-accent, #6366f1);
	padding: .8rem .9rem;
	cursor: pointer;
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.sop-card-head { display: flex; align-items: flex-start; gap: .85rem; }
.sop-row-lead { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 58px; }
.sop-row-disc {
	position: relative;
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 1.05rem;
	background: var(--sop-est, #64748b);
	box-shadow: 0 4px 10px rgba(17,24,39,.12);
}
/* Aviso de contenido nuevo (última respuesta ajena al operador): punto rojo pulsante sobre el disco. */
.sop-new-dot {
	position: absolute;
	top: -2px; right: -2px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid #fff;
	box-shadow: 0 0 0 0 rgba(239,68,68,.7);
	animation: sop-new-pulse 1.5s ease-out infinite;
}
@keyframes sop-new-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
	70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
	100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) { .sop-new-dot { animation: none; } }
.sop-row-serie { font-family: monospace; font-weight: 700; font-size: .68rem; color: #64748b; white-space: nowrap; }
.sop-card-lines { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sop-card-title { font-weight: 600; color: #1f2d3d; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-card-sub { font-size: .82rem; color: #334155; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-card-sub .sop-muted { color: #94a3b8; }
.sop-card-assign { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .76rem; color: #6b7280; margin-top: .25rem; min-width: 0; }
.sop-card-assign > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-card-assign .sop-missing { color: #b0b7c3; font-style: italic; }
.sop-card-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.sop-row-actions { display: flex; gap: .3rem; flex-wrap: nowrap; }
/* Las badges NUNCA envuelven: forman una sola línea y fijan el ancho de la columna derecha. Quien cede el
   espacio es el título (y, si hace falta, el nombre de la empresa), que se recortan con "…". */
.sop-card-badges { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: .3rem; }
.sop-badge-est { color: #fff; font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: .3rem; white-space: nowrap; }
.sop-badge-soft { background: #fff; border: 1px solid #e2e8f0; color: #475569; font-size: .7rem; font-weight: 600; padding: .16rem .45rem; border-radius: .3rem; white-space: nowrap; }
.sop-badge-soft i { opacity: .85; }
.sop-card-divider { height: 1px; background: #e5e7eb; margin: .7rem 0 .65rem; }
.sop-card-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.sop-panel { padding: .45rem .55rem; gap: .5rem; align-items: center; background: #f8f9fa; }
.sop-panel .zx-avatar { box-shadow: none; }
.sop-panel .zx-card-stat { min-width: 0; }
.sop-panel .zx-card-stat .value { font-size: .85rem; color: #1f2d3d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .sop-card-panels { grid-template-columns: repeat(2, 1fr); } }

/* ===== Burbuja flotante de Chat (Chat Interno / Chat de Clientes) =========================================
   Colapsada al margen derecho mostrando SOLO el ícono, para no tapar el pie de página en pantallas no anchas.
   Se expande en :hover y, de forma temporal, cuando llega un aviso (scripts.js agrega la clase .cw-open y la
   retira a los segundos). El badge sobre el ícono avisa de mensajes sin leer aun estando colapsada. */
#chat_widget_float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 5000;
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 26px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	padding: 9px;
	cursor: pointer;
	transition: border-radius .28s ease, box-shadow .2s ease;
}
#chat_widget_float:hover,
#chat_widget_float.cw-open {
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}
#chat_widget_float .cw-icon {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: #1f2d3d;
}
#chat_widget_float .cw-badge {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #dc3545;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #ffffff;
}
#chat_widget_float.cw-alert .cw-icon { color: #dc3545; }
#chat_widget_float.cw-alert .cw-badge { animation: cw-pulse 1.6s ease-in-out infinite; }
@keyframes cw-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}
#chat_widget_float .cw-body {
	flex: 0 1 auto;
	max-width: 0;
	max-height: 0;                   /* colapsar también en alto: sin esto el preview envuelto estira la burbuja */
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .28s ease, max-height .28s ease, margin-left .28s ease;
}
#chat_widget_float:hover .cw-body,
#chat_widget_float.cw-open .cw-body {
	max-width: 240px;
	max-height: 200px;
	margin-left: 10px;
}
#chat_widget_float .cw-label { display: block; font-weight: 700; font-size: 13px; color: #1f2d3d; }
#chat_widget_float .cw-preview { margin-top: 4px; font-size: 11px; color: #495057; line-height: 1.25; white-space: normal; }
#chat_widget_float .cw-preview .cw-time { color: #6c757d; margin-top: 2px; }

/* Burbuja flotante de WhatsApp: mismo patrón visual que el widget de chat, en verde y apilada justo encima
   (comparte las clases internas cw-* y la animación cw-pulse). */
#whatsapp_widget_float {
	position: fixed;
	right: 16px;
	bottom: 78px;
	z-index: 5000;
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 26px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	padding: 9px;
	cursor: pointer;
	transition: border-radius .28s ease, box-shadow .2s ease;
}
#whatsapp_widget_float:hover,
#whatsapp_widget_float.cw-open {
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}
#whatsapp_widget_float .cw-icon {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #25d366;
}
#whatsapp_widget_float .cw-badge {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #dc3545;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #ffffff;
}
#whatsapp_widget_float.cw-alert .cw-icon { color: #128c7e; }
#whatsapp_widget_float.cw-alert .cw-badge { animation: cw-pulse 1.6s ease-in-out infinite; }
#whatsapp_widget_float .cw-body {
	flex: 0 1 auto;
	max-width: 0;
	max-height: 0;
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .28s ease, max-height .28s ease, margin-left .28s ease;
}
#whatsapp_widget_float:hover .cw-body,
#whatsapp_widget_float.cw-open .cw-body {
	max-width: 240px;
	max-height: 200px;
	margin-left: 10px;
}
#whatsapp_widget_float .cw-label { display: block; font-weight: 700; font-size: 13px; color: #1f2d3d; }
#whatsapp_widget_float .cw-preview { margin-top: 4px; font-size: 11px; color: #495057; line-height: 1.25; white-space: normal; }
#whatsapp_widget_float .cw-preview .cw-time { color: #6c757d; margin-top: 2px; }


/*******************************************************************************
 * MODO ENFOQUE
 *******************************************************************************
 * Deja la pantalla al modulo que se esta usando: se retiran el encabezado, el
 * menu y el pie, y `main_div` ocupa todo. El menu vuelve como panel flotante
 * cuando se pide.
 *
 * Regla que sostiene todo esto: NO se crea un contenedor de scroll nuevo. El
 * documento sigue siendo el que hace scroll, porque varios modulos apoyan sus
 * encabezados pegajosos (position: sticky) en eso -- chat, alisto, autorizar y
 * captura de inventario -- y darle overflow propio a main_div los romperia.
 * Aqui solo se ocultan tres elementos y se recupera el margen superior.
 *
 * Capas: el control flotante comparte los 5000 del chat (esta en la otra
 * esquina) y el menu flotante sube a 6000, por debajo de los cajones (7001) y
 * del cargador (9000). Ver la tabla de z-index del sistema.
 *******************************************************************************/

.zx-focus-bar {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 5000;
	display: flex;
	gap: 8px;
	align-items: center;
}

.zx-focus-b {
	width: 38px;
	height: 38px;
	border: 1px solid #ced4da;
	border-radius: 50%;
	background: #ffffff;
	color: #495057;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	cursor: pointer;
	opacity: .55;
	transition: opacity .18s ease, transform .18s ease, color .18s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 15px;
}

.zx-focus-b:hover {
	opacity: 1;
	transform: translateY(-2px);
	color: #ffffff;
}

.zx-focus-b:focus { outline: none; opacity: 1; }

/* --- El modo, propiamente --------------------------------------------------- */

body.zx-focus #header_data,
body.zx-focus .sr-footer { display: none !important; }

/* El menu se queda: sube al tope de la ventana y ahi permanece, para que este
   siempre a mano sin tener que pedirlo. */
body.zx-focus #main_menu {
	margin-top: 0;
	top: 0;
	box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}

/* El contenido arranca justo debajo del menu, nunca por detras. La altura real
   la mide scripts.js al entrar --y en cada cambio de tamaño-- porque depende del
   tamaño de letra configurado y de si la barra se colapsa en pantallas angostas;
   el valor de respaldo cubre el caso normal. */
body.zx-focus .body_data { margin-top: var(--zx-menu-h, 42px); }

/* Dentro del modo, el modulo gana el alto que queda de ventana. */
body.zx-focus .main_div { min-height: calc(100vh - var(--zx-menu-h, 42px) - 8px); }

/* Aviso breve al entrar, para que nadie quede sin saber como volver. */
.zx-focus-hint {
	position: fixed;
	left: 16px;
	bottom: 62px;
	max-width: 320px;
	z-index: 6002;
	background: rgba(33,37,41,.92);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	padding: 8px 14px;
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}

.zx-focus-hint.on { opacity: 1; }

/* En impresion el modo no pinta nada: print_DIV ya extrae el contenido. */
@media print {
	.zx-focus-bar, .zx-focus-hint { display: none !important; }
}


/* ==========================================================================================================
   CRM — indicadores, tablas de informe y bandeja de prospectos
   ==========================================================================================================
   Estas clases nacieron dentro de `crm_embudo.php`, en un <style> al pie de la página. Funcionaba mientras
   fuera una sola pantalla, pero al llegar la segunda quedó un vínculo invisible: `crm_cartera.php` las usa y
   NO las define, así que se pintaba bien solo si el usuario había abierto antes el embudo --las pantallas se
   cargan por LINK_ajax dentro de `main_div`, y al reemplazar el contenido el <style> anterior se va con él--.
   Aquí no depende de por dónde entró nadie. */

/* --- Indicadores (KPI) --------------------------------------------------------------------------------- */
.emb-kpi-txt { min-width: 0; }
.emb-kpi-ico { flex-shrink: 0; }
.emb-kpi-val { font-size: 1.5rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.emb-kpi-val.money { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }

/* --- Tablas de informe --------------------------------------------------------------------------------- */
.emb-tabla td { vertical-align: middle; font-size: 12px; }
.emb-tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6c7a89; }
.emb-tabla td.text-right { font-variant-numeric: tabular-nums; }
.emb-serie { font-family: "Consolas","DejaVu Sans Mono",monospace; font-weight: 700; color: #1c4e80; }

/* --- Bandeja de prospectos ----------------------------------------------------------------------------- */
/* Cada prospecto es una fila-tarjeta, no una fila de tabla: lleva dentro dos líneas de datos y una barra de
   acciones, y forzar eso en celdas alineadas produce columnas medio vacías y texto apretado. */
.zxl-fila {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid #e6e9ee;
	border-left-width: 4px;
	border-radius: 4px;
	background: #fff;
	margin-bottom: 6px;
}

.zxl-fila.zxl-cerrado { background: #fbfcfd; }

/* El filo izquierdo es el semáforo del seguimiento: es lo único que hay que leer para saber qué toca hoy. */
.zxl-fila.zxl-vencido { border-left-color: #d9534f; }
.zxl-fila.zxl-hoy     { border-left-color: #f0ad4e; }
.zxl-fila.zxl-futuro  { border-left-color: #5bc0de; }
.zxl-fila.zxl-sinfecha{ border-left-color: #adb5bd; }
.zxl-fila.zxl-ganado  { border-left-color: #5cb85c; }
.zxl-fila.zxl-perdido { border-left-color: #ced4da; }

.zxl-cuerpo { flex: 1 1 auto; min-width: 0; padding: 7px 10px; }
.zxl-lado {
	flex: 0 0 226px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 7px 10px;
	border-left: 1px solid #eef1f5;
	background: #fafbfc;
}

.zxl-nombre { font-size: 13px; font-weight: 700; color: #2c3e50; line-height: 1.25; }
.zxl-empresa { font-size: 11px; color: #7b8794; }
.zxl-interes { font-size: 11.5px; color: #45535f; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }

/* Los datos de contacto, en una sola línea que se parte sola. */
.zxl-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.zxl-dato { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6c7a89; }
.zxl-dato i { color: #a3adb8; }
.zxl-dato b { color: #37474f; font-weight: 600; }
.zxl-dato.zxl-tel b { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* El plazo. Lleva el color del semáforo porque es el dato por el que está ordenada la bandeja. */
.zxl-plazo { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.zxl-plazo.zxl-t-vencido { color: #c9302c; }
.zxl-plazo.zxl-t-hoy     { color: #b06d0f; }
.zxl-plazo.zxl-t-futuro  { color: #31708f; }
.zxl-plazo.zxl-t-sin     { color: #8a939c; }

.zxl-acciones { display: flex; flex-wrap: wrap; gap: 4px; }
.zxl-acciones .btn { padding: 1px 7px; font-size: 11px; line-height: 1.5; }

.zxl-chip {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
	padding: 1px 7px; border-radius: 10px; white-space: nowrap;
}

.zxl-meta { font-size: 10.5px; color: #98a2ac; }

/* Bitácora del prospecto, dentro del panel de detalle. */
.zxl-log { list-style: none; margin: 0; padding: 0; }
.zxl-log li { display: flex; gap: 7px; padding: 4px 0; border-bottom: 1px dashed #eceff2; font-size: 11.5px; }
.zxl-log li:last-child { border-bottom: 0; }
.zxl-log .zxl-log-f { flex: none; width: 92px; color: #98a2ac; font-size: 10.5px; padding-top: 1px; }
.zxl-log .zxl-log-t { min-width: 0; color: #45535f; overflow-wrap: anywhere; }
.zxl-log .zxl-log-a { color: #7b8794; font-style: italic; }


/* --- Etiquetas del CRM --------------------------------------------------------------------------------- */
/* El chip se pinta con el color que le puso el usuario, así que el texto va en blanco con una sombra suave:
   es lo único que se lee bien sobre cualquier color que alguien elija, incluidos los claros. */
.crm-tag {
	display: inline-flex; align-items: center;
	font-size: 10px; font-weight: 700; letter-spacing: .02em;
	color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35);
	padding: 1px 7px; border-radius: 9px; white-space: nowrap;
	margin: 0 3px 3px 0;
}

/* --- Tablero de oportunidades -------------------------------------------------------------------------- */
/* Las columnas se desplazan en horizontal DENTRO de su caja, no arrastrando la página: un embudo de siete
   etapas no cabe en pantalla, y si el scroll fuera del documento se perderían de vista los filtros y los
   indicadores justo cuando se está comparando entre columnas. */
.zxo-board {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 6px;
	align-items: flex-start;
}

.zxo-col {
	/* Crece para repartirse el ancho disponible en vez de quedarse en 262 px con la pantalla sobrando a la
	   derecha; el tope de 420 evita que con dos o tres etapas las columnas se vuelvan franjas enormes. La
	   base sigue siendo 262: con muchas etapas el tablero desborda y scrollea, que es su comportamiento
	   correcto. Clases exclusivas de `crm_oportunidades.php`. */
	flex: 1 1 262px;
	max-width: 420px;
	background: #f4f6f8;
	border: 1px solid #e6e9ee;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	max-height: 640px;
}

.zxo-col-head {
	padding: 7px 9px 6px 9px;
	border-bottom: 1px solid #e6e9ee;
	border-top: 3px solid #adb5bd;   /* lo pisa el color de la etapa, en línea */
	border-radius: 3px 3px 0 0;
	background: #fff;
	flex: none;
}

.zxo-col-nom { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #37474f; }
.zxo-col-n { font-size: 10px; font-weight: 700; color: #8a939c; }
.zxo-col-monto { font-size: 12.5px; font-weight: 700; color: #1c4e80; font-variant-numeric: tabular-nums; }
.zxo-col-pond { font-size: 10px; color: #8a939c; font-variant-numeric: tabular-nums; }

/* La lista es la zona soltable. `min-height` para que una columna vacía siga aceptando tarjetas: sin eso
   no habría dónde soltar y el embudo se atascaría en la primera etapa que se vacía. */
.zxo-col-body {
	padding: 7px;
	overflow-y: auto;
	min-height: 90px;
	flex: 1 1 auto;
}

.zxo-card {
	background: #fff;
	border: 1px solid #e2e6eb;
	border-left: 3px solid #ced4da;
	border-radius: 4px;
	padding: 7px 8px;
	margin-bottom: 6px;
	cursor: grab;
}

.zxo-card:last-child { margin-bottom: 0; }
.zxo-card:hover { border-color: #b9c2cc; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.zxo-card.zxo-vencida { border-left-color: #d9534f; }
.zxo-card.zxo-hoy     { border-left-color: #f0ad4e; }
.zxo-card.zxo-abierta { border-left-color: #5bc0de; }
.zxo-card.zxo-sinfecha{ border-left-color: #adb5bd; }

.zxo-card-tit { font-size: 12px; font-weight: 700; color: #2c3e50; line-height: 1.3; overflow-wrap: anywhere; }
.zxo-card-tit a { color: #2c3e50; }
.zxo-card-tit a:hover { color: #1c4e80; }
.zxo-card-cli { font-size: 11px; color: #6c7a89; margin-top: 1px; overflow-wrap: anywhere; }
.zxo-card-monto { font-size: 13px; font-weight: 700; color: #1c4e80; font-variant-numeric: tabular-nums; }
.zxo-card-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.zxo-card-meta { font-size: 10px; color: #98a2ac; display: inline-flex; align-items: center; gap: 4px; }
.zxo-card-meta.zxo-t-vencida { color: #c9302c; font-weight: 700; }
.zxo-card-meta.zxo-t-hoy     { color: #b06d0f; font-weight: 700; }

/* Mientras se arrastra: el hueco que deja la tarjeta y el aspecto de la que va en la mano. */
.zxo-card.ui-sortable-helper { cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.18); transform: rotate(1.2deg); }
.zxo-hueco { background: #e9eef3; border: 1px dashed #9fb0c0; border-radius: 4px; margin-bottom: 6px; }
.zxo-col-body.zxo-recibiendo { background: #eef5fb; border-radius: 3px; }

.zxo-vacia { font-size: 11px; color: #a3adb8; text-align: center; padding: 14px 6px; }

/* Bitácora del negocio, en el panel de detalle. Comparte la forma con la del prospecto. */
.zxo-log { list-style: none; margin: 0; padding: 0; }
.zxo-log li { display: flex; gap: 7px; padding: 4px 0; border-bottom: 1px dashed #eceff2; font-size: 11.5px; }
.zxo-log li:last-child { border-bottom: 0; }
.zxo-log .zxo-log-f { flex: none; width: 92px; color: #98a2ac; font-size: 10.5px; padding-top: 1px; }
.zxo-log .zxo-log-t { min-width: 0; color: #45535f; overflow-wrap: anywhere; }
.zxo-log .zxo-log-a { color: #7b8794; font-style: italic; }

/* Catálogos de configuración (etapas y etiquetas). */
.zxo-conf-color { width: 46px; padding: 1px 3px; }
.zxo-conf-row td { vertical-align: middle; font-size: 12px; }