/* Sistema — capa de piel. Reasigna los componentes heredados (Bootstrap 4.5 en app.js, marcado con data-bs-* y data-toggle mezclados; SmartAdmin) a los tokens de sistema-tokens.css.
   PRIMERA PASADA: los selectores se tomaron de app.css y de las plantillas, pero no se probaron contra todas las pantallas.
   Orden de carga: app.min.css → sistema-tokens.css → sistema-skin.css. Si algo no cede, subir especificidad con "html body" en lugar de !important. */

html { font-size: var(--fs-body); }
body {
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif);
  font-size: var(--fs-body); line-height: var(--lh-body);
  background: var(--bg); color: var(--text);
}
h1, h2, h3, .panel-hdr h2, .page-logo-text {
  font-family: var(--font-display); font-weight: var(--display-weight);
}
/* Encabezados y sus clases (.h1….h6 se usan también en etiquetas y celdas): color de texto del tema.
   Antes cada plantilla les fijaba un azul oscuro en su propio <style>; sin esto no se leen en Oscuro. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text); }
.tn, table td, table th { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Estructura */
.page-wrapper, .page-content { background: var(--bg); color: var(--text); }
.page-sidebar { width: 17rem; background: var(--sb-bg); border-right: 1px solid var(--sb-border); }
.page-sidebar .nav-menu a, .page-sidebar .nav-menu a .nav-link-text { color: var(--sb-text); }
.page-sidebar .nav-menu a:hover { background: var(--sb-hover); color: var(--sb-text-active); }
.page-sidebar .nav-menu li.active > a, .page-sidebar .nav-menu li.open > a { color: var(--sb-text-active); background: var(--sb-active-bg); box-shadow: inset 3px 0 0 var(--sb-accent); }
.page-sidebar .nav-menu a :is(i, svg, .nav-icon) { color: var(--sb-icon); }
.page-sidebar .nav-title { color: var(--sb-section); }
.page-header { height: 4rem; background: var(--hd-bg); border-bottom: 1px solid var(--border); box-shadow: none; }
.page-logo { background: var(--sb-bg); border-bottom: 1px solid var(--sb-border); }

/* Paneles */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.panel-hdr { background: transparent; border-bottom: 1px solid var(--border); color: var(--text); }
.panel-hdr h2 { font-size: 18px; color: var(--text); }
.panel-container, .panel-content { background: transparent; color: var(--text); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }

