/*
 * COPYSIS — tema visual (diseños 01 claro / 02 oscuro)
 * Referencias: output/diseno-copysis/ · Reglas: AGENTS.md
 * Solo presentación: no depende de ni modifica JS existente.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --cs-brand-red: #ED1C24;
  --cs-brand-blue: #0000FF;

  --cs-bg: #F5F7FB;
  --cs-sidebar-bg: #FFFFFF;
  --cs-surface: #FFFFFF;
  --cs-surface-2: #F8FAFC;
  --cs-input-bg: #FFFFFF;
  --cs-readonly-bg: #F1F5F9;
  --cs-border: #E2E8F0;
  --cs-border-strong: #CBD5E1;

  --cs-text: #172033;
  --cs-text-muted: #64748B;
  --cs-text-subtle: #94A3B8;

  --cs-primary: #5281cc;
  --cs-primary-hover: #406cb2;
  --cs-primary-contrast: #FFFFFF;
  --cs-primary-soft: #EDF3FC;
  --cs-focus-ring: rgba(82, 129, 204, .24);

  --cs-sidebar-text: #334155;
  --cs-sidebar-icon: #475569;
  --cs-sidebar-hover: #F1F5F9;
  --cs-sidebar-active-bg: var(--cs-primary-soft);
  --cs-sidebar-active-text: #4271bc;
  --cs-sidebar-caption: #94A3B8;
  --cs-logo-plaque: transparent;

  --cs-info: #2F5BD3;
  --cs-info-soft: #EEF3FF;
  --cs-info-border: #D5E0FB;
  --cs-warning: #B45309;
  --cs-warning-soft: #FFF6E5;
  --cs-warning-border: #FBDDA6;
  --cs-success: #15803D;
  --cs-success-soft: #ECF8F0;
  --cs-success-border: #C7EBD3;
  --cs-danger: #C2353B;
  --cs-danger-soft: #FEF1F1;
  --cs-danger-border: #F7CFD1;
  --cs-neutral-soft: #F1F5F9;

  --cs-attention-bg: #F59E0B;
  --cs-attention-text: #1F1300;

  --cs-row-hover: #F8FAFC;
  --cs-row-stripe: #FBFCFE;
  --cs-row-selected: #E7EFFB;
  --cs-shadow-row: 0 4px 12px rgba(16, 24, 40, .08);

  --cs-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --cs-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14);

  --cs-radius: 10px;
  --cs-radius-sm: 8px;
  --cs-topbar-h: 64px;
  --cs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  color-scheme: light;
}

html[data-theme="dark"] {
  --cs-bg: #0B1120;
  --cs-sidebar-bg: #0F172A;
  --cs-surface: #151E30;
  --cs-surface-2: #111A2B;
  --cs-input-bg: #111A2B;
  --cs-readonly-bg: #1B263B;
  --cs-border: #2A3750;
  --cs-border-strong: #3A4A68;

  --cs-text: #E6EDF7;
  --cs-text-muted: #A7B4C9;
  --cs-text-subtle: #7C8BA5;

  --cs-primary: #818CF8;
  --cs-primary-hover: #A5B4FC;
  --cs-primary-contrast: #0B1120;
  --cs-primary-soft: rgba(129, 140, 248, .16);
  --cs-focus-ring: rgba(129, 140, 248, .35);

  --cs-sidebar-text: #CBD5E1;
  --cs-sidebar-icon: #A7B4C9;
  --cs-sidebar-hover: rgba(148, 163, 184, .08);
  --cs-sidebar-active-bg: rgba(129, 140, 248, .18);
  --cs-sidebar-active-text: #E6EDF7;
  --cs-sidebar-caption: #64748B;
  --cs-logo-plaque: #FFFFFF;

  --cs-info: #93B4FB;
  --cs-info-soft: rgba(96, 165, 250, .12);
  --cs-info-border: rgba(96, 165, 250, .35);
  --cs-warning: #FBBF24;
  --cs-warning-soft: rgba(251, 191, 36, .12);
  --cs-warning-border: rgba(251, 191, 36, .38);
  --cs-success: #4ADE9B;
  --cs-success-soft: rgba(52, 211, 153, .12);
  --cs-success-border: rgba(52, 211, 153, .35);
  --cs-danger: #F87171;
  --cs-danger-soft: rgba(248, 113, 113, .12);
  --cs-danger-border: rgba(248, 113, 113, .38);
  --cs-neutral-soft: rgba(148, 163, 184, .12);

  --cs-attention-bg: #FBBF24;
  --cs-attention-text: #1A1100;

  --cs-row-hover: #19243A;
  --cs-row-stripe: #172034;
  --cs-row-selected: #24324D;
  --cs-shadow-row: 0 4px 12px rgba(0, 0, 0, .24);

  --cs-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  --cs-shadow-pop: 0 16px 40px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body.cs-app {
  font-family: var(--cs-font);
  font-size: 14px;
  color: var(--cs-text);
  background: var(--cs-bg);
  -webkit-font-smoothing: antialiased;
}

body.cs-app a { color: var(--cs-primary); }
body.cs-app a:hover { color: var(--cs-primary-hover); }
body.cs-app hr { border-top-color: var(--cs-border); }
body.cs-app .text-muted { color: var(--cs-text-muted) !important; }
body.cs-app h1, body.cs-app h2, body.cs-app h3,
body.cs-app h4, body.cs-app h5, body.cs-app h6 { color: var(--cs-text); }

body.cs-app :focus-visible {
  outline: 2px solid var(--cs-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   3. Estructura AdminLTE
   ========================================================================== */

/* --- Barra superior --- */
body.cs-app .main-header.cs-topbar {
  min-height: var(--cs-topbar-h);
  padding: 0 24px 0 12px;
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
  gap: 12px;
}

body.cs-app .cs-topbar .nav-link {
  color: var(--cs-text-muted);
  height: auto;
}
body.cs-app .cs-topbar .nav-link:hover { color: var(--cs-text); }

.cs-topbar__toggle {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
}
.cs-topbar__toggle:hover { background: var(--cs-sidebar-hover); }

.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cs-text-muted);
  font-size: 14px;
  min-width: 0;
}
.cs-breadcrumb i { color: var(--cs-text-muted); font-size: 15px; }
.cs-breadcrumb a { color: var(--cs-text-muted) !important; }
.cs-breadcrumb a:hover { color: var(--cs-text) !important; }
.cs-breadcrumb__sep { color: var(--cs-text-subtle); }
.cs-breadcrumb__current { color: var(--cs-text); font-weight: 500; }
.cs-breadcrumb > * { white-space: nowrap; }
.cs-user span { white-space: nowrap; }
@media (max-width: 991.98px) {
  .cs-breadcrumb > :not(.cs-breadcrumb__current):not(i) { display: none; }
  .cs-user .d-md-inline { display: none !important; }
}

.cs-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.cs-divider-v {
  width: 1px;
  height: 28px;
  background: var(--cs-border);
}

.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-text) !important;
  font-weight: 500;
  white-space: nowrap;
}
.cs-pill:hover { border-color: var(--cs-border-strong); text-decoration: none; }
.cs-pill i { color: var(--cs-text-muted); }
body.cs-app .cs-pill span.sucursal { position: static; display: inline; color: var(--cs-text); }
.cs-pill .cs-pill__chevron { font-size: 11px; margin-left: 4px; }

/* Toggle de tema: sol · switch · luna */
.cs-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--cs-text-muted);
  cursor: pointer;
  border-radius: var(--cs-radius-sm);
}
.cs-theme-toggle i { font-size: 16px; transition: color .15s; }
.cs-theme-toggle__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--cs-border-strong);
  transition: background .2s;
}
.cs-theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.cs-theme-toggle[aria-checked="false"] .cs-theme-toggle__sun { color: var(--cs-warning); }
.cs-theme-toggle[aria-checked="true"] .cs-theme-toggle__moon { color: var(--cs-primary); }
.cs-theme-toggle[aria-checked="true"] .cs-theme-toggle__track { background: var(--cs-primary); }
.cs-theme-toggle[aria-checked="true"] .cs-theme-toggle__thumb { transform: translateX(18px); background: var(--cs-primary-contrast); }

/* Usuario */
.cs-user {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--cs-text) !important;
  font-weight: 500;
  padding: 4px 6px !important;
  border-radius: var(--cs-radius-sm);
}
.cs-user:hover { background: var(--cs-sidebar-hover); }
.cs-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}
.cs-user__chevron { font-size: 11px; color: var(--cs-text-muted); }

/* --- Menús desplegables --- */
body.cs-app .dropdown-menu {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-pop);
  padding: 6px;
  color: var(--cs-text);
}
body.cs-app .dropdown-item {
  color: var(--cs-text);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
body.cs-app .dropdown-item i { width: 16px; text-align: center; color: var(--cs-text-muted); }
body.cs-app .dropdown-item:hover,
body.cs-app .dropdown-item:focus { background: var(--cs-sidebar-hover); color: var(--cs-text); }
body.cs-app .dropdown-divider { border-top-color: var(--cs-border); margin: 6px 0; }
body.cs-app .dropdown-item.cs-menu__danger,
body.cs-app .dropdown-item.cs-menu__danger i { color: var(--cs-danger); }
body.cs-app .dropdown-item.cs-menu__danger:hover { background: var(--cs-danger-soft); }
.cs-menu__meta {
  display: block;
  padding: 6px 12px 8px;
  font-size: 12px;
  color: var(--cs-text-muted);
}
.cs-menu__meta strong { display: block; color: var(--cs-text); font-size: 14px; font-weight: 600; }
.cs-menu form { margin: 0; }
.cs-menu button.dropdown-item { width: 100%; border: 0; background: transparent; cursor: pointer; }

/* --- Sidebar --- */
body.cs-app .main-sidebar.cs-sidebar {
  background: var(--cs-sidebar-bg);
  border-right: 1px solid var(--cs-border);
  box-shadow: none;
}

body.cs-app .cs-sidebar .brand-link {
  display: flex;
  align-items: center;
  height: calc(var(--cs-topbar-h) + 24px);
  padding: 12px 18px;
  border-bottom: 0;
  background: var(--cs-sidebar-bg);
  overflow: hidden;
}
.cs-logo {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--cs-radius);
  background: var(--cs-logo-plaque);
}
.cs-logo img {
  display: block;
  width: 172px;
  height: auto;
}

body.cs-app .cs-sidebar .sidebar {
  height: calc(100% - (var(--cs-topbar-h) + 24px));
  padding: 4px 12px 24px;
}

body.cs-app .cs-sidebar .nav-sidebar .nav-header {
  padding: 16px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-sidebar-caption);
  background: transparent;
}

body.cs-app .cs-sidebar .nav-sidebar > .nav-item {
  margin-bottom: 2px;
}

body.cs-app .cs-sidebar .nav-sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--cs-sidebar-text);
  border-radius: var(--cs-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  box-shadow: none;
}
body.cs-app .cs-sidebar .nav-sidebar .nav-link p {
  flex: 1 1 auto;
  margin: 0;
  white-space: nowrap;
}
body.cs-app .cs-sidebar .nav-sidebar .nav-link .nav-icon,
body.cs-app .cs-sidebar .nav-sidebar .nav-treeview .nav-link > i {
  color: var(--cs-sidebar-icon);
  font-size: 16px;
  width: 22px;
  margin-right: 12px;
  text-align: center;
}
body.cs-app .cs-sidebar .nav-sidebar .nav-link p > .right {
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--cs-text-subtle);
}
body.cs-app .cs-sidebar .nav-sidebar .menu-open > .nav-link p > .right { transform: translateY(-50%) rotate(-90deg); }

body.cs-app .cs-sidebar .nav-sidebar .nav-link:hover,
body.cs-app .cs-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
  background: var(--cs-sidebar-hover);
  color: var(--cs-text);
}

body.cs-app .cs-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--cs-sidebar-active-bg);
  color: var(--cs-sidebar-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cs-primary);
}
body.cs-app .cs-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--cs-sidebar-active-text); }

/* Submenú */
body.cs-app .cs-sidebar .nav-treeview {
  padding: 2px 0 6px;
}
body.cs-app .cs-sidebar .nav-treeview > .nav-item > .nav-link {
  padding: 7px 12px 7px 22px;
  font-size: 13.5px !important;
  font-style: normal;
  font-weight: 400;
  color: var(--cs-text-muted);
}
body.cs-app .cs-sidebar .nav-treeview > .nav-item > .nav-link p {
  white-space: normal;
  line-height: 1.35;
}
body.cs-app .cs-sidebar .nav-treeview > .nav-item > .nav-link > i {
  font-size: 13px;
  width: 18px;
  margin-right: 10px;
  color: var(--cs-text-subtle);
}
body.cs-app .cs-sidebar .nav-treeview > .nav-item > .nav-link:hover { color: var(--cs-text); background: var(--cs-sidebar-hover); }
body.cs-app .cs-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: transparent;
  color: var(--cs-sidebar-active-text);
  font-weight: 600;
}
body.cs-app .cs-sidebar .nav-treeview > .nav-item > .nav-link.active > i { color: var(--cs-primary); }

/* Sidebar colapsado (sidebar-mini) */
body.cs-app.sidebar-collapse .main-sidebar.cs-sidebar:not(:hover) .brand-link { padding: 12px 10px; }
body.cs-app.sidebar-collapse .main-sidebar.cs-sidebar:not(:hover) .cs-logo { padding: 4px; }
body.cs-app.sidebar-collapse .main-sidebar.cs-sidebar:not(:hover) .cs-logo img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  object-position: left center;
}
body.cs-app.sidebar-collapse .main-sidebar.cs-sidebar:not(:hover) .sidebar { padding-left: 6px; padding-right: 6px; }
body.cs-app.sidebar-collapse .main-sidebar.cs-sidebar:not(:hover) .nav-treeview > .nav-item > .nav-link { padding-left: 12px; }

/* --- Contenido y pie --- */
body.cs-app .content-wrapper {
  background: var(--cs-bg);
  padding: 28px 32px 40px;
}
body.cs-app .main-footer {
  background: var(--cs-surface);
  border-top: 1px solid var(--cs-border);
  color: var(--cs-text-muted);
  font-size: 13px;
  padding: 14px 32px;
}
body.cs-app .main-footer strong { color: var(--cs-text); }

/* Encabezados heredados (páginas no migradas) */
body.cs-app .page-header {
  font-size: 26px;
  font-weight: 700;
  color: var(--cs-text);
  border-bottom: 0;
  margin: 0 0 6px;
  padding: 0;
}
body.cs-app .page-header small { color: var(--cs-text-muted); font-size: 60%; font-weight: 500; }
body.cs-app .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
  color: var(--cs-text-muted);
  font-size: 13px;
}
body.cs-app .breadcrumb > .active { color: var(--cs-text-muted); }

/* ==========================================================================
   4. Bootstrap / plugins (estilos base para todas las páginas)
   ========================================================================== */

/* Tarjetas y paneles */
body.cs-app .card,
body.cs-app .panel {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  color: var(--cs-text);
}
body.cs-app .card-header,
body.cs-app .panel-default > .panel-heading,
body.cs-app .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--cs-border);
  color: var(--cs-text);
  padding: 14px 20px;
}
body.cs-app .card-title,
body.cs-app .panel-title { font-size: 15px; font-weight: 600; color: var(--cs-text); }
body.cs-app .card-footer,
body.cs-app .panel-footer {
  background: var(--cs-surface-2);
  border-top: 1px solid var(--cs-border);
}

/* Tablas */
body.cs-app .table {
  color: var(--cs-text);
  font-size: 14px;
}
body.cs-app .table thead th,
body.cs-app .table thead td {
  background: var(--cs-surface-2);
  color: var(--cs-text);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--cs-border);
  border-top: 0;
  vertical-align: middle;
}
body.cs-app .table td,
body.cs-app .table th { border-top-color: var(--cs-border); }
body.cs-app .table-bordered,
body.cs-app .table-bordered td,
body.cs-app .table-bordered th { border-color: var(--cs-border); }
body.cs-app .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--cs-row-stripe) !important; }
body.cs-app .table-hover > tbody > tr:hover { background-color: var(--cs-row-hover) !important; color: var(--cs-text); }

/* Formularios */
body.cs-app label { color: var(--cs-text); font-weight: 500; font-size: 13px; }
body.cs-app .form-control,
body.cs-app .custom-select {
  background-color: var(--cs-input-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-text);
}
body.cs-app .form-control::placeholder { color: var(--cs-text-subtle); }
body.cs-app .form-control:focus,
body.cs-app .custom-select:focus {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
  background-color: var(--cs-input-bg);
  color: var(--cs-text);
}
body.cs-app .form-control:disabled,
body.cs-app .form-control[readonly] { background-color: var(--cs-readonly-bg); }
body.cs-app .is-invalid,
body.cs-app .form-control.is-invalid { border-color: var(--cs-danger) !important; }
body.cs-app .invalid-feedback { color: var(--cs-danger); }

/* Botones Bootstrap */
body.cs-app .btn { border-radius: var(--cs-radius-sm); font-weight: 500; }
body.cs-app .btn-primary {
  background: var(--cs-primary);
  border-color: var(--cs-primary);
  color: var(--cs-primary-contrast);
}
body.cs-app .btn-primary:hover,
body.cs-app .btn-primary:focus {
  background: var(--cs-primary-hover);
  border-color: var(--cs-primary-hover);
  color: var(--cs-primary-contrast);
}
body.cs-app .btn-secondary,
body.cs-app .btn-default {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-strong);
  color: var(--cs-text);
}
body.cs-app .btn-secondary:hover,
body.cs-app .btn-default:hover { background: var(--cs-surface-2); color: var(--cs-text); }

/* Alertas de sesión */
body.cs-app .alert {
  border-radius: var(--cs-radius);
  border: 1px solid transparent;
  padding: 12px 16px;
}
body.cs-app .alert-success { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }
body.cs-app .alert-danger { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); color: var(--cs-danger); }
body.cs-app .alert .close { color: inherit; opacity: .6; text-shadow: none; }

/* Modales */
body.cs-app .modal-content {
  background: var(--cs-surface);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  box-shadow: var(--cs-shadow-pop);
}
body.cs-app .modal-header,
body.cs-app .modal-footer { border-color: var(--cs-border); padding: 16px 20px; }
body.cs-app .modal-body { padding: 20px; }
body.cs-app .modal-title { font-size: 16px; font-weight: 600; }
body.cs-app .close { color: var(--cs-text); text-shadow: none; }

/* Paginación */
body.cs-app .page-link {
  background: var(--cs-surface);
  border-color: var(--cs-border);
  color: var(--cs-text);
}
body.cs-app .page-item.active .page-link {
  background: var(--cs-primary);
  border-color: var(--cs-primary);
  color: var(--cs-primary-contrast);
}
body.cs-app .page-item.disabled .page-link { background: var(--cs-surface); color: var(--cs-text-subtle); }

/* Select2 */
body.cs-app .select2-container--default .select2-selection--single,
body.cs-app .select2-container--default .select2-selection--multiple {
  background: var(--cs-input-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
}
body.cs-app .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--cs-text); }
body.cs-app .select2-dropdown {
  background: var(--cs-surface);
  border-color: var(--cs-border);
  color: var(--cs-text);
}
body.cs-app .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--cs-input-bg);
  border-color: var(--cs-border);
  color: var(--cs-text);
}
body.cs-app .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cs-primary);
  color: var(--cs-primary-contrast);
}

/* jQuery UI datepicker */
body.cs-app .ui-datepicker.ui-widget-content {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-pop);
  color: var(--cs-text);
  font-family: var(--cs-font);
}
body.cs-app .ui-datepicker .ui-widget-header {
  background: transparent;
  border: 0;
  color: var(--cs-text);
}
body.cs-app .ui-datepicker .ui-state-default {
  background: var(--cs-surface-2);
  border-color: var(--cs-border);
  color: var(--cs-text);
  border-radius: 6px;
  text-align: center;
}
body.cs-app .ui-datepicker .ui-state-highlight { border-color: var(--cs-primary); }
body.cs-app .ui-datepicker .ui-state-active {
  background: var(--cs-primary);
  border-color: var(--cs-primary);
  color: var(--cs-primary-contrast);
}

/* DataTables */
body.cs-app .dataTables_wrapper { color: var(--cs-text); }
body.cs-app .dataTables_wrapper .dataTables_filter input,
body.cs-app .dataTables_wrapper .dataTables_length select {
  background: var(--cs-input-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-text);
  padding: 4px 8px;
}
body.cs-app .dataTables_wrapper .dataTables_info,
body.cs-app .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--cs-text-muted) !important; }
body.cs-app .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary-contrast) !important;
  border-radius: 6px;
}
body.cs-app table.dataTable tbody tr { background-color: transparent; }
body.cs-app table.dataTable.no-footer { border-bottom-color: var(--cs-border); }

/* ==========================================================================
   5. Componentes cs-
   ========================================================================== */

/* Encabezado de página */
.cs-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
  margin-bottom: 24px;
}
.cs-page-header__intro { min-width: 200px; }
.cs-page-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cs-text);
}
.cs-page-subtitle {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--cs-text-muted);
}
.cs-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

/* Contadores compactos */
.cs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cs-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 140px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  color: var(--cs-text) !important;
  text-decoration: none !important;
  transition: background-color .2s, border-color .2s, color .2s;
}
a.cs-stat:hover { border-color: var(--cs-border-strong); }
.cs-stat__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  font-size: 18px;
}
.cs-stat__body { display: flex; flex-direction: column; line-height: 1.15; }
.cs-stat__value,
.cs-stat__value.huge {
  font-size: 24px;
  font-weight: 700;
  color: inherit;
}
.cs-stat__label { font-size: 12.5px; color: var(--cs-text-muted); margin-top: 2px; }

.cs-stat--info { background: var(--cs-info-soft); border-color: var(--cs-info-border); }
.cs-stat--info .cs-stat__icon { color: var(--cs-info); }
.cs-stat--warning { background: var(--cs-warning-soft); border-color: var(--cs-warning-border); }
.cs-stat--warning .cs-stat__icon { color: var(--cs-warning); }
.cs-stat--success { background: var(--cs-success-soft); border-color: var(--cs-success-border); }
.cs-stat--success .cs-stat__icon { color: var(--cs-success); }
.cs-stat--danger { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); }
.cs-stat--danger .cs-stat__icon { color: var(--cs-danger); }
html[data-theme="dark"] .cs-stat__icon { background: rgba(255, 255, 255, .04); }

/* Botones cs- */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--cs-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cs-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cs-focus-ring); }
.cs-btn--primary,
a.cs-btn--primary { background: var(--cs-primary); color: var(--cs-primary-contrast) !important; }
.cs-btn--primary:hover { background: var(--cs-primary-hover); }
.cs-btn--secondary,
a.cs-btn--secondary { background: var(--cs-surface); border-color: var(--cs-border-strong); color: var(--cs-primary) !important; }
.cs-btn--secondary:hover { border-color: var(--cs-primary); }
.cs-btn--ghost,
a.cs-btn--ghost { background: transparent; color: var(--cs-text-muted) !important; }
.cs-btn--ghost:hover { background: var(--cs-sidebar-hover); color: var(--cs-text) !important; }
.cs-btn--danger,
a.cs-btn--danger { background: var(--cs-surface); border-color: var(--cs-danger-border); color: var(--cs-danger) !important; }
.cs-btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.cs-btn--icon { width: 42px; padding: 0; }
.cs-btn--sm.cs-btn--icon { width: 34px; }

/* Tarjeta */
.cs-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  margin-bottom: 24px;
  overflow: hidden;
}
.cs-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-text);
}
.cs-card__title > i { color: var(--cs-text-muted); font-size: 15px; }
.cs-card__body { padding: 20px; }
.cs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: 12px;
  font-weight: 600;
}

.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-primary) !important;
  white-space: nowrap;
}
.cs-link i { font-size: 11px; transition: transform .15s; }
.cs-link:hover { text-decoration: none; }
.cs-link:hover i { transform: translateX(2px); }

.cs-section-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}

/* Accesos rápidos */
.cs-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.cs-actions + .cs-section-label { margin-top: 20px; }
.cs-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  color: var(--cs-text) !important;
  text-decoration: none !important;
  transition: border-color .15s, background-color .15s;
}
.cs-action:hover { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-action__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 17px;
}
.cs-action__text { display: flex; flex-direction: column; min-width: 0; }
.cs-action__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.cs-action__desc { font-size: 12.5px; color: var(--cs-text-muted); line-height: 1.3; margin-top: 2px; }
.cs-action--primary { border-color: var(--cs-primary); }
.cs-action--primary .cs-action__icon { background: var(--cs-primary); color: var(--cs-primary-contrast); }

/* Tabla cs- */
.cs-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--cs-text);
}
.cs-table thead th {
  padding: 11px 16px;
  background: var(--cs-surface-2);
  border-bottom: 1px solid var(--cs-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-text);
  text-align: left;
  white-space: nowrap;
}
.cs-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cs-border);
  vertical-align: middle;
}
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody tr:hover { background: var(--cs-row-hover); }
.cs-table .cs-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-table .cs-nowrap { white-space: nowrap; }
.cs-table__id { font-weight: 700; white-space: nowrap; }
.cs-table__primary { display: block; font-weight: 600; text-transform: uppercase; }
.cs-table__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-table__meta i,
.cs-table .cs-icon-muted { color: var(--cs-text-subtle); font-size: 12px; }
.cs-table__amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-table__notes { max-width: 320px; color: var(--cs-text-muted); }
.cs-empty {
  padding: 28px 16px !important;
  text-align: center;
  color: var(--cs-text-muted);
}
.cs-empty i { display: block; font-size: 22px; margin-bottom: 8px; color: var(--cs-text-subtle); }

/* Chips de estado */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.cs-badge--pending { background: var(--cs-warning-soft); border-color: var(--cs-warning-border); color: var(--cs-warning); }
.cs-badge--progress { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-badge--ready,
.cs-badge--delivered { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }
.cs-badge--danger { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); color: var(--cs-danger); }
.cs-badge--neutral { background: var(--cs-neutral-soft); border-color: var(--cs-border); color: var(--cs-text-muted); }

/* Modales cs- (complementos) */
.cs-modal__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-modal__note {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
  color: var(--cs-text-muted);
  font-size: 13px;
}
.cs-modal .info-orders hr,
.cs-modal .info-orders-delivery hr { border-top-color: var(--cs-border); }

/* Texto semántico */
.cs-text-danger { color: var(--cs-danger) !important; font-weight: 600; }
.cs-text-success { color: var(--cs-success) !important; font-weight: 600; }
.cs-text-subtle { color: var(--cs-text-subtle); }

/* Pie de tarjeta + paginación */
.cs-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--cs-border);
}
.cs-card__footer-info { font-size: 13px; color: var(--cs-text-muted); }
.cs-card__footer .pagination { margin: 0; flex-wrap: wrap; gap: 6px; }
.cs-card__footer .page-item .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: var(--cs-radius-sm) !important;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  transition: background-color .15s, border-color .15s;
}
.cs-card__footer .page-item .page-link:hover { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-card__footer .page-item.active .page-link:hover { background: var(--cs-primary); }

/* Filtros */
.cs-filters { padding: 20px; overflow: visible; }
.cs-filters form { margin: 0; }
.cs-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.cs-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.cs-field--wide { grid-column: span 2; }
body.cs-app .cs-field__label { font-size: 13px; font-weight: 500; color: var(--cs-text); margin: 0; }
body.cs-app .cs-field .form-control,
body.cs-app .cs-field select.form-control { height: 42px; font-size: 14px; }
.cs-input-icon { position: relative; display: block; }
.cs-input-icon > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-text-subtle);
  font-size: 14px;
  pointer-events: none;
}
body.cs-app .cs-input-icon > .form-control { padding-left: 40px; }
.cs-filters__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 16px;
}
.cs-filters__toggles { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.cs-filters__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Switch (checkbox nativo estilizado) */
.cs-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--cs-text);
  cursor: pointer;
  user-select: none;
}
.cs-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  border-radius: 999px;
  background: var(--cs-border-strong);
  transition: background-color .2s ease;
}
.cs-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.cs-switch__input:checked + .cs-switch__track { background: var(--cs-primary); }
.cs-switch__input:checked + .cs-switch__track::after { transform: translateX(16px); }
.cs-switch__input:focus-visible + .cs-switch__track { box-shadow: 0 0 0 3px var(--cs-focus-ring); }

/* Checkbox pequeño */
body.cs-app input[type="checkbox"].cs-check {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--cs-primary);
  cursor: pointer;
}

/* Tabs */
.cs-card__header--tabs { padding-top: 0; padding-bottom: 0; }
.cs-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -1px;
}
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 14px;
  border-bottom: 2px solid transparent;
  color: var(--cs-text-muted) !important;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.cs-tab:hover { color: var(--cs-text) !important; }
.cs-tab.is-active { color: var(--cs-primary) !important; border-bottom-color: var(--cs-primary); font-weight: 600; }

/* Acciones masivas */
.cs-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; }
.cs-bulk__hint { font-size: 12.5px; color: var(--cs-text-muted); }

/* Ordenamiento en cabeceras */
.cs-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cs-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.cs-sort i { font-size: 11px; color: var(--cs-text-subtle); transition: color .15s; }
.cs-sort:hover i,
.cs-sort.is-active i { color: var(--cs-primary); }
.cs-sort--sub {
  display: flex;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cs-text-muted) !important;
}
.cs-num .cs-sort--sub { justify-content: flex-end; }

