/* ==========================================================================
   cipitio-ui v2 — sistema de diseño del desktop
   --------------------------------------------------------------------------
   Inspirado en Mantine (superficies blancas, bordes de 1px, grises frios,
   variantes "light"), en CSS puro. Bootstrap 5 aporta solo el JS (modales,
   dropdowns, tabs, tooltips, collapse).

    1. Tokens          6. Botones / menu      11. Pestañas
    2. Base            7. Badges              12. Paginador
    3. Shell           8. Formularios         13. Alertas, vacio, modal
    4. Pagina          9. Barra de filtros    15. Responsive / impresion
    5. Paper y datos  10. Tablas

   Todo lleva prefijo cx- y lo generan los componentes de templates/components/
   ({% load ui %}). Solo aplica con body.cx: el POS no la lleva y conserva DashForge.
   ========================================================================== */

@font-face { font-family: "Inter UI"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../lib/inter-ui/Inter UI (web)/Inter-UI-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter UI"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../lib/inter-ui/Inter UI (web)/Inter-UI-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter UI"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../lib/inter-ui/Inter UI (web)/Inter-UI-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter UI"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../lib/inter-ui/Inter UI (web)/Inter-UI-Bold.woff2") format("woff2"); }

/* 1. Tokens ================================================================ */
:root {
  /* Primario: azul del logo de Panes El Cipitio (#3870C0) */
  --cx-primary-0: #edf3fb;
  --cx-primary-1: #dbe6f6;
  --cx-primary-2: #b4cbec;
  --cx-primary-3: #8bade1;
  --cx-primary-4: #6893d6;
  --cx-primary-5: #4f80cc;
  --cx-primary-6: #3870c0;
  --cx-primary-7: #2f61a9;
  --cx-primary-8: #285290;
  --cx-primary-9: #1e3f6f;
  --cx-primary-light: rgba(56, 112, 192, .1);
  --cx-primary-light-hover: rgba(56, 112, 192, .16);

  --cx-gray-0: #f8f9fa;
  --cx-gray-1: #f1f3f5;
  --cx-gray-2: #e9ecef;
  --cx-gray-3: #dee2e6;
  --cx-gray-4: #ced4da;
  --cx-gray-5: #adb5bd;
  --cx-gray-6: #868e96;
  --cx-gray-7: #495057;
  --cx-gray-8: #343a40;
  --cx-gray-9: #212529;

  --cx-text: #1f2328;
  --cx-dimmed: #6c757d;
  --cx-body: #f6f7f9;
  --cx-surface: #ffffff;
  --cx-border: var(--cx-gray-3);
  --cx-border-soft: var(--cx-gray-2);

  /* Colores semanticos. Por color: texto, fondo light, borde light, solido. */
  --cx-green: #2b8a3e;  --cx-green-bg: #ebfbee;  --cx-green-bd: #b2f2bb;  --cx-green-solid: #2f9e44;
  --cx-red: #c92a2a;    --cx-red-bg: #fff5f5;    --cx-red-bd: #ffc9c9;    --cx-red-solid: #e03131;
  --cx-yellow: #9c5b00; --cx-yellow-bg: #fff9db; --cx-yellow-bd: #ffe066; --cx-yellow-solid: #f59f00;
  --cx-orange: #c2410c; --cx-orange-bg: #fff4e6; --cx-orange-bd: #ffd8a8;
  --cx-cyan: #0b7285;   --cx-cyan-bg: #e3fafc;   --cx-cyan-bd: #99e9f2;
  --cx-violet: #6741d9; --cx-violet-bg: #f3f0ff; --cx-violet-bd: #d0bfff;
  --cx-gray: #495057;   --cx-gray-bg: #f1f3f5;   --cx-gray-bd: #dee2e6;

  --cx-font: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cx-radius-xs: 4px;
  --cx-radius-sm: 6px;
  --cx-radius-md: 8px;
  --cx-radius-lg: 12px;

  --cx-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --cx-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --cx-shadow-md: 0 12px 28px -6px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);

  --cx-control-h: 36px;
  --cx-control-h-sm: 32px;
  --cx-navbar-w: 256px;
  --cx-focus: 0 0 0 3px rgba(56, 112, 192, .22);
}

/* 2. Base ================================================================== */
body.cx {
  font-family: var(--cx-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cx-text);
  background: var(--cx-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.cx h1, body.cx h2, body.cx h3, body.cx h4, body.cx h5, body.cx h6 {
  font-family: var(--cx-font);
  color: var(--cx-text);
  letter-spacing: -.01em;
}
.cx svg.feather { stroke-width: 1.75; flex-shrink: 0; }

/* Solo enlaces sueltos de texto. Botones, menus y demas componentes que son <a>
   definen su propio color; :where() deja esta regla sin especificidad. */
:where(.cx) a:not([class]) { color: var(--cx-primary-6); text-decoration: none; }
:where(.cx) a:not([class]):hover { color: var(--cx-primary-7); text-decoration: underline; }
.cx-link { color: var(--cx-primary-6) !important; font-weight: 500; text-decoration: none !important; }
.cx-link:hover { color: var(--cx-primary-7) !important; text-decoration: underline !important; }

.cx-tabular { font-variant-numeric: tabular-nums; }
.cx-dimmed { color: var(--cx-dimmed) !important; }
.cx-mono { font-family: var(--cx-mono); font-size: 13px; }
.cx-strong { font-weight: 600; }
.cx-nowrap { white-space: nowrap; }
.cx-text-red { color: var(--cx-red) !important; }
.cx-text-green { color: var(--cx-green) !important; }
.cx-text-yellow { color: var(--cx-yellow) !important; }
.cx-stack { display: flex; flex-direction: column; gap: 16px; }
.cx-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-mb-0 { margin-bottom: 0 !important; }
.cx-mt-md { margin-top: 16px; }
/* Celda de un switch junto a inputs con etiqueta: lo baja a la altura del input */
.cx-switch-cell { padding-top: 26px; }
.cx-mb-md { margin-bottom: 16px; }
.cx-mb-lg { margin-bottom: 24px; }
.cx-divider { height: 1px; margin: 16px 0; border: 0; background: var(--cx-border-soft); opacity: 1; }
.cx-section-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--cx-gray-8); }