/* Formularios */
.form-control, .form-select, .select2-container--default .select2-selection--single {
  height: 40px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: var(--fs-body);
}
textarea.form-control { height: auto; }
.form-control::placeholder { color: var(--text3); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.form-control.is-invalid, .form-select.is-invalid { border: 2px solid var(--danger); }
.invalid-feedback { color: var(--danger-text); font-size: 13px; }
.form-label, label { font-weight: 600; color: var(--text); }

/* Botones */
.btn { height: 40px; padding: 0 16px; border-radius: 8px; font-size: var(--fs-body); font-weight: 500; }
.btn-sm { height: 32px; padding: 0 12px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-default, .btn-secondary, .btn-outline-secondary { background: var(--surface); border: 1px solid var(--control-border); color: var(--text); }
.btn-default:hover, .btn-secondary:hover { background: var(--surface2); border-color: var(--border-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.text-primary, a { color: var(--primary-soft-text); }
.bg-primary { background: var(--primary) !important; }

/* Tablas */
.table { color: var(--text); border-color: var(--border); --bs-table-bg: transparent; --bs-table-hover-bg: var(--row-hover); }
.table > thead > tr > th { background: var(--surface2); color: var(--text2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border-strong); }
.table > tbody > tr > td { border-color: var(--border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--row-hover); }

/* Estados: píldora con ícono + texto. Con data-cvd="on" el ícono sustituye al punto. */
.s-pill { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border-radius: 999px; font-size: 13px; line-height: 20px; font-weight: 500; }
.s-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-pill .s-ico { display: none; width: 15px; height: 15px; }
html[data-cvd="on"] .s-pill::before { display: none; }
html[data-cvd="on"] .s-pill .s-ico { display: inline-block; }
.s-success { background: var(--success-soft); color: var(--success-text); }
.s-warning { background: var(--warning-soft); color: var(--warning-text); }
.s-danger  { background: var(--danger-soft);  color: var(--danger-text); }
.s-info    { background: var(--info-soft);    color: var(--info-text); }
.s-neutral { background: var(--neutral-soft); color: var(--neutral-text); }
.badge.bg-success { background: var(--success-soft) !important; color: var(--success-text); }
.badge.bg-warning { background: var(--warning-soft) !important; color: var(--warning-text); }
.badge.bg-danger  { background: var(--danger-soft)  !important; color: var(--danger-text); }
.badge.bg-info    { background: var(--info-soft)    !important; color: var(--info-text); }
/* Barras de progreso / producción: 8px y patrón en modo daltonismo */
.progress { height: 8px; background: transparent; border: 1px solid var(--control-border); border-radius: 4px; }
html[data-cvd="on"] .progress-bar.bg-success { background-image: var(--pat-success); }
html[data-cvd="on"] .progress-bar.bg-warning { background-image: var(--pat-warning); }
html[data-cvd="on"] .progress-bar.bg-danger  { background-image: var(--pat-danger); }
html[data-cvd="on"] .progress-bar.bg-info    { background-image: var(--pat-neutral); }

/* Alertas (siempre con ícono + texto) */
.alert { border-radius: 8px; border: 1px solid; }
.alert-success { background: var(--success-soft); color: var(--success-text); border-color: var(--success); }
.alert-info    { background: var(--info-soft);    color: var(--info-text);    border-color: var(--info); }
.alert-warning { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: var(--danger); }

/* Modales */
.modal-backdrop.show { background: var(--scrim); opacity: 1; }
.modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 48px rgba(0,0,0,.35); }
.modal-header, .modal-footer { border-color: var(--border); }

/* Retirar el filtro de escala de grises del modo daltonismo heredado */
.mod-color-blind, .mod-color-blind * { filter: none !important; }

/* ============ Refinado contra pantallas reales (desde 2026-10-08) ============ */

/* Lo estructural que base.tpl traía en línea y que el layout admin ya no hereda */
.alert.alert-danger.fade, .alert.alert-success.fade { opacity: 1; }
.page-content { padding: 1rem 2em; }
/* Encabezado y navegación fijos: lo heredado calcula con 16.875rem de menú y 4.125rem de encabezado;
   la piel usa 17rem y 4rem. Sin esto queda una raya del fondo heredado bajo el encabezado. */
.page-content-wrapper, .page-inner { background: var(--bg); }
.clx-fixed-header:not(.clx-navigation-type-top) .page-content { margin-top: 4rem; }
.clx-fixed-header:not(.clx-navigation-type-top):not(.clx-fixed-navigation) .page-sidebar .primary-nav { margin-top: 4rem; }
/* En móvil lo heredado cuelga una sombra (imagen) del encabezado fijo; la piel separa con borde. */
.mobile-view-activated.clx-fixed-header .page-header:after { display: none; }
@media (min-width: 992px) {
  .clx-fixed-header:not(.clx-navigation-type-top):not(.nav-function-minify):not(.nav-function-hidden) .page-header { margin-left: 17rem; }
  .clx-fixed-header:not(.clx-navigation-type-top):not(.clx-fixed-navigation):not(.nav-function-minify) .page-logo { width: 17rem; }
  .clx-fixed-navigation:not(.clx-navigation-type-top):not(.nav-function-hidden):not(.nav-function-minify) .page-content-wrapper { padding-left: 17rem; }
}
.table-bordered > thead > tr, .table-bordered > thead > tr > th { border-bottom-width: 0; border-top-width: 0; }
.table-bordered > tbody > tr:first-child { border-top-width: 0; }
.table > :not(:first-child) { border-top: none; }
.pristine-error.text-help { color: var(--danger-text); }

/* Marca y tarjeta de usuario del menú: sin imagen de portada, sobre el fondo del menú */
.page-logo { height: 4rem; padding: 0 1.5rem; box-shadow: none; }
.page-logo img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.page-logo .page-logo-text { color: var(--sb-text-active); font-size: 18px; font-weight: var(--display-weight); }
.page-sidebar .info-card { display: flex; align-items: center; gap: 12px; height: auto; padding: 16px 24px; background: transparent; border-bottom: 1px solid var(--sb-border); }
.page-sidebar .info-card .cover { display: none; }
.page-sidebar .info-card .profile-image { width: 36px; height: 36px; }
.page-sidebar .info-card .info-card-text, .page-sidebar .info-card .info-card-text a { color: var(--sb-text-active) !important; text-shadow: none; font-size: 14px; font-weight: 600; }

/* Menú lateral: filas de 40 px con radio, íconos del color del menú */
.page-sidebar .primary-nav, .page-sidebar .nav-menu, .page-sidebar .nav-menu ul { background: transparent; }
.page-sidebar .nav-menu { padding: 12px; }
.page-sidebar .nav-menu li a { border-radius: 8px; font-size: 14px; box-shadow: none; }
.page-sidebar .nav-menu > li > a { min-height: 40px; padding: 0 12px; gap: 12px; }
.page-sidebar .nav-menu li a > svg { width: 20px; height: 20px; flex: none; margin: 0; color: var(--sb-icon); }
.page-sidebar .nav-menu li a > svg [fill]:not([fill="none"]) { fill: currentColor; }
.page-sidebar .nav-menu li.active > a > svg, .page-sidebar .nav-menu li.open > a > svg { color: var(--sb-accent); }
.page-sidebar .nav-menu li.active > a, .page-sidebar .nav-menu li.open > a { font-weight: 600; box-shadow: none; }
.page-sidebar .nav-menu ul { padding: 2px 0 6px; }
.page-sidebar .nav-menu ul li a { min-height: 36px; padding: 0 12px 0 44px; color: var(--sb-text); }
.page-sidebar .nav-menu ul li.active > a { background: var(--sb-active-bg); color: var(--sb-text-active); }
.page-sidebar .nav-menu b.collapse-sign { color: var(--sb-icon); }

/* Pestañas */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { color: var(--text2); font-size: var(--fs-body); font-weight: 500; border: 0; border-bottom: 2px solid transparent; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active { color: var(--primary-soft-text); border-bottom-color: var(--primary); background: transparent; font-weight: 600; }

/* Botones semánticos que el diseño no usa como relleno: variante suave con el mismo significado */
.btn-success, .btn-info, .btn-warning { box-shadow: none; }
.btn-success { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.btn-info { background: var(--info-soft); border-color: var(--info); color: var(--info-text); }
.btn-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); }
.btn-primary, .btn-danger, .btn-default, .btn-secondary { box-shadow: none; }

/* Utilidades de color heredadas (antes con hex en base.tpl) */
.text-success { color: var(--success-text) !important; }
.text-danger, .text-danger:hover { color: var(--danger-text) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-info { color: var(--info-text) !important; }
.text-muted { color: var(--text2) !important; }
.text-dark { color: var(--text) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-white { background-color: var(--surface) !important; }

/* Tablas: el texto de las celdas sale del tema en todas las filas (Bootstrap 5 lo fijaba por variable) */
.table { --bs-table-color: var(--text); --bs-table-striped-color: var(--text); --bs-table-striped-bg: var(--surface2); --bs-table-hover-color: var(--text); --bs-table-active-color: var(--text); --bs-table-active-bg: var(--primary-soft); }
.table > tbody > tr > *, .table > tfoot > tr > * { color: var(--text); }
table.dataTable thead > tr > th, table.dataTable thead > tr > td { background-color: var(--surface2); color: var(--text2); }
.dt-buttons .btn, .dt-buttons .dt-button { color: var(--text); }

/* Opciones de radio y casilla: la etiqueta de la opción no va en negrita; la del campo sí */
label:has(> input[type="radio"]), label:has(> input[type="checkbox"]), .form-check-label, .custom-control-label { font-weight: 400; }

/* Íconos de la cabecera: del color del texto, no de un azul fijo */
.page-header .header-icon, .page-header .header-icon > svg, .page-header .header-icon > i { color: var(--text2); }
.page-header .header-icon svg [fill]:not([fill="none"]), .page-header .header-icon svg [stroke]:not([stroke="none"]) { fill: currentColor; stroke: none; }
.page-header .header-icon:hover, .page-header .header-icon:hover > svg { color: var(--text); }

/* Tablas: el encabezado no se parte en varias líneas */
.table > thead > tr > th { white-space: nowrap; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background: var(--surface2); color: var(--text); }

/* ==========================================================================
   Componentes compartidos (sx-…), extraídos del lienzo. Sólo tokens.
   ========================================================================== */
.s-pill .s-ico, .sx-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.sx-ic { width: 16px; height: 16px; }
.sx-tn { font-variant-numeric: tabular-nums; }
.sx-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Tarjeta de pantalla: cabecera con título y cuerpo */
.sx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); color: var(--text); }
.sx-card + .sx-card { margin-top: 24px; }
.sx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.sx-card__title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; line-height: 30px; letter-spacing: -0.01em; color: var(--text); }
.sx-card__note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19px; color: var(--text2); }
.sx-card__note .sx-ic { color: var(--success-text); }
.sx-card__note[data-state="error"], .sx-card__note[data-state="error"] .sx-ic { color: var(--danger-text); }
.sx-card__body { padding: 24px; }

/* Dos columnas que se apilan solas: contenido + panel lateral */
.sx-cols { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.sx-cols__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.sx-cols__side { flex: 0 1 360px; min-width: 280px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* Bloque con título de sección y texto de apoyo */
.sx-block__head { padding-bottom: 8px; }
.sx-h2 { margin: 0; font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.sx-hint { font-size: 13px; line-height: 19px; color: var(--text2); }

/* Interruptor (button role="switch") y su fila */
.sx-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 32px; }
.sx-rows--single { grid-template-columns: 1fr; }
.sx-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.sx-row__text { flex: 1 1 0; min-width: 0; }
.sx-row__label { display: block; margin: 0; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--text); }
.sx-row__control { flex: 0 0 auto; }
.sx-switch { flex: 0 0 auto; width: 48px; height: 28px; padding: 3px; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; border: 1px solid var(--control-border); background: var(--surface2); }
.sx-switch::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--control-border); }
.sx-switch[aria-checked="true"] { justify-content: flex-end; border-color: var(--primary); background: var(--primary); }
.sx-switch[aria-checked="true"]::before { background: var(--on-primary); }
.sx-switch:focus-visible, .sx-theme:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sx-switch[disabled] { opacity: .55; cursor: progress; }