/* Tabla de pedidos */
.cs-table-scroll--short { min-height: 300px; }
.cs-table--orders thead th,
.cs-table--orders tbody td { padding-left: 12px; padding-right: 12px; }
.cs-table--orders tbody td { padding-top: 14px; padding-bottom: 14px; }
.cs-table--orders .cs-progress { min-width: 128px; max-width: 160px; margin-top: 8px; }
.cs-table--orders .cs-badge + .cs-progress { margin-top: 8px; }
.cs-table--orders select.cs-status-select { min-width: 128px; }
.cs-table--orders select.cs-select-sm { max-width: 170px; }
.cs-col-check { width: 44px; padding-right: 0 !important; }
.cs-table__id { display: block; }
.cs-table__date { display: flex; align-items: center; gap: 6px; }
.cs-table__date i { color: var(--cs-text-subtle); font-size: 12px; }
.cs-table__meta--end { justify-content: flex-end; }
.cs-juegos { font-size: 16px; font-weight: 700; }
body.cs-app .row_deleted.cs-row--deleted,
body.cs-app .row_deleted.cs-row--deleted td { background: var(--cs-neutral-soft); color: var(--cs-text-muted); }
.cs-row--deleted .cs-table__primary,
.cs-row--deleted .cs-table__id { text-decoration: line-through; text-decoration-color: var(--cs-text-subtle); }
.cs-inline-form { margin: 0; width: auto !important; }
body.cs-app select.cs-select-sm {
  width: auto;
  max-width: 200px;
  height: 30px;
  margin-top: 4px;
  padding: 2px 28px 2px 8px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}

/* Select de estado con color semántico (main.css usa colores saturados) */
body.cs-app select.cs-status-select,
body.cs-app select.statusSearch { font-weight: 600; }
body.cs-app select.cs-status-select {
  width: auto;
  min-width: 140px;
  height: 32px;
  padding: 2px 30px 2px 12px;
  border-radius: 999px;
  font-size: 12.5px;
}
body.cs-app select.cs-status-select.status-1,
body.cs-app select.statusSearch.status-1 { background-color: var(--cs-warning-soft); border-color: var(--cs-warning-border); color: var(--cs-warning); }
body.cs-app select.cs-status-select.status-2,
body.cs-app select.statusSearch.status-2 { background-color: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }
body.cs-app select.cs-status-select.status-3,
body.cs-app select.statusSearch.status-3 { background-color: var(--cs-danger-soft); border-color: var(--cs-danger-border); color: var(--cs-danger); }
body.cs-app select.cs-status-select.status-4,
body.cs-app select.statusSearch.status-4 { background-color: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
body.cs-app select option { background-color: var(--cs-surface); color: var(--cs-text); }

/* Progreso */
.cs-progress { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.cs-progress__bar {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--cs-border);
  overflow: hidden;
}
.cs-progress__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--cs-primary);
  transition: width .3s ease;
}
.cs-progress.is-complete .cs-progress__fill { background: var(--cs-success); }
.cs-progress__value {
  min-width: 38px;
  text-align: right;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--cs-text-muted);
}

/* Acciones por fila */
.cs-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.cs-row-actions .dropdown-menu { min-width: 210px; }

/* (inicio tablas-flotantes) */
/* Listados con filas flotantes (AGENTS.md §3 Tablas):
   <section class="cs-card cs-card--floating">   tarjeta transparente (listado principal)
   <div class="table-responsive cs-table-scroll">
   <table class="cs-table cs-table--floating" data-cs-row-highlight aria-label="…">
   Las reglas llevan body.cs-app + table. para ganarle a Bootstrap (.table, .table-bordered)
   y a DataTables; los ajustes de módulo usan body.cs-app .cs-<módulo> table.cs-table--floating. */

/* Contenedor transparente */
.cs-card.cs-card--floating {
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.cs-card--floating > .cs-card__header {
  padding: 0 0 12px;
  border-bottom: 0;
}
.cs-card--floating .cs-tabs { max-width: 100%; }
.cs-card--floating .cs-tab { padding-left: 12px; padding-right: 12px; }
.cs-card--floating > .cs-card__footer { padding: 12px 4px; border-top: 0; }
.cs-card--floating .page-item .page-link { min-width: 40px; height: 40px; }

/* Aire para que la elevación y la sombra no se recorten en el scroll */
.table-responsive:has(> table.cs-table--floating) { padding: 0 4px 8px; }
.cs-card:not(.cs-card--floating) > .table-responsive:has(> table.cs-table--floating) { padding: 2px 16px 10px; }

/* Tabla */
body.cs-app table.cs-table--floating {
  border-collapse: separate;
  border-spacing: 0 10px;
}
body.cs-app table.cs-table--floating > thead > tr > th {
  padding: 12px;
  background-color: var(--cs-surface-2);
  border: 0;
  border-top: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
}
body.cs-app table.cs-table--floating > thead > tr > th:first-of-type {
  border-left: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
}
body.cs-app table.cs-table--floating > thead > tr > th:last-of-type {
  border-right: 1px solid var(--cs-border);
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
}
body.cs-app table.cs-table--floating > thead > tr > th:only-of-type { border-radius: var(--cs-radius); }
body.cs-app table.cs-table--floating > tbody > tr {
  position: relative;
  background: transparent;
  outline: none;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
/* Celdas: first-of-type/last-of-type para que un <form> o un input oculto dentro del <tr> no rompa la esquina */
body.cs-app table.cs-table--floating > tbody > tr > td {
  padding: 14px 12px;
  background-color: var(--cs-surface);
  border: 0;
  border-top: 1px solid var(--cs-border);
  border-bottom: 1px solid var(--cs-border);
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
body.cs-app table.cs-table--floating > tbody > tr > td:first-of-type {
  border-left: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
}
body.cs-app table.cs-table--floating > tbody > tr > td:last-of-type {
  border-right: 1px solid var(--cs-border);
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
}
body.cs-app table.cs-table--floating > tbody > tr > td:only-of-type { border-radius: var(--cs-radius); }
/* El <form> vacío que deja el parser (form por fila) no debe crear una fila/celda anónima; el envío no cambia */
body.cs-app table.cs-table--floating > tbody > form,
body.cs-app table.cs-table--floating > tbody > tr > form { display: none; }
/* DataTables */
body.cs-app table.cs-table--floating.dataTable,
body.cs-app table.cs-table--floating.dataTable.no-footer { border-bottom: 0; }
body.cs-app .dataTables_scrollHead:has(table.cs-table--floating),
body.cs-app .dataTables_scrollBody:has(> table.cs-table--floating) { padding-left: 4px; padding-right: 4px; }

/* Foco, resaltado (copysis-table.js) y selección por checkbox */
body.cs-app table.cs-table--floating > tbody > tr:focus-within { z-index: 2; }
body.cs-app table.cs-table--floating > tbody > tr:focus-visible {
  outline: 2px solid var(--cs-primary);
  outline-offset: 2px;
  border-radius: var(--cs-radius);
}
body.cs-app table.cs-table--floating:not([data-cs-row-highlight]) > tbody > tr:focus-within > td,
body.cs-app table.cs-table--floating > tbody > tr.is-highlighted > td,
body.cs-app table.cs-table--floating > tbody > tr:has(.cs-col-check .cs-check:checked) > td {
  background-color: var(--cs-row-selected);
  border-top-color: var(--cs-primary);
  border-bottom-color: var(--cs-primary);
}
body.cs-app table.cs-table--floating:not([data-cs-row-highlight]) > tbody > tr:focus-within > td:first-of-type,
body.cs-app table.cs-table--floating > tbody > tr.is-highlighted > td:first-of-type,
body.cs-app table.cs-table--floating > tbody > tr:has(.cs-col-check .cs-check:checked) > td:first-of-type { border-left-color: var(--cs-primary); }
body.cs-app table.cs-table--floating:not([data-cs-row-highlight]) > tbody > tr:focus-within > td:last-of-type,
body.cs-app table.cs-table--floating > tbody > tr.is-highlighted > td:last-of-type,
body.cs-app table.cs-table--floating > tbody > tr:has(.cs-col-check .cs-check:checked) > td:last-of-type { border-right-color: var(--cs-primary); }

@media (hover: hover) and (pointer: fine) {
  body.cs-app table.cs-table--floating > tbody > tr:has(> td:not(.cs-empty):not(.dataTables_empty)):hover {
    z-index: 1;
    transform: translateY(-2px);
    box-shadow: var(--cs-shadow-row);
  }
  body.cs-app table.cs-table--floating > tbody > tr:hover > td:where(:not(.cs-empty, .dataTables_empty)) { background-color: var(--cs-row-hover); }
  body.cs-app table.cs-table--floating > tbody > tr:focus-within:hover { z-index: 2; }
  body.cs-app table.cs-table--floating:not([data-cs-row-highlight]) > tbody > tr:focus-within:hover > td,
  body.cs-app table.cs-table--floating > tbody > tr.is-highlighted:hover > td,
  body.cs-app table.cs-table--floating > tbody > tr:has(.cs-col-check .cs-check:checked):hover > td { background-color: var(--cs-row-selected); }
  /* Filas ordenables (jQuery UI sortable): sin elevación para no desplazar el arrastre */
  body.cs-app table.cs-table--floating > tbody.ui-sortable > tr:has(> td:not(.cs-empty):not(.dataTables_empty)):hover { transform: none; }
}

/* Filas borradas: el fondo va en la celda */
body.cs-app table.cs-table--floating > tbody > tr.cs-row--deleted { background: transparent; }
body.cs-app table.cs-table--floating > tbody > tr.cs-row--deleted > td { background-color: var(--cs-surface-2); }
body.cs-app table.cs-table--floating:not([data-cs-row-highlight]) > tbody > tr.cs-row--deleted:focus-within > td,
body.cs-app table.cs-table--floating > tbody > tr.cs-row--deleted.is-highlighted > td { background-color: var(--cs-row-selected); }

/* Acciones por fila */
body.cs-app table.cs-table--floating .cs-row-actions { gap: 6px; }
body.cs-app table.cs-table--floating .cs-row-actions .cs-btn { min-width: 40px; height: 40px; }
body.cs-app table.cs-table--floating .cs-row-actions .cs-btn--icon { width: 40px; padding: 0; }
body.cs-app table.cs-table--floating .cs-row-actions .cs-btn--secondary { color: var(--cs-text) !important; border-color: var(--cs-border); }
body.cs-app table.cs-table--floating .cs-row-actions .cs-btn--secondary:hover { color: var(--cs-primary) !important; border-color: var(--cs-primary); }

/* Persona con avatar de iniciales (partials/cs-avatar) */
.cs-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-person__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
}
.cs-person__avatar--2 { background: var(--cs-success-soft); color: var(--cs-success); }
.cs-person__avatar--3 { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-person__avatar > i { font-size: 14px; }
.cs-person__body { min-width: 0; }

/* Ajustes propios del listado de pedidos */
body.cs-app .cs-orders-list table.cs-table--floating > thead > tr > th,
body.cs-app .cs-orders-list table.cs-table--floating > tbody > tr > td { padding-left: 9px; padding-right: 9px; }
.cs-orders-list .cs-col-check { width: 40px; }
.cs-orders-list .cs-table__primary { min-width: 128px; text-transform: none; overflow-wrap: anywhere; }
.cs-orders-list .cs-table__id { font-size: 15px; }
.cs-orders-list .cs-table__meta { margin-top: 4px; }
.cs-orders-list .cs-table__amount { font-size: 15px; }
body.cs-app .cs-orders-list select.cs-select-sm { height: 40px; max-width: 170px; }
body.cs-app .cs-orders-list select.cs-status-select { width: 132px; height: 40px; min-width: 128px; }

@media (max-width: 767.98px) {
  .cs-card--floating > .cs-card__header { gap: 4px; }
  .cs-card--floating .cs-bulk { width: 100%; }
  .cs-card--floating .cs-bulk__hint { width: 100%; }
  .cs-card--floating .cs-bulk .cs-btn { min-height: 40px; flex: 1 1 auto; }
  .cs-card--floating > .cs-card__footer { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app table.cs-table--floating > tbody > tr,
  body.cs-app table.cs-table--floating > tbody > tr > td { transition: none; }
  body.cs-app table.cs-table--floating > tbody > tr:has(> td):hover { transform: none !important; }
}
/* (fin tablas-flotantes) */

/* ==========================================================================
   Modales: formato único (ver AGENTS.md)
   ========================================================================== */
body.cs-app .modal-backdrop { background: #0B1120; }
body.cs-app .modal-backdrop.show { opacity: .55; }
body.cs-app .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.cs-app .modal-header .close {
  order: 99;
  margin: 0 0 0 auto;
  padding: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  font-size: 22px;
  font-weight: 400;
  color: var(--cs-text-muted);
  opacity: 1;
  transition: background-color .15s, color .15s;
}
body.cs-app .modal-header .close:hover { background: var(--cs-sidebar-hover); color: var(--cs-text); }
body.cs-app .modal-footer { gap: 8px; }
body.cs-app .modal-footer > * { margin: 0; }

.cs-modal .modal-title { display: flex; align-items: center; gap: 12px; margin: 0; }
.cs-modal__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  font-size: 16px;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
}
.cs-modal__icon--info { background: var(--cs-info-soft); color: var(--cs-info); }
.cs-modal__icon--warning { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-modal__icon--danger { background: var(--cs-danger-soft); color: var(--cs-danger); }
.cs-modal__icon--success { background: var(--cs-success-soft); color: var(--cs-success); }

@media (min-width: 576px) {
  body.cs-app .modal-dialog { max-width: 560px; }
  body.cs-app .modal-sm { max-width: 400px; }
}
@media (min-width: 992px) {
  body.cs-app .modal-lg,
  body.cs-app .modal-xl { max-width: 800px; }
}
@media (min-width: 1200px) {
  body.cs-app .modal-xl { max-width: 1140px; }
}
@media (max-width: 575.98px) {
  body.cs-app .modal-dialog { margin: 16px; }
  body.cs-app .modal-body { max-height: calc(100vh - 180px); overflow-y: auto; }
}

/* ==========================================================================
   Transiciones suaves (solo CSS)
   ========================================================================== */
@keyframes cs-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
body.cs-app .dropdown-menu.show { animation: cs-pop-in .16s ease-out; }
body.cs-app .modal.fade .modal-dialog { transition: transform .22s ease-out; transform: translateY(-12px); }
body.cs-app .modal.show .modal-dialog { transform: none; }
body.cs-app .cs-sidebar .nav-link { transition: background-color .15s ease, color .15s ease; }
body.cs-app .cs-sidebar .nav-link p > .right { transition: transform .2s ease; }
.cs-btn,
.cs-action,
.cs-pill,
.cs-user { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }

/* ==========================================================================
   Formularios (pedido nuevo / edición)
   ========================================================================== */

/* .hide la alterna el JS existente: debe ganar siempre a display de componentes */
body.cs-app .hide { display: none !important; }

.cs-step {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: 13px;
  font-weight: 700;
}

.cs-hint {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--cs-text-muted);
}

.cs-field--inline { flex-direction: row; align-items: center; gap: 10px; }
.cs-field--inline .form-control { width: auto; min-width: 180px; }
body.cs-app .cs-field--inline select.form-control { height: 38px; }
body.cs-app .cs-field__label--sm { font-size: 12px; color: var(--cs-text-muted); }

/* Rejilla de 12 columnas */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.cs-grid--compact { gap: 12px; }
.cs-span-1 { grid-column: span 1; }
.cs-span-2 { grid-column: span 2; }
.cs-span-3 { grid-column: span 3; }
.cs-span-4 { grid-column: span 4; }
.cs-span-5 { grid-column: span 5; }
.cs-span-6 { grid-column: span 6; }
.cs-span-7 { grid-column: span 7; }
.cs-span-8 { grid-column: span 8; }
.cs-span-9 { grid-column: span 9; }
.cs-span-10 { grid-column: span 10; }
.cs-span-11 { grid-column: span 11; }
.cs-span-12 { grid-column: 1 / -1; }

/* Elección tipo tarjeta (checkbox nativo visible) */
.cs-choice-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.cs-choice-group legend { display: block; width: auto; margin-bottom: 10px; float: none; }
.cs-choices { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cs-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 132px;
  height: 46px;
  padding: 0 16px 0 14px;
  margin: 0;
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-text);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cs-choice:hover { border-color: var(--cs-primary); }
.cs-choice:has(.cs-choice__input:checked) {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  box-shadow: inset 0 0 0 1px var(--cs-primary);
}
.cs-choice:has(.cs-choice__input:focus-visible) { box-shadow: 0 0 0 3px var(--cs-focus-ring); }
body.cs-app .cs-choice__input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cs-primary);
  cursor: pointer;
}
.cs-choice__fa { color: var(--cs-text-muted); font-size: 15px; width: 18px; text-align: center; }
.cs-choice:has(.cs-choice__input:checked) .cs-choice__fa { color: var(--cs-primary); }

/* Iconos propios (Font Awesome 5 no tiene equivalentes) */
.cs-choice__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 1px solid var(--cs-border-strong);
}
.cs-choice__icon--bn { background: linear-gradient(90deg, #172033 50%, #FFFFFF 50%); }
.cs-choice__icon--color {
  border: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 174, 239, .9) 0 34%, transparent 35%),
    radial-gradient(circle at 30% 66%, rgba(236, 0, 140, .9) 0 34%, transparent 35%),
    radial-gradient(circle at 70% 66%, rgba(255, 221, 0, .95) 0 34%, transparent 35%);
}
.cs-choice-select { min-width: 220px; gap: 4px; }

/* Opciones de engargolado (el JS alterna .hide) */
.ondrill {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  gap: 16px;
}

/* Secciones bloqueables: .blockblack la elimina el JS al elegir el tipo */
.cs-lockable { position: relative; }
body.cs-app .cs-order-form .blockblack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  z-index: 6;
  border-radius: inherit;
  background: rgba(245, 247, 251, .62);
  cursor: not-allowed;
}
html[data-theme="dark"] body.cs-app .cs-order-form .blockblack { background: rgba(11, 17, 32, .62); }
.cs-lock[data-cs-hint]::after {
  content: attr(data-cs-hint);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  box-shadow: var(--cs-shadow-pop);
  color: var(--cs-text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* Ayuda con imagen al pasar el cursor */
.cs-has-help { position: relative; }
.cs-help { color: var(--cs-text-subtle); cursor: help; margin-left: 4px; }
.cs-help:hover { color: var(--cs-primary); }
.cs-help-pop {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-pop);
  animation: cs-pop-in .16s ease-out;
}
.cs-help-pop img { display: block; max-width: min(420px, 80vw); height: auto; }

/* Input + botón */
.cs-input-action { display: flex; gap: 8px; }
.cs-input-action .form-control { flex: 1 1 auto; min-width: 0; }
body.cs-app .cs-input-action .form-control.readonly { cursor: default; background-color: var(--cs-surface-2); }

/* Prefijo de moneda */
.cs-affix { position: relative; display: block; }
.cs-affix__text {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cs-text-muted);
  font-size: 14px;
  pointer-events: none;
}
body.cs-app .cs-affix .form-control { padding-left: 26px; font-variant-numeric: tabular-nums; }

.cs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 6px;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  cursor: pointer;
  vertical-align: middle;
}

/* Totales */
.cs-totals {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 24px;
}
.cs-totals__summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
}
.cs-totals__summary .cs-section-label { margin-bottom: 0; }
body.cs-app .cs-field--emphasis .form-control {
  border-color: var(--cs-primary);
  font-weight: 700;
  font-size: 16px;
}
body.cs-app .cs-field--total .form-control {
  height: 46px;
  font-size: 20px;
  font-weight: 700;
  background-color: var(--cs-surface);
}
body.cs-app .cs-field--total .cs-affix__text { font-size: 16px; font-weight: 600; }
body.cs-app .cs-field--primary .form-control { color: var(--cs-primary); border-color: var(--cs-primary); }
body.cs-app .cs-field--danger .form-control { color: var(--cs-danger); }
.cs-notes { margin-top: 20px; }

/* Barra de acciones del formulario */
.cs-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 -32px -40px;
  padding: 14px 32px;
  background: var(--cs-surface);
  border-top: 1px solid var(--cs-border);
  box-shadow: 0 -6px 16px rgba(16, 24, 40, .06);
}

/* Modales del formulario */
.cs-modal__search { margin-bottom: 12px; }
.cs-modal__scroll {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
}
.cs-modal__scroll .cs-table thead th { position: sticky; top: 0; z-index: 1; }
.cs-table--pick tbody tr.res { cursor: pointer; }
.cs-table--pick tbody tr.res:hover { background: var(--cs-primary-soft); }
.cs-table--pick tbody tr.res td:first-child { font-weight: 600; }

/* #methodPay: el JS pinta el fondo del header según el método */
.cs-modal--pay .modal-header[style*="background"] { border-bottom-color: transparent; }
.cs-modal--pay .modal-header[style*="background"] .modal-title { color: #FFFFFF; }
.cs-modal--pay .modal-header[style*="background"] .cs-modal__icon { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.cs-modal--pay .modal-content { overflow: hidden; }
.cs-modal--pay .modal-body h2 {
  margin: 8px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 991.98px) {
  .cs-grid > [class*="cs-span-"] { grid-column: span 6; }
  .cs-grid > .cs-span-12 { grid-column: 1 / -1; }
  .cs-totals { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .cs-grid > [class*="cs-span-"] { grid-column: 1 / -1; }
  .cs-grid > .cs-span-sm-6 { grid-column: span 6; }
  .cs-choice { flex: 1 1 130px; }
  .cs-choice-select { flex: 1 1 100%; }
  .cs-field--inline { width: 100%; }
  .cs-field--inline .form-control { flex: 1 1 auto; min-width: 0; }
  .cs-form-actions { margin: 0 -16px -32px; padding: 12px 16px; }
  .cs-form-actions .cs-btn { flex: 1 1 0; }
  .cs-lock[data-cs-hint]::after { white-space: normal; width: 80%; text-align: center; border-radius: var(--cs-radius); }
}

/* ==========================================================================
   Detalle de pedido (orders/detail, se inyecta por AJAX en un modal)
   ========================================================================== */

/* El script de orders/detail aplica $('select').css('border','1px solid white') a TODOS
   los selects de la página que lo carga; se neutraliza solo con CSS. */
body.cs-app select.form-control { border-color: var(--cs-border) !important; }
body.cs-app select.form-control:focus { border-color: var(--cs-primary) !important; }
body.cs-app select.form-control.is-invalid { border-color: var(--cs-danger) !important; }
body.cs-app select.cs-status-select.status-1,
body.cs-app select.statusSearch.status-1 { border-color: var(--cs-warning-border) !important; }
body.cs-app select.cs-status-select.status-2,
body.cs-app select.statusSearch.status-2 { border-color: var(--cs-success-border) !important; }
body.cs-app select.cs-status-select.status-3,
body.cs-app select.statusSearch.status-3 { border-color: var(--cs-danger-border) !important; }
body.cs-app select.cs-status-select.status-4,
body.cs-app select.statusSearch.status-4 { border-color: var(--cs-info-border) !important; }

.cs-detail__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
}
.cs-detail__main { min-width: 0; }
.cs-detail__id { font-size: 13px; font-weight: 700; color: var(--cs-primary); }
.cs-detail__client {
  margin: 2px 0 8px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cs-text);
}
.cs-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 13px;
  color: var(--cs-text-muted);
}
.cs-detail__meta i { color: var(--cs-text-subtle); margin-right: 4px; }
.cs-detail__totals { display: flex; gap: 28px; margin: 0; }
.cs-detail__totals dt { font-size: 12px; font-weight: 500; color: var(--cs-text-muted); }
.cs-detail__totals dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cs-detail__form { margin: 0; }
.cs-detail__section + .cs-detail__section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cs-border);
}
.cs-detail__section .cs-choices { margin-bottom: 14px; }
.cs-detail .ondrill { margin-top: 14px; }

/* Controles deshabilitados por el JS: se leen como valores, no como campos */
body.cs-app .cs-detail .form-control:disabled {
  background-color: var(--cs-surface-2);
  border-color: transparent !important;
  color: var(--cs-text);
  opacity: 1;
  cursor: default;
}
body.cs-app .cs-detail select.form-control:disabled { background-image: none; }
body.cs-app .cs-detail .cs-field--primary .form-control:disabled { color: var(--cs-primary); font-weight: 700; }
body.cs-app .cs-detail .cs-field--danger .form-control:disabled { color: var(--cs-danger); font-weight: 700; }
.cs-detail .cs-choice:has(.cs-choice__input:disabled) { cursor: default; }
.cs-detail .cs-choice:has(.cs-choice__input:disabled):hover { border-color: var(--cs-border-strong); }
.cs-detail .cs-choice:has(.cs-choice__input:disabled:checked):hover { border-color: var(--cs-primary); }
.cs-detail .cs-choice:has(.cs-choice__input:disabled:not(:checked)) { opacity: .55; }

/* ==========================================================================
   Formulario lateral + historial (abonos, avance de copias)
   ========================================================================== */
.cs-split {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.cs-split > .cs-card { margin-bottom: 0; }
.cs-stack { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.cs-btn--block { width: 100%; }
.cs-help-text { margin: 0; font-size: 12.5px; color: var(--cs-text-muted); }
.cs-help-text i { color: var(--cs-text-subtle); margin-right: 2px; }
.cs-divider-h {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cs-text-subtle);
  font-size: 12px;
}
.cs-divider-h::before,
.cs-divider-h::after { content: ""; flex: 1; border-top: 1px solid var(--cs-border); }
.cs-choices--stack { flex-direction: column; align-items: stretch; gap: 8px; }
.cs-choices--stack .cs-choice { width: 100%; }
.cs-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cs-checklist li { position: relative; padding-left: 28px; font-size: 14px; }
.cs-checklist li::before {
  content: "\f00c";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  background: var(--cs-warning-soft);
  color: var(--cs-warning);
}
.cs-progress--lg { margin: -8px 0 24px; max-width: none; }
.cs-progress--lg .cs-progress__bar { height: 8px; }
.cs-progress--lg .cs-progress__value { font-size: 13px; font-weight: 600; color: var(--cs-text); }
.cs-inline-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; width: auto !important; }
.cs-inline-filters .cs-field--inline .form-control { min-width: 170px; }
body.cs-app .cs-inline-filters .cs-input-icon > .form-control { height: 38px; }

@media (max-width: 991.98px) {
  .cs-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tickets, clientes, cotizaciones
   ========================================================================== */
.cs-mt-1 { margin-top: 6px; }
.cs-sort-group { display: flex; gap: 10px; }

/* Conceptos de un ticket dentro de una celda */
.cs-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cs-lines li { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.cs-lines__total { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Estados de tickets: 1 Pagado, 2 Pendiente, 3 Cancelado (distinto a pedidos) */
body.cs-app .cs-tickets select.cs-status-select.status-1 { background-color: var(--cs-success-soft); border-color: var(--cs-success-border) !important; color: var(--cs-success); }
body.cs-app .cs-tickets select.cs-status-select.status-2 { background-color: var(--cs-warning-soft); border-color: var(--cs-warning-border) !important; color: var(--cs-warning); }
body.cs-app .cs-tickets select.cs-status-select.status-3 { background-color: var(--cs-danger-soft); border-color: var(--cs-danger-border) !important; color: var(--cs-danger); }
body.cs-app select.statusSearch.status-0 { background-color: var(--cs-input-bg); color: var(--cs-text); }

/* Formulario de ticket */
.cs-grid--nested { gap: 16px; }
.cs-grid--spaced { margin-top: 16px; }
.cs-card__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.cs-ticket-total {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 20px;
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-2);
}
.cs-ticket-total .cs-field { min-width: 220px; }
.generate_order .delItem {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--cs-danger-border);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-danger);
  font-size: 12.5px;
  font-weight: 600;
}
.generate_order .delItem:hover { background: var(--cs-danger-soft); }
.table-responsive:has(> .generate_order tbody:empty)::after {
  content: "Agrega conceptos con el formulario de arriba";
  display: block;
  padding: 24px 20px;
  text-align: center;
  color: var(--cs-text-muted);
}
body.cs-app .cs-field textarea.form-control { width: 100%; }
.cs-ticket-form .cs-field { min-width: 0; }

/* Elecciones deshabilitadas (sin pendientes) */
.cs-choice.is-disabled { cursor: default; opacity: .65; }
.cs-choice.is-disabled:hover { border-color: var(--cs-border-strong); }
.cs-choice__meta { margin-left: auto; font-size: 12.5px; color: var(--cs-text-muted); font-weight: 500; }

/* Lista de datos */
.cs-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 24px;
  margin: 0;
}
.cs-dl dt { font-size: 12px; font-weight: 500; color: var(--cs-text-muted); }
.cs-dl dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--cs-text); word-break: break-word; }
.cs-dl__wide { grid-column: 1 / -1; }
.cs-dl__wide dd { font-weight: 400; }

/* Acordeón (usa collapse de Bootstrap ya cargado) */
.cs-accordion { margin-bottom: 12px; }
.cs-accordion__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  color: var(--cs-text) !important;
  text-decoration: none !important;
}
.cs-accordion__head:hover { background: var(--cs-row-hover); }
.cs-accordion__meta { color: var(--cs-text-muted); font-size: 13px; }
.cs-accordion__meta i { margin-right: 4px; color: var(--cs-text-subtle); }
.cs-accordion__total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-accordion__chevron { color: var(--cs-text-subtle); font-size: 12px; transition: transform .2s ease; }
.cs-accordion__head:not(.collapsed) .cs-accordion__chevron { transform: rotate(180deg); }
.cs-accordion .collapse > .table-responsive,
.cs-accordion .collapsing > .table-responsive { border-top: 1px solid var(--cs-border); }
.cs-accordion__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--cs-border);
}
.cs-table-box { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); }