/* Contenedor angosto para formularios de una sola columna */
.cx-narrow { max-width: 760px; }
.cx-list-plain { margin: 4px 0 0; padding-left: 18px; }
.cx-list-plain li { margin: 2px 0; }
.cx-pre {
  margin: 0;
  padding: 12px 14px;
  max-height: 360px;
  overflow: auto;
  border-radius: var(--cx-radius-sm);
  background: var(--cx-gray-0);
  border: 1px solid var(--cx-border-soft);
  font-family: var(--cx-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Spinner de HTMX (se ve solo durante el pedido: .htmx-indicator) */
.cx-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cx-spin .7s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }
.htmx-request .cx-spinner.htmx-indicator, .htmx-request.cx-spinner { display: inline-block; }

/* Rejilla de contenido: principal + lateral */
.cx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cx-layout--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 3. Shell ================================================================= */
.cx-shell { min-height: 100vh; }
/* El menu lleva su tipografia propia: tambien aparece en el POS, que no usa body.cx */
.cx-navbar, .cx-topbar { font-family: var(--cx-font); font-size: 14px; line-height: 1.55; color: var(--cx-text); }

.cx-navbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
  width: var(--cx-navbar-w);
  display: flex;
  flex-direction: column;
  background: var(--cx-surface);
  border-right: 1px solid var(--cx-border);
}
.cx-navbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--cx-border-soft);
  text-decoration: none !important;
  flex-shrink: 0;
}
.cx-navbar__logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.cx-navbar__name { display: block; font-size: 15px; font-weight: 700; color: var(--cx-text); line-height: 1.2; }
.cx-navbar__tagline { display: block; font-size: 12px; color: var(--cx-dimmed); line-height: 1.3; }

.cx-navbar__body { flex: 1; overflow-y: auto; padding: 12px; scrollbar-width: thin; }
.cx-navbar__section {
  margin: 20px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cx-gray-6);
}
.cx-navlink {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  margin-bottom: 2px;
  border-radius: var(--cx-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--cx-gray-7) !important;
  text-decoration: none !important;
  transition: background-color .12s ease, color .12s ease;
}
.cx-navlink svg { width: 18px; height: 18px; color: var(--cx-gray-6); }
.cx-navlink:hover { background: var(--cx-gray-0); color: var(--cx-text) !important; }
.cx-navlink:hover svg { color: var(--cx-gray-7); }
.cx-navlink.is-active { background: var(--cx-primary-light); color: var(--cx-primary-7) !important; font-weight: 600; }
.cx-navlink.is-active svg { color: var(--cx-primary-6); }
.cx-navlink__trail { margin-left: auto; width: 14px !important; height: 14px !important; }

.cx-navbar__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--cx-border-soft);
  flex-shrink: 0;
}
.cx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cx-primary-light);
  color: var(--cx-primary-7);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.cx-navbar__user { flex: 1; min-width: 0; }
.cx-navbar__user-name, .cx-navbar__user-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-navbar__user-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cx-navbar__user-role { font-size: 12px; color: var(--cx-dimmed); }

.cx-main { margin-left: var(--cx-navbar-w); min-width: 0; }
.cx-topbar, .cx-backdrop { display: none; }

/* Pantalla de acceso (login desktop) ======================================
   Fondo de marca a pantalla completa y el formulario siempre centrado
   (horizontal y vertical); el pie va fijo abajo y no mueve el centro.
   ========================================================================== */
/* La pagina no carga Bootstrap: el reset minimo va aqui */
body.cx-auth, .cx-auth *, .cx-auth *::before, .cx-auth *::after { box-sizing: border-box; }
.cx-auth [hidden] { display: none !important; }
body.cx-auth {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 32px 16px 72px;
  overflow-x: hidden;
  color: var(--cx-text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(104, 147, 214, .55), transparent 60%),
    radial-gradient(800px 600px at 90% 95%, rgba(30, 63, 111, .9), transparent 65%),
    linear-gradient(160deg, #2f61a9 0%, #285290 45%, #1e3f6f 100%);
}
/* Trama de puntos sutil sobre el degradado */
.cx-auth::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35));
}

.cx-auth__panel { position: relative; z-index: 1; width: 100%; max-width: 420px; }

.cx-auth__brand { text-align: center; margin-bottom: 24px; color: #fff; }
.cx-auth__logo {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, .95);
  box-shadow: 0 10px 30px rgba(10, 25, 50, .35), 0 0 0 8px rgba(255, 255, 255, .12);
}
.cx-auth__company { margin: 16px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cx-auth__legal { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); }

.cx-auth__card {
  padding: 32px 32px 28px;
  background: var(--cx-surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(10, 25, 50, .45), 0 2px 6px rgba(10, 25, 50, .12);
}
.cx-auth__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.cx-auth__subtitle { margin: 4px 0 24px; font-size: 14px; color: var(--cx-dimmed); }
.cx-auth__form { display: grid; gap: 18px; }

/* Input con icono a la izquierda y accion opcional a la derecha */
.cx-auth__input { position: relative; }
.cx-auth__input > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--cx-gray-5);
  pointer-events: none;
}
.cx-auth__input input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 44px 0 42px;
  border: 1px solid var(--cx-gray-4);
  border-radius: 8px;
  background: var(--cx-surface);
  color: var(--cx-text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cx-auth__input input::placeholder { color: var(--cx-gray-5); }
.cx-auth__input input:focus { outline: none; border-color: var(--cx-primary-6); box-shadow: var(--cx-focus); }
.cx-auth__input:focus-within > svg { color: var(--cx-primary-6); }
.cx-auth__reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cx-gray-6);
  transform: translateY(-50%);
  cursor: pointer;
}
.cx-auth__reveal:hover { background: var(--cx-gray-1); color: var(--cx-text); }
.cx-auth__reveal:focus-visible { outline: none; box-shadow: var(--cx-focus); }
.cx-auth__reveal svg { width: 18px; height: 18px; }
.cx-auth__caps { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--cx-yellow); }
.cx-auth__caps[hidden] { display: none; }
.cx-auth__caps svg { width: 14px; height: 14px; }

.cx-auth__submit { height: 44px; margin-top: 4px; border-radius: 8px; font-size: 15px; }
.cx-auth__submit .cx-spinner { display: none; }
.cx-auth__submit.is-loading .cx-spinner { display: inline-block; }
/* Mientras ingresa sigue azul (el estilo de deshabilitado lo pondria gris) */
.cx-auth__submit.is-loading { background: var(--cx-primary-7) !important; border-color: transparent !important; color: #fff !important; }

.cx-auth__error {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--cx-red-bg);
  box-shadow: inset 0 0 0 1px var(--cx-red-bd);
  color: var(--cx-red);
  font-size: 14px;
}
.cx-auth__error svg { width: 18px; height: 18px; flex-shrink: 0; }