/* Selector de tema: tarjetas con miniatura. Los colores de la miniatura son los del tema que representa, no los del tema activo. */
.sx-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sx-theme { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--text); border: 1px solid var(--border-strong); font: inherit; }
.sx-theme[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.sx-theme__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.sx-theme__name .sx-ic { width: 18px; height: 18px; color: var(--primary); stroke-width: 2.4; visibility: hidden; }
.sx-theme[aria-checked="true"] .sx-theme__name .sx-ic { visibility: visible; }
.sx-theme__tag { font-size: 13px; line-height: 18px; color: var(--text2); }
.sx-theme__pv { display: flex; height: 96px; margin-bottom: 8px; border-radius: 8px; overflow: hidden; border: 1px solid var(--pv-frame); }
.sx-theme__pv-side { width: 32%; background: var(--pv-side); padding: 8px 6px; display: flex; flex-direction: column; gap: 4px; }
.sx-theme__pv-side > i { height: 6px; border-radius: 3px; background: var(--pv-side-line); opacity: .55; }
.sx-theme__pv-side > i:first-child { background: var(--pv-side-accent); opacity: 1; }
.sx-theme__pv-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--pv-bg); }
.sx-theme__pv-bar { height: 14px; background: var(--pv-surface); border-bottom: 1px solid var(--pv-border); }
.sx-theme__pv-card { margin: 8px; padding: 6px; border-radius: 4px; background: var(--pv-surface); border: 1px solid var(--pv-border); display: flex; flex-direction: column; gap: 4px; }
.sx-theme__pv-card > i { height: 5px; width: 80%; border-radius: 3px; background: var(--pv-border); }
.sx-theme__pv-card > i:first-child { width: 55%; background: var(--pv-text); }
.sx-theme__pv-card > i:last-child { height: 10px; width: 36px; background: var(--pv-primary); }
.sx-theme[data-sx-theme="rosa"] { --pv-frame: #DDC6D4; --pv-side: #3E2253; --pv-side-accent: #F4A6C6; --pv-side-line: #E4D3EC; --pv-bg: #FAF3F6; --pv-surface: #FFFFFF; --pv-border: #EEDFE7; --pv-text: #2D1B36; --pv-primary: #B0306A; }
.sx-theme[data-sx-theme="oscuro"] { --pv-frame: #364050; --pv-side: #0A0D12; --pv-side-accent: #8E8CFF; --pv-side-line: #B6BFCD; --pv-bg: #0D1117; --pv-surface: #151B23; --pv-border: #262E3A; --pv-text: #E7EBF2; --pv-primary: #8E8CFF; }
.sx-theme[data-sx-theme="claro"] { --pv-frame: #CDD1E0; --pv-side: #FFFFFF; --pv-side-accent: #5B52E0; --pv-side-line: #3E4560; --pv-bg: #F4F5FA; --pv-surface: #FFFFFF; --pv-border: #E4E6F0; --pv-text: #1A1F36; --pv-primary: #5B52E0; }
.sx-theme[data-sx-theme="legacy"] { --pv-frame: #CED4DA; --pv-side: #1E1E2C; --pv-side-accent: #5E72E4; --pv-side-line: #A2A3B7; --pv-bg: #F0F2F7; --pv-surface: #FFFFFF; --pv-border: #E2E9EC; --pv-text: #32325D; --pv-primary: #5063DB; }
.sx-theme[data-sx-theme="taller"] { --pv-frame: #CBC0A6; --pv-side: #12332E; --pv-side-accent: #F2B134; --pv-side-line: #CFE0DA; --pv-bg: #F2EDE1; --pv-surface: #FFFDF8; --pv-border: #E0D8C5; --pv-text: #1D2420; --pv-primary: #0E6B5C; }

/* Barra de proporción por estado: 4 px; con daltonismo, 8 px y un patrón distinto por estado */
.sx-meter { display: flex; flex-direction: column; gap: 4px; }
.sx-meter__top { display: flex; justify-content: space-between; font-size: 13px; line-height: 19px; color: var(--text2); }
.sx-bar { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.sx-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--sx-bar-color, var(--text3)); }
.sx-bar--success { --sx-bar-color: var(--success); }
.sx-bar--warning { --sx-bar-color: var(--warning); }
.sx-bar--danger { --sx-bar-color: var(--danger); }
.sx-bar--info { --sx-bar-color: var(--info); }
html[data-cvd="on"] .sx-bar { height: 8px; }
html[data-cvd="on"] .sx-bar--success > i { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0 3px, transparent 3px 6px), var(--success); }
html[data-cvd="on"] .sx-bar--warning > i { background: repeating-linear-gradient(90deg, rgba(0,0,0,0.45) 0 2px, transparent 2px 5px), var(--warning); }
html[data-cvd="on"] .sx-bar--danger > i { background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.6) 0 3px, transparent 3px 6px), var(--danger); }
html[data-cvd="on"] .sx-bar--neutral > i { background: radial-gradient(rgba(255,255,255,0.75) 1.2px, transparent 1.6px) 0 0 / 6px 6px, var(--text3); }

/* Mostrar un texto u otro según el tema o el modo activo, sin JS */
html:not([data-cvd="on"]) .sx-if-cvd, html[data-cvd="on"] .sx-if-nocvd { display: none; }
html:not([data-theme="claro"]) .sx-if-claro, html:not([data-theme="rosa"]) .sx-if-rosa, html:not([data-theme="oscuro"]) .sx-if-oscuro, html:not([data-theme="taller"]) .sx-if-taller, html:not([data-theme="legacy"]) .sx-if-legacy { display: none; }

/* Acciones de cabecera y botones del diseño (40 px) */
.sx-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-card__body--stack { display: flex; flex-direction: column; gap: 24px; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; }
.sx-btn:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.sx-btn--primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); font-weight: 600; }
.sx-btn--primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); color: var(--on-primary); }
.sx-btn .sx-ic { width: 18px; height: 18px; stroke-width: 1.75; }
.sx-btn:focus-visible, .sx-tab:focus-visible, .sx-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Pestañas de sección: enlaces bajo la cabecera de la tarjeta */
.sx-tabs { padding: 0 24px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.sx-tabs__list { display: flex; gap: 24px; min-width: max-content; margin: 0; padding: 0; list-style: none; }
.sx-tab { display: flex; align-items: center; height: 48px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--text2); white-space: nowrap; text-decoration: none; }
.sx-tab:hover { color: var(--text); text-decoration: none; }
.sx-tab[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; color: var(--primary-soft-text); }