/* Estado de atención (lo alterna el JS existente mediante .backBlack) */
.cs-stat.backBlack {
  background: var(--cs-attention-bg) !important;
  border-color: var(--cs-attention-bg) !important;
  color: var(--cs-attention-text) !important;
}
.cs-stat.backBlack .cs-stat__icon,
.cs-stat.backBlack .cs-stat__label { color: var(--cs-attention-text) !important; }

/* ==========================================================================
   Glyphicons heredados → Font Awesome 5
   La fuente Glyphicons no se carga en el layout (main.css define las clases
   sin @font-face), así que los iconos que siguen generando los scripts y las
   vistas no migradas se dibujan con Font Awesome. Solo los mapeados.
   ========================================================================== */
body.cs-app .glyphicon { top: 0; font-style: normal; }
body.cs-app .glyphicon-trash::before,
body.cs-app .glyphicon-duplicate::before,
body.cs-app .glyphicon-plus-sign::before,
body.cs-app .glyphicon-minus-sign::before,
body.cs-app .glyphicon-pencil::before,
body.cs-app .glyphicon-edit::before,
body.cs-app .glyphicon-remove::before,
body.cs-app .glyphicon-floppy-open::before,
body.cs-app .glyphicon-phone::before,
body.cs-app .glyphicon-print::before,
body.cs-app .glyphicon-list-alt::before,
body.cs-app .glyphicon-th-list::before,
body.cs-app .glyphicon-list::before,
body.cs-app .glyphicon-scissors::before,
body.cs-app .glyphicon-ok::before,
body.cs-app .glyphicon-link::before,
body.cs-app .glyphicon-flag::before,
body.cs-app .glyphicon-eye-open::before,
body.cs-app .glyphicon-usd::before,
body.cs-app .glyphicon-search::before,
body.cs-app .glyphicon-info-sign::before,
body.cs-app .glyphicon-plus::before,
body.cs-app .glyphicon-refresh::before,
body.cs-app .glyphicon-shopping-cart::before,
body.cs-app .glyphicon-home::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
body.cs-app .glyphicon-trash::before { content: "\f2ed"; }
body.cs-app .glyphicon-duplicate::before { content: "\f0c5"; }
body.cs-app .glyphicon-plus-sign::before { content: "\f055"; }
body.cs-app .glyphicon-minus-sign::before { content: "\f056"; }
body.cs-app .glyphicon-pencil::before { content: "\f303"; }
body.cs-app .glyphicon-edit::before { content: "\f044"; }
body.cs-app .glyphicon-remove::before { content: "\f00d"; }
body.cs-app .glyphicon-floppy-open::before { content: "\f829"; }
body.cs-app .glyphicon-phone::before { content: "\f3cd"; }
body.cs-app .glyphicon-print::before { content: "\f02f"; }
body.cs-app .glyphicon-list-alt::before { content: "\f022"; }
body.cs-app .glyphicon-th-list::before { content: "\f00b"; }
body.cs-app .glyphicon-list::before { content: "\f03a"; }
body.cs-app .glyphicon-scissors::before { content: "\f0c4"; }
body.cs-app .glyphicon-ok::before { content: "\f00c"; }
body.cs-app .glyphicon-link::before { content: "\f0c1"; }
body.cs-app .glyphicon-flag::before { content: "\f024"; }
body.cs-app .glyphicon-eye-open::before { content: "\f06e"; }
body.cs-app .glyphicon-usd::before { content: "\f155"; }
body.cs-app .glyphicon-search::before { content: "\f002"; }
body.cs-app .glyphicon-info-sign::before { content: "\f05a"; }
body.cs-app .glyphicon-plus::before { content: "\f067"; }
body.cs-app .glyphicon-refresh::before { content: "\f021"; }
body.cs-app .glyphicon-shopping-cart::before { content: "\f07a"; }
body.cs-app .glyphicon-home::before { content: "\f015"; }

/* ==========================================================================
   Contadores de copias (copy_counters/*)
   ========================================================================== */
/* main.css pinta filas por tipo (tr.tipo-N), estado (.status-m-0) y mantenimiento
   (.type-N, con !important); dentro de las tablas migradas se neutralizan. */
body.cs-app .cs-cc-table tbody tr[class*="tipo-"],
body.cs-app .cs-cc-table tbody tr[class*="type-"] { background: transparent !important; }
body.cs-app .cs-cc-table tbody tr.status-m-0 {
  border: 0;
  font-style: normal;
  background: var(--cs-row-stripe) !important;
}
body.cs-app .cs-cc-table tbody tr.status-m-0 .cs-table__primary { color: var(--cs-text-muted); }
body.cs-app .cs-cc-table tbody tr.row_deleted { background: var(--cs-neutral-soft) !important; }
body.cs-app .cs-cc-table tbody tr:hover { background: var(--cs-row-hover) !important; }
body.cs-app .cs-cc-table tbody tr.row_deleted:hover { background: var(--cs-neutral-soft) !important; }
body.cs-app .cs-cc-table .row_deleted .glyphicon { color: inherit; }
.cs-cc-table .cs-table__primary { text-transform: none; }
.cs-cc-table thead th,
.cs-cc-table tbody td { padding-left: 12px; padding-right: 12px; }
.cs-cc-table thead th { vertical-align: bottom; }
.cs-cc-copier { min-width: 190px; }
.cs-cc-table .cs-table__primary .cs-badge { height: 22px; margin-left: 6px; font-size: 12px; vertical-align: 1px; }

/* Tipo de copiadora */
.cs-cc-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-cc-type::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.cs-cc-type--1::before { background: var(--cs-text); }
.cs-cc-type--2 { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-cc-type--3 { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }
.cs-cc-stat--1 .cs-stat__icon,
.cs-stat__icon.cs-cc-stat__icon { background: var(--cs-neutral-soft); color: var(--cs-text-muted); }
/* Tipo de mantenimiento: 1 General, 2 Cambio de piezas, 3 Otro */
.cs-cc-mtype--1 { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-cc-mtype--2 { background: var(--cs-primary-soft); border-color: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-cc-history__notes { min-width: 220px; white-space: pre-line; }
/* Historial con filas flotantes: el fondo (tipo, borrado, hover) va en las celdas, no en el <tr> */
body.cs-app .cs-cc-table.cs-cc-history.cs-table--floating > tbody > tr,
body.cs-app .cs-cc-table.cs-cc-history.cs-table--floating > tbody > tr:hover { background: transparent !important; }
.cs-cc .cs-stat__value:empty::before { content: "0"; color: var(--cs-text-subtle); }

/* Filtros */
.cs-cc-filters { grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); }
.cs-cc-filters-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.cs-cc-filters-inline .cs-field { flex: 0 1 260px; }

/* Controles dentro de la tabla */
body.cs-app .cs-cc-table .cs-cc-order {
  width: 64px;
  height: 34px;
  padding: 4px 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cs-cc-update { display: flex; align-items: center; gap: 8px; margin: 0; }
body.cs-app .cs-cc-update .cs-cc-update__input {
  width: 140px;
  min-width: 110px;
  height: 34px;
  font-variant-numeric: tabular-nums;
}
.cs-cc-day { font-weight: 700; }

/* Mantenimiento: una fila = un formulario (controles compactos) */
.cs-cc-main tbody td { vertical-align: top; }
.cs-cc-main tbody td.cs-cc-copier,
.cs-cc-main tbody td.text-right { vertical-align: middle; }
.cs-cc-table.cs-cc-main thead th,
.cs-cc-table.cs-cc-main tbody td { padding-left: 8px; padding-right: 8px; }
.cs-cc-table.cs-cc-main thead th:first-child,
.cs-cc-table.cs-cc-main tbody td:first-child { padding-left: 16px; }
.cs-cc-main .cs-cc-copier { min-width: 180px; }
body.cs-app .cs-cc-main .form-control { height: 38px; font-size: 13.5px; }
body.cs-app .cs-cc-main .cs-cc-main__num { min-width: 90px; }
body.cs-app .cs-cc-main .cs-cc-main__date { min-width: 132px; }
body.cs-app .cs-cc-main .cs-cc-main__type { min-width: 136px; }
body.cs-app .cs-cc-main textarea.cs-cc-main__notes { min-width: 170px; height: 38px; min-height: 38px; resize: vertical; }
body.cs-app .cs-cc-main .cs-cc-main__money { min-width: 96px; }
body.cs-app .cs-cc-main .cs-cc-main__tech { min-width: 120px; }
/* Acciones fijas a la derecha: Guardar siempre visible aunque la tabla se desplace */
.cs-cc-main thead th:last-child,
.cs-cc-main tbody td:last-child:not(.cs-empty) {
  position: sticky;
  right: 0;
  z-index: 1;
  padding-right: 16px;
  background: var(--cs-surface);
  box-shadow: inset 1px 0 0 var(--cs-border);
}
.cs-cc-main thead th:last-child { background: var(--cs-surface-2); }
.cs-cc-main tbody tr:hover td:last-child:not(.cs-empty) { background: var(--cs-row-hover); }
.cs-cc-alert { margin-top: 6px; height: 24px; font-size: 12px; font-weight: 500; }
.cs-cc-alert__meta { display: block; max-width: 190px; }
.cs-cc-alert__meta strong { color: var(--cs-warning); font-weight: 700; }
.cs-cc-confirm__value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Formularios alta / edición */
body.cs-app .cs-cc .cs-field textarea.form-control,
body.cs-app .cs-cc-edit .cs-field textarea.form-control { height: auto; min-height: 96px; }
.cs-card__header .cs-hint { margin-left: 0; }
.cs-card__header .cs-hint i { margin-right: 4px; color: var(--cs-text-subtle); }
body.cs-app .cs-cc-readonly textarea.form-control[readonly] {
  background-color: var(--cs-readonly-bg);
  color: var(--cs-text-muted);
  cursor: default;
  resize: vertical;
}
body.cs-app .cs-cc-readonly textarea.form-control[readonly]:focus { border-color: var(--cs-border-strong); box-shadow: none; }

/* Historial mensual: tabla ancha con día fijo a la izquierda y cabecera/totales fijos */
.cs-cc-month-scroll { max-height: max(420px, calc(100vh - 260px)); overflow: auto; }
.cs-cc-month thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 168px;
  max-width: 190px;
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.25;
  box-shadow: inset 0 -1px 0 var(--cs-border);
}
.cs-table.cs-cc-month thead th.cs-num { white-space: normal; overflow-wrap: break-word; }
.cs-cc-month tbody td,
.cs-cc-month tbody th,
.cs-cc-month tfoot td,
.cs-cc-month tfoot th {
  padding: 7px 12px;
  border-bottom: 1px solid var(--cs-border);
  font-variant-numeric: tabular-nums;
}
.cs-cc-month .cs-cc-month__day {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 0;
  background: var(--cs-surface);
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: inset -1px 0 0 var(--cs-border);
}
.cs-cc-month thead .cs-cc-month__day { z-index: 3; background: var(--cs-surface-2); box-shadow: inset -1px -1px 0 var(--cs-border); }
.cs-cc-month__day span { font-weight: 400; color: var(--cs-text-muted); }
.cs-cc-month tbody tr:hover td,
.cs-cc-month tbody tr:hover th { background: var(--cs-row-hover); }
.cs-cc-month .cs-cc-zero { color: var(--cs-text-subtle); }
.cs-cc-month tfoot td,
.cs-cc-month tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-bottom: 0;
  background: var(--cs-surface-2);
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--cs-border-strong);
}
.cs-cc-month tfoot .cs-cc-month__day { z-index: 3; box-shadow: inset -1px 1px 0 var(--cs-border-strong); }

/* Modal de log (el JS genera <hr> + <div> con iconos glyphicon) */
.cs-cc-logs #list_logs { font-size: 13.5px; color: var(--cs-text); }
.cs-cc-logs #list_logs hr { margin: 0; border-top: 1px solid var(--cs-border); }
.cs-cc-logs #list_logs > hr:first-child { display: none; }
.cs-cc-logs #list_logs > div { padding: 10px 4px; line-height: 1.7; }
.cs-cc-logs #list_logs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--cs-danger) !important;
  text-decoration: none;
  transition: background-color .15s ease;
}
.cs-cc-logs #list_logs a:hover { background: var(--cs-danger-soft); }
.cs-cc-logs #list_logs a[href*="restore"] { color: var(--cs-primary) !important; }
.cs-cc-logs #list_logs a[href*="restore"]:hover { background: var(--cs-primary-soft); }
body.cs-app .cs-cc-logs #list_logs .row_deleted {
  margin: 4px 0;
  padding: 10px 12px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
}
body.cs-app .cs-cc-logs #list_logs .row_deleted .glyphicon { color: inherit; }

/* Modales de confirmación (el JS genera .ccdFont con color/tamaño inline) */
.cs-cc-confirm .ccdFont {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cs-text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.cs-cc-confirm .ccdFont strong { color: var(--cs-primary) !important; }
.cs-cc-confirm .ccdFont small {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cs-text-muted);
}
.cs-cc-confirm--all #number_copies_total {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
}
.cs-cc-confirm--all .ccdFont {
  padding: 9px 12px;
  border-bottom: 1px solid var(--cs-border);
  font-size: 14px;
  font-weight: 500;
}
.cs-cc-confirm--all .ccdFont:last-child { border-bottom: 0; }
.cs-cc-confirm #number_copies_total h1 {
  margin: 0;
  padding: 16px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--cs-text-muted);
}

@media (max-width: 575.98px) {
  .cs-cc-filters { grid-template-columns: 1fr; }
  .cs-cc-filters-inline .cs-field { flex: 1 1 100%; }
  .cs-cc-filters-inline .cs-filters__actions { width: 100%; }
  .cs-cc-filters-inline .cs-filters__actions .cs-btn { flex: 1 1 0; }
  .cs-cc-confirm .ccdFont { font-size: 22px; }
  .cs-cc .cs-stat__value { font-size: 20px; }
  .cs-cc .cs-stat__body { min-width: 0; }
  .cs-cc .cs-stat.cs-cc-stat--wide { flex-basis: 100%; }
}
@media (max-width: 767.98px) {
  .cs-cc-main thead th:last-child,
  .cs-cc-main tbody td:last-child:not(.cs-empty) { position: static; box-shadow: none; }
}
/* (fin contadores) */

/* ==========================================================================
   Cortes (cuts/*)
   ========================================================================== */

/* --- Lista de cortes (cuts/index) --- */
.cs-cut-generate { align-items: center; }
.cs-cut-generate__field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.cs-cut-generate__field .cs-field__label { white-space: nowrap; }
body.cs-app .cs-cut-generate__field .form-control { width: 170px; height: 42px; }
.cs-cut-done { height: 42px; padding: 0 16px; font-size: 14px; }
.cs-cut-filters__actions { margin-left: auto; }

.cs-table--cuts { min-width: 760px; }
/* .detail-cut la oculta el JS al cargar: se oculta desde el inicio para evitar el salto */
.cs-table--cuts .detail-cut { display: none; }
.cs-cut-es__legend {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cs-text-muted);
}
.cs-cut-es {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cs-cut-es + .cs-cut-es { margin-top: 2px; }
.cs-cut-es__key { min-width: 38px; font-size: 12px; font-weight: 500; }
.cs-cut-es--bad { color: var(--cs-danger); }
.cs-cut-es--sicar { color: var(--cs-info); }
.cs-cut-notes { max-width: 260px; align-items: flex-start; white-space: normal; }
.cs-cut-notes i { margin-top: 3px; }

/* Imagen del corte (modal #details) */
.cs-cut-shot {
  max-height: calc(100vh - 220px);
  overflow: auto;
  background: var(--cs-surface-2);
}
.cs-cut-shot__img { display: block; width: 100%; height: auto; border-radius: var(--cs-radius-sm); }

/* Confirmación (modal #confirm) */
.cs-cut-confirm__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
}
.cs-cut-confirm__meta dt { font-size: 12px; font-weight: 500; color: var(--cs-text-muted); }
.cs-cut-confirm__meta dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--cs-text); }
.cs-cut-confirm__section + .cs-cut-confirm__section { margin-top: 16px; }
.cs-cut-confirm__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
}
.cs-cut-confirm__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13.5px;
}
.cs-cut-confirm__list li + li { border-top: 1px solid var(--cs-border); }
.cs-cut-confirm__value { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-cut-confirm__date { margin-left: 6px; font-size: 12px; color: var(--cs-text-muted); white-space: nowrap; }
.cs-cut-confirm__question {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--cs-warning-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-warning-soft);
  color: var(--cs-warning);
  font-size: 15px;
  font-weight: 600;
}

/* --- Historial (cuts/history) --- */
body.cs-app .cs-colpicker__menu {
  width: 560px;
  max-width: calc(100vw - 32px);
  padding: 12px;
}
.cs-colpicker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-colpicker__title { font-size: 13px; font-weight: 600; color: var(--cs-text); }
.cs-colpicker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
}
body.cs-app .cs-colpicker__grid .dropdown-item {
  margin: 0;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
  cursor: pointer;
}
body.cs-app .cs-colpicker__grid .dropdown-item:has(.cs-check:checked) { background: var(--cs-primary-soft); }

.cs-cut-history__empty { margin: 0; }
.cs-cut-history__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cs-border);
  font-size: 13px;
  color: var(--cs-text-muted);
}
.cs-cut-history__hint {
  display: none;
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  color: var(--cs-text-muted);
}
.cs-cut-history__hint i { display: block; margin-bottom: 8px; font-size: 22px; color: var(--cs-text-subtle); }
/* Todas las celdas empiezan con .d-none y el JS las alterna: sin columnas visibles se muestra la ayuda */
.cs-cut-history__scroll:not(:has(thead th:not(.d-none))) .cs-table--history { display: none; }
.cs-cut-history__scroll:not(:has(thead th:not(.d-none))) .cs-cut-history__hint { display: block; }
.cs-table--history thead th,
.cs-table--history tbody td { padding: 10px 14px; white-space: nowrap; }
.cs-table--history tbody tr.cs-row--total > td {
  border-top: 2px solid var(--cs-border-strong);
  background: var(--cs-surface-2);
  font-weight: 700;
}
.cs-table--history tbody tr.cs-row--total > td:empty:not(.d-none):not(td:not(.d-none) ~ td)::before {
  content: "Totales";
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}

/* Historial con filas flotantes: las celdas visibles cambian (JS alterna .d-none) y la última
   (td.col-hidde-8) siempre está oculta, así que bordes y radio van en la primera/última celda VISIBLE. */
.cs-cut-history.cs-card--floating .cs-cut-history__empty,
.cs-cut-history.cs-card--floating .cs-cut-history__notice,
.cs-cut-history.cs-card--floating .cs-cut-history__hint {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
}
.cs-cut-history.cs-card--floating .cs-cut-history__notice { margin: 0 4px; }
body.cs-app .cs-cut-history table.cs-table--floating > thead > tr > th:not(.d-none):not(th:not(.d-none) ~ th) {
  border-left: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
}
body.cs-app .cs-cut-history table.cs-table--floating > thead > tr > th:not(.d-none):not(:has(~ th:not(.d-none))) {
  border-right: 1px solid var(--cs-border);
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
}
body.cs-app .cs-cut-history table.cs-table--floating > thead > tr > th:not(.d-none):not(th:not(.d-none) ~ th):not(:has(~ th:not(.d-none))) { border-radius: var(--cs-radius); }
body.cs-app .cs-cut-history table.cs-table--floating > tbody > tr:not(.cs-row--total) > td:not(.d-none):not(td:not(.d-none) ~ td) {
  border-left: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
}
body.cs-app .cs-cut-history table.cs-table--floating > tbody > tr:not(.cs-row--total) > td:not(.d-none):not(:has(~ td:not(.d-none))) {
  border-right: 1px solid var(--cs-border);
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0;
}
body.cs-app .cs-cut-history table.cs-table--floating > tbody > tr:not(.cs-row--total) > td:not(.d-none):not(td:not(.d-none) ~ td):not(:has(~ td:not(.d-none))) { border-radius: var(--cs-radius); }
body.cs-app .cs-cut-history table.cs-table--floating > tbody > tr.is-highlighted:not(.cs-row--total) > td:not(.d-none):not(td:not(.d-none) ~ td) { border-left-color: var(--cs-primary); }
body.cs-app .cs-cut-history table.cs-table--floating > tbody > tr.is-highlighted:not(.cs-row--total) > td:not(.d-none):not(:has(~ td:not(.d-none))) { border-right-color: var(--cs-primary); }
/* Fila de totales: plana (sin tarjeta, elevación ni resaltado), separada por una línea */
body.cs-app .cs-cut-history table.cs-table--floating.cs-table--history > tbody > tr.cs-row--total > td,
body.cs-app .cs-cut-history table.cs-table--floating.cs-table--history > tbody > tr.cs-row--total:hover > td,
body.cs-app .cs-cut-history table.cs-table--floating.cs-table--history > tbody > tr.cs-row--total.is-highlighted > td {
  border: 0;
  border-top: 2px solid var(--cs-border-strong);
  border-radius: 0;
  background: transparent;
  font-weight: 700;
}
body.cs-app .cs-cut-history table.cs-table--floating.cs-table--history > tbody > tr.cs-row--total,
body.cs-app .cs-cut-history table.cs-table--floating.cs-table--history > tbody > tr.cs-row--total:hover {
  transform: none;
  box-shadow: none;
}

/* --- Crear corte (cuts/add) ---
   .panel.panel-default es la hoja que el JS captura con html2canvas (le añade .print). */
body.cs-app .panel.cs-cut-sheet { margin-bottom: 24px; }
body.cs-app .cs-cut-sheet > .cs-cut-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cs-border);
  background: transparent;
  color: var(--cs-text);
}
.cs-cut-sheet__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}
.cs-cut-sheet__title { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--cs-text); }
/* main.css aplica form { width: 100% } */
.cs-cut-sheet__date { width: auto; margin: 0; }
body.cs-app .cs-cut-sheet__date .form-control { width: 200px; height: 42px; }
body.cs-app .cs-cut-sheet > .cs-cut-sheet__body { padding: 16px 20px 20px; }

.cs-cut-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.cs-cut-counters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-cut-counters__caption {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-cut-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
}
.cs-cut-counter__label { font-size: 12.5px; color: var(--cs-text-muted); }
.cs-cut-counter__value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cs-text); }

.cs-cut-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-cut-legend li { display: inline-flex; align-items: center; gap: 6px; }

/* Indicadores resta / suma / pendiente / detalle */
.cs-cut-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 11px;
}
.cs-cut-legend .cs-cut-sign { width: 20px; height: 20px; font-size: 9px; }
.cs-cut-sign--minus { background: var(--cs-danger-soft); color: var(--cs-danger); }
.cs-cut-sign--plus { background: var(--cs-info-soft); color: var(--cs-info); }
.cs-cut-sign--flag { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-cut-sign--note { background: var(--cs-neutral-soft); color: var(--cs-text-muted); }

/* Método de pago (antes color inline por método) */
.cs-cut-method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 1px;
}
.cs-cut-method i { font-size: 11px; }
.cs-cut-method--1 { background: var(--cs-neutral-soft); border-color: var(--cs-border); color: var(--cs-text); }
.cs-cut-method--2 { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-cut-method--3 { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }

/* Tabla del corte: 4 columnas fijas (la 4ª es la de importes: "$ " lo pone la regla de la vista) */
.cs-cut-sheet__table { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); }
.cs-table--cut { min-width: 640px; }
.cs-table--cut thead th,
.cs-table--cut tbody td { padding: 10px 14px; }
.cs-table--cut .cs-cut-col-sign { width: 48px; padding-right: 0; text-align: center; }
.cs-table--cut > tbody > tr > td:nth-child(3),
.cs-table--cut > tbody > tr > td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cs-table--cut > tbody > tr > td:nth-child(3) { min-width: 96px; }
.cs-table--cut > tbody > tr > td:nth-child(4) { font-weight: 600; white-space: nowrap; }
.cs-cut-concept { display: block; font-weight: 600; color: var(--cs-text); }
.cs-cut-concept__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-cut-concept__meta i { font-size: 11px; color: var(--cs-text-subtle); }
.cs-table--cut .cs-cut-row--muted > td { color: var(--cs-text-muted); }
.cs-table--cut .cs-cut-row--muted .cs-cut-concept { font-weight: 500; color: var(--cs-text-muted); }
.cs-table--cut .cs-cut-row--computo > td { background: var(--cs-primary-soft); }

/* Copias del día: mini rejilla de controles dentro de "Concepto" */
.cs-cut-copies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px 12px;
  margin-top: 10px;
}
@media (min-width: 1200px) {
  .cs-cut-copies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cs-cut-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font-weight: 400; }