.cx-auth__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 479.98px) {
  .cx-auth__card { padding: 24px 20px 22px; }
  .cx-auth__logo { width: 76px; height: 76px; }
}

/* 4. Pagina ================================================================ */
.cx-page { padding: 24px 32px 56px; max-width: 1680px; }
.cx-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.cx-page-header__text { min-width: 0; }
.cx-page-header__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cx-page-header__actions:empty { display: none; }
.cx-eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--cx-dimmed); }
.cx-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px -2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cx-dimmed) !important;
  text-decoration: none !important;
}
.cx-back svg { width: 16px; height: 16px; }
.cx-back:hover { color: var(--cx-primary-6) !important; }
.cx-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cx-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.cx-title__muted { font-weight: 500; color: var(--cx-gray-6); }
.cx-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--cx-dimmed); }
.cx-subtitle:empty { display: none; }
.cx-sep { color: var(--cx-gray-4); margin: 0 6px; }

/* 5. Paper y datos ========================================================= */
.cx-paper {
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-xs);
  min-width: 0;
}
.cx-paper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cx-border-soft);
}
.cx-paper__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.cx-paper__title > svg { width: 16px; height: 16px; color: var(--cx-gray-6); }
.cx-paper__actions { display: flex; align-items: center; gap: 8px; }
.cx-paper__hint { font-size: 13px; color: var(--cx-dimmed); }
.cx-paper__lead { margin: 0 0 16px; font-size: 14px; color: var(--cx-gray-7); }
.cx-paper__body { padding: 20px; }
.cx-paper__band { padding: 16px 20px; background: var(--cx-gray-0); border-bottom: 1px solid var(--cx-border-soft); }
.cx-paper__footer { padding: 12px 20px; border-top: 1px solid var(--cx-border-soft); }
.cx-paper--danger { border-color: var(--cx-red-bd); }
.cx-paper--danger .cx-paper__header { background: var(--cx-red-bg); border-bottom-color: var(--cx-red-bd); border-radius: var(--cx-radius-md) var(--cx-radius-md) 0 0; }
.cx-paper--danger .cx-paper__title, .cx-paper--danger .cx-paper__title > svg { color: var(--cx-red); }

/* Metricas */
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cx-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-stack > .cx-stats { margin-bottom: 0; }
.cx-stat { padding: 18px 20px; }
.cx-stat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cx-stat__label { margin: 0; font-size: 13px; font-weight: 500; color: var(--cx-dimmed); }
.cx-stat__value {
  margin: 8px 0 2px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cx-stat__meta { margin: 0; font-size: 13px; color: var(--cx-dimmed); font-variant-numeric: tabular-nums; }
.cx-stat__meta b { font-weight: 600; color: var(--cx-gray-8); }

.cx-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cx-radius-md);
  flex-shrink: 0;
}
.cx-icon-tile svg { width: 18px; height: 18px; }
.cx-icon-tile--blue   { background: var(--cx-primary-0); color: var(--cx-primary-6); }
.cx-icon-tile--green  { background: var(--cx-green-bg);  color: var(--cx-green); }
.cx-icon-tile--gray   { background: var(--cx-gray-bg);   color: var(--cx-gray); }
.cx-icon-tile--red    { background: var(--cx-red-bg);    color: var(--cx-red); }
.cx-icon-tile--yellow { background: var(--cx-yellow-bg); color: var(--cx-yellow); }

/* Franja de resumen: numeros clave en una linea, separados por divisores */
.cx-summary {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-xs);
  overflow: hidden;
}
.cx-summary__item {
  flex: 1 1 0;
  min-width: 150px;
  padding: 12px 20px;
  box-shadow: -1px 0 0 var(--cx-border-soft);
}
.cx-summary__label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 500; color: var(--cx-dimmed); white-space: nowrap; }
.cx-summary__value { margin: 2px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-summary__note { margin: 0; font-size: 12px; color: var(--cx-dimmed); font-variant-numeric: tabular-nums; }
/* Dentro de un paper (encabezado de una pestaña): sin borde propio */
.cx-summary--flush { margin: 0; border: 0; border-bottom: 1px solid var(--cx-border-soft); border-radius: 0; box-shadow: none; background: var(--cx-gray-0); }
.cx-summary__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-gray-5); }
.cx-summary__dot--green  { background: var(--cx-green-solid); }
.cx-summary__dot--yellow { background: var(--cx-yellow-solid); }
.cx-summary__dot--red    { background: var(--cx-red-solid); }
.cx-summary__dot--blue   { background: var(--cx-primary-6); }

/* Franja informativa */
.cx-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  font-size: 13px;
  color: var(--cx-dimmed);
}
.cx-note svg { width: 16px; height: 16px; }
.cx-note__item { display: inline-flex; align-items: center; gap: 8px; }
.cx-note b { color: var(--cx-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-note__hint { margin-left: auto; }

/* Lista de datos (detail) */
.cx-details { display: grid; gap: 16px; margin: 0; }
.cx-details--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.cx-details__item { min-width: 0; }
.cx-details__item--full { grid-column: 1 / -1; }
.cx-details dt { margin: 0 0 3px; font-size: 12px; font-weight: 500; color: var(--cx-dimmed); }
.cx-details dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--cx-text); overflow-wrap: anywhere; }
.cx-details dd .cx-cell-sub { font-weight: 400; }

/* Variante en linea: etiqueta a la izquierda, valor a la derecha */
.cx-details--inline { gap: 0; }
.cx-details--inline .cx-details__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cx-border-soft);
}
.cx-details--inline .cx-details__item:first-child { padding-top: 0; }
.cx-details--inline .cx-details__item:last-child { border-bottom: 0; padding-bottom: 0; }
.cx-details--inline dt { margin: 0; font-size: 14px; font-weight: 400; }
.cx-details--inline dd { text-align: right; font-variant-numeric: tabular-nums; }