/* Tarjetas de totales por estado */
.sx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.sx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sx-stat__label { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19px; font-weight: 500; color: var(--text2); }
.sx-stat__label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sx-tone, var(--text3)); }
.sx-stat__label .s-ico { display: none; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; color: var(--sx-tone-text, var(--text2)); }
html[data-cvd="on"] .sx-stat__label::before { display: none; }
html[data-cvd="on"] .sx-stat__label .s-ico { display: inline-block; }
/* El importe mide 28 px como en el diseño y se encoge con la tarjeta para que un total largo no se parta */
.sx-stat { container-type: inline-size; }
.sx-stat__value { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; font-size: clamp(18px, 12cqi, 28px); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-stat__meta { font-size: 13px; line-height: 19px; color: var(--text2); }
.sx-stat .sx-bar { margin-top: 6px; }
.sx-tone--success { --sx-tone: var(--success); --sx-tone-text: var(--success-text); }
.sx-tone--info { --sx-tone: var(--info); --sx-tone-text: var(--info-text); }
.sx-tone--warning { --sx-tone: var(--warning); --sx-tone-text: var(--warning-text); }
.sx-tone--danger { --sx-tone: var(--danger); --sx-tone-text: var(--danger-text); }
.sx-tone--neutral { --sx-tone: var(--text3); --sx-tone-text: var(--neutral-text); }

/* Barra de filtros: campos con etiqueta encima, en una fila que se parte sola */
.sx-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sx-field { flex: 1 1 180px; max-width: 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-field > label { margin: 0; font-size: 13px; line-height: 19px; font-weight: 500; color: var(--text2); }
.sx-field > input, .sx-field > select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: 8px; background-color: var(--surface); color: var(--text); font-size: 14px; }
.sx-field .select2-container { width: 100% !important; }
.sx-field .select2-container .select2-selection--single { height: 40px; display: flex; align-items: center; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); }

/* Formularios: columnas de campos, etiqueta de 14 px en negrita, ayuda debajo */
.sx-stack { display: flex; flex-direction: column; gap: 24px; }
.sx-stack > .sx-card + .sx-card { margin-top: 0; }
/* Un select con .form-control pierde la flecha en Bootstrap 5: se la devuelve el navegador */
.sx-field > select.form-control, .sx-items select.form-control { appearance: auto; padding-right: 8px; }
.sx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; align-items: start; }
.sx-form-grid + .sx-form-grid { margin-top: 16px; }
.sx-form-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sx-form-grid .sx-field, .sx-field--wide { flex: none; max-width: none; gap: 8px; }
.sx-form-grid .sx-field label, .sx-field--wide label { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--text); margin: 0; }
.sx-field > textarea { width: 100%; }
.sx-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sx-field__top > a { font-size: 13px; line-height: 19px; color: var(--primary-soft-text); text-decoration: underline; }
.sx-field__opt { font-weight: 400; color: var(--text2); }
.sx-field__help { font-size: 13px; line-height: 19px; color: var(--text2); }
/* Campo que asigna el sistema: se ve, no se pulsa */
.sx-locked { pointer-events: none; background-color: var(--surface2) !important; color: var(--text2) !important; }
.sx-field > textarea[readonly] { background-color: var(--surface2); color: var(--text2); resize: none; }
.sx-card__title--sub { font-size: 20px; line-height: 28px; }
.sx-btn--danger { border-color: var(--danger); color: var(--danger-text); }
.sx-btn--danger:hover { background: var(--danger-soft); color: var(--danger-text); }

/* Alerta: borde y fondo suave del tono, texto del tono */
.sx-alert { padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface2); color: var(--text); font-size: 14px; line-height: 21px; }
.sx-alert--danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }

/* Tabla de artículos de la factura: celdas con campos. El marcado de las filas lo genera el script; aquí sólo se viste. */
.sx-items { width: 100%; min-width: 860px; margin: 0; border-collapse: collapse; }
.sx-items > thead > tr > th { padding: 10px 8px 6px; background: var(--surface2); border: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text2); white-space: nowrap; text-align: left; vertical-align: middle; }
.sx-items > thead > tr:last-child > th { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sx-items > thead > tr > th:first-child, .sx-items > tbody > tr > td:first-child { padding-left: 16px; }
.sx-items > thead > tr > th:last-child, .sx-items > tbody > tr > td:last-child { padding-right: 16px; }
.sx-items > tbody > tr > td { padding: 8px; border: 0; border-bottom: 1px solid var(--border); vertical-align: top; background: transparent; }
.sx-items > tbody > tr:last-child > td { border-bottom: 0; }
.sx-items > tbody > tr.info > td { background: var(--primary-soft); }
.sx-items .qty, .sx-items .item_price, .sx-items .item_discount, .sx-items .lvtotal, .sx-items .cgst, .sx-items .sgst, .sx-items .igst { text-align: right; font-variant-numeric: tabular-nums; }
.sx-items .lvtotal { border-color: transparent; background: transparent; box-shadow: none; font-weight: 600; color: var(--text); padding-right: 0; }
.sx-items textarea.item_name { min-height: 40px; }
.sx-items .radio-inline { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text2); cursor: pointer; }
.sx-items .radio-inline input { accent-color: var(--primary); }

/* Totales de la factura */
.sx-totals { width: 100%; border-collapse: collapse; }
.sx-totals td { padding: 5px 0; border: 0; font-size: 14px; line-height: 21px; color: var(--text2); background: transparent; }
.sx-totals td.amount, .sx-totals td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.sx-totals__total td { padding-top: 16px; border-top: 1px solid var(--border-strong); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); vertical-align: baseline; }
.sx-totals tr:nth-last-child(2) td { padding-bottom: 16px; }
.sx-totals__total td.amount { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; line-height: 36px; letter-spacing: -0.01em; text-transform: none; }

/* Productos del punto de venta dentro de la factura (los pinta el script como .pos_item) */
.sx-pos-items { row-gap: 8px; max-height: 460px; overflow-y: auto; padding: 2px 0; }
.sx-pos-items .pos_item img { max-width: 100%; height: 64px; object-fit: contain; }
.sx-pos-items .pos_item hr { margin: 8px 0; border: 0; border-top: 1px solid var(--border); opacity: 1; }
.sx-pos-items .pos_item { height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer; }
.sx-pos-items .pos_item:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-text); }