.cs-cut-field--wide { grid-column: 1 / -1; }
body.cs-app .cs-cut-field__label { margin: 0; font-size: 12px; font-weight: 500; color: var(--cs-text-muted); }
body.cs-app .cs-cut-sheet .cs-cut-field .form-control {
  height: 36px;
  padding: 4px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
body.cs-app .cs-cut-sheet .cs-cut-field textarea.form-control { height: auto; min-height: 60px; }
.cs-cut-split {
  display: grid;
  grid-template-columns: 64px minmax(56px, 96px) max-content minmax(72px, 140px);
  justify-content: start;
  align-items: center;
  gap: 8px;
}
.cs-cut-split + .cs-cut-split { margin-top: 6px; }
.cs-cut-split__name { font-size: 13px; color: var(--cs-text); }
.cs-cut-split__x { font-size: 13px; color: var(--cs-text-subtle); }

/* Notas, total, transferencia y tarjeta */
.cs-table--cut .cs-cut-row--notes > td { padding-top: 14px; padding-bottom: 14px; }
.cs-table--cut .cs-cut-row--total > td,
.cs-table--cut .cs-cut-row--method > td { background: var(--cs-surface-2); }
.cs-table--cut .cs-cut-row--total > td {
  border-top: 2px solid var(--cs-border-strong);
  font-size: 15px;
  font-weight: 700;
  color: var(--cs-text);
}
.cs-table--cut .cs-cut-row--total > td:nth-child(4) { font-size: 20px; }
.cs-table--cut .cs-cut-row--method > td { padding-top: 8px; padding-bottom: 8px; }
.cs-cut-row--method .cs-cut-method { margin-left: 0; }
/* input.card: Bootstrap/AdminLTE/tema estilan .card (display flex, sombra, margen) */
body.cs-app .cs-cut-sheet input.card,
body.cs-app .cs-cut-sheet input.cs-cut-amount {
  display: inline-block;
  position: static;
  width: 140px;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-input-bg);
  box-shadow: none;
  color: var(--cs-text);
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-wrap: normal;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.cs-app .cs-cut-sheet input.cs-cut-amount:focus {
  outline: none;
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
}

/* Captura: el JS añade .print al panel antes de html2canvas.
   La instantánea es el registro del corte: siempre en tema claro, aunque la app esté en oscuro. */
body.cs-app .panel.panel-default.cs-cut-sheet.print {
  --cs-bg: #F5F7FB;
  --cs-surface: #FFFFFF;
  --cs-surface-2: #F8FAFC;
  --cs-input-bg: #FFFFFF;
  --cs-readonly-bg: #F1F5F9;
  --cs-border: #E2E8F0;
  --cs-border-strong: #CBD5E1;
  --cs-text: #172033;
  --cs-text-muted: #64748B;
  --cs-text-subtle: #94A3B8;
  --cs-primary: #3538CD;
  --cs-primary-hover: #2A2DB3;
  --cs-primary-contrast: #FFFFFF;
  --cs-primary-soft: #EEF0FF;
  --cs-focus-ring: rgba(53, 56, 205, .22);
  --cs-info: #2F5BD3;
  --cs-info-soft: #EEF3FF;
  --cs-info-border: #D5E0FB;
  --cs-warning: #B45309;
  --cs-warning-soft: #FFF6E5;
  --cs-warning-border: #FBDDA6;
  --cs-success: #15803D;
  --cs-success-soft: #ECF8F0;
  --cs-success-border: #C7EBD3;
  --cs-danger: #C2353B;
  --cs-danger-soft: #FEF1F1;
  --cs-danger-border: #F7CFD1;
  --cs-neutral-soft: #F1F5F9;
  --cs-row-hover: #F8FAFC;
  --cs-row-stripe: #FBFCFE;
  --cs-shadow: none;
  color-scheme: light;
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  background: var(--cs-surface);
  color: var(--cs-text);
}
/* En la captura la tabla se ajusta al ancho (como antes) en lugar de desplazarse */
.cs-cut-sheet.print .cs-cut-sheet__table { overflow: visible; }
.cs-cut-sheet.print .cs-table--cut { min-width: 0; }
.cs-cut-sheet.print .cs-table--cut tbody tr:hover { background: transparent; }

@media (max-width: 767.98px) {
  .cs-cut-generate { width: 100%; }
  .cs-cut-generate__field { flex: 1 1 100%; }
  .cs-cut-generate__field .cs-input-icon { flex: 1 1 auto; }
  body.cs-app .cs-cut-generate__field .form-control { width: 100%; }
  .cs-cut-done { flex: 1 1 100%; justify-content: center; }
  .cs-cut-sheet__date { width: 100%; }
  body.cs-app .cs-cut-sheet__date .form-control { width: 100%; }
  .cs-colpicker,
  .cs-colpicker > .cs-btn { width: 100%; }
  /* La lista de columnas es larga: en móvil se despliega en el flujo en lugar de flotar (Popper la cortaría) */
  body.cs-app .cs-colpicker__menu.show {
    position: static !important;
    transform: none !important;
    float: none;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    box-shadow: none;
  }
}
@media (max-width: 575.98px) {
  .cs-stat.cs-cut-stat--money { flex-basis: 100%; }
  .cs-colpicker__grid { grid-template-columns: 1fr; }
  .cs-cut-confirm__list li { flex-direction: column; gap: 2px; }
}
/* (fin cortes) */

/* (inicio listados-centro) */
/* Filas flotantes en Inicio y Centro de copiado (dashboard, cotizaciones, tickets, clientes, abonos, avance de copias) */

/* Solo /orders: identificar al cliente archivado sin cambiar el estado del pedido. */
body.cs-app .cs-orders-list .cs-orders-client--archived .cs-table__primary { color: var(--cs-danger); }
body.cs-app .cs-orders-list .cs-orders-client--archived .cs-person__avatar {
  background-color: var(--cs-danger-soft);
  color: var(--cs-danger);
}

/* Inicio: listas cortas dentro de tarjetas sólidas, filas más compactas */
body.cs-app .dashboard table.cs-table--floating { border-spacing: 0 8px; }
body.cs-app .dashboard table.cs-table--floating > tbody > tr > td { padding-top: 10px; padding-bottom: 10px; }

/* Clientes y cotizaciones: el nombre junto al avatar no se parte en tres renglones en tablet */
.cs-clients-filters .cs-switch { min-height: 40px; }
.cs-client-form__hint, .cs-client-form__optional { color: var(--cs-text-muted); font-size: 12px; font-weight: 400; }
.cs-client-form__hint { display: block; margin-top: 6px; }
.cs-clients-list .cs-person__body,
.cs-quotes-list .cs-person__body { min-width: 140px; }
.cs-clients-list .cs-person__body .cs-table__meta { flex-wrap: wrap; row-gap: 4px; }
.cs-clients-list .cs-table__notes { min-width: 180px; }
.cs-clients-list .cs-clients-creator { white-space: nowrap; }

/* Historial junto al formulario (abonos, avance de copias): columna angosta, celdas más ceñidas y la fecha puede partirse */
body.cs-app .cs-card.cs-history-list > .table-responsive:has(> table.cs-table--floating) { padding-left: 12px; padding-right: 12px; }
body.cs-app .cs-history-list table.cs-table--floating > thead > tr > th,
body.cs-app .cs-history-list table.cs-table--floating > tbody > tr > td { padding-left: 10px; padding-right: 10px; }
body.cs-app .cs-history-list table.cs-table--floating > tbody > tr > td.cs-nowrap { white-space: normal; min-width: 7.5em; }
/* (fin listados-centro) */

/* ==========================================================================
   Cómputo: pedidos (pedidos_computo)
   ========================================================================== */
/* (inicio computo) */
/* Pedidos de cómputo: listado (pedidos_computo/index), alta/edición (create) */

/* Estados: 2 Encargado → status-1 (ámbar), 3 Comprado → status-4 (azul),
   4 En sucursal → status-5 (verde, listo), 5 Entregado → status-2 (verde), 1 Cancelado → status-3 */
body.cs-app .cs-pc select.cs-status-select.status-5 {
  background-color: var(--cs-success-soft);
  border-color: var(--cs-success-border) !important;
  color: var(--cs-success);
}
body.cs-app .cs-pc select.cs-status-select { min-width: 136px; }

.cs-pc-id { display: flex; align-items: flex-start; gap: 10px; }
.cs-pc-id .cs-check { margin-top: 2px !important; }
.cs-pc-id .cs-table__meta { white-space: nowrap; }
.cs-table--pc .cs-table__primary { min-width: 160px; }
.cs-pc-note { align-items: flex-start; max-width: 320px; }
.cs-pc-note i { margin-top: 3px; }
.cs-pc-note > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-pc .cs-filters__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* DataTables (scrollX) con filas flotantes: bordes, fondos y hover los da tablas-flotantes */
body.cs-app .cs-pc .dataTables_wrapper { color: var(--cs-text); }
body.cs-app .cs-pc table.dataTable { margin: 0 !important; }
body.cs-app .cs-pc table.dataTable thead th {
  color: var(--cs-text);
  font-size: 13px;
  font-weight: 600;
}
body.cs-app .cs-pc table.dataTable thead th.cs-num { text-align: right; }
body.cs-app .cs-pc table.dataTable thead th.text-right { text-align: right; }
body.cs-app .cs-pc table.dataTable thead th.text-center { text-align: center; }
body.cs-app .cs-pc table.dataTable thead .sorting,
body.cs-app .cs-pc table.dataTable thead .sorting_asc,
body.cs-app .cs-pc table.dataTable thead .sorting_desc {
  background-image: none;
  padding-right: 30px;
  position: relative;
}
body.cs-app .cs-pc .dataTables_scrollHead table.dataTable thead .sorting::after,
body.cs-app .cs-pc .dataTables_scrollHead table.dataTable thead .sorting_asc::after,
body.cs-app .cs-pc .dataTables_scrollHead table.dataTable thead .sorting_desc::after {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 11px;
  content: "\f0dc";
  color: var(--cs-text-subtle);
}
body.cs-app .cs-pc .dataTables_scrollHead table.dataTable thead .sorting_asc::after { content: "\f0de"; color: var(--cs-primary); }
body.cs-app .cs-pc .dataTables_scrollHead table.dataTable thead .sorting_desc::after { content: "\f0dd"; color: var(--cs-primary); }
body.cs-app .cs-pc table.dataTable tbody td { vertical-align: middle; }
body.cs-app .cs-pc table.dataTable.no-footer,
body.cs-app .cs-pc .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 0; }
/* scrollX clona el encabezado en .dataTables_scrollHead y deja en el cuerpo un thead de altura 0:
   sin compensar, entre la pastilla y la primera fila quedarían 3 espacios de border-spacing (30 px).
   En el cuerpo se usa top (no margin) para que DataTables no detecte scroll vertical al medir. */
body.cs-app .cs-pc .dataTables_scrollHead table.cs-table--floating { margin-bottom: -10px !important; }
body.cs-app .cs-pc .dataTables_scrollBody > table.cs-table--floating { position: relative; top: -10px; }
body.cs-app .cs-pc .dataTables_wrapper.no-footer .dataTables_scrollBody:has(> table.cs-table--floating) { margin-bottom: -10px; }
/* Selección por checkbox: en este listado va en .cs-pc-id (no en .cs-col-check) */
body.cs-app .cs-pc table.cs-table--floating > tbody > tr:has(.cs-pc-id .cs-check:checked) > td {
  background-color: var(--cs-row-selected);
  border-top-color: var(--cs-primary);
  border-bottom-color: var(--cs-primary);
}
body.cs-app .cs-pc table.cs-table--floating > tbody > tr:has(.cs-pc-id .cs-check:checked) > td:first-of-type { border-left-color: var(--cs-primary); }
body.cs-app .cs-pc table.cs-table--floating > tbody > tr:has(.cs-pc-id .cs-check:checked) > td:last-of-type { border-right-color: var(--cs-primary); }
@media (hover: hover) and (pointer: fine) {
  body.cs-app .cs-pc table.cs-table--floating > tbody > tr:has(.cs-pc-id .cs-check:checked):hover > td { background-color: var(--cs-row-selected); }
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_info {
  float: none;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--cs-text-muted) !important;
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 20px 16px;
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate > span { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--cs-primary) !important;
  background: var(--cs-primary-soft) !important;
  color: var(--cs-primary) !important;
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: var(--cs-primary) !important;
  background: var(--cs-primary) !important;
  color: var(--cs-primary-contrast) !important;
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--cs-surface) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-subtle) !important;
  cursor: default;
}
body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 4px; color: var(--cs-text-muted); }
body.cs-app .cs-pc .dataTables_wrapper::after { content: ""; display: block; clear: both; }
@media (min-width: 768px) {
  body.cs-app .cs-pc .dataTables_wrapper .dataTables_info { float: left; }
  body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate { float: right; padding: 12px 20px; }
}

/* Detalle (modal por pedido) */
.cs-pc-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
}
.cs-pc-summary__item { min-width: 0; word-break: break-word; }
.cs-pc-summary__item .cs-modal__label { display: block; margin-bottom: 4px; }
.cs-pc-summary__item--wide { grid-column: span 2; }
.cs-pc-items { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); }
.cs-pc-items .cs-table tfoot td {
  padding: 12px 16px;
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-2);
  font-weight: 700;
}
.cs-pc-items .cs-table tbody tr:last-child td { border-bottom: 1px solid var(--cs-border); }
.cs-pc-items .cs-table tbody:last-of-type tr:last-child td { border-bottom: 0; }
.cs-pc-notice {
  margin: 8px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--cs-text);
}

@media (max-width: 767.98px) {
  .cs-pc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .cs-pc .cs-page-actions,
  .cs-pc .cs-page-actions .cs-btn { width: 100%; }
  .cs-pc .cs-filters__actions { width: 100%; }
  .cs-pc .cs-filters__actions .cs-btn { flex: 1 1 0; }
  .cs-pc .cs-bulk { width: 100%; }
}

/* --- Alta / edición (pedidos_computo/create) --- */
.cs-pc-form .cs-section { overflow: visible; }
.cs-pc-credit { justify-content: flex-end; min-height: 42px; padding-bottom: 10px; }
.cs-pc-form .credit-secondary-row { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--cs-border); }
.cs-pc-form [data-credit-field] .form-control:disabled { cursor: not-allowed; opacity: .7; }

/* Artículos: el markup lo genera el JS (addItem / fillItems) con la rejilla de Bootstrap */
.cs-pc-form .items-contain { display: flex; flex-direction: column; gap: 16px; }
body.cs-app .cs-pc-form .items-added {
  position: relative;
  margin: 0;
  padding: 14px 8px 8px;
  row-gap: 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
}
.cs-pc-form .items-added > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
/* Si una etiqueta ocupa dos líneas, los controles de la fila siguen alineados abajo */
.cs-pc-form .items-added > .col-md-3,
.cs-pc-form .items-added > .col-md-5 { display: flex; flex-direction: column; justify-content: flex-end; }
.cs-pc-form .items-added h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding-right: 110px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-text);
}
.cs-pc-form .items-added h3::before {
  content: "\f109";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 13px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
}
/* Botón "Borrar" (col-md-1) arriba a la derecha de la tarjeta */
.cs-pc-form .items-added > .col-md-1 {
  position: absolute;
  top: 14px;
  right: 16px;
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}
body.cs-app .cs-pc-form .items-added .delItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--cs-danger-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-danger);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body.cs-app .cs-pc-form .items-added .delItem::before {
  content: "\f2ed";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}
body.cs-app .cs-pc-form .items-added .delItem:hover { background: var(--cs-danger-soft); }
body.cs-app .cs-pc-form .items-added label { display: block; margin-bottom: 6px; font-weight: 500; }
body.cs-app .cs-pc-form .cs-switch { font-weight: 500; }
body.cs-app .cs-pc-form .items-added .form-control { height: 42px; font-size: 14px; }
body.cs-app .cs-pc-form .items-added .form-control[readonly] { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Separador negro con estilo inline del JS: la tarjeta ya separa los artículos */
.cs-pc-form .items-added > .col-md-12:last-child { display: none; }
.cs-pc-form .items-added hr[style] { display: none !important; }
@media (min-width: 768px) {
  .cs-pc-form .items-added > .col-md-5 { flex: 0 0 50%; max-width: 50%; }
}
.cs-pc-add { margin-top: 16px; border-style: dashed; }
@media (max-width: 575.98px) {
  .cs-pc-add { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app .cs-pc .dataTables_wrapper .dataTables_paginate .paginate_button,
  body.cs-app .cs-pc-form .items-added .delItem { transition: none; }
}

/* (fin computo) */

/* ==========================================================================
   Cómputo: abonos (computer_order_pays) y faltantes (possible_products)
   ========================================================================== */
/* (inicio computo-aux) */

/* --- Abonos de pedidos de cómputo (computer_order_pays/add) --- */
.cs-cpays__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.cs-cpays__main > .cs-card { margin-bottom: 0; }
.cs-cpays-items {
  margin: 0;
  padding: 8px 20px;
  list-style: none;
}
.cs-cpays-items__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--cs-text);
  border-bottom: 1px solid var(--cs-border);
}
.cs-cpays-items__item:last-child { border-bottom: 0; }
.cs-cpays-items__num {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-border);
  color: var(--cs-text-muted);
  font-size: 12px;
  font-weight: 600;
}
.cs-cpays-items__text { min-width: 0; padding-top: 2px; word-break: break-word; }

/* --- Faltantes/sugerencias (possible_products/index) --- */
.cs-pp-table__desc { display: block; min-width: 160px; font-weight: 500; word-break: break-word; }
body.cs-app .cs-pp-table select.cs-status-select { min-width: 150px; }
body.cs-app .cs-pp .sqr.cs-pp-dot {
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 50%;
  border: 0;
  background: var(--cs-text-subtle);
  flex: 0 0 auto;
}
body.cs-app .cs-pp .sqr.cs-pp-dot.status-1 { background: var(--cs-warning); }
body.cs-app .cs-pp .sqr.cs-pp-dot.status-2 { background: var(--cs-success); }
body.cs-app .cs-pp .sqr.cs-pp-dot.status-3 { background: var(--cs-danger); }
.cs-pp .cs-row-actions { align-items: center; justify-content: flex-end; }
body.cs-app .cs-pp-form textarea.form-control { height: auto; min-height: 96px; resize: vertical; }

/* DataTables dentro de la tarjeta: info a la izquierda, páginas a la derecha */
body.cs-app .cs-pp .dataTables_wrapper { padding: 0; }
/* Filas flotantes: DataTables mete un wrapper entre .table-responsive y la tabla (la base usa > table) */
.cs-pp .table-responsive:has(table.cs-table--floating) { padding: 0 4px 8px; }
body.cs-app .cs-pp .dataTables_wrapper table.dataTable { margin: 0 !important; width: 100% !important; }
body.cs-app .cs-pp table.dataTable thead th {
  padding: 12px 16px;
  background-image: none;
}
body.cs-app .cs-pp table.dataTable thead .sorting,
body.cs-app .cs-pp table.dataTable thead .sorting_asc,
body.cs-app .cs-pp table.dataTable thead .sorting_desc { padding-right: 26px; position: relative; cursor: pointer; }
body.cs-app .cs-pp table.dataTable thead .sorting::after,
body.cs-app .cs-pp table.dataTable thead .sorting_asc::after,
body.cs-app .cs-pp table.dataTable thead .sorting_desc::after {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--cs-text-subtle);
  content: "\f0dc";
}
body.cs-app .cs-pp table.dataTable thead .sorting_asc::after { content: "\f0de"; color: var(--cs-primary); }
body.cs-app .cs-pp table.dataTable thead .sorting_desc::after { content: "\f0dd"; color: var(--cs-primary); }
body.cs-app .cs-pp table.dataTable tbody td { padding: 12px 16px; vertical-align: middle; }
body.cs-app .cs-pp table.dataTable.no-footer { border-bottom: 0; }
body.cs-app .cs-pp table.dataTable td.dataTables_empty { padding: 32px 16px; text-align: center; color: var(--cs-text-muted); }
body.cs-app .cs-pp .dataTables_info,
body.cs-app .cs-pp .dataTables_paginate {
  padding: 14px 20px !important;
  font-size: 13px;
}
body.cs-app .cs-pp .dataTables_info { float: left; clear: both; }
body.cs-app .cs-pp .dataTables_paginate { float: right; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.cs-app .cs-pp .dataTables_paginate > span { display: inline-flex; gap: 6px; }
body.cs-app .cs-pp .dataTables_wrapper::after { content: ""; display: block; clear: both; }
body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}
body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--cs-primary) !important;
  background: var(--cs-primary-soft) !important;
  color: var(--cs-text) !important;
}
body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary-contrast) !important;
}
body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--cs-surface) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-subtle) !important;
  opacity: .7;
  cursor: default;
}

@media (max-width: 767.98px) {
  .cs-cpays-items { padding: 4px 16px; }
  /* en columna, el flex-basis global de .cs-choice (130px) se vuelve altura */
  .cs-cpays .cs-choices--stack .cs-choice { flex: 0 0 auto; }
}
@media (max-width: 575.98px) {
  .cs-cpays .cs-stat__value { font-size: 18px; }
}
@media (max-width: 767.98px) {
  body.cs-app .cs-pp table.dataTable thead th,
  body.cs-app .cs-pp table.dataTable tbody td { padding: 10px 12px; }
  body.cs-app .cs-pp .dataTables_info,
  body.cs-app .cs-pp .dataTables_paginate { float: none; justify-content: center; text-align: center; }
  body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate { padding-top: 0 !important; }
  .cs-pp-table__desc { min-width: 120px; }
  body.cs-app .cs-pp-table select.cs-status-select { min-width: 132px; }
}
/* Móvil: cada fila como tarjeta (descripción arriba; estatus y acciones abajo) */
@media (max-width: 575.98px) {
  body.cs-app .cs-pp table.dataTable thead { display: none; }
  body.cs-app .cs-pp table.dataTable,
  body.cs-app .cs-pp table.dataTable tbody { display: block; width: 100% !important; }
  body.cs-app .cs-pp table.dataTable tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "id desc desc" "status status actions";
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 12px 16px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
  }
  /* Tarjeta en móvil: borde, radio y fondo en el tr; las celdas sin borde ni fondo propio */
  body.cs-app .cs-pp table.dataTable tbody tr > td,
  body.cs-app .cs-pp table.cs-table--floating > tbody > tr > td:first-of-type,
  body.cs-app .cs-pp table.cs-table--floating > tbody > tr > td:last-of-type { padding: 0; border: 0; border-radius: 0; background: transparent !important; }
  body.cs-app .cs-pp table.cs-table--floating > tbody > tr.is-highlighted {
    background-color: var(--cs-row-selected);
    border-color: var(--cs-primary);
  }
  body.cs-app .cs-pp table.dataTable tbody tr > td:nth-child(1) { grid-area: id; align-self: start; min-width: 24px; }
  body.cs-app .cs-pp table.dataTable tbody tr > td:nth-child(3) { grid-area: desc; }
  body.cs-app .cs-pp table.dataTable tbody tr > td:nth-child(4) { grid-area: status; }
  body.cs-app .cs-pp table.dataTable tbody tr > td:nth-child(6) { grid-area: actions; }
  body.cs-app .cs-pp table.dataTable tbody tr > td.dataTables_empty { grid-column: 1 / -1; padding: 24px 0; }
  .cs-pp-table__desc { min-width: 0; }
  body.cs-app .cs-pp-table select.cs-status-select { width: 100%; min-width: 0; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app .cs-pp .dataTables_wrapper .dataTables_paginate .paginate_button { transition: none; }
}

/* (fin computo-aux) */

/* ==========================================================================
   Utilerías: etiquetas (labels) y calculadoras (pedidos_computo/calculate)
   ========================================================================== */
/* (inicio utilerias) */

/* --- Etiquetas (labels/index) --- */
/* Hoja de vista previa: siempre papel blanco (es lo que se imprime), en ambos temas */
.cs-labels {
  --cs-labels-paper: #FFFFFF;
  --cs-labels-ink: #111111;
  --cs-labels-paper-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 8px 24px rgba(16, 24, 40, .08);
}
html[data-theme="dark"] .cs-labels {
  --cs-labels-paper-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}
.cs-labels .cs-switch { min-height: 42px; }
/* AdminLTE pone label:not(.form-check-label) en negrita */
body.cs-app .cs-labels .cs-switch,
body.cs-app .cs-calc .cs-switch { font-weight: 400; }
body.cs-app .cs-labels .cs-field textarea.form-control { height: auto; }
.cs-labels-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-labels-meta i { color: var(--cs-text-subtle); }
.cs-labels-color { display: flex; gap: 8px; }
.cs-labels-color select.form-control { flex: 1 1 auto; min-width: 0; }
body.cs-app .cs-labels-color input[type="color"].form-control {
  flex: 0 0 56px;
  width: 56px;
  height: 42px;
  padding: 4px;
  cursor: pointer;
}
body.cs-app .cs-labels textarea.form-control { min-height: 42px; resize: vertical; }
.cs-labels-months {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--cs-border);
}
.cs-labels-actions { justify-content: flex-end; }
.cs-labels-print {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}
/* .hor la muestra/oculta el JS (display inline): aquí solo color y tipografía */
.cs-labels-hint {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cs-warning);
}
.cs-labels-hint i { margin-right: 4px; }
.cs-labels-desk {
  overflow-x: auto;
  padding: 8px;
  background: var(--cs-surface-2);
  -webkit-overflow-scrolling: touch;
}
/* .page / .page1 / .label / .label2 conservan sus medidas de la vista (son las de impresión) */
body.cs-app .cs-labels-desk .page {
  background: var(--cs-labels-paper);
  color: var(--cs-labels-ink);
  box-shadow: var(--cs-labels-paper-shadow);
  border-radius: 2px;
  text-align: center;
  vertical-align: top;
}
body.cs-app .cs-labels-desk .page:empty::before {
  content: "Agrega etiquetas para verlas aquí";
  display: block;
  padding-top: 3cm;
  font-family: var(--cs-font);
  font-size: 14px;
  color: var(--cs-text-subtle);
}

/* --- Calculadoras (pedidos_computo/calculate) --- */
.cs-calc .cs-calc-switch { min-height: 42px; }
.cs-calc-emph { color: var(--cs-danger); font-weight: 700; }
/* main.css: .pedidos_computo input.total { border: 2px solid #000 } */
body.cs-app .cs-calc input.total.form-control {
  height: 42px;
  border: 1px solid var(--cs-primary);
  color: var(--cs-text);
  font-weight: 700;
}
/* Pestañas Bootstrap (data-toggle="tab") con el estilo cs-tab: el activo lo marca .active */
.cs-calc-tabbar {
  padding: 0 20px;
  border-bottom: 1px solid var(--cs-border);
}
body.cs-app .cs-calc-tabs.nav-tabs { border-bottom: 0; flex-wrap: nowrap; }
body.cs-app .cs-calc-tabs .nav-link.cs-tab {
  margin: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
body.cs-app .cs-calc-tabs .nav-link.cs-tab.active {
  color: var(--cs-primary) !important;
  border-bottom-color: var(--cs-primary);
  background: transparent;
  font-weight: 600;
}
.cs-calc-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  padding: 20px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-calc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 8px 14px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-logo-plaque);
}
.cs-calc-logo img { display: block; max-height: 44px; max-width: 220px; width: auto; height: auto; }
.cs-calc-entry__price { flex: 0 1 240px; }
body.cs-app .cs-calc-entry__price .form-control {
  height: 46px;
  font-size: 18px;
  font-weight: 600;
}
.cs-calc-switch__hint {
  display: block;
  font-size: 12px;
  color: var(--cs-text-muted);
}
.cs-calc-table th:first-child,
.cs-calc-table td:first-child { width: 34%; }
.cs-calc-min {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--cs-text-muted);
}
body.cs-app .cs-calc .cs-calc-table tbody td { padding-top: 9px; padding-bottom: 9px; }
body.cs-app .cs-calc .cs-calc-table tbody td:first-child { color: var(--cs-text-muted); }
/* main.css da 20–22 px a las celdas de resultado: aquí se igualan */
body.cs-app .cs-calc .cs-calc-table td.cs-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--cs-text);
}
body.cs-app .cs-calc .cs-calc-table tr.cs-calc-total-row td {
  background: var(--cs-primary-soft);
  border-bottom: 1px solid var(--cs-border);
}
body.cs-app .cs-calc .cs-calc-table tr.cs-calc-total-row td:first-child {
  color: var(--cs-text);
  font-weight: 600;
}
body.cs-app .cs-calc .cs-calc-table tr.cs-calc-total-row td.th {
  font-size: 18px;
  font-weight: 700;
  color: var(--cs-primary);
}
/* main.css antepone "$" a cada resultado: sin valor se muestra un guion */
body.cs-app .cs-calc .cs-calc-table td.cs-num:empty::before {
  content: "—";
  font-weight: 400;
  color: var(--cs-text-subtle);
}
.cs-calc-table td.cs-calc-na { background: var(--cs-surface-2); }

@media (max-width: 767.98px) {
  .cs-labels-print,
  .cs-labels-print .cs-btn { width: 100%; }
  .cs-labels-actions .cs-btn { flex: 1 1 0; }
  .cs-calc-entry { align-items: stretch; }
  .cs-calc-logo { width: 100%; }
  .cs-calc-entry__price { flex: 1 1 100%; }
  .cs-calc-tabbar { padding: 0 8px; }
  .cs-calc-table th:first-child,
  .cs-calc-table td:first-child { width: auto; white-space: nowrap; }
}
@media (max-width: 575.98px) {
  body.cs-app .cs-calc .cs-calc-table thead th,
  body.cs-app .cs-calc .cs-calc-table tbody td { padding-left: 10px; padding-right: 10px; }
  body.cs-app .cs-calc .cs-calc-table td.cs-num { font-size: 14px; }
  body.cs-app .cs-calc .cs-calc-table tr.cs-calc-total-row td.th { font-size: 16px; }
}

/* (fin utilerias) */

/* ==========================================================================
   Utilerías: videos, links y trámites, recursos (dashboard/external)
   ========================================================================== */
/* (inicio utilerias-links) */

/* --- Videos: reproductor + lista (videos/list) --- */
/* La lista va primero en el DOM (el <source> usa el último $v del foreach);
   la rejilla coloca el reproductor a la izquierda y arriba en móvil. */
.cs-videos__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas: "player list";
  gap: 24px;
  align-items: start;
}
.cs-videos__player { grid-area: player; margin-bottom: 0; }
.cs-videos__playlist { grid-area: list; margin-bottom: 0; display: flex; flex-direction: column; }
.cs-videos__screen {
  position: relative;
  background: var(--cs-neutral-soft);
  border-bottom: 1px solid var(--cs-border);
}
body.cs-app .cs-videos__screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--cs-topbar-h, 64px) - 220px);
  min-height: 200px;
  background: var(--cs-text);
}
html[data-theme="dark"] body.cs-app .cs-videos__screen video { background: var(--cs-bg); }
.cs-videos__hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 20px;
  font-size: 13px;
  color: var(--cs-text-muted);
}
.cs-videos__hint i { color: var(--cs-text-subtle); }
.cs-videos__search { padding: 16px 20px 12px; }
body.cs-app .cs-videos__search .form-control { height: 42px; }
body.cs-app .cs-videos__list {
  max-height: calc(100vh - var(--cs-topbar-h, 64px) - 300px);
  min-height: 240px;
  overflow-y: auto;
  padding: 0 12px 12px;
  border-radius: 0;
}
body.cs-app .cs-videos__list .cs-videos__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 0 0 2px;
  padding: 10px 12px 10px 14px;
  border: 0;
  border-radius: var(--cs-radius-sm);
  background: transparent;
  color: var(--cs-text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
body.cs-app .cs-videos__list .cs-videos__item:hover,
body.cs-app .cs-videos__list .cs-videos__item:focus { background: var(--cs-row-hover); color: var(--cs-text); }
body.cs-app .cs-videos__list .cs-videos__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cs-focus-ring); }
.cs-videos__item-icon { flex: 0 0 auto; margin-top: 2px; font-size: 15px; color: var(--cs-text-subtle); transition: color .15s ease; }
.cs-videos__item-title { min-width: 0; overflow-wrap: anywhere; }
/* .active la pone el JS existente al elegir un video */
body.cs-app .cs-videos__list .cs-videos__item.active {
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-weight: 600;
}
body.cs-app .cs-videos__list .cs-videos__item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--cs-primary);
}
.cs-videos__item.active .cs-videos__item-icon,
.cs-videos__item:hover .cs-videos__item-icon { color: var(--cs-primary); }