/* Lista de enlaces (producciones recientes, etc.) */
.cx-list { display: flex; flex-direction: column; }
.cx-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cx-border-soft);
  color: var(--cx-text) !important;
  text-decoration: none !important;
  transition: background-color .1s ease;
}
.cx-list__item:last-child { border-bottom: 0; }
.cx-list__item:hover { background: var(--cx-gray-0); }
.cx-list__body { flex: 1; min-width: 0; }
.cx-list__title { display: block; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-list__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--cx-dimmed); }
.cx-list__trail { font-size: 13px; color: var(--cx-gray-7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-list__chevron { width: 16px; height: 16px; color: var(--cx-gray-5); flex-shrink: 0; }
/* Fila que envia el formulario (descargas): mismo aspecto que la fila enlace */
button.cx-list__item {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--cx-border-soft);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.cx-list__item:focus-visible { outline: none; box-shadow: inset var(--cx-focus); }
button.cx-list__item:hover .cx-list__chevron { color: var(--cx-primary-6); }
/* Rotulo de un grupo de filas dentro de la lista */
.cx-list__label {
  padding: 14px 20px 6px;
  border-bottom: 1px solid var(--cx-border-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-dimmed);
}
.cx-paper__link { font-size: 13px; font-weight: 500; color: var(--cx-primary-6) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; }
.cx-paper__link:hover { color: var(--cx-primary-7) !important; }
.cx-paper__link svg { width: 14px; height: 14px; }

/* Barra de progreso con su porcentaje */
.cx-progress { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.cx-progress__track { flex: 1; height: 6px; border-radius: 999px; background: var(--cx-gray-2); overflow: hidden; }
.cx-progress__bar { height: 100%; border-radius: 999px; background: var(--cx-green-solid); }
.cx-progress__bar--red { background: var(--cx-red-solid); }
.cx-progress__bar--yellow { background: var(--cx-yellow-solid); }
.cx-progress__bar--gray { background: var(--cx-gray-5); }
.cx-progress__bar--blue { background: var(--cx-primary-6); }
.cx-progress--thin .cx-progress__track { height: 4px; }

/* Ranking: fila con puesto, nombre, valor y barra relativa */
.cx-rank-list { display: flex; flex-direction: column; }
.cx-rank-item { padding: 12px 20px; border-bottom: 1px solid var(--cx-border-soft); }
.cx-rank-item:last-child { border-bottom: 0; }
.cx-rank-item__row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cx-rank-item__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cx-gray-1);
  color: var(--cx-gray-7);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.cx-rank-item__pos--top { background: var(--cx-primary-light); color: var(--cx-primary-7); }
.cx-rank-item__body { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-rank-item__value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-rank-item__value b { font-size: 14px; font-weight: 600; }
.cx-rank-item__value span { margin-left: 8px; font-size: 13px; color: var(--cx-dimmed); }
.cx-progress__value { width: 44px; text-align: right; font-size: 12px; font-weight: 500; color: var(--cx-gray-7); font-variant-numeric: tabular-nums; }

/* Lienzo de grafico con altura fija */
.cx-chart { position: relative; height: 320px; padding: 16px 20px; }

/* Mosaico de fichas (recetas disponibles, etc.) */
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.cx-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
}
.cx-tile--red    { border-left: 3px solid var(--cx-red-solid); }
.cx-tile--yellow { border-left: 3px solid var(--cx-yellow-solid); }
.cx-tile--green  { border-left: 3px solid var(--cx-green-solid); }
.cx-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cx-tile__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cx-tile__sub { margin: 2px 0 0; font-size: 12px; color: var(--cx-dimmed); }
.cx-tile__metric { text-align: right; flex-shrink: 0; }
.cx-tile__value { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cx-tile__unit { display: block; font-size: 11px; color: var(--cx-dimmed); }
.cx-tile__note { font-size: 12px; color: var(--cx-gray-7); }
.cx-tile__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cx-primary-6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.cx-tile__toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.cx-tile__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cx-tile__list { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--cx-border-soft); list-style: none; }
.cx-tile__list li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; }
.cx-tile__list span:last-child { font-variant-numeric: tabular-nums; color: var(--cx-dimmed); }

/* Fila de total */
.cx-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cx-border);
}
.cx-total__label { font-size: 14px; font-weight: 600; }
.cx-total__value { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* 6. Botones / menu ======================================================== */
.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--cx-control-h);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--cx-radius-xs);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  --btn-solid: var(--cx-primary-6);
  --btn-solid-hover: var(--cx-primary-7);
  --btn-text: var(--cx-primary-7);
  --btn-light: var(--cx-primary-light);
  --btn-light-hover: var(--cx-primary-light-hover);
}
.cx-btn svg { width: 16px; height: 16px; }
.cx-btn:focus-visible { outline: none; box-shadow: var(--cx-focus); }
.cx-btn:active:not(:disabled) { transform: translateY(1px); }

.cx-btn--red    { --btn-solid: var(--cx-red-solid);    --btn-solid-hover: var(--cx-red);   --btn-text: var(--cx-red);    --btn-light: var(--cx-red-bg);    --btn-light-hover: #ffe3e3; }
.cx-btn--green  { --btn-solid: var(--cx-green-solid);  --btn-solid-hover: var(--cx-green); --btn-text: var(--cx-green);  --btn-light: var(--cx-green-bg);  --btn-light-hover: #d3f9d8; }
.cx-btn--yellow { --btn-solid: var(--cx-yellow-solid); --btn-solid-hover: #e67700;         --btn-text: var(--cx-yellow); --btn-light: var(--cx-yellow-bg); --btn-light-hover: #fff3bf; }

.cx-btn--filled { background: var(--btn-solid); color: #fff !important; }
.cx-btn--filled:hover { background: var(--btn-solid-hover); }
.cx-btn--light { background: var(--btn-light); color: var(--btn-text) !important; }
.cx-btn--light:hover { background: var(--btn-light-hover); }
.cx-btn--default { background: var(--cx-surface); border-color: var(--cx-gray-4); color: var(--cx-gray-9) !important; }
.cx-btn--default:hover { background: var(--cx-gray-0); }
.cx-btn--default.cx-btn--red { color: var(--cx-red) !important; }
.cx-btn--subtle { background: transparent; color: var(--cx-gray-7) !important; }
.cx-btn--subtle:hover { background: var(--cx-gray-1); color: var(--cx-text) !important; }
.cx-btn--sm { height: var(--cx-control-h-sm); padding: 0 12px; font-size: 13px; }
.cx-btn--block { width: 100%; }
.cx-btn:disabled, .cx-btn.is-disabled {
  background: var(--cx-gray-1) !important;
  border-color: var(--cx-gray-2) !important;
  color: var(--cx-gray-5) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.cx-btn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: var(--cx-text);
  font-size: 11px;
  font-weight: 700;
}
.cx-btn--default .cx-btn__count, .cx-btn--subtle .cx-btn__count { background: var(--cx-primary-6); color: #fff; }

/* Boton de solo icono */
.cx-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-xs);
  background: var(--cx-surface);
  color: var(--cx-gray-7) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.cx-action svg { width: 16px; height: 16px; }
.cx-action:hover { background: var(--cx-gray-0); color: var(--cx-primary-6) !important; border-color: var(--cx-gray-4); }
.cx-action--subtle { border-color: transparent; background: transparent; }
.cx-action--subtle:hover { background: var(--cx-gray-1); border-color: transparent; }
.cx-action--red:hover { color: var(--cx-red) !important; background: var(--cx-red-bg); border-color: var(--cx-red-bd); }
.cx-action--green:hover { color: var(--cx-green) !important; background: var(--cx-green-bg); border-color: var(--cx-green-bd); }
.cx-actions { display: inline-flex; gap: 4px; }

/* Grupo de acciones unidas: un solo borde, divisores entre botones.
   Los <form> internos no cuentan como caja (display: contents). */
.cx-action-group {
  display: inline-flex;
  vertical-align: middle;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-xs);
  background: var(--cx-surface);
  overflow: hidden;
}
.cx-action-group > form { display: contents; }
.cx-action-group .cx-action {
  border: 0;
  border-radius: 0;
  box-shadow: -1px 0 0 var(--cx-border);
}
.cx-action-group .cx-action:hover { border-color: transparent; }

/* Menu desplegable (Bootstrap dropdown) */
.cx-menu { display: inline-block; position: relative; }
.cx-menu__dropdown.dropdown-menu {
  min-width: 220px;
  padding: 4px;
  margin-top: 4px !important;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-md);
  font-size: 14px;
}
.cx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--cx-radius-xs);
  background: none;
  color: var(--cx-text) !important;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}