/* Tabla de datos del diseño: marco redondeado con desplazamiento horizontal, encabezado en versalitas, filas de 52 px */
.sx-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; background: var(--surface); }
.sx-table-wrap > .sx-table, .sx-table-wrap > table.dataTable.sx-table { margin: 0 !important; width: 100% !important; border: 0; border-collapse: collapse !important; }
.sx-table > thead > tr > th { height: 44px; padding: 0 12px; background: var(--surface2); border: 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text2); white-space: nowrap; vertical-align: middle; }
.sx-table > tbody > tr > td { height: 52px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; font-size: 14px; line-height: 21px; color: var(--text); white-space: nowrap; vertical-align: middle; }
.sx-table > tbody > tr:last-child > td { border-bottom: 0; }
.sx-table > tbody > tr:hover > td { background: var(--row-hover); }
.sx-table > thead > tr > th:first-child, .sx-table > tbody > tr > td:first-child { padding-left: 20px; }
.sx-table > thead > tr > th:last-child, .sx-table > tbody > tr > td:last-child { padding-right: 16px; }
.sx-table .sx-num { text-align: right; font-variant-numeric: tabular-nums; }
.sx-table .sx-muted { color: var(--text2); font-variant-numeric: tabular-nums; }
.sx-table .sx-wrap { white-space: normal; min-width: 180px; }
.sx-table__key { font-weight: 600; color: var(--primary-soft-text); font-variant-numeric: tabular-nums; text-decoration: none; }
.sx-table__main { font-weight: 500; color: var(--text); text-decoration: none; }
.sx-table__main:hover, .sx-table__key:hover { color: var(--primary-soft-text); text-decoration: underline; }
.sx-table__sub { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text2); }
.sx-table__actions { display: flex; justify-content: flex-end; gap: 2px; }
/* En pantallas muy anchas la columna de acciones se queda a la vista aunque la tabla se desplace.
   Por debajo de 1600 px no: con cinco acciones tapaba la columna de estado. */
@media (min-width: 1600px) {
  .sx-table > thead > tr > th.sx-table__pin, .sx-table > tbody > tr > td.sx-table__pin { position: sticky; right: 0; box-shadow: -1px 0 0 var(--border); }
  .sx-table > tbody > tr > td.sx-table__pin { background: var(--surface); }
  .sx-table > tbody > tr:hover > td.sx-table__pin { background: var(--row-hover); }
}
.sx-table__empty { height: 160px; text-align: center; color: var(--text2); }
table.dataTable.sx-table thead .sorting, table.dataTable.sx-table thead .sorting_asc, table.dataTable.sx-table thead .sorting_desc { background-color: var(--surface2); }
table.dataTable.sx-table > tbody > tr > td.sorting_1 { background-color: transparent; box-shadow: none; }
table.dataTable.sx-table > tbody > tr:hover > td.sorting_1 { background-color: var(--row-hover); }

/* Botón de sólo ícono, sin relleno (acciones de fila) */
.sx-icon-btn { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font-size: 15px; text-decoration: none; cursor: pointer; }
.sx-icon-btn:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.sx-icon-btn--danger:hover { background: var(--danger-soft); color: var(--danger-text); }

.sx-alert--success { border-color: var(--success); background: var(--success-soft); color: var(--success-text); }
.sx-btn--block { width: 100%; height: 44px; }
.sx-btn[disabled] { opacity: .6; cursor: progress; }

/* Páginas sin sesión (layouts/guest.tpl): marca a la izquierda, formulario a la derecha.
   Se sostienen solas: ahí no se carga app.min.css, así que el reinicio básico va aquí. */