/* --- Videos: administración (videos/index) --- */
.cs-videos__admin {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.cs-videos__admin > .cs-card { margin-bottom: 0; }
.cs-videos__upload-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cs-videos__upload-form .cs-btn { align-self: flex-start; }
body.cs-app .cs-videos__help { font-size: 12px; font-weight: 400; color: var(--cs-text-muted); }
body.cs-app .cs-field .form-control.cs-file {
  height: auto;
  min-height: 42px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}
body.cs-app .cs-file::file-selector-button {
  margin-right: 10px;
  padding: 4px 12px;
  border: 1px solid var(--cs-border-strong);
  border-radius: 6px;
  background: var(--cs-surface);
  color: var(--cs-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease;
}
body.cs-app .cs-file:hover::file-selector-button { border-color: var(--cs-primary); }
body.cs-app .cs-videos__table { min-width: 460px; }
/* Filas flotantes (tablas-flotantes): bordes de .table neutralizados por la base; filas compactas */
body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td { padding-top: 10px; padding-bottom: 10px; }
body.cs-app .cs-videos__table .form-control { height: 38px; font-size: 13.5px; }
.cs-videos__table th:last-child,
.cs-videos__table td:last-child { width: 1%; white-space: nowrap; }

/* --- Links y trámites (links/index, links/add) --- */
body.cs-app .cs-links__table { min-width: 640px; }
.cs-links__col-order { width: 96px; }
body.cs-app .cs-links__order.form-control {
  width: 76px;
  height: 36px;
  padding: 4px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cs-links__comment { display: block; max-width: 420px; }
.cs-links__comment:empty { display: none; }
.cs-links__url a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
  color: var(--cs-primary);
  font-size: 13px;
  word-break: break-all;
}
.cs-links__url a i { flex: 0 0 auto; font-size: 12px; color: var(--cs-text-subtle); }
.cs-links__url a:hover { text-decoration: underline; }
.cs-links .cs-card__header .cs-hint { margin-left: 0; }

/* --- Recursos (dashboard/external): iframe externo a todo lo ancho --- */
.cs-resources__frame { margin-bottom: 0; }
.cs-resources__frame iframe {
  display: block;
  width: 100%;
  height: calc(100vh - var(--cs-topbar-h, 64px) - 190px);
  min-height: 480px;
  border: 0;
  background: var(--cs-surface);
}

@media (max-width: 991.98px) {
  .cs-videos__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "player" "list";
    gap: 16px;
  }
  body.cs-app .cs-videos__list { max-height: 420px; }
  body.cs-app .cs-videos__screen video { max-height: 60vh; }
  .cs-videos__admin { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 575.98px) {
  .cs-videos__upload-form .cs-btn { align-self: stretch; }
  /* Tabla de títulos: cada fila se apila (título arriba, acciones abajo) */
  body.cs-app .cs-videos__table { min-width: 0; }
  .cs-videos__table thead { display: none; }
  /* Tarjeta por fila: borde, radio y fondo en el tr; las celdas sin borde ni fondo propio */
  body.cs-app .cs-videos table.cs-table--floating,
  body.cs-app .cs-videos table.cs-table--floating > tbody { display: block; }
  body.cs-app .cs-videos table.cs-table--floating { padding-top: 12px; }
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
  }
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr.is-highlighted { background-color: var(--cs-row-selected); border-color: var(--cs-primary); }
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td,
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td:first-of-type,
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td:last-of-type {
    display: block;
    width: 100% !important;
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
  }
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td:first-of-type { padding-top: 12px; }
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td:last-of-type { padding-bottom: 12px; }
  body.cs-app .cs-videos table.cs-table--floating > tbody > tr > td.cs-empty { padding: 28px 16px; }
  .cs-videos__table .cs-row-actions { display: flex; }
  .cs-videos__table .cs-row-actions .cs-btn:first-child { flex: 1 1 auto; }
  /* Links: cada fila como bloque (orden + descripción, link, acciones) */
  body.cs-app .cs-links__table { min-width: 0; }
  .cs-links__table thead { display: none; }
  .cs-links__table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "order desc" "url url" "actions actions";
    gap: 8px 12px;
    padding: 14px 16px;
  }
  /* Tarjeta por fila: borde, radio y fondo en el tr; las celdas sin borde ni fondo propio */
  body.cs-app .cs-links table.cs-table--floating,
  body.cs-app .cs-links table.cs-table--floating > tbody { display: block; }
  body.cs-app .cs-links table.cs-table--floating > tbody > tr {
    margin-bottom: 10px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
  }
  body.cs-app .cs-links table.cs-table--floating > tbody > tr.is-highlighted { background-color: var(--cs-row-selected); border-color: var(--cs-primary); }
  body.cs-app .cs-links table.cs-table--floating > tbody > tr > td,
  body.cs-app .cs-links table.cs-table--floating > tbody > tr > td:first-of-type,
  body.cs-app .cs-links table.cs-table--floating > tbody > tr > td:last-of-type { display: block; padding: 0; border: 0; border-radius: 0; width: auto; background: transparent !important; }
  .cs-links__table .cs-links__col-order { grid-area: order; }
  .cs-links__table .cs-links__col-desc { grid-area: desc; align-self: center; }
  .cs-links__table .cs-links__col-desc:first-child { grid-column: 1 / -1; }
  .cs-links__table .cs-links__url { grid-area: url; }
  .cs-links__table .cs-links__col-actions { grid-area: actions; }
  .cs-links__table .cs-links__col-actions .cs-row-actions { display: flex; }
  .cs-links__table .cs-links__col-actions .cs-btn:first-child { flex: 1 1 auto; gap: 8px; }
  /* El botón Abrir ocupa el ancho: se muestra su texto (sr-only en escritorio) */
  .cs-links__table .cs-links__col-actions .cs-btn:first-child .sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
  .cs-links__url a { max-width: 100%; }
  body.cs-app .cs-links__table tbody td.cs-empty,
  body.cs-app .cs-links table.cs-table--floating > tbody > tr > td.cs-empty { grid-column: 1 / -1; padding: 28px 16px; }
  .cs-resources__frame iframe { min-height: 420px; height: calc(100vh - var(--cs-topbar-h, 64px) - 240px); }
}

/* (fin utilerias-links) */

/* ==========================================================================
   Vehículos (vehicles/*)
   ========================================================================== */
/* (inicio vehiculos) */
/* main.css pinta filas por tipo (tr.tipo-N) y borrados (.row_deleted gris); se neutraliza */
body.cs-app .cs-veh-table tbody tr[class*="tipo-"] { background: transparent; }
/* El historial (cs-table--floating) toma fondos, hover y borrados de tablas-flotantes */
body.cs-app .cs-veh-table:not(.cs-table--floating) tbody tr:hover { background: var(--cs-row-hover); }
body.cs-app .cs-veh-table:not(.cs-table--floating) tbody tr.row_deleted,
body.cs-app .cs-veh-table:not(.cs-table--floating) tbody tr.row_deleted td { background: var(--cs-neutral-soft); color: var(--cs-text-muted); }
body.cs-app .cs-veh-history.cs-table--floating > tbody > tr.row_deleted > td { color: var(--cs-text-muted); }
body.cs-app .cs-veh-table .row_deleted .glyphicon { color: inherit; }
.cs-veh-table .cs-table__primary { text-transform: none; }
.cs-veh-table thead th { vertical-align: bottom; }
.cs-veh-table thead th,
.cs-veh-table tbody td { padding-left: 12px; padding-right: 12px; }
.cs-veh-table thead th:first-child,
.cs-veh-table tbody td:first-child { padding-left: 16px; }
.cs-veh-table thead th:last-child,
.cs-veh-table tbody td:last-child { padding-right: 16px; }

/* Vehículo (descripción + kilometraje actual + editar) */
.cs-veh-unit { min-width: 180px; }
.cs-veh-unit__name { display: flex; align-items: center; gap: 10px; }
.cs-veh-unit__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 13px;
}
.cs-veh-unit .cs-table__meta { flex-wrap: wrap; margin-top: 4px; padding-left: 40px; }
.cs-veh-km { font-weight: 600; color: var(--cs-text); font-variant-numeric: tabular-nums; }
.cs-veh-km::after { content: " km"; font-weight: 400; color: var(--cs-text-muted); }
.cs-veh-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  color: var(--cs-primary) !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.cs-veh-edit:hover { background: var(--cs-primary-soft); }
.cs-veh-table .cs-veh-edit i { font-size: 10px; color: inherit; }
.cs-veh-alert { margin: 6px 0 0 40px; height: 24px; font-size: 12px; }
.cs-veh-alert .glyphicon { color: inherit; }

/* Recorrido calculado por el JS (span.row_N), debajo del kilometraje */
.cs-veh-calcrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-veh-diff {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cs-veh-diff::before { content: "+"; }
.cs-veh-diff::after { content: "km"; margin-left: 3px; font-weight: 500; }
.cs-veh-diff:empty { background: transparent; padding: 0; }
.cs-veh-diff:empty::before { content: "—"; color: var(--cs-text-subtle); font-weight: 400; }
.cs-veh-diff:empty::after { content: none; }

/* Mantenimiento: una fila = un formulario (controles compactos) */
.cs-veh-main tbody td { vertical-align: top; }
.cs-veh-main tbody td.cs-veh-unit,
.cs-veh-main tbody td.text-right { vertical-align: middle; }
/* Dos controles apilados por celda (Fecha/Tipo, Costo/Técnico, Km/Recorrido) */
.cs-veh-stack > * + * { margin-top: 8px; }
body.cs-app .cs-veh-main .form-control { height: 38px; font-size: 13.5px; }
body.cs-app .cs-veh-main .cs-veh-main__km { min-width: 108px; font-variant-numeric: tabular-nums; }
body.cs-app .cs-veh-main .cs-veh-main__date,
body.cs-app .cs-veh-main .cs-veh-main__type { min-width: 138px; }
body.cs-app .cs-veh-main textarea.cs-veh-main__notes { min-width: 160px; height: 84px; min-height: 84px; resize: vertical; }
body.cs-app .cs-veh-main .cs-veh-main__money,
body.cs-app .cs-veh-main .cs-veh-main__tech { min-width: 124px; }
/* Acciones fijas a la derecha: Guardar siempre visible aunque la tabla se desplace */
.cs-veh-main thead th:last-child,
.cs-veh-main tbody td:last-child:not(.cs-empty) {
  position: sticky;
  right: 0;
  z-index: 1;
  padding-right: 16px;
  background: var(--cs-surface);
  box-shadow: inset 1px 0 0 var(--cs-border);
}
.cs-veh-main thead th:last-child { background: var(--cs-surface-2); }
.cs-veh-main tbody tr:hover td:last-child:not(.cs-empty) { background: var(--cs-row-hover); }

/* Historial */
.cs-veh-subname:empty { display: none; }
.cs-veh-subname::before { content: "· "; }
.cs-veh-strong { font-weight: 600; }
.cs-veh-history__notes { min-width: 220px; white-space: pre-line; }
.cs-veh-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-veh-type::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
/* Tipo de mantenimiento: 1 General, 2 Cambio piezas, 3 Gasolina, 4 Otro */
.cs-veh-type--1 { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-veh-type--2 { background: var(--cs-primary-soft); border-color: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-veh-type--3 { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }

/* Calculadora de kilómetros */
.cs-veh-calc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.cs-veh-calc__field { flex: 0 1 240px; }
.cs-veh-calc__results { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.cs-veh-stat { min-width: 200px; }
.cs-veh-stat .cs-stat__value small { font-size: 13px; font-weight: 500; color: var(--cs-text-muted); }
.cs-veh-stat--3 { background: var(--cs-success-soft); border-color: var(--cs-success-border); }
.cs-veh-stat--3 .cs-stat__icon { color: var(--cs-success); }
.cs-veh-stat--1 { background: var(--cs-info-soft); border-color: var(--cs-info-border); }
.cs-veh-stat--1 .cs-stat__icon { color: var(--cs-info); }

/* Modal de edición */
body.cs-app #editHistory .cs-field textarea.form-control { height: auto; min-height: 120px; }

@media (max-width: 767.98px) {
  .cs-veh-main thead th:last-child,
  .cs-veh-main tbody td:last-child:not(.cs-empty) { position: static; box-shadow: none; }
  .cs-veh-calc__results { margin-left: 0; width: 100%; }
}
@media (max-width: 575.98px) {
  .cs-veh-calc__field { flex: 1 1 100%; }
  .cs-veh-calc > .cs-btn { width: 100%; }
  .cs-veh-stat { flex: 1 1 100%; min-width: 0; }
}
/* (fin vehiculos) */

/* ==========================================================================
   Personal: usuarios (users/*)
   ========================================================================== */
/* (inicio personal-usuarios) */
/* --- Lista (users/index) --- */
.cs-users-stat--neutral { background: var(--cs-neutral-soft); }
.cs-users-stat--neutral .cs-stat__icon { color: var(--cs-text-muted); }

.cs-users-table .cs-users-name { text-transform: none; }
.cs-users-table td.cs-num,
.cs-users-table th.cs-num { text-align: right; }
.cs-users-table th { white-space: nowrap; }
.cs-users-table th.cs-users-th-wrap { white-space: normal; min-width: 96px; max-width: 120px; line-height: 1.25; }
.cs-users-table td { padding-left: 14px; padding-right: 14px; }
.cs-users-table .cs-users-role + .cs-table__meta { margin-top: 4px; white-space: nowrap; }

/* Vacaciones: número a la derecha y "Cálculo" a su izquierda (orden del DOM intacto) */
.cs-users-vacs {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.cs-users-vacs__value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }

/* Rol: pastilla discreta (Admin y Sub Admin en primario) */
.cs-users-role {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  background: var(--cs-surface-2);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-users-role--1,
.cs-users-role--3 { background: var(--cs-primary-soft); border-color: transparent; color: var(--cs-primary); }

/* Días de vacaciones / prestados */
.cs-users-days { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-users-days--debt { color: var(--cs-warning); }
.cs-users-days__note {
  display: block;
  font-size: 12px;
  color: var(--cs-text-muted);
}
.cs-row--deleted .cs-users-days { font-weight: 600; }

/* Formulario "Cálculo" dentro de la celda (main.css aplica form { width: 100% }) */
.cs-users-calc { display: block; width: auto !important; margin: 0; }
body.cs-app input.cs-users-calc__btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.cs-users-calc .cs-users-calc__btn,
body.cs-app input.cs-users-calc__btn {
  background: var(--cs-warning-soft);
  border-color: var(--cs-warning-border);
  color: var(--cs-warning);
}
body.cs-app input.cs-users-calc__btn:hover { border-color: var(--cs-warning); }

/* Botón "Vacaciones": el JS escucha el clic en el <span>, que ocupa todo el botón */
.cs-users-vac-link,
.cs-users-vac-link:hover,
.cs-users-vac-link:focus { display: inline-flex; text-decoration: none; border-radius: var(--cs-radius-sm); }
.cs-users-vac-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cs-focus-ring); }
.cs-users-vac-link .get-vacations i { pointer-events: none; }

/* Notas (bitácora) */
.cs-users-notes .cs-card__header { justify-content: flex-start; }
.cs-users-notes__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  width: auto !important;
  margin: 0 0 16px;
}
.cs-users-notes__field { flex: 1 1 320px; }
.cs-users-notes__list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
}
.cs-users-notes__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--cs-border);
  font-size: 14px;
  color: var(--cs-text);
}
.cs-users-notes__item:last-child { border-bottom: 0; }
.cs-users-notes__item:hover { background: var(--cs-row-hover); }
.cs-users-notes__text { min-width: 0; overflow-wrap: anywhere; }
.cs-users-notes__item .cs-btn { flex: 0 0 auto; }
.cs-users-notes__empty {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--cs-text-muted);
}
.cs-users-notes__empty i { display: block; margin-bottom: 6px; font-size: 20px; color: var(--cs-text-subtle); }

/* Modal de vacaciones: filas que genera el JS */
.cs-users-vac {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
}
.cs-users-vac__table thead th { padding: 10px 12px; }
.cs-users-vac__table tbody td { padding: 10px 12px; font-size: 13.5px; }
.cs-users-vac__table tbody td:first-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-users-vac__table tbody td:nth-child(5),
.cs-users-vac__table tbody td:nth-child(6) { white-space: nowrap; color: var(--cs-text-muted); }
.cs-users-vac:has(tbody:empty)::after {
  content: "Sin movimientos de vacaciones";
  display: block;
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--cs-text-muted);
}
#vacationModal .modal-title .name-vac { font-weight: 600; }

/* --- Alta / edición (users/add, users/edit) --- */
.cs-users-help { font-size: 12px; color: var(--cs-text-muted); }

/* Fecha de ingreso: columna propia en pantallas anchas; debajo del rol en el resto */
.cs-users-date-meta { display: none; }
@media (max-width: 1599.98px) {
  .cs-users-table .cs-users-col-date { display: none; }
  .cs-users-table .cs-users-date-meta { display: flex; }
}
/* Estado: columna en pantallas anchas; en el resto el chip "Baja" va debajo del correo */
.cs-users-status-meta { display: none !important; }
@media (max-width: 1365.98px) {
  .cs-users-table .cs-users-col-status { display: none; }
  .cs-users-table .cs-users-status-meta { display: inline-flex !important; margin-top: 6px; height: 22px; }
}
@media (max-width: 1279.98px) {
  /* Botón "Vacaciones" solo con icono para que quepan las acciones */
  .cs-users-vac-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cs-users-vac-link .get-vacations { width: 34px; padding: 0; }
  /* "Cálculo" debajo del número */
  .cs-users-vacs { flex-direction: column; align-items: flex-end; gap: 6px; }
  .cs-users-table td,
  .cs-users-table thead th { padding-left: 12px; padding-right: 12px; }
}
/* Tipo: columna propia desde 1200 px; debajo del correo en pantallas angostas */
.cs-users-role-meta { display: none !important; }
@media (max-width: 1199.98px) {
  .cs-users-table .cs-users-col-role { display: none; }
  .cs-users-table .cs-users-role-meta { display: flex !important; }
}
@media (max-width: 767.98px) {
  .cs-users-notes__form > .cs-btn { flex: 1 1 100%; }
}
/* (fin personal-usuarios) */

/* ==========================================================================
   Personal: vacaciones y préstamos (vacation_days/*, loans/*)
   ========================================================================== */
/* (inicio personal-rh) */
/* Listados (vacation_days/index, loans/index) */
.cs-rh .cs-hint.cs-rh-hint { margin-left: 0; }
@media (min-width: 1200px) {
  .cs-rh-filters--vac .cs-filters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-rh-filters--vac .cs-rh-filters__type { grid-column: span 2; }
}
/* El JS existente añade .status-N al select de tipo (main.css/tema lo colorean como estado de pedido) */
body.cs-app .cs-rh select.statusSearch,
body.cs-app .cs-rh select.statusSearch[class*="status-"] {
  background-color: var(--cs-input-bg);
  border-color: var(--cs-border-strong);
  color: var(--cs-text);
  font-weight: 400;
}

.cs-rh-table thead th,
.cs-rh-table tbody td { padding-left: 14px; padding-right: 14px; }
.cs-rh-table tbody td { vertical-align: top; }
.cs-rh-table tbody td.cs-empty { vertical-align: middle; }
.cs-rh-person { min-width: 170px; }
.cs-rh-person__name { display: block; font-weight: 600; }
.cs-rh-person .cs-table__meta { align-items: flex-start; }
.cs-rh-person .cs-table__meta > i { margin-top: 3px; }
/* Avatar (partials/cs-avatar): alineado arriba como el resto de la fila; el nombre no se estrecha */
.cs-rh-person .cs-person { align-items: flex-start; }
.cs-rh-person .cs-person__body { min-width: 150px; }
.cs-rh-notes { min-width: 260px; }
.cs-rh-days { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-rh-amount { font-size: 15px; }

/* Tipo de movimiento: 1 Cálculo, 2 Restar vacaciones, 3 Agregar prestados,
   4 Pagar prestados, 5 Pagar vacaciones con prestados */
.cs-rh-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--cs-border);
  border-radius: 13px;
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.cs-rh-type::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}
.cs-rh-type--1 { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-rh-type--2 { background: var(--cs-warning-soft); border-color: var(--cs-warning-border); color: var(--cs-warning); }
.cs-rh-type--3 { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); color: var(--cs-danger); }
.cs-rh-type--4 { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }
.cs-rh-type--5 { background: var(--cs-primary-soft); border-color: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-rh-table .cs-rh-col-type { min-width: 210px; }
.cs-rh-table .cs-rh-type { max-width: 240px; }

/* Bitácora de notas (loans/index) */
.cs-rh-log-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; }
.cs-rh-log-form__field { flex: 1 1 320px; }
.cs-rh-log {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
}
.cs-rh-log__item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cs-border);
  color: var(--cs-text);
}
.cs-rh-log__item:last-child { border-bottom: 0; }
.cs-rh-log__item small { font-size: 13px; white-space: pre-line; }
.cs-rh-log__empty { margin: 0; padding: 16px; text-align: center; color: var(--cs-text-muted); font-size: 13px; }

/* Formularios (vacation_days/add, loans/create) */
body.cs-app .cs-rh .cs-field textarea.form-control { height: auto; min-height: 96px; }
body.cs-app .cs-rh-help { font-size: 12px; font-weight: 400; color: var(--cs-text-muted); }
/* AdminLTE pone label { font-weight: 700 } */
body.cs-app label.cs-rh-choice { font-weight: 400; }
.cs-rh-types { border: 0; padding: 0; min-width: 0; }
body.cs-app .cs-rh-types > legend.cs-field__label { float: none; width: auto; margin: 0 0 4px; padding: 0; }
.cs-rh-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.cs-rh-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-text);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cs-rh-choice:hover { border-color: var(--cs-primary); }
.cs-rh-choice:has(.cs-choice__input:checked) {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  box-shadow: inset 0 0 0 1px var(--cs-primary);
}
.cs-rh-choice:has(.cs-choice__input:focus-visible) { box-shadow: 0 0 0 3px var(--cs-focus-ring); }
body.cs-app .cs-rh-choice .cs-choice__input { flex: 0 0 18px; margin-top: 7px; }
.cs-rh-choice__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 13px;
}
.cs-rh-choice__icon--2 { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-rh-choice__icon--3 { background: var(--cs-danger-soft); color: var(--cs-danger); }
.cs-rh-choice__icon--4 { background: var(--cs-success-soft); color: var(--cs-success); }
.cs-rh-choice__icon--5 { background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-rh-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-rh-choice__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.cs-rh-choice__desc { font-size: 12.5px; line-height: 1.35; color: var(--cs-text-muted); }

/* Detalle de préstamo (loans/show) */
.cs-rh-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px 24px;
  margin: 0;
}
.cs-rh-summary__item { min-width: 0; }
.cs-rh-summary__item--wide { grid-column: span 2; }
.cs-rh-summary dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-rh-summary dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-rh-summary__amount { font-size: 22px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.cs-rh-summary .cs-rh-summary__notes { font-weight: 400; color: var(--cs-text-muted); white-space: pre-line; }
.cs-rh-detail { display: flex; align-items: flex-start; gap: 24px; }
.cs-rh-detail__form { flex: 0 0 340px; }
.cs-rh-detail__list { flex: 1 1 auto; min-width: 0; }
.cs-rh-block { width: 100%; }

@media (max-width: 991.98px) {
  .cs-rh-detail { flex-direction: column; align-items: stretch; gap: 0; }
  .cs-rh-detail__form { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
  .cs-rh-summary__item--wide { grid-column: auto; }
  .cs-rh .cs-stats > .cs-stat { flex: 1 1 100%; }
  .cs-rh-log-form > .cs-btn { width: 100%; }
  .cs-rh-choices { grid-template-columns: 1fr; }
}
/* (fin personal-rh) */

/* ==========================================================================
   Configuración: variables del sistema (vars/index)
   ========================================================================== */
/* (inicio config-vars) */
/* Variables del sistema / de la Tienda (vars/index). Las pestañas son de
   Bootstrap 3 (<li class="active"><a data-toggle="tab">) con el JS de
   Bootstrap 4: este marca a.active y nunca quita li.active, así que el
   li.active solo se pinta mientras no haya ningún a.active en la lista. */
.cs-vars-accordion { display: flex; flex-direction: column; gap: 16px; }
body.cs-app .cs-vars-acc { margin: 0; overflow: hidden; }
body.cs-app .cs-vars-acc > .cs-vars-acc__head {
  padding: 0;
  border-bottom: 0;
  background: transparent;
}
.cs-vars-acc:has(> .collapse.show) > .cs-vars-acc__head,
.cs-vars-acc:has(> .collapsing) > .cs-vars-acc__head { border-bottom: 1px solid var(--cs-border); }
.cs-vars-acc__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  margin: 0;
}
body.cs-app .cs-vars-acc__toggle {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cs-text);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: background-color .15s ease;
}
body.cs-app .cs-vars-acc__toggle:hover { background: var(--cs-row-hover); color: var(--cs-text); text-decoration: none; }
body.cs-app .cs-vars-acc__toggle:focus { color: var(--cs-text); text-decoration: none; box-shadow: none; }
body.cs-app .cs-vars-acc__toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cs-focus-ring); }
.cs-vars-acc__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: 16px;
}
.cs-vars-acc__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cs-vars-acc__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--cs-text); }
.cs-vars-acc__desc { font-size: 13px; line-height: 1.4; color: var(--cs-text-muted); }
.cs-vars-acc__chevron { flex: 0 0 auto; font-size: 13px; color: var(--cs-text-subtle); transition: transform .2s ease; }
.cs-vars-acc:has(> .collapse.show) .cs-vars-acc__chevron { transform: rotate(180deg); }
.cs-vars-acc__copy { flex: 0 0 auto; margin-right: 20px; }
body.cs-app .cs-vars-acc__body { padding: 20px; background: var(--cs-bg); }

/* Índice de secciones (anclas) */
.cs-vars-index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.cs-vars-index__label {
  flex: 0 0 auto;
  margin-right: 4px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
body.cs-app .cs-vars-index a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  background: var(--cs-surface);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.cs-app .cs-vars-index a:hover { border-color: var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary); }

/* Rejilla de tarjetas */
.cs-vars-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.cs-vars-w12 { grid-column: 1 / -1; }
.cs-vars-w6 { grid-column: span 6; }
body.cs-app .cs-vars-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  scroll-margin-top: 16px;
  transition: box-shadow .2s ease;
}
.cs-vars-card:target { box-shadow: 0 0 0 2px var(--cs-primary); }
.cs-vars-card > .cs-card__body:not(.tab-content) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-vars-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-vars-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cs-text-muted); }
body.cs-app .cs-vars-desc code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-border);
  color: var(--cs-text);
  font-size: 12.5px;
}

/* Formularios */
.cs-vars-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  margin: 0;
}
.cs-vars-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
}
body.cs-app .cs-vars .cs-field textarea.form-control { height: auto; }
body.cs-app .cs-vars-json {
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
body.cs-app .cs-vars-footer { min-height: 120px; resize: vertical; }
.cs-vars-narrow { max-width: 240px; }

/* Etiqueta a la izquierda + control */
.cs-vars-rows { display: flex; flex-direction: column; gap: 12px; }
body.cs-app .cs-vars-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 160px);
  align-items: center;
  gap: 6px 16px;
  margin: 0;
}
body.cs-app .cs-vars-row__label { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--cs-text); }
body.cs-app .cs-vars-row .form-control { height: 42px; font-variant-numeric: tabular-nums; }

/* Grupos de precios (corte) y subformularios (alertas) */
.cs-vars-group { display: flex; flex-direction: column; gap: 10px; }
.cs-vars-group + .cs-vars-group { padding-top: 14px; border-top: 1px solid var(--cs-border); }
.cs-vars-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
}
.cs-vars-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cs-neutral-soft);
  border: 1px solid var(--cs-border);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cs-text);
}
.cs-vars-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.cs-app .cs-vars-fields .form-control { font-variant-numeric: tabular-nums; }
.cs-vars-subform { display: flex; flex-direction: column; gap: 10px; }
.cs-vars-subform + .cs-vars-subform { padding-top: 16px; border-top: 1px solid var(--cs-border); }
.cs-vars-subform > .cs-vars-form { flex: 0 0 auto; }

/* Pestañas */
body.cs-app .cs-vars-tabs.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--cs-border);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}
.cs-vars-tabs::-webkit-scrollbar { display: none; }
body.cs-app .cs-vars-tabs.nav-tabs::before,
body.cs-app .cs-vars-tabs.nav-tabs::after { content: none; display: none; }
body.cs-app .cs-vars-tabs > li { float: none; margin: 0 0 -1px; }
body.cs-app .cs-vars-tabs > li > a,
body.cs-app .cs-vars-tabs > li.active > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--cs-text-muted);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
body.cs-app .cs-vars-tabs > li > a:hover,
body.cs-app .cs-vars-tabs > li > a:focus { color: var(--cs-text); background: transparent; border-color: transparent; }
body.cs-app .cs-vars-tabs > li > a.active,
body.cs-app .cs-vars-tabs:not(:has(> li > a.active)) > li.active > a {
  color: var(--cs-primary);
  border-bottom-color: var(--cs-primary);
  font-weight: 600;
}