.cx-menu__item svg { width: 16px; height: 16px; color: var(--cx-gray-6); }
.cx-menu__item:hover { background: var(--cx-gray-1); }
.cx-menu__item--red { color: var(--cx-red) !important; }
.cx-menu__item--red svg { color: var(--cx-red); }
.cx-menu__item--red:hover { background: var(--cx-red-bg); }
.cx-menu__divider { height: 1px; margin: 4px 0; background: var(--cx-border-soft); }
.cx-menu__label { padding: 6px 10px 2px; font-size: 12px; font-weight: 500; color: var(--cx-dimmed); }
.cx-menu form { margin: 0; }

/* 7. Badges ================================================================ */
.cx-badge {
  --badge-text: var(--cx-gray);
  --badge-bg: var(--cx-gray-bg);
  --badge-bd: var(--cx-gray-bd);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--badge-bg);
  box-shadow: inset 0 0 0 1px var(--badge-bd);
  color: var(--badge-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.cx-badge svg { width: 12px; height: 12px; }
.cx-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cx-badge--lg { height: 26px; padding: 0 10px; font-size: 13px; }
.cx-badge--lg.cx-badge--dot::before { width: 7px; height: 7px; }
.cx-badge--blue   { --badge-text: var(--cx-primary-7); --badge-bg: var(--cx-primary-0); --badge-bd: var(--cx-primary-2); }
.cx-badge--green  { --badge-text: var(--cx-green);  --badge-bg: var(--cx-green-bg);  --badge-bd: var(--cx-green-bd); }
.cx-badge--red    { --badge-text: var(--cx-red);    --badge-bg: var(--cx-red-bg);    --badge-bd: var(--cx-red-bd); }
.cx-badge--yellow { --badge-text: var(--cx-yellow); --badge-bg: var(--cx-yellow-bg); --badge-bd: var(--cx-yellow-bd); }
.cx-badge--orange { --badge-text: var(--cx-orange); --badge-bg: var(--cx-orange-bg); --badge-bd: var(--cx-orange-bd); }
.cx-badge--cyan   { --badge-text: var(--cx-cyan);   --badge-bg: var(--cx-cyan-bg);   --badge-bd: var(--cx-cyan-bd); }
.cx-badge--violet { --badge-text: var(--cx-violet); --badge-bg: var(--cx-violet-bg); --badge-bd: var(--cx-violet-bd); }
.cx-badge--outline { --badge-bg: transparent; }
.cx-badge-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cx-autosave[hidden], .cx-autosave [hidden] { display: none !important; }
.cx-autosave .cx-badge { height: 26px; padding: 0 10px; font-size: 13px; }

.cx-count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cx-gray-1);
  color: var(--cx-gray-7);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cx-code {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--cx-radius-xs);
  background: var(--cx-gray-1);
  color: var(--cx-gray-8);
  font-family: var(--cx-mono);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
.cx-code--block { display: block; white-space: normal; overflow-wrap: anywhere; padding: 6px 8px; }
.cx-code--lg { padding: 3px 8px; font-size: 13px; }

/* 8. Formularios =========================================================== */
.cx-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cx-form-grid > * { grid-column: span 12; }
.cx-form-grid > .cx-span-1 { grid-column: span 1; }
.cx-form-grid > .cx-span-2 { grid-column: span 2; }
.cx-form-grid > .cx-span-3 { grid-column: span 3; }
.cx-form-grid > .cx-span-4 { grid-column: span 4; }
.cx-form-grid > .cx-span-5 { grid-column: span 5; }
.cx-form-grid > .cx-span-6 { grid-column: span 6; }
.cx-form-grid > .cx-span-7 { grid-column: span 7; }
.cx-form-grid > .cx-span-8 { grid-column: span 8; }
.cx-form-grid > .cx-span-9 { grid-column: span 9; }
.cx-form-grid > .cx-span-10 { grid-column: span 10; }
.cx-form-grid > .cx-span-11 { grid-column: span 11; }
.cx-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.cx-field { display: flex; flex-direction: column; min-width: 0; }
.cx-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--cx-gray-8); }
.cx-label__req { color: var(--cx-red); margin-left: 2px; }
.cx-help { margin: 5px 0 0; font-size: 12px; color: var(--cx-dimmed); }
.cx-error { margin: 5px 0 0; font-size: 12px; color: var(--cx-red); }