.sx-guest, .sx-guest *, .sx-guest *::before, .sx-guest *::after { box-sizing: border-box; }
body.sx-guest { margin: 0; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 37fr); background: var(--bg); color: var(--text); font-size: 14px; line-height: 21px; }
.sx-guest p { margin: 0; }
.sx-guest__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px; background: var(--surface); border-right: 1px solid var(--border); }
.sx-guest__logo { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 22px; line-height: 30px; color: var(--primary-soft-text); text-decoration: none; }
.sx-guest__logo img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; }
.sx-guest__pitch { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.sx-guest__headline { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 36px; line-height: 44px; letter-spacing: -0.01em; color: var(--primary-soft-text); }
.sx-guest__lead { font-size: 16px; line-height: 24px; color: var(--text2); }
.sx-guest__foot { font-size: 13px; line-height: 19px; color: var(--text2); }
.sx-guest__main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.sx-guest__panel { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.sx-guest__title { margin: 0; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: var(--text); }
.sx-guest__sub { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--text2); }
.sx-guest__code { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 72px; line-height: 80px; color: var(--primary); font-variant-numeric: tabular-nums; }
.sx-guest__form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.sx-guest__link { font-size: 14px; font-weight: 500; color: var(--primary-soft-text); text-decoration: underline; }
.sx-guest .sx-field > input, .sx-guest .sx-field__reveal > input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.sx-guest .sx-field input:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Contraseña con botón para verla */
.sx-field__reveal { position: relative; display: flex; }
.sx-field__reveal > input { padding-right: 84px !important; }
.sx-field__reveal > button { position: absolute; top: 2px; right: 2px; bottom: 2px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--primary-soft-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
/* Avisos que llegan ya armados desde el servidor ($notify) */
.sx-guest .alert { margin: 0; padding: 12px 16px; border: 1px solid var(--warning); border-radius: 8px; background: var(--warning-soft); color: var(--warning-text); }
.sx-guest .alert-success { border-color: var(--success); background: var(--success-soft); color: var(--success-text); }
.sx-guest .alert .btn-close { display: none; }
@media (max-width: 860px) {
  body.sx-guest { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sx-guest__brand { padding: 20px 24px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sx-guest__pitch, .sx-guest__foot { display: none; }
  .sx-guest__main { align-items: flex-start; padding: 32px 24px; }
}

/* Cabecera de página de detalle: título, estado y datos en una línea, y barra de acciones */
.sx-page-head { display: flex; flex-direction: column; gap: 12px; }
.sx-page-head__title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: var(--text); }
.sx-page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; line-height: 21px; color: var(--text2); }
.sx-page-head__sub { margin: 0; font-size: 14px; line-height: 21px; color: var(--text); }
.sx-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sx-actions__form { display: inline-flex; margin: 0; }
.sx-actions .dropdown-toggle::after { margin-left: 2px; }
.sx-actions .dropdown-menu { padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.sx-actions .dropdown-menu .dropdown-item { padding: 0; border-radius: 6px; background: transparent; }
.sx-actions .dropdown-menu .dropdown-item > a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.sx-actions .dropdown-menu .dropdown-item > a:hover { background: var(--primary-soft); color: var(--primary-soft-text); }
.sx-tabs--flush { padding: 0; }
.sx-tabs { scroll-behavior: smooth; }

/* Detalle: contenido a la izquierda, tarjetas de resumen a la derecha */
.sx-detail { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sx-detail__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sx-detail__side { flex: 0 1 360px; min-width: 280px; display: flex; flex-direction: column; gap: 24px; }
.sx-detail .sx-card + .sx-card { margin-top: 0; }
.sx-detail .sx-card { scroll-margin-top: 88px; }
.sx-card--pad { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.sx-card--pad > p { margin: 0; }
.sx-card__head--compact { padding: 16px 24px; }
.sx-card__body--totals { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); }
.sx-card__body--totals .sx-totals { width: 100%; max-width: 320px; }
.sx-card__body--totals .sx-totals__total td.amount { font-size: 20px; line-height: 28px; }
.sx-table-wrap--flush { border: 0; border-radius: 0 0 12px 12px; }
.sx-card > .sx-table-wrap--flush:not(:last-child) { border-radius: 0; }
.sx-table > thead > tr > th:first-child, .sx-table > tbody > tr > td:first-child { padding-left: 24px; }
.sx-table-wrap--flush .sx-table > thead > tr > th:last-child, .sx-table-wrap--flush .sx-table > tbody > tr > td:last-child { padding-right: 24px; }
.sx-table > tbody > tr.sx-row--out > td { color: var(--text2); }
/* Conceptos de la factura: la descripción ocupa lo que sobra y se parte; los importes, a la derecha */
.sx-table.invoice-items > tbody > tr > td:nth-child(2) { white-space: normal; min-width: 240px; width: 100%; overflow-wrap: anywhere; }
.sx-table.invoice-items > thead > tr > th.text-center, .sx-table.invoice-items > tbody > tr > td.text-center { text-align: right !important; font-variant-numeric: tabular-nums; }
.sx-table.invoice-items > tbody > tr > td { height: auto; padding-top: 14px; padding-bottom: 14px; vertical-align: top; }
/* app.min.css subraya los enlaces con target que no son .btn; un sx-btn es un botón */
a.sx-btn, a.sx-btn:hover, a.sx-icon-btn, a.sx-btn[target]:not(.btn):not(.x), a.sx-icon-btn[target]:not(.btn):not(.x) { text-decoration: none !important; }
.sx-address { margin: 0; font-style: normal; font-size: 14px; line-height: 24px; color: var(--text2); }
.sx-address strong { color: var(--text); font-weight: 600; }
.sx-prose { font-size: 14px; line-height: 21px; color: var(--text); overflow-wrap: anywhere; }
.sx-prose > :last-child { margin-bottom: 0; }

/* Popup de pago (lo arma invoices.php, case 'add-payment', y se abre en fancybox) */
/* fancybox pone su clase fancybox-content en el propio elemento que llega por AJAX */
.sx-pay, .sx-pay.fancybox-content { width: 520px; max-width: calc(100% - 32px); padding: 0; border-radius: 16px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 21px; overflow: visible; }
.sx-pay__head { padding: 20px 56px 16px 24px; border-bottom: 1px solid var(--border); }
.sx-pay__title { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; line-height: 28px; color: var(--text); }
.sx-pay__sub { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--text2); font-variant-numeric: tabular-nums; }
.sx-pay__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.sx-pay__body > p { margin: 0; }
.sx-pay__ask { margin: 0 0 12px; color: var(--text2); }
.sx-pay__choices { display: flex; flex-direction: column; gap: 12px; }
.sx-pay__choice { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.sx-pay__choice > i { flex: none; width: 24px; font-size: 20px; text-align: center; }
.sx-pay__choice > span { display: flex; flex-direction: column; min-width: 0; }
.sx-pay__choice strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.sx-pay__choice small { font-size: 13px; line-height: 19px; color: var(--text2); }
.sx-pay__choice:hover { border-color: var(--primary); }
.sx-pay__choice:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sx-pay__choice--primary { border: 2px solid var(--primary); background: var(--primary-soft); color: var(--primary-soft-text); padding: 15px; }
.sx-pay__choice--primary small { color: var(--primary-soft-text); }
.sx-pay__form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.sx-pay__static { margin: 0; font-weight: 500; color: var(--text); }

/* ==========================================================================
   Menú lateral y cabecera del diseño
   ========================================================================== */
/* Ícono de trazo (partials/nav_icon.tpl) */
.sx-nav-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.page-sidebar .nav-menu li a > svg.sx-nav-ic { color: var(--sb-icon); }
.page-sidebar .nav-menu li a > svg.sx-nav-ic path { fill: none; }
.page-sidebar .nav-menu > li.active > a > svg.sx-nav-ic, .page-sidebar .nav-menu > li.open > a > svg.sx-nav-ic { color: var(--sb-accent); }

/* Un grupo abierto se distingue por el color, no por el fondo; el fondo es para la página actual */
.page-sidebar .nav-menu > li.open > a, .page-sidebar .nav-menu > li.active:has(> ul) > a { background: transparent; color: var(--sb-text-active); }
.page-sidebar .nav-menu > li.open > a .nav-link-text, .page-sidebar .nav-menu > li.active > a .nav-link-text { color: var(--sb-text-active); }
.page-sidebar .nav-menu > li > a:hover { background: var(--sb-hover); }
.page-sidebar .nav-menu > li > ul { margin: 2px 0 6px 21px; padding: 0 0 0 11px; border-left: 1px solid var(--sb-border); }
.page-sidebar .nav-menu > li > ul > li > a { min-height: 36px; padding: 0 12px; }
.page-sidebar .nav-menu ul li.active > a { background: var(--sb-active-bg); color: var(--sb-text-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--sb-accent); }
.page-sidebar .nav-menu ul li.active > a .nav-link-text { color: var(--sb-text-active); }

/* Avatar con iniciales (partials/avatar.tpl) */
.sx-avatar { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; background: var(--primary-soft); color: var(--primary-soft-text); font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: 0.02em; }
.sx-avatar--lg { width: 44px; height: 44px; font-size: 15px; }

/* Tarjeta de usuario sobre el menú */
.page-sidebar .sx-info-card { min-height: 0; }
.sx-info-card__text { display: flex; flex-direction: column; min-width: 0; }
.sx-info-card__name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sb-text-active); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sx-info-card__name:hover { color: var(--sb-text-active); text-decoration: underline; }
.sx-info-card__sub { font-size: 12px; line-height: 17px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En el menú lateral el fondo es el del menú, no el de la página: en Rosa y Taller --text2 no se lee ahí. */
.page-sidebar .sx-info-card__sub { color: var(--sb-section); }

/* Cabecera: botones de ícono y tarjeta de usuario */
.page-header { gap: 8px; padding-left: 16px; padding-right: 24px; }
.sx-header-tools { gap: 4px; }
.sx-header-btn { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text2); text-decoration: none; }
.sx-header-btn:hover, .sx-header-btn[aria-expanded="true"] { background: var(--surface2); color: var(--text); text-decoration: none; }
.sx-user-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: 8px; padding: 0 8px 0 4px; border-radius: 8px; color: var(--text); text-decoration: none; }
.sx-user-btn:hover, .sx-user-btn[aria-expanded="true"] { background: var(--surface2); color: var(--text); text-decoration: none; }
.sx-user-btn__name { font-size: 14px; font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-user-btn .sx-nav-ic { width: 16px; height: 16px; color: var(--text2); }
.sx-header-btn:focus-visible, .sx-user-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Menús desplegables de la cabecera */
.dropdown-menu.sx-menu { min-width: 260px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.12); overflow: hidden; }
.sx-menu__head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); }
.sx-menu__head--user { display: flex; align-items: center; gap: 12px; }
.sx-menu__foot { padding: 10px 16px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; }
.sx-menu__foot a { color: var(--primary-soft-text); font-weight: 500; }
.sx-menu .dropdown-item { padding: 10px 16px; color: var(--text); font-size: 14px; }
.sx-menu .dropdown-item:hover, .sx-menu .dropdown-item:focus { background: var(--primary-soft); color: var(--primary-soft-text); }
.sx-menu .dropdown-divider { border-color: var(--border); }