/* 1 a 99 copias */
.cs-vars-copies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
body.cs-app .cs-vars-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
body.cs-app .cs-vars-cell__label { font-size: 12px; font-weight: 500; color: var(--cs-text-muted); white-space: nowrap; }
body.cs-app .cs-vars-cell .form-control {
  height: 40px;
  padding: 6px 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Matriz de tabloides */
.cs-vars-matrix { min-width: 760px; }
body.cs-app .cs-vars-matrix thead th { padding: 10px 8px; vertical-align: middle; white-space: normal; }
body.cs-app .cs-vars-matrix tbody td { padding: 8px; }
body.cs-app .cs-vars-matrix tr > :first-child { padding-left: 20px; }
body.cs-app .cs-vars-matrix tr > :last-child { padding-right: 20px; }
body.cs-app .cs-vars-matrix .cs-vars-matrix__corner { width: 24%; font-size: 12px; color: var(--cs-text-muted); }
.cs-vars-matrix__name { min-width: 180px; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
body.cs-app .cs-vars-matrix .form-control {
  height: 40px;
  min-width: 84px;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
body.cs-app .cs-vars-matrix thead .form-control { min-width: 116px; background-color: var(--cs-surface); font-weight: 600; }
body.cs-app .cs-vars-foot { padding: 14px 20px; border-top: 1px solid var(--cs-border); }

@media (max-width: 1199.98px) {
  .cs-vars-w6 { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .cs-vars-grid { gap: 16px; }
  body.cs-app .cs-vars-acc__body { padding: 12px; }
  body.cs-app .cs-vars-acc__toggle { padding: 14px 16px; gap: 12px; }
  .cs-vars-acc__icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; }
  .cs-vars-acc__copy { flex: 1 1 calc(100% - 32px); margin: 0 16px 16px; }
  body.cs-app .cs-vars-index a { min-height: 40px; }
  body.cs-app .cs-vars-tabs.nav-tabs { padding: 0 8px; }
  body.cs-app .cs-vars-row { grid-template-columns: minmax(0, 1fr); }
  .cs-vars-narrow { max-width: none; }
  .cs-vars-actions .cs-btn { flex: 1 1 auto; }
  .cs-vars-copies { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
  body.cs-app .cs-vars-cell__label { font-size: 12px; }
  body.cs-app .cs-vars-card > .cs-card__body:not(.cs-vars-foot) { padding: 16px; }
  .cs-vars-index {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px;
  }
  .cs-vars-index::-webkit-scrollbar { display: none; }
  body.cs-app .cs-vars-index a { flex: 0 0 auto; white-space: nowrap; }
  /* Columna del papel fija al desplazar la matriz */
  body.cs-app .cs-vars-matrix tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 12px;
    background: var(--cs-surface);
    box-shadow: 1px 0 0 var(--cs-border);
  }
  body.cs-app .cs-vars-matrix thead tr > :first-child { background: var(--cs-surface-2); }
  .cs-vars-matrix__name { min-width: 140px; max-width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-vars .collapsing,
  .cs-vars .fade,
  .cs-vars-acc__chevron,
  body.cs-app .cs-vars-acc__toggle,
  body.cs-app .cs-vars-tabs > li > a,
  body.cs-app .cs-vars-index a,
  body.cs-app .cs-vars-card { transition: none; }
}
/* (fin config-vars) */

/* ==========================================================================
   Configuración: cuestionarios y códigos (questionaries/*, codes/index)
   ========================================================================== */
/* (inicio config-cuestionarios) */

/* --- Tablas (questionaries/index, list, answerAll; codes/index) --- */
.cs-quiz-table .cs-quiz-col-id { width: 72px; }
.cs-quiz-col-name { min-width: 220px; }
.cs-quiz-name { display: block; font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-quiz-table .cs-table__meta { flex-wrap: wrap; }
body.cs-app .cs-quiz-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--cs-primary);
  font-size: 13px;
  overflow-wrap: anywhere;
}
body.cs-app .cs-quiz-url i { font-size: 11px; color: var(--cs-text-subtle); }
.cs-quiz-ref { font-variant-numeric: tabular-nums; }
.cs-quiz-ref::before { display: none; }
.cs-quiz-code {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--cs-border);
  border-radius: 6px;
  background: var(--cs-surface-2);
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cs-text);
}
.cs-quiz-user { white-space: nowrap; }

/* Select de estatus: 1 Activo (verde) · 2 Inactivo (neutro).
   El select debe seguir siendo hijo directo del <form>: el JS hace $(this).parent().submit() */
body.cs-app select.cs-status-select.cs-quiz-status { min-width: 124px; }
body.cs-app select.cs-status-select.cs-quiz-status--1 {
  background-color: var(--cs-success-soft);
  border-color: var(--cs-success-border) !important;
  color: var(--cs-success);
}
body.cs-app select.cs-status-select.cs-quiz-status--2 {
  background-color: var(--cs-neutral-soft);
  border-color: var(--cs-border-strong) !important;
  color: var(--cs-text-muted);
}

/* Acciones por fila: texto en escritorio, solo icono (con title) en pantallas angostas */
.cs-quiz-actions .cs-btn--danger:hover { background: var(--cs-danger-soft); }

/* --- Formulario de cuestionario (add / edit) --- */
.cs-quiz-help {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--cs-text-muted);
}
.cs-quiz-help i { color: var(--cs-text-subtle); }
.cs-quiz-help strong { color: var(--cs-text); font-weight: 600; }

/* Filas .quest: las estáticas y las que agrega el JS comparten este markup */
.cs-quiz-questions { counter-reset: cs-quiz-q; }
body.cs-app .cs-quiz-questions .quest {
  counter-increment: cs-quiz-q;
  position: relative;
  margin: 0 0 12px;
  padding: 14px 8px 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
  transition: border-color .15s ease;
}
body.cs-app .cs-quiz-questions .quest:last-child { margin-bottom: 0; }
body.cs-app .cs-quiz-questions .quest:focus-within { border-color: var(--cs-border-strong); }
body.cs-app .cs-quiz-questions .quest label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-text);
}
body.cs-app .cs-quiz-questions .quest > div:first-child label::after {
  content: "\00a0" counter(cs-quiz-q);
  color: var(--cs-text-muted);
}
/* <label>.</label> del markup original solo sirve para alinear el botón */
body.cs-app .cs-quiz-questions .quest > div:last-child label { visibility: hidden; }
body.cs-app .cs-quiz-questions .form-control { height: 42px; font-size: 14px; background-color: var(--cs-input-bg); }
body.cs-app .cs-quiz-questions a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  padding: 0;
  border: 1px solid var(--cs-danger-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-danger);
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body.cs-app .cs-quiz-questions a.remove:hover,
body.cs-app .cs-quiz-questions a.remove:focus { background: var(--cs-danger-soft); border-color: var(--cs-danger); color: var(--cs-danger); }
body.cs-app .cs-quiz-questions a.remove:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cs-focus-ring); }
body.cs-app .cs-quiz-form .cs-card__header .cs-btn.add { flex: 0 0 auto; }
body.cs-app .cs-quiz-form input.cs-btn[type="submit"] { line-height: 1; }

/* --- Detalle de una respuesta (answer) --- */
.cs-quiz-qa { margin: 0; padding: 0; list-style: none; }
.cs-quiz-qa__item {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-quiz-qa__item:last-child { border-bottom: 0; }
.cs-quiz-qa__num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cs-primary-soft);
  color: var(--cs-primary);
  font-size: 13px;
  font-weight: 700;
}
.cs-quiz-qa__body { min-width: 0; flex: 1 1 auto; }
.cs-quiz-qa__label {
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-quiz-qa__question,
.cs-quiz-qa__answer,
.cs-quiz-qa__options { margin: 0 0 10px; overflow-wrap: anywhere; }
.cs-quiz-qa__question { color: var(--cs-text-muted); font-size: 13.5px; }
.cs-quiz-qa__answer {
  padding: 8px 12px;
  border-left: 3px solid var(--cs-primary);
  border-radius: 0 var(--cs-radius-sm) var(--cs-radius-sm) 0;
  background: var(--cs-surface-2);
  color: var(--cs-text);
  font-weight: 600;
  min-height: 38px;
}
.cs-quiz-qa__options { margin-bottom: 0; font-size: 13px; color: var(--cs-text-muted); }
.cs-quiz-qa .cs-empty { display: block; }

/* --- Respuestas de todos (answerAll): DataTables + botón Excel --- */
/* Tabla flotante: DataTables mete un wrapper entre .table-responsive y la tabla; el aire va en el wrapper */
body.cs-app .cs-quiz-all .dataTables_wrapper { padding: 0 4px 8px; }
body.cs-app .cs-quiz-all .dt-buttons {
  float: none;
  display: flex;
  justify-content: flex-end;
  padding: 0 0 4px;
  position: sticky;
  left: 0;
}
body.cs-app .cs-quiz-all .dt-buttons .dt-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  background-image: none;
  color: var(--cs-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  transition: border-color .15s ease, background-color .15s ease;
}
body.cs-app .cs-quiz-all .dt-buttons .dt-button::before {
  content: "\f1c3";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-size: 14px;
}
body.cs-app .cs-quiz-all .dt-buttons .dt-button:hover:not(.disabled) {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  background-image: none;
}
body.cs-app .cs-quiz-all .dt-buttons .dt-button:focus { outline: none; box-shadow: 0 0 0 3px var(--cs-focus-ring); }
body.cs-app table.cs-quiz-table--all { margin: 0 !important; }
body.cs-app table.cs-quiz-table--all thead th {
  min-width: 180px;
  max-width: 360px;
  padding: 11px 16px;
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.35;
}
body.cs-app table.cs-quiz-table--all thead th:first-child,
body.cs-app table.cs-quiz-table--all tbody td:first-child { min-width: 0; white-space: nowrap; font-weight: 600; }
body.cs-app table.cs-quiz-table--all tbody td { overflow-wrap: anywhere; }
body.cs-app table.cs-quiz-table--all.dataTable.no-footer { border-bottom: 0; }
body.cs-app .cs-quiz-all .dataTables_empty { padding: 28px 16px; text-align: center; color: var(--cs-text-muted); }

/* --- Responsivo --- */
@media (max-width: 1399.98px) {
  .cs-quiz-actions__text { display: none; }
  .cs-quiz-actions .cs-btn--sm { width: 34px; padding: 0; }
}
@media (max-width: 767.98px) {
  .cs-quiz-actions .cs-btn--sm { width: 40px; height: 40px; }
  .cs-quiz-col-name { min-width: 180px; }
  body.cs-app .cs-quiz-questions .quest { padding: 12px 4px 4px; }
  body.cs-app .cs-quiz-questions .quest > [class*="col-"] { margin-bottom: 12px; }
  /* El botón quitar sube a la esquina de la tarjeta de la pregunta */
  body.cs-app .cs-quiz-questions .quest > div:first-child label {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 4px;
    padding-right: 52px;
  }
  body.cs-app .cs-quiz-questions .quest > div:last-child {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 40px;
    max-width: 40px;
    margin: 0;
    padding: 0;
  }
  body.cs-app .cs-quiz-questions .quest > div:last-child label { display: none; }
  body.cs-app .cs-quiz-questions a.remove { width: 40px; height: 40px; }
  .cs-quiz-qa__item { padding: 14px 16px; gap: 10px; }
  body.cs-app .cs-quiz-all .dt-buttons { padding: 0 0 4px; justify-content: stretch; }
  /* questionaries/index: la celda Id se oculta y la esquina izquierda pasa a Nombre */
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > thead > tr > th:nth-child(2) {
    border-left: 1px solid var(--cs-border);
    border-radius: var(--cs-radius) 0 0 var(--cs-radius);
  }
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr > td.cs-quiz-col-name {
    border-left: 1px solid var(--cs-border);
    border-radius: var(--cs-radius) 0 0 var(--cs-radius);
  }
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr.is-highlighted > td.cs-quiz-col-name { border-left-color: var(--cs-primary); }
  body.cs-app .cs-quiz-all .dt-buttons .dt-button { flex: 1 1 auto; justify-content: center; height: 40px; }
  body.cs-app table.cs-quiz-table--all thead th { min-width: 160px; }
}
@media (max-width: 575.98px) {
  /* questionaries/index: cada fila se apila (nombre arriba; estatus y acciones debajo).
     Fila flotante: borde, radio y fondo van en el <tr>; las celdas sin borde ni fondo */
  .cs-quiz-table--stack thead { display: none; }
  .cs-quiz-table--stack,
  .cs-quiz-table--stack tbody { display: block; width: 100%; }
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    margin: 0 0 10px;
    padding: 14px 12px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
    transition: transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
  }
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr > td,
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr > td.cs-quiz-col-name {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr.is-highlighted {
    background-color: var(--cs-row-selected);
    border-color: var(--cs-primary);
  }
  .cs-quiz-table--stack tbody td.cs-quiz-col-name,
  .cs-quiz-table--stack tbody td.cs-empty { flex: 1 1 100%; min-width: 0; }
  .cs-quiz-table--stack tbody td.cs-quiz-col-status { flex: 1 1 96px; min-width: 96px; }
  body.cs-app .cs-quiz-table--stack select.cs-status-select.cs-quiz-status { width: 100%; min-width: 0; height: 40px; padding-left: 10px; padding-right: 24px; }
  .cs-quiz-table--stack tbody td.text-right { margin-left: auto; }
  .cs-quiz-table--stack .cs-quiz-actions { gap: 4px; }
  .cs-quiz-table--stack tbody td.cs-empty { padding: 28px 16px !important; }
  .cs-quiz-codes thead th,
  .cs-quiz-codes tbody td { padding-left: 12px; padding-right: 12px; }
  .cs-quiz-validate__text { display: none; }
  .cs-quiz-validate .cs-btn--sm { width: 40px; height: 40px; padding: 0; }
}
@media (max-width: 575.98px) and (hover: hover) and (pointer: fine) {
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr:has(> td:not(.cs-empty)):hover { background-color: var(--cs-row-hover); }
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr.is-highlighted:has(> td:not(.cs-empty)):hover { background-color: var(--cs-row-selected); }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app .cs-quiz-questions .quest,
  body.cs-app .cs-quiz-questions a.remove,
  body.cs-app .cs-quiz-all .dt-buttons .dt-button,
  body.cs-app .cs-quiz table.cs-quiz-table--stack.cs-table--floating > tbody > tr { transition: none; }
}
/* (fin config-cuestionarios) */

/* ==========================================================================
   Configuración: boletín y respaldos (newsletters/*, backups/index)
   ========================================================================== */
/* (inicio config-boletin) */
/* Boletín: suscriptores (newsletters/index), envío (newsletters/send) y respaldos (backups/index) */
.cs-news .cs-card__title .cs-count { margin-left: 2px; }
.cs-news .cs-card__header .cs-hint { margin-left: 0; }
.cs-news .cs-filters__footer .cs-hint { margin-left: 0; }
.cs-news-filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* --- Suscriptores: tabla con DataTables (sin paginación) y un formulario por fila --- */
/* Tabla flotante: DataTables mete un wrapper entre .table-responsive y la tabla; el aire va en el wrapper */
body.cs-app .cs-news .dataTables_wrapper { padding: 0 4px 8px; color: var(--cs-text); }
body.cs-app .cs-news .dataTables_wrapper::after { content: ""; display: block; clear: both; }
body.cs-app .cs-news table.cs-news-table,
body.cs-app .cs-news table.cs-news-table.dataTable {
  width: 100% !important;
  margin: 0 !important;
  font-size: 14px;
}
body.cs-app .cs-news table.cs-news-table thead th {
  padding: 11px 8px;
  background-image: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
body.cs-app .cs-news table.cs-news-table tbody td {
  padding: 10px 8px;
  vertical-align: middle;
}
body.cs-app .cs-news table.cs-news-table.no-footer { border-bottom: 0; }
body.cs-app .cs-news table.dataTable td.dataTables_empty { padding: 32px 16px; text-align: center; color: var(--cs-text-muted); }

/* Botón Excel de DataTables Buttons (sin su CSS): barra sobre la tabla */
body.cs-app .cs-news .dt-buttons {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 4px;
}
body.cs-app .cs-news .dt-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  color: var(--cs-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
body.cs-app .cs-news .dt-button::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1c3"; /* far fa-file-excel */
  color: var(--cs-success);
}
body.cs-app .cs-news .dt-button:hover { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
body.cs-app .cs-news .dt-button:focus { outline: none; }
body.cs-app .cs-news .dt-button:focus-visible { box-shadow: 0 0 0 3px var(--cs-focus-ring); }

/* Controles de edición dentro de la fila */
body.cs-app .cs-news-table .cs-news-input {
  height: 36px;
  padding: 6px 10px;
  font-size: 13.5px;
}
body.cs-app .cs-news-table .cs-news-input--name { min-width: 140px; }
body.cs-app .cs-news-table .cs-news-input--email { min-width: 170px; }
body.cs-app .cs-news-table .cs-news-input--phone { min-width: 105px; }
.cs-news-notes { min-width: 90px; max-width: 240px; color: var(--cs-text-muted); font-size: 13px; word-break: break-word; }
.cs-news-from { white-space: nowrap; color: var(--cs-text-muted); font-size: 13px; }
.cs-news-table .cs-row-actions { gap: 6px; }

/* Registros borrados (solo rol 1, withTrashed): el fondo lo pone la base (.cs-row--deleted > td); los campos se leen como valores */
body.cs-app .cs-news-table tr.row_deleted { color: var(--cs-text-muted); }
body.cs-app .cs-news-table tr.row_deleted .cs-news-input {
  border-color: transparent;
  background: transparent;
  color: var(--cs-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--cs-text-subtle);
}
body.cs-app .cs-news-table tr.row_deleted .cs-news-input:focus { border-color: var(--cs-primary); text-decoration: none; }
.cs-news-deleted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid var(--cs-danger-border);
  border-radius: 999px;
  background: var(--cs-danger-soft);
  color: var(--cs-danger);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-news-deleted i { font-size: 11px; }
/* Texto solo visual: no entra en la exportación a Excel de DataTables */
.cs-news-deleted::after { content: "Borrado"; }
.cs-news-table td .cs-badge { vertical-align: middle; }
.cs-news-table td .cs-badge + .cs-news-deleted { display: flex; width: max-content; }

/* --- Envío de mails --- */
.cs-news-send__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
}
@media (min-width: 1200px) {
  .cs-news-send__grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
}
.cs-news-sendform { margin: 0; }
.cs-news-sendform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cs-news-recipients {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border-right: 1px solid var(--cs-border);
}
.cs-news-recipients__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-news-recipients__search { flex: 1 1 180px; min-width: 0; }
body.cs-app .cs-news-recipients__search input.search {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px 6px 40px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-input-bg);
  color: var(--cs-text);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.cs-app .cs-news-recipients__search input.search::placeholder { color: var(--cs-text-subtle); }
body.cs-app .cs-news-recipients__search input.search:focus {
  outline: none;
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
}
.cs-news-recipients__bar #check { flex: 0 0 auto; height: 40px; }
.cs-news-recipients__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-news-recipients__list {
  height: 440px;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
}
.cs-news-recipients__list > div.search { border-bottom: 1px solid var(--cs-border); }
.cs-news-recipients__list > div.search:last-child { border-bottom: 0; }
body.cs-app .cs-news-recipients__list > div.search label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 11px 12px;
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.cs-app .cs-news-recipients__list > div.search label:hover { background: var(--cs-row-hover); }
.cs-news-recipients__list input.cs-check { margin-top: 1px !important; flex: 0 0 auto; }
.cs-news-recipient__text { display: flex; flex-wrap: wrap; column-gap: 6px; min-width: 0; line-height: 1.35; }
.cs-news-recipient__name { font-weight: 600; color: var(--cs-text); }
.cs-news-recipient__email { color: var(--cs-text-muted); font-size: 12.5px; word-break: break-all; }
.cs-news-recipients__empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--cs-text-muted); }
.cs-news-recipients__empty i { display: block; margin-bottom: 8px; font-size: 22px; color: var(--cs-text-subtle); }

.cs-news-compose { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; }
body.cs-app .cs-news .cs-news-help { font-size: 12px; font-weight: 400; color: var(--cs-text-muted); }
.cs-news-note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
  color: var(--cs-text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.cs-news-note i { margin-top: 2px; color: var(--cs-info); }
.cs-news-compose__actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.cs-news-compose__actions .cs-btn { min-width: 140px; }

/* Historial */
.cs-news-history__scroll { max-height: 480px; overflow-y: auto; }
body.cs-app .cs-news table.cs-news-history__table { margin: 0; }
/* Encabezado fijo al desplazar: fondo opaco (surface-2) y una sombra del color de la tarjeta que tapa
   las filas que pasan por encima y por debajo de la pastilla */
body.cs-app .cs-news table.cs-news-history__table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 11px 14px;
  box-shadow: 0 -4px 0 0 var(--cs-surface), 0 10px 0 0 var(--cs-surface);
}
body.cs-app .cs-news table.cs-news-history__table tbody td { padding: 10px 14px; }
.cs-news-history__subject { font-weight: 500; word-break: break-word; }
.cs-news-history__table tbody td:last-child { width: 1%; white-space: nowrap; }

/* Encabezado y pie */
.cs-news-headfoot { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.cs-news-headfoot__item { display: flex; flex-direction: column; gap: 8px; }
.cs-news-headfoot .cs-btn { align-self: flex-start; min-width: 120px; }
body.cs-app .cs-news-headfoot .form-control.cs-file {
  height: auto;
  min-height: 42px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}
.cs-news-preview {
  display: block;
  padding: 8px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface-2);
}
.cs-news-preview img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 6px;
}

/* --- Respaldos --- */
.cs-news-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cs-news-file__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-info-soft);
  color: var(--cs-info);
  font-size: 16px;
}
.cs-news-file__text { display: flex; flex-direction: column; min-width: 0; }
.cs-news-file__name { font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-all; }
.cs-news-file__dir { margin-top: 2px; font-size: 12.5px; color: var(--cs-text-muted); word-break: break-all; }
body.cs-app .cs-news table.cs-news-backups__table { margin: 0; }
body.cs-app .cs-news table.cs-news-backups__table thead th { padding: 11px 16px; }
body.cs-app .cs-news table.cs-news-backups__table tbody td { padding: 12px 16px; }

@media (max-width: 767.98px) {
  .cs-news-recipients { border-right: 0; border-bottom: 1px solid var(--cs-border); padding: 16px; }
  .cs-news-compose { padding: 16px; }
  .cs-news-recipients__list { height: 360px; }
  .cs-news-compose__actions .cs-btn { width: 100%; }
  .cs-news-headfoot .cs-btn { align-self: stretch; }
  body.cs-app .cs-news .dt-buttons { padding: 0 0 4px; justify-content: flex-start; }
  body.cs-app .cs-news table.cs-news-backups__table thead th,
  body.cs-app .cs-news table.cs-news-backups__table tbody td { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 575.98px) {
  .cs-news-recipients__bar #check { flex: 1 1 100%; }
  .cs-news .cs-page-actions,
  .cs-news .cs-page-actions .cs-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app .cs-news .dt-button,
  body.cs-app .cs-news-recipients__search input.search,
  body.cs-app .cs-news-recipients__list > div.search label { transition: none; }
}
/* (fin config-boletin) */

/* ==========================================================================
   Reportes (reports/errors, engargolados, logins, maintenance)
   ========================================================================== */
/* (inicio reportes) */

/* --- Comunes --- */
.cs-rep-hint,
.cs-rep-card .cs-card__header .cs-hint { margin-left: 0; }
.cs-rep-strong { font-weight: 600; }
.cs-rep-id { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-rep-date { font-variant-numeric: tabular-nums; color: var(--cs-text-muted); }
.cs-rep-empty { margin: 0; border-top: 1px solid var(--cs-border); }
.cs-rep-stat__amount {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cs-rep-stat--ticket .cs-stat__icon { background: var(--cs-primary-soft); color: var(--cs-primary); }

/* Chips de tipo (suaves) */
.cs-rep-type {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-rep-type--order { background: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
.cs-rep-type--ticket { background: var(--cs-primary-soft); border-color: transparent; color: var(--cs-primary); }

/* Tablas de reportes (.table de Bootstrap + table-bordered + estilos de DataTables neutralizados) */
body.cs-app .cs-rep-table { margin: 0; border: 0; }
body.cs-app .cs-rep-table thead th {
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-surface-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: bottom;
}
body.cs-app .cs-rep-table tbody td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--cs-border);
  vertical-align: middle;
}
/* Las cuatro tablas son flotantes (cs-table--floating): bordes, fondos y hover los pone la base */
body.cs-app .cs-rep-table .cs-empty { padding: 32px 16px; }
/* Erróneas sin cortes: el aviso va debajo de la cabecera, como una fila flotante */
.cs-card--floating > .cs-rep-empty {
  margin: 0 4px 8px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
}

/* --- Erróneas / Sicar --- */
.cs-rep-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--cs-text-muted); }
.cs-rep-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cs-rep-legend__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cs-rep-legend__item--error::before { background: var(--cs-danger); }
.cs-rep-legend__item--sicar::before { background: var(--cs-info); }

/* Resumen: es una .table sin <thead> que DataTables marca como table.dataTable; se dibuja como contadores */
.cs-rep-summary-wrap { padding: 16px 20px 20px; }
body.cs-app table.cs-rep-summary,
body.cs-app table.cs-rep-summary tbody {
  display: block;
  width: 100% !important;
  margin: 0;
  border: 0;
  background: transparent;
}
body.cs-app table.cs-rep-summary tr {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
}
body.cs-app table.cs-rep-summary td.cs-rep-summary__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
}
body.cs-app table.cs-rep-summary td.cs-rep-summary__cell--error { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); }
body.cs-app table.cs-rep-summary td.cs-rep-summary__cell--sicar { background: var(--cs-info-soft); border-color: var(--cs-info-border); }
.cs-rep-summary__label { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--cs-text-muted); }
.cs-rep-summary__value {
  min-height: 28px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cs-rep-summary__cell--error .cs-rep-summary__value { color: var(--cs-danger); }
.cs-rep-summary__cell--sicar .cs-rep-summary__value { color: var(--cs-info); }

/* Tabla de cortes: columnas agrupadas (erróneas / Sicar) */
body.cs-app .cs-rep-table--errors .cs-rep-col--group { border-left: 1px solid var(--cs-border); }
body.cs-app .cs-rep-table--errors thead .cs-rep-col--error .cs-sort--sub { color: var(--cs-danger) !important; }
body.cs-app .cs-rep-table--errors thead .cs-rep-col--sicar .cs-sort--sub { color: var(--cs-info) !important; }
.cs-rep-num--error { color: var(--cs-danger); font-weight: 600; }
.cs-rep-num--sicar { color: var(--cs-info); font-weight: 600; }

/* --- Mantenimiento --- */
.cs-rep-notes { min-width: 220px; white-space: pre-line; }
.cs-rep-tech { min-width: 140px; font-weight: 500; }
.cs-rep-table--main .cs-table__meta { white-space: nowrap; }
body.cs-app .cs-rep-modal .cs-field textarea.form-control { height: auto; min-height: 96px; resize: vertical; }

/* --- DataTables dentro de la tarjeta (engargolados, logs) --- */
/* Tabla flotante: DataTables mete un wrapper entre .table-responsive y la tabla; el aire va en el wrapper */
body.cs-app .cs-rep-dt .dataTables_wrapper { padding: 0 4px 8px; color: var(--cs-text); }
body.cs-app .cs-rep-dt .dataTables_wrapper::after { content: ""; display: block; clear: both; }
body.cs-app .cs-rep-dt .dataTables_wrapper table.dataTable {
  width: 100% !important;
  margin: 0 !important;
}
body.cs-app .cs-rep-dt table.dataTable.no-footer { border-bottom: 0; }
body.cs-app .cs-rep-dt .dataTables_length,
body.cs-app .cs-rep-dt .dataTables_filter {
  padding: 0 0 4px;
  font-size: 13px;
  color: var(--cs-text-muted);
}
/* main.css fuerza .dataTables_filter { float: left !important } */
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_filter { float: right !important; }
body.cs-app .cs-rep-dt .dataTables_length label,
body.cs-app .cs-rep-dt .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--cs-text-muted);
}
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_length select {
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
}
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_filter input {
  width: 260px;
  max-width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
}

/* Cabeceras ordenables: icono FA5 en lugar de las imágenes de DataTables */
body.cs-app .cs-rep-dt table.dataTable thead th { background-image: none; }
body.cs-app .cs-rep-dt table.dataTable thead .sorting,
body.cs-app .cs-rep-dt table.dataTable thead .sorting_asc,
body.cs-app .cs-rep-dt table.dataTable thead .sorting_desc { position: relative; padding-right: 28px; cursor: pointer; }
body.cs-app .cs-rep-dt table.dataTable thead .sorting::after,
body.cs-app .cs-rep-dt table.dataTable thead .sorting_asc::after,
body.cs-app .cs-rep-dt table.dataTable thead .sorting_desc::after {
  content: "\f0dc";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--cs-text-subtle);
}
body.cs-app .cs-rep-dt table.dataTable thead .sorting_asc::after { content: "\f0de"; color: var(--cs-primary); }
body.cs-app .cs-rep-dt table.dataTable thead .sorting_desc::after { content: "\f0dd"; color: var(--cs-primary); }
body.cs-app .cs-rep-dt table.dataTable td.dataTables_empty { padding: 32px 16px; text-align: center; color: var(--cs-text-muted); }

/* Paginación: páginas a la derecha, activa en primario */
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate {
  float: right;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 0 4px;
  font-size: 13px;
}
body.cs-app .cs-rep-dt .dataTables_paginate > span { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body.cs-app .cs-rep-dt .dataTables_paginate .ellipsis { display: inline-flex; align-items: center; height: 34px; padding: 0 4px; color: var(--cs-text-subtle); }
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  font-weight: 500;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--cs-primary) !important;
  background: var(--cs-primary-soft) !important;
  color: var(--cs-text) !important;
}
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary-contrast) !important;
}
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--cs-surface) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-subtle) !important;
  opacity: .7;
  cursor: default;
}

/* Logs: una celda por dato, sin wrappers (miles de filas) */
.cs-rep-table--logs tbody td:nth-child(1) { width: 1%; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cs-text-muted); }
.cs-rep-table--logs tbody td:nth-child(2) { white-space: nowrap; font-weight: 600; }
.cs-rep-table--logs tbody td:nth-child(3) { min-width: 220px; }
.cs-rep-table--logs tbody td:nth-child(4) { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cs-text-muted); }
.cs-rep-table--logs tbody td.dataTables_empty { width: auto; white-space: normal; font-weight: 400; }