/* Inputs: clases propias y lo que renderizan los widgets de Django dentro de .cx-field */
.cx-input, .cx-select, .cx-textarea,
.cx-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  display: block;
  width: 100%;
  height: var(--cx-control-h);
  padding: 0 12px;
  border: 1px solid var(--cx-gray-4);
  border-radius: var(--cx-radius-xs);
  background-color: var(--cx-surface);
  color: var(--cx-text);
  font-family: inherit;
  font-size: 14px;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cx-textarea, .cx-field textarea { height: auto; min-height: 80px; padding: 8px 12px; line-height: 1.5; resize: vertical; }
.cx-select, .cx-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
}
.cx-input::placeholder, .cx-textarea::placeholder, .cx-field :is(input, textarea)::placeholder { color: var(--cx-gray-5); }
.cx-input:focus, .cx-select:focus, .cx-textarea:focus,
.cx-field :is(input, select, textarea):focus { outline: none; border-color: var(--cx-primary-6); box-shadow: none; }
.cx-input[readonly], .cx-input:disabled, .cx-select:disabled, .cx-textarea[readonly],
.cx-field :is(input, select, textarea):is([readonly], :disabled) { background-color: var(--cx-gray-0); color: var(--cx-gray-7); cursor: default; }
.cx-input--right { text-align: right; font-variant-numeric: tabular-nums; }
.cx-input--sm { height: var(--cx-control-h-sm); font-size: 13px; }
.cx-field.has-error :is(input, select, textarea) { border-color: var(--cx-red) !important; }
input[type="date"].cx-input::-webkit-calendar-picker-indicator,
.cx-field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

/* Prefijo fijo dentro del input ($, %) */
.cx-affix { position: relative; }
.cx-affix__text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--cx-gray-6);
  pointer-events: none;
}
.cx-affix > input { padding-left: 26px !important; font-variant-numeric: tabular-nums; }
.cx-affix--sm .cx-affix__text { left: 9px; font-size: 13px; }
.cx-price-input { width: 140px; }
.cx-affix--sm > input { padding-left: 21px !important; }
.cx-label__opt { font-weight: 400; color: var(--cx-dimmed); }

/* Lista de casillas con borde: una fila por opcion, con detalle y estado a la derecha */
.cx-checklist { border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm); overflow: hidden; }
.cx-checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cx-border-soft);
  cursor: pointer;
}
.cx-checklist__item:last-child { border-bottom: 0; }
.cx-checklist__item:hover { background: var(--cx-gray-0); }
.cx-checklist__body { flex: 1; min-width: 0; }
.cx-checklist__title { display: block; font-size: 14px; font-weight: 500; }
.cx-checklist__sub { display: block; font-size: 12px; color: var(--cx-dimmed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-checklist__item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--cx-gray-4);
  border-radius: 4px;
  background: #fff center / 12px no-repeat;
  cursor: pointer;
}
.cx-checklist__item input[type="checkbox"]:checked {
  border-color: var(--cx-primary-6);
  background-color: var(--cx-primary-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Seccion de formulario con titulo y descripcion */
.cx-form-section { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--cx-border-soft); }
.cx-form-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cx-form-section__title { margin: 0; font-size: 14px; font-weight: 600; }
.cx-form-section__desc { margin: 2px 0 0; font-size: 13px; color: var(--cx-dimmed); }

.cx-input-icon { position: relative; }
.cx-input-icon > svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--cx-gray-5);
  pointer-events: none;
}
.cx-input-icon > input { padding-left: 34px !important; }

/* Switch (checkbox) */
.cx-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0; }
.cx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cx-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--cx-gray-3);
  transition: background-color .15s ease;
}
.cx-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
.cx-switch input:checked + .cx-switch__track { background: var(--cx-primary-6); }
.cx-switch input:checked + .cx-switch__track::after { transform: translateX(16px); }
.cx-switch input:focus-visible + .cx-switch__track { box-shadow: var(--cx-focus); }
.cx-switch__label { display: block; font-size: 14px; font-weight: 500; }
.cx-switch__help { display: block; font-size: 12px; color: var(--cx-dimmed); }

/* Checkbox */
.cx-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 8px; border-radius: var(--cx-radius-xs); font-size: 14px; cursor: pointer; }
.cx-check:hover { background: var(--cx-gray-0); }
.cx-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--cx-gray-4);
  border-radius: 4px;
  background: #fff center / 12px no-repeat;
  cursor: pointer;
}
.cx-check input:checked {
  border-color: var(--cx-primary-6);
  background-color: var(--cx-primary-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cx-check input:indeterminate {
  border-color: var(--cx-primary-6);
  background-color: var(--cx-primary-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
}
.cx-check--all { font-weight: 600; border-bottom: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-xs) var(--cx-radius-xs) 0 0; margin-bottom: 4px; }
.cx-check[hidden] { display: none; }
/* Los widgets de Django traen la clase custom-control-input, que DashForge oculta */
.cx-check input.custom-control-input { position: static; z-index: auto; opacity: 1; }

/* Control segmentado (radios) */
.cx-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--cx-radius-sm);
  background: var(--cx-gray-1);
}
.cx-segmented__item { position: relative; margin: 0; cursor: pointer; }
.cx-segmented__item input { position: absolute; opacity: 0; pointer-events: none; }
.cx-segmented__item span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--cx-radius-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--cx-gray-7);
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.cx-segmented__item:hover span { color: var(--cx-text); }
.cx-segmented__item input:checked + span { background: var(--cx-surface); color: var(--cx-text); font-weight: 600; box-shadow: var(--cx-shadow-sm); }
.cx-segmented__item input:focus-visible + span { box-shadow: var(--cx-focus); }

/* Select2 con el mismo aspecto que los inputs */
.cx .select2-container--default .select2-selection--single,
.cx .select2-container--default .select2-selection--multiple {
  min-height: var(--cx-control-h);
  border: 1px solid var(--cx-gray-4);
  border-radius: var(--cx-radius-xs);
}
.cx .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: 12px; color: var(--cx-text); }
.cx .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 6px; }
.cx .select2-container--default.select2-container--focus .select2-selection,
.cx .select2-container--default.select2-container--open .select2-selection { border-color: var(--cx-primary-6); }
.cx .select2-dropdown { border-color: var(--cx-gray-4); border-radius: var(--cx-radius-xs); box-shadow: var(--cx-shadow-md); font-size: 14px; }
.cx .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--cx-primary-6); }
.cx .select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--cx-gray-4); border-radius: var(--cx-radius-xs); }

/* 9. Barra de filtros ======================================================
   Fila compacta de controles con etiqueta interna, panel "Mas filtros" y
   chips de los filtros activos. Va como banda dentro de un paper.
   ========================================================================== */