/* ==========================================================================
   Componentes transversales: alertas, vacíos, carga, errores de campo, confirmación
   ========================================================================== */
/* Alertas: ícono + texto. Vale para .sx-alert--tono y para los .alert-tono que ya arma el servidor ($notify).
   El ícono es una máscara pintada con el color del texto: no hay que tocar el marcado existente. */
.sx-alert, .page-content .alert { position: relative; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; line-height: 21px; }
/* Sólo la alerta nueva es flex: una .alert heredada puede traer varios bloques dentro */
.sx-alert { display: flex; align-items: flex-start; gap: 12px; }
.page-content .alert-dismissible { padding-right: 44px; }
.sx-stack > .sx-alert, .sx-guest .sx-alert, .sx-pay .sx-alert { margin: 0; }
.sx-alert--success, .sx-alert--info, .sx-alert--warning, .sx-alert--danger,
.page-content .alert-success, .page-content .alert-info, .page-content .alert-warning, .page-content .alert-danger { padding-left: 44px; }
.sx-alert--success::before, .sx-alert--info::before, .sx-alert--warning::before, .sx-alert--danger::before,
.page-content .alert-success::before, .page-content .alert-info::before, .page-content .alert-warning::before, .page-content .alert-danger::before { content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--sx-alert-icon) center / contain no-repeat; mask: var(--sx-alert-icon) center / contain no-repeat; }
.sx-alert--success, .page-content .alert-success { --sx-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sx-alert--info, .page-content .alert-info { --sx-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 8h.01'/%3E%3C/svg%3E"); border-color: var(--info); background: var(--info-soft); color: var(--info-text); }
.sx-alert--warning, .page-content .alert-warning { --sx-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20zM12 10v5M12 18h.01'/%3E%3C/svg%3E"); border-color: var(--warning); background: var(--warning-soft); color: var(--warning-text); }
.sx-alert--danger, .page-content .alert-danger { --sx-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.sx-alert__body { flex: 1 1 auto; min-width: 0; }
.sx-alert__body strong { font-weight: 600; }
.sx-alert ul { margin: 4px 0 0; padding-left: 18px; }
.sx-alert a { color: inherit; text-decoration: underline; }
.sx-alert__close { flex: none; width: 24px; height: 24px; margin: -1px -4px 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: inherit; opacity: .8; cursor: pointer; }
.sx-alert__close:hover { opacity: 1; background: rgba(127,127,127,0.16); }
.page-content .alert .btn-close { position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; padding: 0; border: 0; opacity: .8; color: inherit; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.page-content .alert .btn-close:hover { background: currentColor; }

/* Estado vacío */
.sx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }
.sx-empty__icon { width: 48px; height: 48px; margin-bottom: 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-soft-text); }
.sx-empty--search .sx-empty__icon { background: var(--neutral-soft); color: var(--neutral-text); }
.sx-empty__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.sx-empty__text { margin: 0 0 8px; max-width: 360px; font-size: 14px; line-height: 21px; color: var(--text2); }

/* Esqueleto de carga */
.sx-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sx-skeleton > i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 37%, var(--surface2) 63%); background-size: 400% 100%; animation: sx-skeleton 1.4s ease infinite; }
.sx-skeleton > i:nth-child(2) { width: 62%; }
.sx-skeleton > i:nth-child(3) { width: 78%; }
.sx-skeleton > i:nth-child(4) { width: 54%; }
.sx-skeleton > i:nth-child(5) { width: 70%; }
@keyframes sx-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
html[data-motion="reduced"] .sx-skeleton > i { animation: none; }
@media (prefers-reduced-motion: reduce) { .sx-skeleton > i { animation: none; } }

/* Error de campo: borde de 2 px y mensaje con ícono debajo.
   <div class="sx-field sx-field--error"> … <input aria-invalid="true" aria-describedby="x-err"> <span class="sx-field__error" id="x-err">…</span> */
.sx-field--error > input, .sx-field--error > select, .sx-field--error > textarea, .sx-field--error .select2-selection,
.sx-field [aria-invalid="true"] { border: 2px solid var(--danger) !important; }
.sx-field__error, .sx-field__ok { position: relative; padding-left: 22px; font-size: 13px; line-height: 19px; color: var(--danger-text); }
.sx-field__ok { color: var(--success-text); }
.sx-field__error::before, .sx-field__ok::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--sx-field-icon) center / contain no-repeat; mask: var(--sx-field-icon) center / contain no-repeat; }
.sx-field__error { --sx-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 8v5M12 16h.01'/%3E%3C/svg%3E"); }
.sx-field__ok { --sx-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sx-field__req { color: var(--danger-text); }

/* Cuadro de confirmación (bootbox.confirm, vestido por js/sistema-confirm.js) */
.sx-btn--danger-solid { border-color: var(--danger); background: var(--danger); color: var(--on-danger); font-weight: 600; }
.sx-btn--danger-solid:hover { border-color: var(--danger); background: var(--danger); color: var(--on-danger); filter: brightness(0.93); }
.sx-confirm .modal-dialog { max-width: 440px; }
.sx-confirm .modal-content { border-radius: 16px; }
.sx-confirm .modal-header { border: 0; padding: 12px 12px 0; }
.sx-confirm .modal-body { padding: 24px 24px 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }
.sx-confirm .bootbox-close-button { display: none; }
.sx-confirm .modal-footer { border: 0; padding: 16px 24px 24px; gap: 8px; justify-content: flex-end; }
.sx-confirm .modal-footer > * { margin: 0; }

/* Tablero */
.sx-dash-summary { margin-bottom: 24px; }
.sx-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sx-stats--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
/* Enlaces sin clase propia (y los que sólo llevan una de tamaño): color de enlace del tema, legible en oscuro */
.page-content a:not([class]), .page-content a.h5, .page-content a.h6 { color: var(--primary-soft-text); }
.page-content a:not([class]):hover, .page-content a.h5:hover, .page-content a.h6:hover { color: var(--primary); }
a.sx-stat--link { text-decoration: none; color: inherit; }
a.sx-stat--link:hover { border-color: var(--primary); text-decoration: none; }
a.sx-stat--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Tablas de los paneles del tablero: encabezado discreto, filas con línea, sin negritas de h6 */
.widget-table .table { margin: 0; color: var(--text); }
.widget-table .table th { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface2); font-size: 12px !important; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text2); white-space: normal; vertical-align: bottom; }
.widget-table .table th, .widget-table .table td { padding-left: 8px !important; padding-right: 8px !important; }
.widget-table .table .s-pill { white-space: nowrap; }
.widget-table .table td { padding: 12px; border: 0; border-bottom: 1px solid var(--border); font-size: 14px !important; line-height: 21px; font-weight: 400; color: var(--text); vertical-align: middle; }
.widget-table .table tr:last-child td { border-bottom: 0; }
.widget-table .table td.text-info, .widget-table .table td.text-info strong, .widget-table .table td a { color: var(--primary-soft-text) !important; font-weight: 600; }
.widget-table .table tr.clickable-row:hover td { background: var(--row-hover); }