@media (max-width: 1199.98px) {
  body.cs-app table.cs-rep-summary tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  /* tablet: la fecha pasa a dos líneas para que la tabla de DataTables quepa sin scroll */
  body.cs-app .cs-rep-dt .cs-rep-date { white-space: normal; min-width: 96px; }
  body.cs-app .cs-rep-dt .cs-rep-table thead th,
  body.cs-app .cs-rep-dt .cs-rep-table tbody td { padding-left: 12px; padding-right: 12px; }
  body.cs-app .cs-rep-dt table.dataTable thead .sorting,
  body.cs-app .cs-rep-dt table.dataTable thead .sorting_asc,
  body.cs-app .cs-rep-dt table.dataTable thead .sorting_desc { padding-right: 24px; }
}
@media (max-width: 767.98px) {
  body.cs-app .cs-rep-table thead th,
  body.cs-app .cs-rep-table tbody td { padding: 10px 12px; }
  .cs-rep-summary-wrap { padding: 12px 16px 16px; }
  body.cs-app table.cs-rep-summary tr { gap: 8px; }
  body.cs-app table.cs-rep-summary td.cs-rep-summary__cell { padding: 10px; }
  .cs-rep-summary__value { font-size: 20px; }
  body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_length,
  body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left; padding: 0 0 8px; }
  body.cs-app .cs-rep-dt--search .dataTables_wrapper .dataTables_length { padding-bottom: 0; }
  body.cs-app .cs-rep-dt .dataTables_filter label { display: flex; }
  body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; }
  body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate { float: none; justify-content: center; padding: 8px 0 4px; }
}
@media (max-width: 575.98px) {
  .cs-rep-summary__label { font-size: 12px; }
  .cs-rep-summary__value { font-size: 18px; }
  .cs-rep-stat__amount { white-space: normal; }

  /* Engargolados y logs: cada fila como tarjeta flotante (sin scroll horizontal).
     Borde, radio y fondo van en el <tr>; las celdas sin borde ni fondo */
  body.cs-app .cs-rep-dt table.dataTable thead { display: none; }
  body.cs-app .cs-rep-dt table.dataTable,
  body.cs-app .cs-rep-dt table.dataTable tbody { display: block; width: 100% !important; }
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr {
    display: grid;
    align-items: center;
    gap: 4px 12px;
    margin: 0 0 10px;
    padding: 12px 16px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
    transition: transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
  }
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr.is-highlighted {
    background-color: var(--cs-row-selected);
    border-color: var(--cs-primary);
  }
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr > td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr > td.dataTables_empty { grid-column: 1 / -1; padding: 24px 0; text-align: center; }

  body.cs-app .cs-rep-table--eng tbody tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "id type total" "user user qty" "suc date date";
  }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(1) { grid-area: id; }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(2) { grid-area: type; }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(3) { grid-area: suc; font-size: 12.5px; color: var(--cs-text-muted); }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(4) { grid-area: user; font-weight: 600; }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(5) { grid-area: date; font-size: 12.5px; text-align: right; }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(6) { grid-area: qty; text-align: right; font-size: 12.5px; color: var(--cs-text-muted); }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(6)::before { content: "Cant. "; }
  body.cs-app .cs-rep-table--eng tbody tr > td:nth-child(7) { grid-area: total; text-align: right; }

  body.cs-app .cs-rep-table--logs tbody tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "user id" "details details" "date date";
  }
  body.cs-app .cs-rep-table--logs tbody tr > td:nth-child(1) { grid-area: id; font-size: 12.5px; text-align: right; }
  body.cs-app .cs-rep-table--logs tbody tr > td:nth-child(1):not(.dataTables_empty)::before { content: "#"; }
  body.cs-app .cs-rep-table--logs tbody tr > td:nth-child(2) { grid-area: user; white-space: normal; }
  body.cs-app .cs-rep-table--logs tbody tr > td:nth-child(3) { grid-area: details; min-width: 0; overflow-wrap: anywhere; }
  body.cs-app .cs-rep-table--logs tbody tr > td:nth-child(4) { grid-area: date; font-size: 12.5px; }
}
@media (max-width: 575.98px) and (hover: hover) and (pointer: fine) {
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr:has(> td:not(.dataTables_empty)):hover { background-color: var(--cs-row-hover); }
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr.is-highlighted:has(> td:not(.dataTables_empty)):hover { background-color: var(--cs-row-selected); }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app .cs-rep-table tbody tr,
  body.cs-app .cs-rep-dt table.cs-table--floating.dataTable > tbody > tr,
  body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_paginate .paginate_button,
  body.cs-app .cs-rep-dt .dataTables_wrapper .dataTables_filter input { transition: none; }
}

/* (fin reportes) */

/* ==========================================================================
   Tienda: pedidos, cotizaciones, clientes, home, productos y categorías
   ========================================================================== */
/* (inicio tienda) */

/* Fotos de producto y banners: siempre sobre placa blanca (vienen con fondo blanco), en ambos temas */
.cs-store { --cs-store-media-bg: #FFFFFF; }

/* --- Comunes --- */
.cs-store-hint { margin-left: 0; display: inline-flex; align-items: center; gap: 6px; }
.cs-store-hint i { color: var(--cs-text-subtle); }
.cs-store-stat--progress { background: var(--cs-primary-soft); border-color: transparent; }
.cs-store-stat--progress .cs-stat__icon { color: var(--cs-primary); }
.cs-store-muted { color: var(--cs-text-muted); }
.cs-store-desc { display: block; min-width: 200px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.cs-store-pay { display: flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.cs-store-pay i { color: var(--cs-text-subtle); font-size: 12px; }
.cs-store-filters { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Select2 con la altura de los controles (42 px) */
body.cs-app .cs-store .cs-field .select2-container--default .select2-selection--single { height: 42px; padding: 0; }
body.cs-app .cs-store .cs-field .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px; line-height: 40px; }
body.cs-app .cs-store .cs-field .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 6px; }
body.cs-app .cs-store .select2-container--default .select2-selection--multiple { min-height: 42px; }
body.cs-app .cs-store .select2-container--default.select2-container--focus .select2-selection--multiple,
body.cs-app .cs-store .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
}
body.cs-app .cs-store .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 6px;
  border: 1px solid var(--cs-info-border);
  border-radius: 6px;
  background: var(--cs-info-soft);
  color: var(--cs-info);
  font-size: 12.5px;
  font-weight: 500;
}
body.cs-app .cs-store .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--cs-info); margin-right: 4px; }
body.cs-app .cs-store .select2-container--default .select2-search--inline .select2-search__field { margin-top: 8px; color: var(--cs-text); }

/* Estados de pedido: 0 Cancelado, 1 Pendiente, 2 Esperando pago, 3 Validado, 4 En proceso,
   5 Enviado, 6 Entregado (select que envía el formulario al cambiar) */
body.cs-app select.cs-store-status { min-width: 150px; }
body.cs-app select.cs-store-status--0 { background-color: var(--cs-danger-soft); border-color: var(--cs-danger-border); color: var(--cs-danger); }
body.cs-app select.cs-store-status--1,
body.cs-app select.cs-store-status--2 { background-color: var(--cs-warning-soft); border-color: var(--cs-warning-border); color: var(--cs-warning); }
body.cs-app select.cs-store-status--3,
body.cs-app select.cs-store-status--4 { background-color: var(--cs-info-soft); border-color: var(--cs-info-border); color: var(--cs-info); }
body.cs-app select.cs-store-status--5,
body.cs-app select.cs-store-status--6 { background-color: var(--cs-success-soft); border-color: var(--cs-success-border); color: var(--cs-success); }

/* --- Cotizaciones (store_orders/quotes): un formulario por fila --- */
body.cs-app select.cs-store-client-select {
  width: auto;
  min-width: 200px;
  max-width: 260px;
  height: 34px;
  padding: 2px 28px 2px 10px;
  font-size: 13px;
  font-weight: 500;
}
.cs-store-quotes .cs-card__header .cs-hint { flex: 1 1 260px; justify-content: flex-end; }

/* --- Clientes (store_users/index): rol y descuento se envían al cambiar --- */
body.cs-app select.cs-store-inline-select {
  width: auto;
  min-width: 120px;
  height: 34px;
  padding: 2px 28px 2px 10px;
  font-size: 13px;
  font-weight: 500;
}
.cs-store-name { min-width: 160px; }
.cs-store-address { min-width: 220px; max-width: 320px; color: var(--cs-text-muted); font-size: 13px; }
.cs-store-users .cs-card__header .cs-hint { flex: 1 1 260px; justify-content: flex-end; }

/* --- Home de la tienda (home_details/index) ---
   El JS aplica $('tbody').sortable() a TODOS los <tbody> de la página: solo hay dos tablas */
.cs-store-panel { overflow: visible; }
.cs-store-panel > .cs-card__header { border-bottom-color: transparent; transition: border-color .2s ease; }
.cs-store-panel > .cs-card__header:has(+ .collapse.show),
.cs-store-panel > .cs-card__header:has(+ .collapsing),
.cs-store-panel > .cs-card__header:has(+ .cs-card__body) { border-bottom-color: var(--cs-border); }
.cs-store-panel__body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.cs-store-toggle__label::before { content: "Ocultar"; }
.cs-store-toggle.collapsed .cs-store-toggle__label::before { content: "Mostrar"; }
.cs-store-toggle__chevron { font-size: 11px; transition: transform .2s ease; transform: rotate(180deg); }
.cs-store-toggle.collapsed .cs-store-toggle__chevron { transform: none; }

/* Formularios de carga: campos en línea, botón al final alineado con los controles */
.cs-store-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--cs-border-strong);
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
}
.cs-store-upload--cat { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.cs-store-upload--product { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
.cs-store-upload__actions { display: flex; gap: 12px; }
body.cs-app input[type="file"].cs-store-file,
body.cs-app input[type="file"].upfile {
  height: 42px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--cs-text-muted);
  cursor: pointer;
}
body.cs-app input[type="file"].cs-store-file::file-selector-button,
body.cs-app input[type="file"].upfile::file-selector-button {
  height: 30px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--cs-border-strong);
  border-radius: 6px;
  background: var(--cs-surface);
  color: var(--cs-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease;
}
body.cs-app input[type="file"].cs-store-file:hover::file-selector-button,
body.cs-app input[type="file"].upfile:hover::file-selector-button { border-color: var(--cs-primary); }

/* Miniaturas (main.css: .img-ban 100px de alto con imagen de 90px) */
body.cs-app .img-ban.cs-store-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  min-width: 96px;
  padding: 6px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-store-media-bg);
}
body.cs-app .img-ban.cs-store-thumb img { height: 60px; max-width: 220px; object-fit: contain; }
body.cs-app .img-ban.cs-store-thumb--banner { height: 104px; max-width: 100%; }
body.cs-app .img-ban.cs-store-thumb--banner img { height: 90px; max-width: 100%; }
body.cs-app .cs-store-home table.cs-table--floating > tbody > tr > td { padding-top: 10px; padding-bottom: 10px; }
/* Filas flotantes dentro del panel: sin el aire extra del .table-responsive (el panel ya tiene padding) */
.cs-store-panel__body > .table-responsive.cs-store-home__table:has(> table.cs-table--floating) { width: auto; margin: -10px -4px; padding: 0 4px 2px; }
.cs-store-home__hint { margin: -8px 0 -8px; }
.cs-store-col-handle { width: 40px; padding-right: 0 !important; }
.cs-store-handle { color: var(--cs-text-subtle); cursor: grab; }
.cs-store-home tr.tr-cate { cursor: move; }
.cs-store-home tr.tr-cate:hover .cs-store-handle { color: var(--cs-primary); }
/* Fila arrastrada (jQuery UI usa el propio <tr>): tarjeta elevada con las esquinas de sus celdas.
   border-spacing se hereda de la tabla flotante: en el helper (display:table) se anula. */
body.cs-app .cs-store-home table.cs-table--floating > tbody > tr.ui-sortable-helper {
  display: table;
  border-spacing: 0;
  border-radius: var(--cs-radius);
  background: transparent;
  box-shadow: var(--cs-shadow-pop);
}
body.cs-app .cs-store-home table.cs-table--floating > tbody > tr.ui-sortable-helper > td { background-color: var(--cs-surface); border-color: var(--cs-primary); }
.cs-store-home tr.ui-sortable-helper .cs-store-handle { color: var(--cs-primary); cursor: grabbing; }
.cs-store-cat-name { font-weight: 600; }
.cs-store-url { font-size: 13px; word-break: break-all; min-width: 160px; }

/* Destacados */
.cs-store-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cs-store-picks__col { min-width: 0; }
.cs-store-picks__col .cs-section-label { display: flex; align-items: center; gap: 8px; }
.cs-store-picks__note { margin: 6px 0 0; font-size: 12.5px; color: var(--cs-text-muted); }
.cs-store-pick-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  max-height: 420px;
  overflow-y: auto;
}
.cs-store-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cs-border);
  font-size: 13px;
}
.cs-store-pick:last-child { border-bottom: 0; }
.cs-store-pick__text { flex: 1 1 auto; min-width: 0; line-height: 1.4; word-break: break-word; }
.cs-store-pick__code { display: block; font-size: 12px; font-weight: 600; color: var(--cs-text-muted); font-variant-numeric: tabular-nums; }
.cs-store-pick .cs-btn { flex: 0 0 auto; }
.cs-store-pick--empty { justify-content: center; color: var(--cs-text-muted); padding: 20px 12px; }
.cs-store-xml { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 1199.98px) {
  .cs-store-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-store-picks__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
  .cs-store-upload--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-store-upload--cat .cs-store-upload__actions { justify-content: flex-end; }
}
@media (max-width: 767.98px) {
  .cs-store-upload,
  .cs-store-upload--cat,
  .cs-store-upload--product { grid-template-columns: 1fr; }
  .cs-store-upload__actions .cs-btn { flex: 1 1 auto; }
  .cs-store-picks { grid-template-columns: 1fr; }
  .cs-store-panel__body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-store-toggle__chevron,
  .cs-store-panel > .cs-card__header { transition: none; }
  /* html + body: gana a las vistas tarjeta de abajo (misma especificidad, más adelante en el archivo) */
  html body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr,
  html body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr { transition: none; }
}

/* --- Alta / edición de producto (products/add, products/edit) --- */
body.cs-app .cs-store textarea.cs-store-textarea { height: auto; min-height: 72px; padding-top: 10px; resize: vertical; }
body.cs-app .cs-store textarea.cs-store-textarea--lg { min-height: 150px; }
.cs-store-switch { min-height: 42px; }
.cs-store-product__media { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: start; }
.cs-store-preview { margin: 0; }
.cs-store-preview img {
  display: block;
  width: 100%;
  height: 180px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-store-media-bg);
}
.cs-store-preview figcaption { margin-top: 6px; font-size: 12px; color: var(--cs-text-muted); text-align: center; }
@media (max-width: 767.98px) {
  .cs-store-product__media { grid-template-columns: 1fr; }
  .cs-store-preview { max-width: 220px; }
}

/* --- Actualizar imágenes (products/missing_images) --- */
.cs-store-images .cs-card__header .cs-hint { flex: 1 1 260px; justify-content: flex-end; }
.cs-store-img-table tbody td { vertical-align: top; }
.cs-store-img-product { display: flex; align-items: flex-start; gap: 14px; min-width: 280px; }
.cs-store-img-thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-store-media-bg);
  overflow: hidden;
}
.cs-store-img-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cs-store-img-info { display: flex; flex-direction: column; min-width: 0; max-width: 420px; }
.cs-store-img-info .cs-store-desc { min-width: 0; }
.cs-store-code { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.cs-store-code + .cs-store-code { margin-top: 4px; }
.cs-store-code__label {
  min-width: 52px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-store-code a { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cs-primary); }
.cs-store-zegu-form { display: inline-flex; }
body.cs-app .cs-btn.cs-store-zegu { color: var(--cs-warning) !important; }
body.cs-app .cs-btn.cs-store-zegu:hover { border-color: var(--cs-warning-border); background: var(--cs-warning-soft); }
.cs-store-codes-cell { min-width: 220px; max-width: 300px; }
.cs-store-code a { min-width: 0; overflow-wrap: anywhere; }
.cs-store-code .cs-store-zegu-form { margin-left: auto; }
.cs-store-cat { display: block; font-weight: 500; }
.cs-store-cat + .cs-table__meta { display: block; }
.cs-store-upfile { display: block; min-width: 210px; max-width: 260px; }
body.cs-app input[type="file"].upfile { width: 100%; }

/* Tablet y móvil: cada producto como tarjeta flotante (imagen y descripción; códigos y carga de imagen).
   El borde, el radio y el fondo pasan al <tr>; las celdas quedan sin borde ni fondo propio. */
@media (max-width: 991.98px) {
  .cs-store-img-table thead { display: none; }
  .cs-store-img-table,
  .cs-store-img-table tbody { display: block; width: 100%; }
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 10px 24px;
    margin-bottom: 10px;
    padding: 14px 20px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
    transition: transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
  }
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr:last-child { margin-bottom: 0; }
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr.is-highlighted {
    border-color: var(--cs-primary);
    background-color: var(--cs-row-selected);
  }
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr > td,
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr > td:first-of-type,
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr > td:last-of-type,
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr:hover > td,
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr.is-highlighted > td {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }
  .cs-store-img-table tbody tr > td:first-child { grid-row: span 2; }
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr > td.cs-empty { grid-column: 1 / -1; grid-row: auto; padding: 28px 0; text-align: center; }
  .cs-store-img-product { min-width: 0; }
  .cs-store-codes-cell { min-width: 0; max-width: none; }
  .cs-store-upfile { min-width: 0; max-width: none; }
}
@media (max-width: 991.98px) and (hover: hover) and (pointer: fine) {
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr:has(> td:not(.cs-empty)):hover { background-color: var(--cs-row-hover); }
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr.is-highlighted:hover { background-color: var(--cs-row-selected); }
}
@media (max-width: 575.98px) {
  body.cs-app .cs-store-images table.cs-store-img-table.cs-table--floating > tbody > tr { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .cs-store-img-table tbody tr > td:first-child { grid-row: auto; }
  .cs-store-img-thumb { flex-basis: 72px; width: 72px; height: 72px; }
  .cs-store-codes-cell { padding-left: 86px !important; }
}

/* --- Categorías y subcategorías (store_product_categories/*) ---
   Cada fila es un <form> dentro de <tr>: el parser deja el <form> vacío como hijo del <tr>
   y asocia los controles por el puntero de formulario. No mover esa estructura. */
.cs-store-cat-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.cs-store-cat-forms--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cs-store-cat-forms--single { grid-template-columns: 1fr; }
.cs-store-cat-form > form.cs-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin: 0;
}
.cs-store-cat-form--2 > form.cs-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.cs-store-cat-form--3 > form.cs-card__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; }
/* El <form> vacío que el parser deja dentro del <tr> lo oculta la base (tablas-flotantes: tr > form) */
body.cs-app .cs-store-cats-table .form-control.cs-store-cell-input { height: 38px; font-size: 13.5px; }
body.cs-app .cs-store-cats-table select.cs-store-cell-select { width: auto; min-width: 130px; padding-right: 28px; }
body.cs-app .cs-store-cats-table .form-control[readonly] { color: var(--cs-text-muted); }
.cs-store-col-name { min-width: 180px; }
.cs-store-cats-table td.cs-store-col-select { width: 200px; min-width: 180px; max-width: 220px; }
.cs-store-cats-table td.cs-store-col-multi { min-width: 240px; }
body.cs-app .cs-store-cats-table .select2-container--default .select2-selection--single { height: 38px; padding: 0; }
body.cs-app .cs-store-cats-table .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px; line-height: 36px; font-size: 13.5px; }
body.cs-app .cs-store-cats-table .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 6px; }
body.cs-app .cs-store-cats-table .select2-container--default .select2-selection--multiple { min-height: 38px; }
body.cs-app .cs-store-cats-table .select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top: 5px; max-width: 100%; white-space: normal; line-height: 1.35; padding-top: 2px; padding-bottom: 2px; }
.cs-store-col-actions { width: 1%; white-space: nowrap; }
.cs-store-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 12.5px;
  font-weight: 600;
}
/* Filas flotantes con controles: celdas más bajas; primera y última celda (first/last-of-type, como la base) con más aire */
body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td { padding: 10px 12px; }
body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > thead > tr > th:first-of-type,
body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td:first-of-type { padding-left: 16px; }
body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > thead > tr > th:last-of-type,
body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td:last-of-type { padding-right: 16px; }
body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td.cs-empty { padding: 28px 16px; }

@media (max-width: 1199.98px) {
  .cs-store-cat-form--3 > form.cs-card__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-store-cat-form--3 > form.cs-card__body > .cs-store-cat-form__actions { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 991.98px) {
  .cs-store-cat-forms,
  .cs-store-cat-forms--wide { grid-template-columns: 1fr; }
}
/* Móvil: cada fila como tarjeta con la etiqueta de cada dato */
@media (max-width: 767.98px) {
  .cs-store-cat-form > form.cs-card__body,
  .cs-store-cat-form--2 > form.cs-card__body,
  .cs-store-cat-form--3 > form.cs-card__body { grid-template-columns: 1fr; }
  .cs-store-cat-form > form.cs-card__body > .cs-btn,
  .cs-store-cat-form > form.cs-card__body > .cs-store-cat-form__actions { width: 100%; justify-self: stretch; }
  .cs-store-cat-form__actions .cs-btn { width: 100%; }
  .cs-store-cats-table thead { display: none; }
  .cs-store-cats-table,
  .cs-store-cats-table tbody { display: block; width: 100%; }
  /* Tarjeta flotante: borde, radio y fondo en el <tr>; las celdas sin borde ni fondo propio */
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface);
    transition: transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
  }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr:last-child { margin-bottom: 0; }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr.is-highlighted {
    border-color: var(--cs-primary);
    background-color: var(--cs-row-selected);
  }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td,
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td:first-of-type,
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td:last-of-type,
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr:hover > td,
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr.is-highlighted > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    text-align: left;
  }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td.cs-empty { padding: 14px 0; text-align: center; }
  .cs-store-cats-table tbody tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--cs-text-muted);
  }
  .cs-store-cats-table tbody tr > td.cs-store-col-name,
  .cs-store-cats-table tbody tr > td.cs-store-col-select,
  .cs-store-cats-table tbody tr > td.cs-store-col-multi,
  .cs-store-cats-table tbody tr > td.cs-empty { grid-column: 1 / -1; }
  /* Misma especificidad que el reinicio de celdas de arriba (va después para ganarle) */
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td.cs-store-col-actions { grid-column: 1 / -1; width: auto; display: flex; justify-content: flex-end; gap: 8px; }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td.cs-store-col-actions--edit { grid-column: 1 / 2; justify-content: flex-start; }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr > td.cs-store-col-actions--del { grid-column: 2 / 3; }
  .cs-store-cats-table td.cs-store-col-select { width: auto; max-width: none; }
  body.cs-app .cs-store-cats-table select.cs-store-cell-select { width: 100%; }
}
@media (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr:has(> td:not(.cs-empty)):hover { background-color: var(--cs-row-hover); }
  body.cs-app .cs-store-cats table.cs-store-cats-table.cs-table--floating > tbody > tr.is-highlighted:hover { background-color: var(--cs-row-selected); }
}

/* --- Detalle de pedido (store_orders/details) --- */
.cs-store-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-store-total { color: var(--cs-primary) !important; font-size: 18px !important; font-variant-numeric: tabular-nums; }
.cs-dl--stack { grid-template-columns: 1fr; gap: 12px; }
.cs-dl--stack > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cs-dl--stack dd { margin: 0; font-size: 14px; }
.cs-store-dd-text { font-weight: 400 !important; }
.cs-store-detail dd:empty::before { content: "—"; font-weight: 400; color: var(--cs-text-subtle); }
.cs-store-codes { flex-wrap: wrap; gap: 2px 12px; }
.cs-store-codes > span { white-space: nowrap; }
.cs-store-detail__grid {
  display: grid;
  grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
  gap: 24px;
  align-items: start;
}
.cs-store-detail__items { min-width: 0; }
.cs-store-items tfoot td {
  padding: 10px 16px;
  border-top: 1px solid var(--cs-border);
  background: var(--cs-surface-2);
  font-variant-numeric: tabular-nums;
}
.cs-store-items tfoot tr + tr td { border-top: 0; }
.cs-store-items__label { color: var(--cs-text-muted); font-size: 13px; }
.cs-store-items__total td { font-size: 16px; font-weight: 700; }
.cs-store-items__total .cs-store-items__label { color: var(--cs-text); font-size: 14px; }

@media (max-width: 1199.98px) {
  .cs-store-detail__grid { grid-template-columns: 1fr; }
  .cs-store-detail__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 991.98px) {
  .cs-store-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .cs-store-detail__side { grid-template-columns: 1fr; }
  .cs-dl--stack > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* --- DataTables (scrollX) con filas flotantes (tablas-flotantes): buscador arriba, info y páginas abajo.
   DataTables clona la tabla (con sus clases) en .dataTables_scrollHead y deja en el cuerpo un thead
   de altura 0 que suma dos border-spacing (20 px): el encabezado se superpone 20 px al cuerpo para
   que entre la pastilla y la primera fila queden los 10 px de siempre. --- */
body.cs-app .cs-store-dt { overflow: visible; }
body.cs-app .cs-store-dt .dataTables_wrapper { padding: 0; color: var(--cs-text); }
body.cs-app .cs-store-dt .dataTables_wrapper::after { content: ""; display: block; clear: both; }
body.cs-app .cs-store-dt table.dataTable { margin: 0 !important; }
body.cs-app .cs-store-dt .dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 0; }
body.cs-app .cs-store-dt .dataTables_scroll { clear: both; }
body.cs-app .cs-store-dt .dataTables_scrollHead:has(table.cs-table--floating) { z-index: 1; margin-bottom: -20px; }
body.cs-app .cs-store-dt table.cs-table--floating > thead > tr > th {
  padding: 12px 14px;
  background-image: none;
  color: var(--cs-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
body.cs-app .cs-store-dt table.dataTable thead th.cs-num { text-align: right; }
body.cs-app .cs-store-dt table.dataTable thead th.text-right { text-align: right; }
body.cs-app .cs-store-dt table.dataTable thead .sorting,
body.cs-app .cs-store-dt table.dataTable thead .sorting_asc,
body.cs-app .cs-store-dt table.dataTable thead .sorting_desc { position: relative; padding-right: 30px; cursor: pointer; }
body.cs-app .cs-store-dt .dataTables_scrollHead table.dataTable thead .sorting::after,
body.cs-app .cs-store-dt .dataTables_scrollHead table.dataTable thead .sorting_asc::after,
body.cs-app .cs-store-dt .dataTables_scrollHead table.dataTable thead .sorting_desc::after {
  content: "\f0dc";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--cs-text-subtle);
}
body.cs-app .cs-store-dt .dataTables_scrollHead table.dataTable thead .sorting_asc::after { content: "\f0de"; color: var(--cs-primary); }
body.cs-app .cs-store-dt .dataTables_scrollHead table.dataTable thead .sorting_desc::after { content: "\f0dd"; color: var(--cs-primary); }
body.cs-app .cs-store-dt table.cs-table--floating > tbody > tr > td { padding: 12px 14px; vertical-align: middle; }
body.cs-app .cs-store-dt table.cs-table--floating > tbody > tr > td.dataTables_empty { padding: 32px 16px; text-align: center; color: var(--cs-text-muted); }
/* Avatar en la celda de cliente sin romper el ancho que DataTables mide */
body.cs-app .cs-store-dt .cs-person .cs-table__primary { display: block; white-space: nowrap; }

body.cs-app .cs-store-dt .dataTables_length,
body.cs-app .cs-store-dt .dataTables_filter { padding: 0 4px 12px; font-size: 13px; color: var(--cs-text-muted); }
/* main.css fuerza .dataTables_filter { float: left !important } */
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_filter { float: right !important; }
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_length { float: left; }
body.cs-app .cs-store-dt .dataTables_length label,
body.cs-app .cs-store-dt .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--cs-text-muted);
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_length select { height: 34px; padding: 0 8px; font-size: 13px; }
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_filter input {
  width: 260px;
  max-width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_info {
  float: left;
  padding: 14px 4px;
  font-size: 13px;
  color: var(--cs-text-muted) !important;
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate {
  float: right;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 4px;
  font-size: 13px;
}
body.cs-app .cs-store-dt .dataTables_paginate > span { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body.cs-app .cs-store-dt .dataTables_paginate .ellipsis { display: inline-flex; align-items: center; height: 34px; padding: 0 4px; color: var(--cs-text-subtle); }
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface) !important;
  color: var(--cs-text) !important;
  font-weight: 500;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--cs-primary) !important;
  background: var(--cs-primary-soft) !important;
  color: var(--cs-text) !important;
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color: var(--cs-primary-contrast) !important;
}
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--cs-surface) !important;
  border-color: var(--cs-border) !important;
  color: var(--cs-text-subtle) !important;
  opacity: .7;
  cursor: default;
}

@media (max-width: 767.98px) {
  body.cs-app .cs-store-dt table.cs-table--floating > thead > tr > th,
  body.cs-app .cs-store-dt table.cs-table--floating > tbody > tr > td { padding: 10px 12px; }
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_length,
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_filter { float: none !important; padding: 0 4px 12px; text-align: left; }
  body.cs-app .cs-store-dt .dataTables_filter label { display: flex; }
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; height: 42px; }
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_info { float: none; padding: 12px 4px 0; text-align: center; }
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate { float: none; justify-content: center; padding: 10px 4px 12px; }
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; height: 40px; }
  /* Números en una línea; Anterior y Siguiente juntos debajo */
  body.cs-app .cs-store-dt .dataTables_paginate > span { order: -1; flex: 1 0 100%; justify-content: center; }
  .cs-store .cs-card__header .cs-hint { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_paginate .paginate_button,
  body.cs-app .cs-store-dt .dataTables_wrapper .dataTables_filter input { transition: none; }
}

/* (fin tienda) */

/* (inicio auth) */
/* ==========================================================================
   Acceso: login y selección de sucursal (layouts/auth)
   Excepción aprobada: fondo ilustrado y difuminado (partials/cs-auth-bg).
   La tarjeta sigue sólida, como el resto del sistema.
   ========================================================================== */
:root {
  --cs-auth-veil: rgba(245, 247, 251, .34);
  --cs-auth-scene-base: #E6ECF5;
  --cs-auth-scene-paper: #FFFFFF;
  --cs-auth-scene-edge: #D2DBE8;
  --cs-auth-scene-ink: #C3CEDF;
  --cs-auth-scene-device: #D5DDEA;
  --cs-auth-scene-screen: #BFD0EA;
  --cs-auth-scene-primary: rgba(82, 129, 204, .6);
  --cs-auth-scene-red: rgba(237, 28, 36, .5);
  --cs-auth-scene-blue: rgba(0, 0, 255, .3);
  --cs-auth-scene-amber: rgba(245, 158, 11, .45);
  --cs-auth-glow-primary: rgba(82, 129, 204, .38);
  --cs-auth-glow-red: rgba(237, 28, 36, .2);
  --cs-auth-glow-blue: rgba(0, 0, 255, .14);
  --cs-auth-glow-amber: rgba(245, 158, 11, .2);
}
html[data-theme="dark"] {
  --cs-auth-veil: rgba(11, 17, 32, .42);
  --cs-auth-scene-base: #0B1120;
  --cs-auth-scene-paper: #1B2539;
  --cs-auth-scene-edge: #2A3750;
  --cs-auth-scene-ink: #34445F;
  --cs-auth-scene-device: #172036;
  --cs-auth-scene-screen: #24315A;
  --cs-auth-scene-primary: rgba(129, 140, 248, .55);
  --cs-auth-scene-red: rgba(248, 113, 113, .42);
  --cs-auth-scene-blue: rgba(96, 165, 250, .38);
  --cs-auth-scene-amber: rgba(251, 191, 36, .32);
  --cs-auth-glow-primary: rgba(129, 140, 248, .26);
  --cs-auth-glow-red: rgba(248, 113, 113, .14);
  --cs-auth-glow-blue: rgba(96, 165, 250, .16);
  --cs-auth-glow-amber: rgba(251, 191, 36, .1);
}

/* Estructura: fondo fijo, barra superior, tarjeta centrada y pie */
body.cs-auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
}
.cs-auth__bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--cs-auth-scene-base);
  pointer-events: none;
}
.cs-auth__bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--cs-auth-veil);
  transition: background-color .25s ease;
}
.cs-auth-scene { display: block; width: 100%; height: 100%; }
.cs-auth-scene * { transition: fill .25s ease, stroke .25s ease; }
.cs-auth-scene__base { fill: var(--cs-auth-scene-base); }
.cs-auth-scene__glow-primary { fill: var(--cs-auth-glow-primary); }
.cs-auth-scene__glow-red { fill: var(--cs-auth-glow-red); }
.cs-auth-scene__glow-blue { fill: var(--cs-auth-glow-blue); }
.cs-auth-scene__glow-amber { fill: var(--cs-auth-glow-amber); }
.cs-auth-scene__paper { fill: var(--cs-auth-scene-paper); stroke: var(--cs-auth-scene-edge); stroke-width: 2; }
.cs-auth-scene__paper-fill { fill: var(--cs-auth-scene-paper); }
.cs-auth-scene__ink,
.cs-auth-scene__node { fill: var(--cs-auth-scene-ink); }
.cs-auth-scene__ring { fill: var(--cs-auth-scene-ink); }
.cs-auth-scene__trace { fill: none; stroke: var(--cs-auth-scene-ink); stroke-width: 8; stroke-linecap: round; }
.cs-auth-scene__device { fill: var(--cs-auth-scene-device); }
.cs-auth-scene__screen { fill: var(--cs-auth-scene-screen); }
.cs-auth-scene__primary { fill: var(--cs-auth-scene-primary); }
.cs-auth-scene__red { fill: var(--cs-auth-scene-red); }
.cs-auth-scene__blue { fill: var(--cs-auth-scene-blue); }
.cs-auth-scene__amber { fill: var(--cs-auth-scene-amber); }

.cs-auth__top,
.cs-auth__main,
.cs-auth__footer { position: relative; z-index: 1; }

.cs-auth__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
}
.cs-auth__company {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
html[data-theme="dark"] .cs-auth__company { background: var(--cs-logo-plaque); }
.cs-auth__company img { display: block; width: auto; height: 24px; }
body.cs-auth .cs-auth__theme {
  height: 40px;
  padding: 0 12px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  box-shadow: var(--cs-shadow);
}

.cs-auth__main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 32px;
}
.cs-auth__footer {
  padding: 0 16px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--cs-text-muted);
}

/* Tarjeta */
.cs-auth-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: 12px;
  box-shadow: var(--cs-shadow-pop);
  animation: cs-auth-in .22s ease-out both;
}
.cs-auth-card--wide { max-width: 520px; }
.cs-auth-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  text-align: center;
}
.cs-auth-card__logo { margin-bottom: 20px; }
.cs-auth-card__logo img { width: 188px; }
body.cs-app .cs-auth-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cs-text);
}
.cs-auth-card__subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--cs-text-muted);
}
.cs-auth-card__subtitle i { margin-right: 6px; color: var(--cs-text-subtle); }
@keyframes cs-auth-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Saludo (sucursal) */
.cs-auth-hello {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.cs-auth-hello .cs-person__avatar {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  font-size: 15px;
}
body.cs-app .cs-auth-hello .cs-auth-card__title { min-width: 0; text-align: left; overflow-wrap: anywhere; }

/* Formulario */
.cs-auth-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.cs-auth-form .cs-btn--primary { margin-top: 4px; }
.cs-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--cs-danger);
}
.cs-field__error i { margin-top: 2px; }
.cs-field--error .cs-input-icon > i { color: var(--cs-danger); }
/* Sin el icono de Bootstrap: el mensaje ya lleva el suyo */
body.cs-app .cs-field--error .form-control.is-invalid { padding-right: 12px; background-image: none; background-color: var(--cs-danger-soft); }
body.cs-app .cs-field--error .cs-password > .form-control.is-invalid { padding-right: 48px; }
body.cs-app .cs-field--error .form-control:focus { box-shadow: 0 0 0 3px var(--cs-danger-border); outline-color: var(--cs-danger); }

/* Contraseña con ojito */
body.cs-app .cs-password > .form-control { padding-right: 48px; }
.cs-password__toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cs-text-subtle);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.cs-password__toggle:hover { color: var(--cs-text); background: var(--cs-sidebar-hover); }
body.cs-app .cs-password__toggle:focus-visible { outline: none; color: var(--cs-text); box-shadow: 0 0 0 3px var(--cs-focus-ring); }
.cs-password__toggle[aria-pressed="true"] { color: var(--cs-primary); }
.cs-password__toggle i { font-size: 15px; }
.cs-password__hide,
.cs-password__toggle[aria-pressed="true"] .cs-password__show { display: none; }
.cs-password__toggle[aria-pressed="true"] .cs-password__hide { display: inline-block; }
body.cs-auth input::-ms-reveal,
body.cs-auth input::-ms-clear { display: none; }

.cs-auth-caps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cs-warning);
}
.cs-auth-caps[hidden] { display: none; }

/* Autorrelleno del navegador con los colores del tema */
body.cs-auth .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--cs-text);
  caret-color: var(--cs-text);
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--cs-input-bg) inset;
}
body.cs-auth .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cs-input-bg) inset, 0 0 0 3px var(--cs-focus-ring);
  box-shadow: 0 0 0 1000px var(--cs-input-bg) inset, 0 0 0 3px var(--cs-focus-ring);
}
body.cs-auth .form-control:autofill { filter: none; }

/* Botón con estado "Entrando…" */
.cs-auth-form__idle,
.cs-auth-form__busy { display: inline-flex; align-items: center; gap: 8px; }
.cs-auth-form__busy { display: none; }
.cs-auth-form__submit.is-loading { pointer-events: none; opacity: .85; }
.cs-auth-form__submit.is-loading .cs-auth-form__idle { display: none; }
.cs-auth-form__submit.is-loading .cs-auth-form__busy { display: inline-flex; }

/* Bloqueo por intentos fallidos: "Espera 0:45" con el botón deshabilitado */
.cs-auth-form__wait { display: none; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.cs-auth-form__submit.is-locked .cs-auth-form__idle,
.cs-auth-form__submit.is-locked .cs-auth-form__busy { display: none; }
.cs-auth-form__submit.is-locked .cs-auth-form__wait { display: inline-flex; }
body.cs-app .cs-auth-form__submit.is-locked:disabled { opacity: .6; cursor: not-allowed; }

/* Honeypot: fuera de pantalla (no display:none, que algunos bots detectan) */
.cs-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Estado de la prueba de trabajo anti-bots */
.cs-auth-pow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cs-text-muted);
}
.cs-auth-pow .fas { font-size: 13px; }
.cs-auth-pow.is-working .fas { animation: cs-auth-pow-pulse 1.2s ease-in-out infinite alternate; }
.cs-auth-pow.is-done { color: var(--cs-success); }
.cs-auth-pow.is-error { color: var(--cs-danger); }
@keyframes cs-auth-pow-pulse { from { opacity: 1; } to { opacity: .35; } }

/* Tarjetas de sucursal (radios store_id) */
.cs-branches { min-width: 0; margin: 0; padding: 0; border: 0; }
body.cs-app .cs-branches__legend {
  display: block;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
}
.cs-branches__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.cs-app .cs-branch {
  position: relative;
  display: flex;
  margin: 0;
  cursor: pointer;
}
.cs-branch__input {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
}
.cs-branch__card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cs-branch:hover .cs-branch__card {
  border-color: var(--cs-border-strong);
  box-shadow: var(--cs-shadow-row);
  transform: translateY(-1px);
}
.cs-branch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-neutral-soft);
  color: var(--cs-text-muted);
  font-size: 17px;
  transition: background-color .15s ease, color .15s ease;
}
.cs-branch__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cs-text);
}
.cs-branch__last { height: 22px; padding: 0 8px; font-size: 12px; }
.cs-branch__check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--cs-border-strong);
  border-radius: 50%;
  background: var(--cs-surface);
  color: transparent;
  font-size: 11px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cs-branch__input:checked + .cs-branch__card {
  border-color: var(--cs-primary);
  background: var(--cs-primary-soft);
  box-shadow: 0 0 0 1px var(--cs-primary);
}
.cs-branch__input:checked + .cs-branch__card .cs-branch__icon { background: var(--cs-primary); color: var(--cs-primary-contrast); }
.cs-branch__input:checked + .cs-branch__card .cs-branch__check {
  border-color: var(--cs-primary);
  background: var(--cs-primary);
  color: var(--cs-primary-contrast);
}
.cs-branch__input:focus-visible + .cs-branch__card {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px var(--cs-focus-ring);
}
.cs-branch__input:checked:focus-visible + .cs-branch__card { box-shadow: 0 0 0 1px var(--cs-primary), 0 0 0 4px var(--cs-focus-ring); }

@media (max-width: 575.98px) {
  .cs-auth__top { padding: 12px 16px; }
  .cs-auth__company { padding: 6px 10px; }
  .cs-auth__company img { height: 20px; }
  body.cs-auth .cs-theme-toggle i { display: inline-block; }
  .cs-auth-card { padding: 24px 20px; }
  .cs-auth-card__logo img { width: 160px; }
  body.cs-app .cs-auth-card__title { font-size: 22px; }
  .cs-branches__grid { gap: 10px; }
  .cs-branch__card { min-height: 104px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-auth-card { animation: none; }
  .cs-auth-pow .fas { animation: none; }
  .cs-auth-scene *,
  .cs-auth__bg::after,
  .cs-branch__card { transition: none; }
  .cs-branch:hover .cs-branch__card { transform: none; }
}

/* (fin auth) */

/* (inicio clientes-picker) */
/* Buscador de clientes de pedidos (orders/partials/client-picker) y ficha del cliente.
   Filas y ficha las pinta js/copysis-client-picker.js. */
@media (min-width: 992px) {
  body.cs-app .cs-client-picker .modal-xl { max-width: min(1140px, calc(100vw - 48px)); }
}

.cs-client-picker__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.cs-client-picker__search { flex: 1 1 320px; min-width: 0; }
body.cs-app .cs-client-picker__search .form-control { height: 42px; }
.cs-client-picker__credit { flex: 0 0 auto; }

.cs-client-picker__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 10px 0 12px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-client-picker__hint [data-cs-picker-count] { font-weight: 600; color: var(--cs-text); }
.cs-client-picker__tips { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cs-client-picker__keys { display: inline-flex; align-items: center; gap: 4px; }
body.cs-app .cs-client-picker__keys kbd {
  display: inline-block;
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--cs-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--cs-surface);
  box-shadow: none;
  color: var(--cs-text-muted);
  font: 600 11px/18px var(--cs-font);
  text-align: center;
}

.cs-client-picker__scroll { max-height: min(60vh, 560px); }
.cs-client-picker__table { min-width: 860px; }
.cs-client-picker__table tbody td { padding-top: 10px; padding-bottom: 10px; }
.cs-client-picker__table tbody tr.res {
  cursor: pointer;
  scroll-margin-top: 44px;
  transition: background-color .15s ease;
}
.cs-client-picker__table tbody tr.res td:first-child { font-weight: 400; border-left: 3px solid transparent; }
.cs-client-picker__table tbody tr.res:hover { background: var(--cs-row-hover); }
.cs-client-picker__table tbody tr.res.is-active { background: var(--cs-primary-soft); }
.cs-client-picker__table tbody tr.res.is-active > td:first-child { border-left-color: var(--cs-primary); }
.cs-client-picker__table tbody tr.res:focus { outline: none; }
.cs-client-picker__table tbody tr.res:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: -2px; }

.cs-client-picker__who { min-width: 240px; max-width: 320px; }
.cs-client-picker__notes {
  display: block;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-client-picker__notes i { margin-right: 6px; }
.cs-client-picker__place { max-width: 240px; }
.cs-client-picker__line { display: block; overflow-wrap: anywhere; }
.cs-client-picker__contact,
.cs-client-picker__credit-cell { white-space: nowrap; }
.cs-client-picker__credit-cell .cs-table__meta { margin-top: 6px; }
body.cs-app .cs-client-picker mark.cs-hl {
  padding: 0 1px;
  border-radius: 3px;
  background: var(--cs-warning-soft);
  box-shadow: inset 0 -1px 0 var(--cs-warning-border);
  color: inherit;
}

.cs-client-picker__state td { white-space: normal; }
.cs-client-picker__add {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 12px auto 0;
}
.cs-empty .cs-client-picker__add i { display: inline; margin: 0; font-size: 12px; color: inherit; }
.cs-empty .cs-btn { margin-left: 8px; }

body.cs-app .cs-client-picker .modal-footer { flex-wrap: wrap; }
body.cs-app .cs-client-picker .cs-client-picker__more {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}

@media (min-width: 576px) and (max-width: 991.98px) {
  body.cs-app .cs-client-picker .modal-dialog { max-width: calc(100vw - 48px); }
}
@media (max-width: 767.98px) {
  .cs-client-picker__keys { display: none; }
}
/* Menos de 1200 px la tabla no cabe completa: cada cliente es una tarjeta (2 columnas en móvil, 3 desde 576 px). */
@media (max-width: 1199.98px) {
  .cs-client-picker__table { min-width: 0; }
  .cs-client-picker__table thead { display: none; }
  .cs-client-picker__table,
  .cs-client-picker__table tbody,
  .cs-client-picker__state,
  .cs-client-picker__state td { display: block; }
  .cs-client-picker__table tbody tr.res {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--cs-border);
  }
  .cs-client-picker__table tbody tr.res:last-child { border-bottom: 0; }
  .cs-client-picker__table tbody tr.res > td {
    display: block;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .cs-client-picker__table tbody tr.res > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cs-text-subtle);
  }
  .cs-client-picker__table tbody tr.res > .cs-client-picker__who,
  .cs-client-picker__table tbody tr.res > .cs-client-picker__credit-cell { grid-column: 1 / -1; }
  .cs-client-picker__table tbody tr.res:not(.is-credit) > td.cs-num { display: none; }
  .cs-client-picker__table tbody tr.res { border-left: 3px solid transparent; }
  .cs-client-picker__table tbody tr.res.is-active { border-left-color: var(--cs-primary); }
  .cs-client-picker__table tbody tr.res > td:first-child,
  .cs-client-picker__table tbody tr.res.is-active > td:first-child { border-left: 0; }
  .cs-client-picker__notes { max-width: 100%; }
  .cs-client-picker__table .cs-table__meta--end { justify-content: flex-start; }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .cs-client-picker__table tbody tr.res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-client-picker__table tbody tr.res > .cs-client-picker__credit-cell { grid-column: auto; }
}
@media (max-width: 575.98px) {
  /* El body del modal ya hace scroll en móvil: se evita un scroll dentro de otro. */
  .cs-client-picker__scroll { max-height: none; overflow: visible; }
  body.cs-app .cs-client-picker .modal-footer .cs-btn { flex: 1 1 auto; }
}

/* Ficha del cliente elegido (formulario de pedido) */
.cs-client-card {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--cs-surface-2);
  animation: cs-pop-in .2s ease-out;
}
.cs-client-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.cs-client-card__who { display: flex; flex-direction: column; min-width: 0; margin-right: 4px; }
.cs-client-card__name { font-size: 15px; font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-client-card__meta { font-size: 12.5px; color: var(--cs-text-muted); }
.cs-client-card__link { margin-left: auto; }
.cs-client-card__data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 24px;
  margin: 16px 0 0;
}
.cs-client-card__item { min-width: 0; }
.cs-client-card__item dt {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-text-subtle);
}
.cs-client-card__item dd {
  margin: 0;
  font-size: 14px;
  color: var(--cs-text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.cs-client-card__item--wide { grid-column: 1 / -1; }
.cs-client-card__credit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cs-border);
}
.cs-client-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  background: var(--cs-surface);
}
.cs-client-card__stat span { font-size: 12px; color: var(--cs-text-muted); }
.cs-client-card__stat strong {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cs-text);
}
.cs-client-card__stat--success { background: var(--cs-success-soft); border-color: var(--cs-success-border); }
.cs-client-card__stat--success strong { color: var(--cs-success); }
.cs-client-card__stat--danger { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); }
.cs-client-card__stat--danger strong { color: var(--cs-danger); }
.cs-client-card__foot { margin: 8px 0 0; font-size: 12px; color: var(--cs-text-muted); }
.cs-client-card__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-warning-soft);
  color: var(--cs-warning);
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .cs-client-card { padding: 14px 16px; }
  .cs-client-card__who { flex: 1 1 calc(100% - 52px); margin-right: 0; }
  .cs-client-card__data,
  .cs-client-card__credit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cs-client-card__credit { gap: 8px; }
  .cs-client-card__stat strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-client-card { animation: none; }
  .cs-client-picker__table tbody tr.res { transition: none; }
}
/* (fin clientes-picker) */

/* (inicio clientes-form) */
/* Alta y edición de clientes: clients/add, clients/edit y clients/partials/{contact-fields,summary,alerts}. JS: js/copysis-clients.js */
.cs-client-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  align-items: start;
}
.cs-client-layout__main { min-width: 0; }
.cs-client-layout__aside {
  position: sticky;
  top: calc(var(--cs-topbar-h) + 24px);
  min-width: 0;
}
.cs-client-form__legend {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--cs-text-muted);
}
.cs-req { margin-left: 2px; color: var(--cs-danger); font-weight: 700; }
/* El combo despliega su lista fuera de la tarjeta */
.cs-client-form .cs-card.cs-client-section { overflow: visible; }
.cs-client-form .cs-card__header .cs-hint { font-size: 12.5px; }
body.cs-app .cs-client-form textarea.form-control { height: auto; min-height: 88px; resize: vertical; }
/* Al enfocar desde la ficha o al fallar la validación, el campo no queda bajo la barra superior ni la de acciones */
.cs-client-form .form-control { scroll-margin: calc(var(--cs-topbar-h) + 24px) 0 96px; }

/* Mensajes por campo: error (rojo) o dato pendiente de un cliente viejo (ámbar) */
.cs-field__msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.35;
}
.cs-field__msg:empty { display: none; }
.cs-field__msg i { margin-top: 2px; }
.cs-field--error .cs-field__msg { color: var(--cs-danger); }
.cs-field--pending .cs-field__msg { color: var(--cs-warning); }
body.cs-app .cs-client-form .cs-field--error .form-control {
  border-color: var(--cs-danger) !important;
  background-color: var(--cs-danger-soft);
  background-image: none;
  padding-right: 12px;
}
body.cs-app .cs-client-form .cs-field--error .form-control:focus { box-shadow: 0 0 0 3px var(--cs-danger-border); }
body.cs-app .cs-client-form .cs-field--pending .form-control {
  border-color: var(--cs-warning) !important;
  background-color: var(--cs-warning-soft);
}
body.cs-app .cs-client-form .cs-field--pending .form-control:focus { box-shadow: 0 0 0 3px var(--cs-warning-border); }
.cs-client-form .cs-field--error .cs-input-icon > i,
.cs-client-form .cs-field--error .cs-combo__icon { color: var(--cs-danger); }
.cs-client-form .cs-field--pending .cs-input-icon > i,
.cs-client-form .cs-field--pending .cs-combo__icon { color: var(--cs-warning); }
body.cs-app .cs-client-form .cs-field--error .cs-combo.is-ready .form-control,
body.cs-app .cs-client-form .cs-field--pending .cs-combo.is-ready .form-control { padding-right: 44px; }
.cs-client-form__hint.is-new { display: flex; gap: 6px; color: var(--cs-primary); font-weight: 500; }
.cs-client-form__hint.is-new i { margin-top: 2px; }

/* Combo de catálogo (localidad / escuela) sin Select2 */
.cs-combo { position: relative; }
.cs-combo__icon {
  position: absolute;
  top: 21px;
  left: 14px;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--cs-text-subtle);
  font-size: 14px;
  pointer-events: none;
}
body.cs-app .cs-combo .cs-combo__input { padding-left: 40px; }
body.cs-app .cs-combo.is-ready .cs-combo__input { padding-right: 44px; }
.cs-combo__toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0 7px 7px 0;
  background: transparent;
  color: var(--cs-text-muted);
  cursor: pointer;
}
.cs-combo__toggle[hidden] { display: none; }
.cs-combo__toggle:hover { color: var(--cs-text); }
.cs-combo__toggle i { font-size: 12px; transition: transform .2s ease; }
.cs-combo.is-open .cs-combo__toggle i { transform: rotate(180deg); }
body.cs-app .cs-combo.is-open .cs-combo__input { border-color: var(--cs-primary); }
.cs-combo__popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 40;
  overflow: hidden;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow-pop);
  animation: cs-combo-in .16s ease-out;
}
.cs-combo--up .cs-combo__popup { top: auto; bottom: calc(100% + 6px); animation-name: cs-combo-in-up; }
.cs-combo__list {
  position: relative;
  max-height: 264px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.cs-combo__list:empty { display: none; }
.cs-combo__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--cs-text);
  cursor: pointer;
  transition: background-color .12s ease;
}
.cs-combo__option > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cs-combo__option:hover { background: var(--cs-row-hover); }
.cs-combo__option.is-active { background: var(--cs-primary-soft); }
.cs-combo__option mark { padding: 0; background: none; color: var(--cs-primary); font-weight: 600; }
.cs-combo__check { color: var(--cs-primary); font-size: 12px; }
.cs-combo__option--new { color: var(--cs-primary); font-weight: 500; }
.cs-combo__option--new strong { font-weight: 700; }
.cs-combo__option + .cs-combo__option--new { margin-top: 4px; box-shadow: 0 -1px 0 var(--cs-border); border-radius: 0 0 6px 6px; }
.cs-combo__option--new > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cs-primary-soft);
  font-size: 11px;
}
.cs-combo__status {
  margin: 0;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--cs-border);
  font-size: 12px;
  color: var(--cs-text-muted);
}
.cs-combo__status[hidden] { display: none; }
.cs-combo__list:empty + .cs-combo__status { border-top: 0; padding-top: 12px; padding-bottom: 12px; }
@keyframes cs-combo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cs-combo-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Ficha lateral */
.cs-client-summary { padding: 20px; margin-bottom: 0; }
.cs-client-summary__head { display: flex; align-items: center; gap: 14px; }
.cs-client-summary__head .cs-person__avatar {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
  font-size: 18px;
}
.cs-client-summary__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-client-summary__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-client-summary__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cs-text-muted); }
.cs-client-summary__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.cs-client-summary__facts li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-client-summary__facts i { flex: 0 0 16px; width: 16px; text-align: center; font-size: 13px; color: var(--cs-text-subtle); }
.cs-client-summary__facts .is-empty { color: var(--cs-text-subtle); }
.cs-client-summary__section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cs-border); }
.cs-client-summary__section > .cs-modal__label { display: block; }
.cs-client-checks__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-client-checks__head .cs-modal__label { margin: 0; }
.cs-client-checks__count { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cs-text-muted); }
.cs-client-summary .cs-progress { min-width: 0; margin: 8px 0 6px; }
.cs-client-checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cs-client-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.cs-client-check > i { flex: 0 0 16px; text-align: center; font-size: 14px; }
.cs-client-check__done { display: none; color: var(--cs-success); }
.cs-client-check__todo { color: var(--cs-text-subtle); }
.cs-client-check.is-done .cs-client-check__done { display: inline-block; }
.cs-client-check.is-done .cs-client-check__todo { display: none; }
.cs-client-check a {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 36px;
  color: var(--cs-text) !important;
  transition: color .15s ease;
}
.cs-client-check.is-done a { color: var(--cs-text-muted) !important; }
.cs-client-check a:hover { color: var(--cs-primary) !important; text-decoration: none; }
.cs-client-summary__creator .cs-person__body { display: flex; flex-direction: column; font-size: 12.5px; color: var(--cs-text-muted); }
.cs-client-summary__creator strong { font-size: 14px; font-weight: 600; color: var(--cs-text); overflow-wrap: anywhere; }
.cs-client-summary__note { display: flex; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--cs-text-muted); }
.cs-client-summary__note i { margin-top: 3px; }

/* Aviso superior: errores del envío o datos pendientes */
.cs-client-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid;
  border-radius: var(--cs-radius);
  animation: cs-combo-in .2s ease-out;
}
.cs-client-alert--danger { background: var(--cs-danger-soft); border-color: var(--cs-danger-border); }
.cs-client-alert--warning { background: var(--cs-warning-soft); border-color: var(--cs-warning-border); }
.cs-client-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cs-surface);
  font-size: 15px;
}
.cs-client-alert--danger .cs-client-alert__icon { color: var(--cs-danger); }
.cs-client-alert--warning .cs-client-alert__icon { color: var(--cs-warning); }
.cs-client-alert__body { min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--cs-text); }
.cs-client-alert__body strong { display: block; margin-bottom: 2px; font-weight: 600; }
.cs-client-alert__body p { margin: 0 0 4px; color: var(--cs-text-muted); }
.cs-client-alert__body ul { margin: 4px 0 0; padding-left: 18px; }
.cs-client-alert__body li + li { margin-top: 2px; }
.cs-client-alert__body a { color: inherit !important; text-decoration: underline; text-decoration-color: var(--cs-border-strong); text-underline-offset: 2px; }
.cs-client-alert__body a:hover { text-decoration-color: currentColor; }

/* Botón guardando */
.cs-client-form .cs-btn.is-busy { opacity: .75; cursor: progress; }
.cs-client-form .cs-btn.is-busy .fa-save::before { content: "\f110"; }
.cs-client-form .cs-btn.is-busy .fa-save { animation: cs-client-spin 1s linear infinite; }
@keyframes cs-client-spin { to { transform: rotate(360deg); } }

@media (max-width: 1199.98px) {
  .cs-client-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-client-layout__aside { position: static; }
}
@media (max-width: 575.98px) {
  .cs-client-alert { padding: 12px 14px; gap: 10px; }
  .cs-client-form .cs-card__header .cs-hint { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-combo__popup,
  .cs-client-alert { animation: none; }
  .cs-combo__toggle i,
  .cs-combo__option,
  .cs-client-check a { transition: none; }
  .cs-client-form .cs-btn.is-busy .fa-save { animation: none; }
}
/* (fin clientes-form) */

/* ==========================================================================
   6. Responsivo
   ========================================================================== */
@media (max-width: 991.98px) {
  body.cs-app .content-wrapper { padding: 20px 16px 32px; }
  .cs-form-actions { margin: 0 -16px -32px; padding-left: 16px; padding-right: 16px; }
  body.cs-app .main-header.cs-topbar { padding: 0 12px 0 4px; }
  .cs-topbar__right { gap: 10px; }
  .cs-page-actions { margin-left: 0; }
}
@media (max-width: 767.98px) {
  .cs-field--wide { grid-column: 1 / -1; }
  .cs-filters__actions { width: 100%; }
  .cs-filters__actions .cs-btn { flex: 1 1 0; }
  .cs-card__footer { justify-content: center; }
  .cs-page-actions { width: 100%; }
  .cs-page-actions .cs-btn { flex: 1 1 auto; }
  .cs-stats { width: 100%; }
  .cs-stat { flex: 1 1 140px; min-width: 0; }
  .cs-user { padding: 4px !important; }
}
@media (max-width: 575.98px) {
  .cs-page-title { font-size: 24px; }
  .cs-pill { padding: 0 10px; }
  .cs-pill__label,
  .cs-theme-toggle i { display: none; }
  .cs-divider-v { display: none; }
}

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