.cx-filterbar { padding: 14px 20px; border-bottom: 1px solid var(--cx-border-soft); }
.cx-filterbar--standalone { border-bottom: 0; }
.cx-filterbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-filterbar__more { padding-top: 8px; }
.cx-filterbar__more .cx-filterbar__row { padding-top: 0; }
.cx-filterbar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Control con etiqueta interna: [Sucursal  Todas ▾] */
.cx-fcontrol {
  display: inline-flex;
  align-items: center;
  height: var(--cx-control-h-sm);
  max-width: 100%;
  border: 1px solid var(--cx-gray-4);
  border-radius: var(--cx-radius-xs);
  background: var(--cx-surface);
  transition: border-color .12s ease, background-color .12s ease;
}
.cx-fcontrol:focus-within { border-color: var(--cx-primary-6); }
.cx-fcontrol.is-active { border-color: var(--cx-primary-3); background: var(--cx-primary-0); }
.cx-fcontrol__label {
  padding: 0 2px 0 10px;
  font-size: 13px;
  color: var(--cx-dimmed);
  white-space: nowrap;
}
.cx-fcontrol__icon { width: 15px; height: 15px; margin-left: 10px; color: var(--cx-gray-5); }
.cx-fcontrol :is(input, select) {
  height: 100%;
  min-width: 0;
  padding: 0 10px 0 6px;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--cx-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.cx-fcontrol select {
  width: auto;
  max-width: 210px;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23868e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  cursor: pointer;
}
.cx-fcontrol input[type="date"] { width: 122px; padding: 0 4px 0 6px; }
.cx-fcontrol input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; margin-left: 2px; }
.cx-fcontrol input[type="number"] { width: 96px; }
.cx-fcontrol__sep { color: var(--cx-gray-5); font-size: 13px; }

.cx-fcontrol--search { flex: 1 1 160px; max-width: 360px; }
.cx-fcontrol--search input { flex: 1; width: 100%; font-weight: 400; }
.cx-fcontrol--search input::placeholder { color: var(--cx-gray-5); }

/* Disparador de popover (multi-seleccion, rango de monto) */
.cx-fcontrol--button { padding: 0 8px 0 0; cursor: pointer; font-family: inherit; }
.cx-fcontrol__value { padding: 0 4px 0 6px; font-size: 13px; font-weight: 500; color: var(--cx-text); white-space: nowrap; }
.cx-fcontrol__chevron { width: 14px; height: 14px; color: var(--cx-gray-6); }

.cx-popover.dropdown-menu {
  width: 300px;
  padding: 0;
  margin-top: 4px !important;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-md);
  font-size: 14px;
}
.cx-popover__search { padding: 8px; border-bottom: 1px solid var(--cx-border-soft); }
.cx-popover__list { max-height: 260px; overflow-y: auto; padding: 4px; }
.cx-popover__body { padding: 12px; }
.cx-popover__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 8px; border-top: 1px solid var(--cx-border-soft); }

/* Atajos (Hoy, Ayer...) */
.cx-presets { display: inline-flex; gap: 4px; }
.cx-preset {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--cx-radius-xs);
  background: transparent;
  color: var(--cx-primary-7);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.cx-preset:hover { background: var(--cx-primary-light); }

/* Chips de filtros activos */
.cx-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.cx-chips__label { font-size: 12px; color: var(--cx-dimmed); margin-right: 2px; }
.cx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: var(--cx-primary-0);
  box-shadow: inset 0 0 0 1px var(--cx-primary-2);
  color: var(--cx-primary-8);
  font-size: 12px;
  white-space: nowrap;
}
.cx-chip b { font-weight: 600; }
.cx-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--cx-primary-7) !important;
  text-decoration: none !important;
}
.cx-chip__remove:hover { background: var(--cx-primary-light-hover); }
.cx-chip__remove svg { width: 12px; height: 12px; }
.cx-chips__clear { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--cx-dimmed) !important; text-decoration: none !important; }
.cx-chips__clear:hover { color: var(--cx-red) !important; }

/* 10. Tablas =============================================================== */
.cx-table-wrap { overflow-x: auto; }
.cx-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cx-table th {
  padding: 10px 16px;
  background: var(--cx-gray-0);
  border-bottom: 1px solid var(--cx-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-gray-7);
  text-align: left;
  white-space: nowrap;
}
/* Una fila = una linea: nada se parte en dos. Las columnas de texto libre (nombres,
   direcciones) llevan .is-truncate y se cortan con "…" (el texto completo va en title). */
.cx-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--cx-border-soft);
  vertical-align: middle;
  color: var(--cx-text);
  white-space: nowrap;
}
.cx-table .is-truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.cx-table tbody tr { transition: background-color .08s ease; }
.cx-table tbody tr:hover td { background: #fafbfc; }
.cx-table tbody tr:last-child td { border-bottom: 0; }
.cx-table tfoot td, .cx-table tfoot th {
  padding: 12px 16px;
  background: var(--cx-gray-0);
  border-top: 1px solid var(--cx-border);
  border-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cx-text);
}
.cx-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit !important; text-decoration: none !important; }
.cx-sort:hover { color: var(--cx-text) !important; }
.cx-sort.is-active { color: var(--cx-primary-7) !important; }
.cx-sort svg { width: 13px; height: 13px; }
.cx-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-table .is-center { text-align: center; }
.cx-table .is-shrink { width: 1%; white-space: nowrap; }
.cx-table .is-rank { width: 1%; color: var(--cx-gray-5); font-variant-numeric: tabular-nums; }
.cx-cell-main { display: block; font-weight: 500; line-height: 1.35; }
.cx-cell-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--cx-dimmed); line-height: 1.4; }
.cx-cell-sub svg { width: 12px; height: 12px; vertical-align: -1px; }
.cx-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Hora junto a la fecha, en la misma linea: 22/08/26 21:06 */
.cx-time { margin-left: 6px; color: var(--cx-dimmed); font-variant-numeric: tabular-nums; }
/* Dato secundario en la misma linea que el principal */
.cx-inline-sub { margin-left: 6px; font-size: 13px; color: var(--cx-dimmed); }
.cx-table tr.htmx-swapping td { opacity: 0; transition: opacity .6s ease; }

/* 11. Pestañas (Bootstrap tab con role=tablist) ============================ */
.cx-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--cx-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.cx-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--cx-gray-7);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.cx-tab svg { width: 16px; height: 16px; color: var(--cx-gray-6); }
.cx-tab:hover { color: var(--cx-text); border-bottom-color: var(--cx-gray-3); }
.cx-tab.active { color: var(--cx-primary-7); border-bottom-color: var(--cx-primary-6); font-weight: 600; }
.cx-tab.active svg { color: var(--cx-primary-6); }
.cx-tab .cx-count { height: 18px; font-size: 11px; }
.cx-tab.active .cx-count { background: var(--cx-primary-light); color: var(--cx-primary-7); }
.cx-count--red { background: var(--cx-red-bg) !important; color: var(--cx-red) !important; }
.cx-count--yellow { background: var(--cx-yellow-bg) !important; color: var(--cx-yellow) !important; }

/* 12. Paginador ============================================================ */
.cx-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 12px 20px;
  border-top: 1px solid var(--cx-border-soft);
}
.cx-pager__info { margin: 0; font-size: 13px; color: var(--cx-dimmed); font-variant-numeric: tabular-nums; }
.cx-pager__info b { font-weight: 600; color: var(--cx-text); }
.cx-pager__nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cx-pagination { display: flex; align-items: center; gap: 6px; }
.cx-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--cx-gray-4);
  border-radius: var(--cx-radius-xs);
  background: var(--cx-surface);
  color: var(--cx-text) !important;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none !important;
  transition: background-color .12s ease, border-color .12s ease;
}
.cx-pagination__item svg { width: 16px; height: 16px; }
a.cx-pagination__item:hover { background: var(--cx-gray-0); }
.cx-pagination__item.is-active { background: var(--cx-primary-6); border-color: var(--cx-primary-6); color: #fff !important; font-weight: 600; }
.cx-pagination__item.is-disabled { opacity: .45; pointer-events: none; }
.cx-pagination__dots { min-width: 20px; text-align: center; color: var(--cx-gray-6); letter-spacing: .1em; }
.cx-pager__jump { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--cx-dimmed); }
.cx-pager__jump input {
  width: 76px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--cx-gray-4);
  border-radius: var(--cx-radius-xs);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.cx-pager__jump input::-webkit-outer-spin-button,
.cx-pager__jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cx-pager__jump input:focus { outline: none; border-color: var(--cx-primary-6); }

/* 13. Alertas, vacio, modal, tooltips ====================================== */
.cx-alert {
  --alert-text: var(--cx-primary-8);
  --alert-bg: var(--cx-primary-0);
  --alert-bd: var(--cx-primary-2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--cx-radius-md);
  background: var(--alert-bg);
  box-shadow: inset 0 0 0 1px var(--alert-bd);
  color: var(--alert-text);
  font-size: 14px;
}
.cx-alert--success { --alert-text: var(--cx-green); --alert-bg: var(--cx-green-bg); --alert-bd: var(--cx-green-bd); }
.cx-alert--error, .cx-alert--danger { --alert-text: var(--cx-red); --alert-bg: var(--cx-red-bg); --alert-bd: var(--cx-red-bd); }
.cx-alert--warning { --alert-text: var(--cx-yellow); --alert-bg: var(--cx-yellow-bg); --alert-bd: var(--cx-yellow-bd); }
.cx-alert__icon { width: 18px; height: 18px; margin-top: 1px; }
.cx-alert__text { flex: 1; min-width: 0; }
.cx-alert__title { margin: 0 0 2px; font-weight: 600; }
.cx-alert__text p:last-child { margin-bottom: 0; }
.cx-alert__close { border: 0; background: none; padding: 0; color: inherit; opacity: .6; cursor: pointer; }
.cx-alert__close:hover { opacity: 1; }
.cx-alert__close svg { width: 16px; height: 16px; }

.cx-empty { padding: 48px 16px; text-align: center; }
.cx-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--cx-gray-1);
  color: var(--cx-gray-6);
}
.cx-empty__icon svg { width: 22px; height: 22px; }
.cx-empty__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--cx-text); }
.cx-empty__text { margin: 4px 0 0; font-size: 13px; color: var(--cx-dimmed); }

.cx-modal .modal-content { border: 0; border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-md); }
.cx-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--cx-border-soft); }
.cx-modal .modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.cx-modal .modal-body { padding: 20px; font-size: 14px; }
.cx-modal .modal-footer { gap: 8px; padding: 12px 20px; border-top: 1px solid var(--cx-border-soft); }
.cx-modal .modal-footer > * { margin: 0; }

.cx .tooltip { --bs-tooltip-bg: var(--cx-gray-9); --bs-tooltip-font-size: 12px; --bs-tooltip-border-radius: var(--cx-radius-xs); }
.cx .tooltip-inner { padding: 5px 9px; font-family: var(--cx-font); }
.cx .toast {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-md);
  font-family: var(--cx-font);
  font-size: 14px;
}

/* 15. Responsive / impresion =============================================== */
@media (max-width: 1279.98px) {
  .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .cx-navbar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--cx-shadow-md); }
  .cx-shell.is-nav-open .cx-navbar { transform: none; }
  .cx-shell.is-nav-open .cx-backdrop { display: block; position: fixed; inset: 0; z-index: 1029; background: rgba(33, 37, 41, .4); }
  .cx-main { margin-left: 0; }
  .cx-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    background: var(--cx-surface);
    border-bottom: 1px solid var(--cx-border);
  }
  .cx-topbar__logo { width: 28px; height: 28px; border-radius: 50%; }
  .cx-topbar__name { font-weight: 700; }
  .cx-page { padding: 20px 16px 40px; }
  .cx-page-header { flex-direction: column; align-items: flex-start; }
  .cx-page-header__actions { justify-content: flex-start; }
  .cx-layout--even, .cx-details--2 { grid-template-columns: minmax(0, 1fr); }
  .cx-form-grid > [class*="cx-span-"] { grid-column: span 12; }
}
@media (max-width: 639.98px) {
  .cx-stats, .cx-stats--2 { grid-template-columns: minmax(0, 1fr); }
  .cx-fcontrol--search { max-width: none; }
}

@media print {
  .cx-navbar, .cx-topbar, .cx-page-header__actions, .cx-filterbar, .cx-pager, .cx-back, .cx-no-print { display: none !important; }
  .cx-main { margin-left: 0; }
  .cx-page { padding: 0; max-width: none; }
  body.cx { background: #fff; }
  .cx-paper { box-shadow: none; break-inside: avoid; }
  .tab-content > .tab-pane { display: block !important; opacity: 1 !important; margin-bottom: 24px; }
}