/* Vistas de detalle de los plugins (status-view): conservan su panel; barra de acciones y estados del tema */
.panel-hdr .panel-toolbar .sx-actions { justify-content: flex-end; padding: 8px 0; }
.sx-btn--static { border-style: dashed; color: var(--text2); cursor: default; }
.sx-btn--static:hover { background: var(--surface); color: var(--text2); }
.sx-status-line { margin: 0 0 8px; }
.panel .sx-table { width: 100%; }
.panel .sx-table > thead > tr > th:first-child, .panel .sx-table > tbody > tr > td:first-child { padding-left: 12px; }

/* Piezas que estrenó Melipoint y sirven en cualquier pantalla de gestión */
.sx-tabs--page { margin-bottom: 24px; }
.sx-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.sx-card--narrow { max-width: 640px; }
.sx-card__actions--end { justify-content: flex-end; }
.sx-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sx-stat--alert { border-color: var(--danger); background: var(--danger-soft); }
/* Lista de datos: etiqueta pequeña arriba, valor abajo, en dos o tres columnas */
.sx-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; margin: 0; }
.sx-dl dt { font-size: 13px; line-height: 19px; font-weight: 500; color: var(--text2); }
.sx-dl dd { margin: 0; font-size: 14px; line-height: 21px; color: var(--text); overflow-wrap: anywhere; }
.sx-dl--box { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); }
.sx-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 21px; }
.sx-table > tbody > tr.sx-table__detail > td { height: auto; padding: 0; border-bottom: 0; white-space: normal; }
.sx-table > tbody > tr.sx-table__detail:hover > td { background: transparent; }
.sx-log { padding: 12px 24px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.sx-log pre { max-height: 300px; margin: 4px 0 12px; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-content code { color: var(--text); background: var(--surface2); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

/* Punto de aviso junto a un texto (p. ej. «tiene operador asignado») */
.sx-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--text3); vertical-align: middle; }
.sx-dot--success { background: var(--success); }
.sx-dot--warning { background: var(--warning); }
.sx-dot--danger { background: var(--danger); }

/* Vista previa de estados (Apariencia) */
.sx-preview__pills { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sx-preview__meters { display: flex; flex-direction: column; gap: 20px; padding-top: 12px; border-top: 1px solid var(--border); }
.sx-preview__foot { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19px; color: var(--text2); padding-top: 12px; border-top: 1px solid var(--border); }
.sx-preview__foot b { font-weight: 600; color: var(--text); }

/* Tarjetas de totales heredadas de los reportes (p-3 bg-<tono>-NNN rounded text-white): conservan su tono,
   pero con el fondo suave, el texto y el acento del tema. Antes: pastel fijo con número blanco. */
.page-content .p-3.rounded.text-white[class*="bg-"] { --sx-card-tone: var(--primary); --sx-card-soft: var(--primary-soft); --sx-card-text: var(--primary-soft-text);
  background: var(--sx-card-soft) !important; color: var(--text) !important; border: 1px solid var(--border); border-left: 4px solid var(--sx-card-tone); border-radius: 12px !important; }
.page-content .p-3.rounded.text-white[class*="bg-warning-"] { --sx-card-tone: var(--warning); --sx-card-soft: var(--warning-soft); --sx-card-text: var(--warning-text); }
.page-content .p-3.rounded.text-white[class*="bg-success-"] { --sx-card-tone: var(--success); --sx-card-soft: var(--success-soft); --sx-card-text: var(--success-text); }
.page-content .p-3.rounded.text-white[class*="bg-danger-"] { --sx-card-tone: var(--danger); --sx-card-soft: var(--danger-soft); --sx-card-text: var(--danger-text); }
.page-content .p-3.rounded.text-white[class*="bg-info-"] { --sx-card-tone: var(--info); --sx-card-soft: var(--info-soft); --sx-card-text: var(--info-text); }
.page-content .p-3.rounded.text-white[class*="bg-"] :is(h5, .display-4) { color: var(--text); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.page-content .p-3.rounded.text-white[class*="bg-"] small { display: block; margin-top: 4px; font-family: var(--font-body, inherit); font-size: 13px; font-weight: 500; color: var(--sx-card-text); }
.page-content .p-3.rounded.text-white[class*="bg-"] > div > i, .page-content .p-3.rounded.text-white[class*="bg-"] h5 ~ i { color: var(--sx-card-tone); opacity: .28; }

/* Alineación vertical (revisión de Miguel, 2026-10-09).
   - Botones: la piel les fija alto (40/32 px) y quita el relleno vertical, pero lo heredado los deja en
     inline-block con interlineado 1.5: texto e íconos quedaban pegados arriba. Se centra con el interlineado.
   - Encabezados de tabla: al centro, igual que las celdas. */
.btn { line-height: 38px; }
.btn-sm { line-height: 30px; }
.btn > svg { vertical-align: middle; }
.table > thead > tr > th { vertical-align: middle; }

/* Persona dentro de una tarjeta (p. ej. quién atendió una orden): avatar + nombre + correo, con los colores de la página. */
.sx-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sx-person__text { display: flex; flex-direction: column; min-width: 0; }
.sx-person__name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-person__sub { font-size: 12px; line-height: 17px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }