@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* ═══════════════════════════════════════════════════════
   1. TOKENS
═══════════════════════════════════════════════════════ */
.cja-module {
  /* Base */
  --cja-bg:            #F5FAFA;
  --cja-surface:       #EBF5F4;
  --cja-surface-alt:   #D9EEED;
  --cja-border:        #BDD8D6;
  --cja-border-soft:   #D9EEED;

  /* Texto */
  --cja-text-primary:   #0F2322;
  --cja-text-secondary: #2D5250;
  --cja-text-muted:     #6B9A97;
  --cja-text-inverse:   #F5FAFA;

  /* Acento teal */
  --cja-teal:          #0D9488;
  --cja-teal-light:    #CCFBF1;
  --cja-teal-mid:      #99F6E4;
  --cja-teal-dark:     #115E59;
  --cja-teal-hover:    #0F766E;
  --cja-teal-deep:     #042F2E;

  /* Secundario dorado — ingresos / totales positivos */
  --cja-gold:          #B45309;
  --cja-gold-light:    #FEF3C7;
  --cja-gold-mid:      #FDE68A;

  /* Estados */
  --cja-ok:            #16A34A;
  --cja-ok-bg:         #DCFCE7;
  --cja-warn:          #D97706;
  --cja-warn-bg:       #FEF3C7;
  --cja-danger:        #DC2626;
  --cja-danger-bg:     #FEE2E2;
  --cja-info:          #0284C7;
  --cja-info-bg:       #E0F2FE;

  /* Estados de caja */
  --cja-abierta:       #0D9488;
  --cja-abierta-bg:    #CCFBF1;
  --cja-cerrada:       #DC2626;
  --cja-cerrada-bg:    #FEE2E2;
  --cja-diferencia-ok: #16A34A;
  --cja-diferencia-err:#DC2626;

  /* Métodos de pago (mismos colores que ventas para consistencia) */
  --cja-mp-efectivo:   #16A34A;
  --cja-mp-tarjeta:    #2563EB;
  --cja-mp-transfer:   #7C3AED;
  --cja-mp-mixto:      #D97706;

  /* Tipografía */
  --cja-font-ui:       'Sora', system-ui, sans-serif;
  --cja-font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* Escala de tipo */
  --cja-text-xs:       0.72rem;
  --cja-text-sm:       0.82rem;
  --cja-text-base:     0.92rem;
  --cja-text-md:       1rem;
  --cja-text-lg:       1.125rem;
  --cja-text-xl:       1.35rem;
  --cja-text-2xl:      1.65rem;
  --cja-text-3xl:      2.1rem;
  --cja-text-4xl:      2.8rem;

  /* Radios y sombras */
  --cja-radius-sm:     6px;
  --cja-radius:        10px;
  --cja-radius-lg:     16px;
  --cja-radius-xl:     22px;
  --cja-radius-pill:   999px;
  --cja-shadow-sm:     0 1px 3px rgba(15,35,34,.07);
  --cja-shadow:        0 3px 10px rgba(15,35,34,.09);
  --cja-shadow-md:     0 6px 20px rgba(15,35,34,.12);
  --cja-shadow-lg:     0 12px 40px rgba(15,35,34,.15);
  --cja-shadow-teal:   0 6px 20px rgba(13,148,136,.28);

  /* Transición */
  --cja-transition:    180ms cubic-bezier(.4,0,.2,1);

  /* Base */
  font-family: var(--cja-font-ui);
  font-size:   var(--cja-text-base);
  color:       var(--cja-text-primary);
  background:  var(--cja-bg);
  min-height:  100vh;
  padding:     1.5rem 1rem 3rem;
}

/* ═══════════════════════════════════════════════════════
   2. ENCABEZADO
═══════════════════════════════════════════════════════ */
.cja-header {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--cja-border);
  flex-wrap: wrap;
}

.cja-header__icon {
  width: 44px; height: 44px;
  background: var(--cja-teal);
  border-radius: var(--cja-radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,148,136,.32);
}

.cja-header__title {
  font-size: var(--cja-text-xl); font-weight: 700;
  color: var(--cja-text-primary); margin: 0;
  letter-spacing: -.02em; line-height: 1.2;
}

.cja-header__sub {
  font-size: var(--cja-text-sm);
  color: var(--cja-text-muted); margin: 2px 0 0;
}

.cja-header__actions {
  margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap;
}

/* Reloj y fecha en el header */
.cja-header__clock {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px;
}

.cja-clock-time {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-lg);
  font-weight: 700; color: var(--cja-teal); line-height: 1;
}

.cja-clock-date {
  font-size: var(--cja-text-xs); color: var(--cja-text-muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   3. TABS
═══════════════════════════════════════════════════════ */
.cja-tabs {
  display: flex; gap: .25rem;
  border-bottom: 2px solid var(--cja-border);
  margin-bottom: 1.5rem;
}

.cja-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem;
  font-family: var(--cja-font-ui); font-size: var(--cja-text-sm); font-weight: 600;
  color: var(--cja-text-muted); border: none; background: transparent;
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: color var(--cja-transition), border-color var(--cja-transition);
}

.cja-tab:hover { color: var(--cja-text-secondary); }
.cja-tab.active { color: var(--cja-teal); border-bottom-color: var(--cja-teal); }

.cja-view { display: none; }
.cja-view.active { display: block; }

/* ═══════════════════════════════════════════════════════
   4. ESTADO DE CAJA — HERO CARD
   La card más importante del módulo
═══════════════════════════════════════════════════════ */
.cja-estado-hero {
  border-radius: var(--cja-radius-xl);
  overflow: hidden;
  box-shadow: var(--cja-shadow-lg);
  margin-bottom: 1.5rem;
  position: relative;
}

/* Fondo degradado cuando caja está abierta */
.cja-estado-hero--abierta {
  background: linear-gradient(135deg, var(--cja-teal-dark) 0%, var(--cja-teal) 60%, #06B6A6 100%);
  color: #fff;
}

/* Fondo oscuro cuando caja está cerrada */
.cja-estado-hero--cerrada {
  background: linear-gradient(135deg, #1C1917 0%, #292524 60%, #3C3936 100%);
  color: var(--cja-text-inverse);
}

.cja-estado-hero__pattern {
  position: absolute; inset: 0; opacity: .06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.cja-estado-hero__body {
  position: relative; z-index: 1;
  padding: 1.75rem 1.75rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
}

.cja-estado-hero__left { flex: 1; min-width: 200px; }

.cja-estado-hero__estado-label {
  font-size: var(--cja-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  opacity: .75; margin-bottom: .35rem;
}

.cja-estado-hero__estado-val {
  font-size: var(--cja-text-2xl); font-weight: 700;
  line-height: 1; margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}

.cja-estado-hero__estado-val i { font-size: var(--cja-text-xl); }

.cja-estado-hero__meta {
  font-size: var(--cja-text-sm); opacity: .75;
  display: flex; flex-wrap: wrap; gap: .75rem;
}

.cja-estado-hero__meta span {
  display: flex; align-items: center; gap: .3rem;
}

/* Saldo inicial grande */
.cja-estado-hero__right { text-align: right; }

.cja-estado-hero__saldo-label {
  font-size: var(--cja-text-xs); opacity: .7;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .25rem;
}

.cja-estado-hero__saldo-val {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-4xl);
  font-weight: 700; line-height: 1;
}

/* Footer del hero — métricas rápidas */
.cja-estado-hero__footer {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border-top: 1px solid rgba(255,255,255,.15);
}

.cja-hero-metric {
  padding: .85rem 1.25rem;
  border-right: 1px solid rgba(255,255,255,.15);
  display: flex; flex-direction: column; gap: .15rem;
}

.cja-hero-metric:last-child { border-right: none; }

.cja-hero-metric__num {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-xl);
  font-weight: 700; line-height: 1;
}

.cja-hero-metric__label {
  font-size: var(--cja-text-xs); opacity: .7;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════
   5. TARJETAS DE MÉTRICAS SECUNDARIAS
═══════════════════════════════════════════════════════ */
.cja-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem; margin-bottom: 1.5rem;
}

.cja-metric-card {
  background: #fff;
  border: 1px solid var(--cja-border-soft);
  border-radius: var(--cja-radius-lg);
  padding: 1rem 1.1rem;
  position: relative; overflow: hidden;
  box-shadow: var(--cja-shadow-sm);
  transition: box-shadow var(--cja-transition);
}

.cja-metric-card:hover { box-shadow: var(--cja-shadow); }

.cja-metric-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cja-mc-color, var(--cja-teal));
}

.cja-metric-card--ingresos  { --cja-mc-color: var(--cja-ok); }
.cja-metric-card--egresos   { --cja-mc-color: var(--cja-danger); }
.cja-metric-card--ventas    { --cja-mc-color: var(--cja-teal); }
.cja-metric-card--ticket    { --cja-mc-color: var(--cja-info); }
.cja-metric-card--efectivo  { --cja-mc-color: var(--cja-mp-efectivo); }
.cja-metric-card--tarjeta   { --cja-mc-color: var(--cja-mp-tarjeta); }
.cja-metric-card--transfer  { --cja-mc-color: var(--cja-mp-transfer); }
.cja-metric-card--diferencia{ --cja-mc-color: var(--cja-warn); }

.cja-metric-card__icon {
  font-size: 1.4rem;
  color: var(--cja-mc-color, var(--cja-teal));
  opacity: .7; margin-bottom: .35rem;
  display: block;
}

.cja-metric-card__num {
  display: block;
  font-family: var(--cja-font-mono); font-size: var(--cja-text-xl);
  font-weight: 700; color: var(--cja-mc-color, var(--cja-teal));
  line-height: 1; margin-bottom: .2rem;
}

.cja-metric-card__label {
  display: block; font-size: var(--cja-text-xs);
  color: var(--cja-text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}

.cja-metric-card__trend {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: var(--cja-text-xs); font-weight: 600; margin-top: .3rem;
}

.cja-metric-card__trend--up   { color: var(--cja-ok); }
.cja-metric-card__trend--down { color: var(--cja-danger); }

/* ═══════════════════════════════════════════════════════
   6. FORMULARIO DE APERTURA / CIERRE
═══════════════════════════════════════════════════════ */
.cja-form-card {
  background: #fff;
  border: 1px solid var(--cja-border-soft);
  border-radius: var(--cja-radius-lg);
  overflow: hidden; box-shadow: var(--cja-shadow-sm);
  margin-bottom: 1.25rem;
}

.cja-form-card__header {
  padding: .75rem 1.2rem;
  background: var(--cja-surface);
  border-bottom: 1px solid var(--cja-border);
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--cja-text-sm); font-weight: 700;
  color: var(--cja-text-secondary);
}

.cja-form-card__header i { color: var(--cja-teal); }
.cja-form-card__body { padding: 1.1rem 1.2rem; }

/* Labels */
.cja-label {
  display: block; font-size: var(--cja-text-sm); font-weight: 600;
  color: var(--cja-text-secondary); margin-bottom: .4rem; letter-spacing: .01em;
}

.cja-label--required::after { content: ' *'; color: var(--cja-danger); }

/* Inputs */
.cja-input {
  display: block; width: 100%; padding: .5rem .8rem;
  font-family: var(--cja-font-ui); font-size: var(--cja-text-base);
  color: var(--cja-text-primary); background: #fff;
  border: 1.5px solid var(--cja-border);
  border-radius: var(--cja-radius);
  transition: border-color var(--cja-transition), box-shadow var(--cja-transition);
  outline: none; line-height: 1.5;
}

.cja-input:focus {
  border-color: var(--cja-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}

.cja-input::placeholder { color: var(--cja-text-muted); font-weight: 400; }
.cja-input.is-invalid   { border-color: var(--cja-danger); }
.cja-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.13); }
.cja-input--mono { font-family: var(--cja-font-mono); letter-spacing: .04em; }
.cja-input--lg   { font-size: var(--cja-text-xl); font-weight: 700; height: 52px; text-align: center; }

textarea.cja-input { resize: vertical; min-height: 72px; }

select.cja-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B9A97' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem; cursor: pointer;
}

/* Input de monto — con prefijo $ prominente */
.cja-monto-wrap { position: relative; }

.cja-monto-prefix {
  position: absolute; left: .85rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--cja-font-mono); font-size: var(--cja-text-lg);
  font-weight: 700; color: var(--cja-teal); pointer-events: none;
}

.cja-monto-wrap .cja-input { padding-left: 2rem; }

.cja-feedback {
  font-size: var(--cja-text-xs); margin-top: .3rem; font-weight: 500;
}
.cja-feedback--invalid { color: var(--cja-danger); }
.cja-feedback--valid   { color: var(--cja-ok); }

/* ═══════════════════════════════════════════════════════
   7. DESGLOSE DE DENOMINACIONES (apertura de caja)
   Para contar billetes y monedas físicamente
═══════════════════════════════════════════════════════ */
.cja-denom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .65rem;
}

.cja-denom-item {
  background: var(--cja-surface);
  border: 1.5px solid var(--cja-border-soft);
  border-radius: var(--cja-radius);
  padding: .65rem .75rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: border-color var(--cja-transition), background var(--cja-transition);
}

.cja-denom-item:focus-within {
  border-color: var(--cja-teal);
  background: var(--cja-teal-light);
}

.cja-denom-item__label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--cja-text-xs); font-weight: 700;
  color: var(--cja-text-secondary);
}

.cja-denom-item__valor {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-xs);
  color: var(--cja-teal-dark); font-weight: 700;
  background: var(--cja-teal-light); padding: .1rem .35rem;
  border-radius: var(--cja-radius-pill);
}

.cja-denom-item__row {
  display: flex; align-items: center; gap: .4rem;
}

.cja-denom-item__input {
  width: 60px; height: 30px;
  border: 1.5px solid var(--cja-border);
  border-radius: var(--cja-radius-sm);
  font-family: var(--cja-font-mono); font-size: var(--cja-text-sm);
  font-weight: 700; text-align: center; padding: 0 .4rem;
  background: #fff; outline: none;
  transition: border-color var(--cja-transition);
}

.cja-denom-item__input:focus { border-color: var(--cja-teal); }

.cja-denom-item__mult { font-size: var(--cja-text-xs); color: var(--cja-text-muted); }

.cja-denom-item__subtotal {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-sm);
  font-weight: 700; color: var(--cja-teal-dark); text-align: right;
  min-width: 64px;
}

/* Total del conteo */
.cja-denom-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem;
  background: var(--cja-teal);
  border-radius: var(--cja-radius);
  margin-top: .75rem;
  color: #fff;
}

.cja-denom-total__label {
  font-size: var(--cja-text-sm); font-weight: 600; opacity: .85;
}

.cja-denom-total__val {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-2xl);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   8. DESGLOSE POR MÉTODO DE PAGO
═══════════════════════════════════════════════════════ */
.cja-mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}

.cja-mp-card {
  background: #fff;
  border: 1.5px solid var(--cja-border-soft);
  border-radius: var(--cja-radius-lg);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  position: relative; overflow: hidden;
  box-shadow: var(--cja-shadow-sm);
}

.cja-mp-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cja-mp-color, var(--cja-teal));
}

.cja-mp-card--efectivo  { --cja-mp-color: var(--cja-mp-efectivo); }
.cja-mp-card--tarjeta   { --cja-mp-color: var(--cja-mp-tarjeta); }
.cja-mp-card--transfer  { --cja-mp-color: var(--cja-mp-transfer); }
.cja-mp-card--mixto     { --cja-mp-color: var(--cja-mp-mixto); }

.cja-mp-card__header {
  display: flex; align-items: center; gap: .55rem;
}

.cja-mp-card__icon {
  width: 34px; height: 34px; border-radius: var(--cja-radius-sm);
  background: var(--cja-surface); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--cja-mp-color, var(--cja-teal));
}

.cja-mp-card__nombre {
  font-size: var(--cja-text-sm); font-weight: 700;
  color: var(--cja-text-primary);
}

.cja-mp-card__count {
  font-size: var(--cja-text-xs); color: var(--cja-text-muted);
  font-weight: 500;
}

.cja-mp-card__monto {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-2xl);
  font-weight: 700; color: var(--cja-mp-color, var(--cja-teal));
  line-height: 1;
}

.cja-mp-card__pct {
  font-size: var(--cja-text-xs); color: var(--cja-text-muted);
  font-weight: 500;
}

/* Barra de proporción */
.cja-mp-bar {
  height: 5px; background: var(--cja-surface-alt);
  border-radius: 999px; overflow: hidden; margin-top: .15rem;
}

.cja-mp-bar__fill {
  height: 100%; background: var(--cja-mp-color, var(--cja-teal));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════
   9. PANEL LATERAL — RESUMEN DE CAJA
═══════════════════════════════════════════════════════ */
.cja-summary {
  background: #fff;
  border: 1.5px solid var(--cja-border);
  border-radius: var(--cja-radius-lg);
  overflow: hidden; box-shadow: var(--cja-shadow);
}

.cja-summary__header {
  background: var(--cja-teal);
  padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .65rem; color: #fff;
}

.cja-summary__title {
  font-size: var(--cja-text-md); font-weight: 700; margin: 0;
}

.cja-summary__body {
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .45rem;
}

.cja-sum-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--cja-text-sm); padding: .4rem 0;
  border-bottom: 1px solid var(--cja-border-soft);
}

.cja-sum-row:last-child { border-bottom: none; }
.cja-sum-row__lbl { color: var(--cja-text-secondary); font-weight: 500; }
.cja-sum-row__val { font-family: var(--cja-font-mono); font-weight: 700; color: var(--cja-text-primary); }

.cja-sum-divider { border: none; border-top: 1.5px dashed var(--cja-border); margin: .35rem 0; }

/* Fila de diferencia — cambia de color */
.cja-sum-row--ok   .cja-sum-row__val { color: var(--cja-ok); }
.cja-sum-row--warn .cja-sum-row__val { color: var(--cja-warn); }
.cja-sum-row--err  .cja-sum-row__val { color: var(--cja-danger); }

.cja-sum-row--total {
  padding-top: .6rem; margin-top: .2rem;
  border-top: 2px solid var(--cja-border);
}

.cja-sum-row--total .cja-sum-row__lbl { font-weight: 700; font-size: var(--cja-text-md); }
.cja-sum-row--total .cja-sum-row__val { font-size: var(--cja-text-xl); color: var(--cja-teal); }

.cja-summary__footer {
  padding: .85rem 1.1rem;
  background: var(--cja-surface);
  border-top: 1px solid var(--cja-border-soft);
  display: flex; flex-direction: column; gap: .5rem;
}

/* ═══════════════════════════════════════════════════════
   10. HISTORIAL DE CAJAS
═══════════════════════════════════════════════════════ */
.cja-table-wrap {
  background: #fff;
  border: 1px solid var(--cja-border-soft);
  border-radius: var(--cja-radius-lg);
  overflow: hidden; box-shadow: var(--cja-shadow-sm);
}

.cja-table-wrap__header {
  padding: .75rem 1rem; background: var(--cja-surface);
  border-bottom: 1px solid var(--cja-border);
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}

.cja-table-wrap__title {
  font-size: var(--cja-text-sm); font-weight: 700;
  color: var(--cja-text-secondary); margin: 0; flex: 1;
}

.cja-table {
  width: 100%; border-collapse: collapse; font-size: var(--cja-text-sm);
}

.cja-table thead { background: var(--cja-surface); }

.cja-table thead th {
  padding: .6rem .9rem;
  font-size: var(--cja-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--cja-text-muted); border-bottom: 1.5px solid var(--cja-border);
  white-space: nowrap;
}

.cja-table tbody td {
  padding: .65rem .9rem; border-bottom: 1px solid var(--cja-border-soft);
  color: var(--cja-text-primary); vertical-align: middle;
}

.cja-table tbody tr:last-child td { border-bottom: none; }
.cja-table tbody tr:hover td      { background: var(--cja-bg); }

/* Columnas especiales */
.cja-table .col-folio {
  font-family: var(--cja-font-mono); font-size: var(--cja-text-xs);
  color: var(--cja-text-muted);
}

.cja-table .col-monto {
  font-family: var(--cja-font-mono); font-weight: 700; white-space: nowrap;
}

.cja-table .col-monto--pos { color: var(--cja-ok); }
.cja-table .col-monto--neg { color: var(--cja-danger); }
.cja-table .col-monto--neu { color: var(--cja-teal); }

/* Fila expandida */
.cja-table tr.expanded-row td {
  background: var(--cja-surface);
  padding: .5rem 1rem;
}

/* ═══════════════════════════════════════════════════════
   11. BADGE DIFERENCIA
   Muestra cuánto falta o sobra vs lo esperado
═══════════════════════════════════════════════════════ */
.cja-dif-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem; border-radius: var(--cja-radius-pill);
  font-family: var(--cja-font-mono); font-size: var(--cja-text-xs);
  font-weight: 700; white-space: nowrap;
}

.cja-dif-badge--ok     { background: var(--cja-ok-bg);      color: #14532D; }
.cja-dif-badge--falta  { background: var(--cja-danger-bg);  color: #7F1D1D; }
.cja-dif-badge--sobra  { background: var(--cja-warn-bg);    color: #78350F; }

/* ═══════════════════════════════════════════════════════
   12. BADGES GENERALES
═══════════════════════════════════════════════════════ */
.cja-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: var(--cja-radius-pill);
  font-size: var(--cja-text-xs); font-weight: 700;
  line-height: 1; white-space: nowrap;
}

.cja-badge--abierta  { background: var(--cja-abierta-bg); color: var(--cja-teal-dark); }
.cja-badge--cerrada  { background: var(--cja-danger-bg);  color: #7F1D1D; }
.cja-badge--ok       { background: var(--cja-ok-bg);      color: #14532D; }
.cja-badge--warn     { background: var(--cja-warn-bg);    color: #78350F; }
.cja-badge--danger   { background: var(--cja-danger-bg);  color: #7F1D1D; }
.cja-badge--teal     { background: var(--cja-teal-light); color: var(--cja-teal-dark); }

/* Dot pulsante — indicador de caja abierta */
.cja-live-dot {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--cja-text-xs); font-weight: 700;
  color: var(--cja-teal);
}

.cja-live-dot__circle {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cja-teal); flex-shrink: 0;
  animation: cja-pulse 2s infinite;
}

@keyframes cja-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(13,148,136,.5); }
  50%       { opacity: .85; transform: scale(1.1); box-shadow: 0 0 0 5px rgba(13,148,136,0); }
}

/* ═══════════════════════════════════════════════════════
   13. FILTROS
═══════════════════════════════════════════════════════ */
.cja-filters {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding: .85rem 1.1rem; background: #fff;
  border: 1px solid var(--cja-border-soft);
  border-radius: var(--cja-radius-lg); margin-bottom: 1.1rem;
}

.cja-filters__label {
  font-size: var(--cja-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cja-text-muted); white-space: nowrap;
}

.cja-search-wrap { flex: 1; min-width: 180px; max-width: 300px; position: relative; }
.cja-search-wrap .cja-input { padding-left: 2.2rem; font-size: var(--cja-text-sm); height: 34px; padding-top: 0; padding-bottom: 0; }
.cja-search-icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--cja-text-muted); font-size: .9rem; pointer-events: none; }

.cja-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--cja-radius-pill);
  font-size: var(--cja-text-sm); font-weight: 500;
  border: 1.5px solid var(--cja-border); background: #fff;
  color: var(--cja-text-secondary); cursor: pointer;
  transition: all var(--cja-transition); user-select: none;
}

.cja-chip input { display: none; }
.cja-chip.active, .cja-chip:hover {
  border-color: var(--cja-teal); color: var(--cja-teal-dark);
  background: var(--cja-teal-light); font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   14. PAGINADOR
═══════════════════════════════════════════════════════ */
.cja-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 1rem;
  background: var(--cja-surface); border-top: 1px solid var(--cja-border-soft);
}

.cja-pager__info { font-family: var(--cja-font-mono); font-size: var(--cja-text-xs); color: var(--cja-text-muted); }
.cja-pager__controls { display: flex; align-items: center; gap: .35rem; }

.cja-pager__btn {
  width: 32px; height: 32px; border-radius: var(--cja-radius-sm);
  border: 1.5px solid var(--cja-border); background: #fff;
  color: var(--cja-text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: all var(--cja-transition);
}

.cja-pager__btn:hover:not(:disabled) { border-color: var(--cja-teal); color: var(--cja-teal); background: var(--cja-teal-light); }
.cja-pager__btn:disabled { opacity: .3; cursor: not-allowed; }

.cja-pager__dots { display: flex; align-items: center; gap: .3rem; }

.cja-pager__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cja-border);
  cursor: pointer; border: none; padding: 0; transition: all var(--cja-transition);
}

.cja-pager__dot.active { background: var(--cja-teal); width: 20px; border-radius: 4px; }
.cja-pager__dot:hover:not(.active) { background: var(--cja-text-muted); }

/* ═══════════════════════════════════════════════════════
   15. BOTONES
═══════════════════════════════════════════════════════ */
.cja-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem 1.1rem; border-radius: var(--cja-radius);
  font-family: var(--cja-font-ui); font-size: var(--cja-text-sm); font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all var(--cja-transition); text-decoration: none;
  white-space: nowrap; outline: none; line-height: 1.4;
}

.cja-btn:focus-visible { box-shadow: 0 0 0 3px rgba(13,148,136,.28); }

/* Primario teal */
.cja-btn--primary { background: var(--cja-teal); color: #fff; border-color: var(--cja-teal); }
.cja-btn--primary:hover { background: var(--cja-teal-hover); border-color: var(--cja-teal-hover); }

/* Apertura — verde */
.cja-btn--abrir {
  background: var(--cja-ok); color: #fff; border-color: var(--cja-ok);
  box-shadow: 0 3px 12px rgba(22,163,74,.28);
}
.cja-btn--abrir:hover { background: #15803D; border-color: #15803D; box-shadow: 0 4px 16px rgba(22,163,74,.36); }

/* Cierre — rojo */
.cja-btn--cerrar {
  background: var(--cja-danger); color: #fff; border-color: var(--cja-danger);
  box-shadow: 0 3px 12px rgba(220,38,38,.25);
}
.cja-btn--cerrar:hover { background: #B91C1C; border-color: #B91C1C; }

.cja-btn--secondary { background: transparent; color: var(--cja-text-secondary); border-color: var(--cja-border); }
.cja-btn--secondary:hover { border-color: var(--cja-teal); color: var(--cja-teal); background: var(--cja-teal-light); }

.cja-btn--ghost { background: transparent; color: var(--cja-text-muted); border-color: transparent; padding: .38rem .55rem; }
.cja-btn--ghost:hover { background: var(--cja-surface); color: var(--cja-text-secondary); }

.cja-btn--danger { background: transparent; color: var(--cja-danger); border-color: var(--cja-danger); }
.cja-btn--danger:hover { background: var(--cja-danger-bg); }

.cja-btn--sm    { padding: .28rem .7rem; font-size: var(--cja-text-xs); }
.cja-btn--lg    { padding: .65rem 1.5rem; font-size: var(--cja-text-md); border-radius: var(--cja-radius-lg); }
.cja-btn--block { width: 100%; justify-content: center; }
.cja-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════════════════════════════════
   16. ALERTAS
═══════════════════════════════════════════════════════ */
.cja-alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: var(--cja-radius);
  border-left: 4px solid transparent;
  font-size: var(--cja-text-sm); margin-bottom: 1rem;
}

.cja-alert--ok     { background: var(--cja-ok-bg);     border-color: var(--cja-ok);     color: #14532D; }
.cja-alert--warn   { background: var(--cja-warn-bg);   border-color: var(--cja-warn);   color: #78350F; }
.cja-alert--danger { background: var(--cja-danger-bg); border-color: var(--cja-danger); color: #7F1D1D; }
.cja-alert--teal   { background: var(--cja-teal-light);border-color: var(--cja-teal);   color: var(--cja-teal-dark); }

.cja-alert__title { font-weight: 700; margin-bottom: .15rem; }

/* ═══════════════════════════════════════════════════════
   17. TOGGLE
═══════════════════════════════════════════════════════ */
.cja-toggle {
  position: relative; display: inline-flex; align-items: center;
  gap: .5rem; cursor: pointer; font-size: var(--cja-text-sm);
  font-weight: 500; color: var(--cja-text-secondary); user-select: none;
}

.cja-toggle input { display: none; }

.cja-toggle__track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--cja-border); position: relative;
  transition: background var(--cja-transition); flex-shrink: 0;
}

.cja-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff;
  transition: transform var(--cja-transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.cja-toggle input:checked ~ .cja-toggle__track { background: var(--cja-teal); }
.cja-toggle input:checked ~ .cja-toggle__track .cja-toggle__thumb { transform: translateX(16px); }

/* ═══════════════════════════════════════════════════════
   18. SECCIÓN DIVISORA
═══════════════════════════════════════════════════════ */
.cja-section-title {
  display: flex; align-items: center; gap: .65rem;
  font-size: var(--cja-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cja-text-muted); margin-bottom: .9rem;
}

.cja-section-title::after { content: ''; flex: 1; height: 1px; background: var(--cja-border); }

/* ═══════════════════════════════════════════════════════
   19. ESTADO VACÍO
═══════════════════════════════════════════════════════ */
.cja-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: 3.5rem 1.5rem; text-align: center;
  color: var(--cja-text-muted);
}

.cja-empty i { font-size: 2.5rem; opacity: .4; }
.cja-empty p { font-size: var(--cja-text-sm); margin: 0; max-width: 240px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════
   20. TOAST
═══════════════════════════════════════════════════════ */
.cja-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--cja-text-primary); color: var(--cja-text-inverse);
  padding: .7rem 1.1rem; border-radius: var(--cja-radius);
  font-size: var(--cja-text-sm); font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
  box-shadow: var(--cja-shadow-md); z-index: 9999;
  opacity: 0; transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.cja-toast.show { opacity: 1; transform: translateY(0); }
.cja-toast i { color: var(--cja-teal-mid); }

/* ═══════════════════════════════════════════════════════
   21. RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .cja-estado-hero__footer { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .cja-module { padding: 1rem .75rem 2.5rem; }
  .cja-header { flex-wrap: wrap; }
  .cja-header__actions { width: 100%; margin-left: 0; }
  .cja-estado-hero__body { flex-direction: column; }
  .cja-estado-hero__right { text-align: left; }
  .cja-estado-hero__saldo-val { font-size: var(--cja-text-3xl); }
  .cja-estado-hero__footer { grid-template-columns: 1fr 1fr; }
  .cja-hero-metric { padding: .65rem .85rem; }
  .cja-metrics { grid-template-columns: 1fr 1fr; }
  .cja-denom-grid { grid-template-columns: 1fr 1fr; }
  .cja-mp-grid { grid-template-columns: 1fr 1fr; }
  .cja-filters { gap: .4rem; }
  .cja-search-wrap { max-width: 100%; width: 100%; }

  .cja-table thead { display: none; }
  .cja-table tbody td { display: block; padding: .35rem .9rem; }
  .cja-table tbody td::before {
    content: attr(data-label);
    font-size: var(--cja-text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--cja-text-muted); display: block; margin-bottom: .15rem;
  }
  .cja-table tbody tr { display: block; border-bottom: 1.5px solid var(--cja-border); padding: .4rem 0; }
  .cja-table tbody tr:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  .cja-estado-hero__saldo-val { font-size: var(--cja-text-2xl); }
  .cja-estado-hero__footer { grid-template-columns: 1fr 1fr; }
  .cja-denom-grid { grid-template-columns: 1fr; }
  .cja-mp-grid { grid-template-columns: 1fr; }
  .cja-metrics { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cja-live-dot__circle { animation: none; }
  .cja-btn, .cja-chip, .cja-input, .cja-toggle__track,
  .cja-toggle__thumb, .cja-mp-bar__fill { transition: none; }
}




/* ═══════════════════════════════════════════════════════
2. ENCABEZADO
═══════════════════════════════════════════════════════ */
.alm-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid var(--alm-border);
  flex-wrap: wrap;
}

.alm-header__icon {
  width: 44px; height: 44px;
  background: var(--alm-indigo);
  border-radius: var(--alm-radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79,70,229,.30);
}

.alm-header__title {
  font-size: var(--alm-text-xl); font-weight: 700;
  color: var(--alm-text-primary); margin: 0;
  letter-spacing: -.02em; line-height: 1.2;
}

.alm-header__sub {
  font-size: var(--alm-text-sm);
  color: var(--alm-text-muted); margin: 2px 0 0;
}

.alm-header__actions {
  margin-left: auto;
  display: flex; gap: .5rem; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   3. TABS
═══════════════════════════════════════════════════════ */
.alm-tabs {
  display: flex; gap: .25rem;
  border-bottom: 2px solid var(--alm-border);
  margin-bottom: 1.5rem;
}

.alm-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem;
  font-family: var(--alm-font-ui);
  font-size: var(--alm-text-sm); font-weight: 600;
  color: var(--alm-text-muted); border: none; background: transparent;
  border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: color var(--alm-transition), border-color var(--alm-transition);
}

.alm-tab:hover { color: var(--alm-text-secondary); }
.alm-tab.active { color: var(--alm-indigo); border-bottom-color: var(--alm-indigo); }

.alm-view { display: none; }
.alm-view.active { display: block; }

/* ═══════════════════════════════════════════════════════
   4. ESTADÍSTICAS
═══════════════════════════════════════════════════════ */
.alm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.alm-stat {
  background: #fff;
  border: 1px solid var(--alm-border-soft);
  border-radius: var(--alm-radius);
  padding: .9rem 1rem;
  position: relative; overflow: hidden;
}

.alm-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--alm-stat-color, var(--alm-indigo));
}

.alm-stat--grupos   { --alm-stat-color: var(--alm-indigo); }
.alm-stat--prods    { --alm-stat-color: var(--alm-ok); }
.alm-stat--sin      { --alm-stat-color: var(--alm-warn); }
.alm-stat--valor    { --alm-stat-color: var(--alm-g2); }

.alm-stat__num {
  display: block;
  font-family: var(--alm-font-mono); font-size: var(--alm-text-xl);
  font-weight: 700; color: var(--alm-stat-color, var(--alm-indigo));
  line-height: 1;
}

.alm-stat__label {
  display: block; font-size: var(--alm-text-xs);
  color: var(--alm-text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════
   5. GRID DE GRUPOS
═══════════════════════════════════════════════════════ */
.alm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

/* ── CARD DE GRUPO ── */
.alm-group-card {
  background: #fff;
  border: 1px solid var(--alm-border-soft);
  border-radius: var(--alm-radius-lg);
  box-shadow: var(--alm-shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--alm-transition), transform var(--alm-transition);
  position: relative;
}

.alm-group-card:hover {
  box-shadow: var(--alm-shadow-md);
  transform: translateY(-2px);
}

/* Barra superior de color — firma del módulo */
.alm-group-card__bar {
  height: 6px;
  background: var(--alm-gcolor, var(--alm-indigo));
  flex-shrink: 0;
}

/* Paletas de color por grupo */
.alm-group-card--g1 { --alm-gcolor: var(--alm-g1); }
.alm-group-card--g2 { --alm-gcolor: var(--alm-g2); }
.alm-group-card--g3 { --alm-gcolor: var(--alm-g3); }
.alm-group-card--g4 { --alm-gcolor: var(--alm-g4); }
.alm-group-card--g5 { --alm-gcolor: var(--alm-g5); }
.alm-group-card--g6 { --alm-gcolor: var(--alm-g6); }
.alm-group-card--g7 { --alm-gcolor: var(--alm-g7); }
.alm-group-card--g8 { --alm-gcolor: var(--alm-g8); }

.alm-group-card__header {
  padding: .9rem 1rem .65rem;
  display: flex; align-items: flex-start; gap: .75rem;
}

.alm-group-card__icon {
  width: 40px; height: 40px; border-radius: var(--alm-radius);
  background: var(--alm-gbg, var(--alm-indigo-light));
  color: var(--alm-gcolor, var(--alm-indigo));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}

/* bg claro para cada paleta */
.alm-group-card--g1 { --alm-gbg: var(--alm-g1b); }
.alm-group-card--g2 { --alm-gbg: var(--alm-g2b); }
.alm-group-card--g3 { --alm-gbg: var(--alm-g3b); }
.alm-group-card--g4 { --alm-gbg: var(--alm-g4b); }
.alm-group-card--g5 { --alm-gbg: var(--alm-g5b); }
.alm-group-card--g6 { --alm-gbg: var(--alm-g6b); }
.alm-group-card--g7 { --alm-gbg: var(--alm-g7b); }
.alm-group-card--g8 { --alm-gbg: var(--alm-g8b); }

.alm-group-card__info { flex: 1; min-width: 0; }

.alm-group-card__name {
  font-size: var(--alm-text-md); font-weight: 700;
  color: var(--alm-text-primary); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}

.alm-group-card__code {
  font-family: var(--alm-font-mono); font-size: var(--alm-text-xs);
  color: var(--alm-text-muted); margin-top: 2px;
}

.alm-group-card__desc {
  font-size: var(--alm-text-sm); color: var(--alm-text-secondary);
  line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Métricas de la card */
.alm-group-card__metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border-top: 1px solid var(--alm-border-soft);
  border-bottom: 1px solid var(--alm-border-soft);
  margin: .65rem 0 0;
}

.alm-metric {
  padding: .6rem 1rem;
  display: flex; flex-direction: column; gap: .1rem;
  border-right: 1px solid var(--alm-border-soft);
}

.alm-metric:last-child { border-right: none; }
.alm-metric:nth-child(3), .alm-metric:nth-child(4) {
  border-top: 1px solid var(--alm-border-soft);
}

.alm-metric__num {
  font-family: var(--alm-font-mono); font-size: var(--alm-text-lg);
  font-weight: 700; color: var(--alm-gcolor, var(--alm-indigo));
  line-height: 1;
}

.alm-metric__label {
  font-size: var(--alm-text-xs); color: var(--alm-text-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}

/* Footer de la card */
.alm-group-card__footer {
  padding: .6rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}

.alm-group-card__ubicacion {
  font-size: var(--alm-text-xs); color: var(--alm-text-muted);
  display: flex; align-items: center; gap: .3rem;
}

/* ═══════════════════════════════════════════════════════
   6. ÁRBOL DE GRUPOS (sidebar)
═══════════════════════════════════════════════════════ */
.alm-tree {
  background: #fff;
  border: 1px solid var(--alm-border-soft);
  border-radius: var(--alm-radius-lg);
  overflow: hidden;
  box-shadow: var(--alm-shadow-sm);
}

.alm-tree__header {
  padding: .75rem 1rem;
  background: var(--alm-surface);
  border-bottom: 1px solid var(--alm-border);
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--alm-text-sm); font-weight: 700;
  color: var(--alm-text-secondary);
}

.alm-tree__header i { color: var(--alm-indigo); }

.alm-tree__body { padding: .5rem; }

/* Nodo del árbol */
.alm-tree-node {
  border-radius: var(--alm-radius-sm);
  overflow: hidden;
  margin-bottom: 2px;
}

.alm-tree-node__row {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem;
  border-radius: var(--alm-radius-sm);
  cursor: pointer;
  transition: background var(--alm-transition);
  user-select: none;
}

.alm-tree-node__row:hover { background: var(--alm-surface); }
.alm-tree-node__row.active { background: var(--alm-indigo-light); }
.alm-tree-node__row.active .alm-tree-node__name { color: var(--alm-indigo-dark); font-weight: 700; }

.alm-tree-node__toggle {
  width: 18px; height: 18px; border-radius: 4px;
  border: none; background: transparent;
  color: var(--alm-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; cursor: pointer; flex-shrink: 0;
  transition: transform var(--alm-transition);
}

.alm-tree-node__toggle.open { transform: rotate(90deg); }
.alm-tree-node__toggle.leaf { opacity: 0; pointer-events: none; }

.alm-tree-node__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--alm-gcolor, var(--alm-indigo));
  flex-shrink: 0;
}

.alm-tree-node__name {
  flex: 1; font-size: var(--alm-text-sm); font-weight: 600;
  color: var(--alm-text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.alm-tree-node__count {
  font-family: var(--alm-font-mono); font-size: var(--alm-text-xs);
  font-weight: 700; color: var(--alm-text-muted);
  background: var(--alm-surface);
  padding: .1rem .4rem; border-radius: var(--alm-radius-pill);
  flex-shrink: 0;
}

/* Hijos anidados */
.alm-tree-node__children {
  margin-left: 1.4rem;
  border-left: 2px solid var(--alm-border-soft);
  padding-left: .4rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}

.alm-tree-node__children.open { max-height: 600px; }

/* ═══════════════════════════════════════════════════════
   7. TABLA DE PRODUCTOS DEL GRUPO
═══════════════════════════════════════════════════════ */
.alm-table-wrap {
  background: #fff;
  border: 1px solid var(--alm-border-soft);
  border-radius: var(--alm-radius-lg);
  overflow: hidden;
  box-shadow: var(--alm-shadow-sm);
}

.alm-table-wrap__header {
  padding: .75rem 1rem;
  background: var(--alm-surface);
  border-bottom: 1px solid var(--alm-border);
  display: flex; align-items: center; gap: .65rem;
  flex-wrap: wrap;
}

.alm-table-wrap__title {
  font-size: var(--alm-text-sm); font-weight: 700;
  color: var(--alm-text-secondary); margin: 0; flex: 1;
}

.alm-table {
  width: 100%; border-collapse: collapse; font-size: var(--alm-text-sm);
}

.alm-table thead { background: var(--alm-surface); }

.alm-table thead th {
  padding: .6rem .9rem;
  font-size: var(--alm-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--alm-text-muted); border-bottom: 1.5px solid var(--alm-border);
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: color var(--alm-transition);
}

.alm-table thead th:hover { color: var(--alm-text-secondary); }
.alm-table thead th.sorted { color: var(--alm-indigo); }

.alm-table thead th .sort-icon {
  font-size: .7rem; margin-left: .25rem; opacity: .4;
}

.alm-table thead th.sorted .sort-icon { opacity: 1; color: var(--alm-indigo); }

.alm-table tbody td {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--alm-border-soft);
  color: var(--alm-text-primary); vertical-align: middle;
}

.alm-table tbody tr:last-child td { border-bottom: none; }
.alm-table tbody tr:hover td { background: var(--alm-bg); }

/* Columnas especiales */
.alm-table .col-code {
  font-family: var(--alm-font-mono); font-size: var(--alm-text-xs);
  color: var(--alm-text-muted); white-space: nowrap;
}

.alm-table .col-nombre { font-weight: 600; }

.alm-table .col-qty, .alm-table .col-costo {
  font-family: var(--alm-font-mono); font-weight: 700; white-space: nowrap;
}

.alm-table .col-qty   { color: var(--alm-indigo-dark); }
.alm-table .col-costo { color: var(--alm-text-secondary); }
.alm-table .col-actions { text-align: right; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════
   8. FORMULARIO
═══════════════════════════════════════════════════════ */
.alm-form-card {
  background: #fff;
  border: 1px solid var(--alm-border-soft);
  border-radius: var(--alm-radius-lg);
  overflow: hidden;
  box-shadow: var(--alm-shadow-sm);
  margin-bottom: 1.25rem;
}

.alm-form-card__header {
  padding: .7rem 1.2rem;
  background: var(--alm-surface);
  border-bottom: 1px solid var(--alm-border);
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--alm-text-sm); font-weight: 700;
  color: var(--alm-text-secondary);
}

.alm-form-card__header i { color: var(--alm-indigo); }
.alm-form-card__body { padding: 1.1rem 1.2rem; }

/* Labels */
.alm-label {
  display: block;
  font-size: var(--alm-text-sm); font-weight: 600;
  color: var(--alm-text-secondary); margin-bottom: .4rem;
  letter-spacing: .01em;
}

.alm-label--required::after { content: ' *'; color: var(--alm-danger); }

/* Inputs */
.alm-input {
  display: block; width: 100%;
  padding: .5rem .8rem;
  font-family: var(--alm-font-ui); font-size: var(--alm-text-base);
  color: var(--alm-text-primary); background: #fff;
  border: 1.5px solid var(--alm-border);
  border-radius: var(--alm-radius);
  transition: border-color var(--alm-transition), box-shadow var(--alm-transition);
  outline: none; line-height: 1.5;
}

.alm-input:focus {
  border-color: var(--alm-indigo);
  box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}

.alm-input::placeholder { color: var(--alm-text-muted); font-weight: 400; }
.alm-input.is-invalid   { border-color: var(--alm-danger); }
.alm-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.13); }
.alm-input--mono { font-family: var(--alm-font-mono); letter-spacing: .04em; }

textarea.alm-input { resize: vertical; min-height: 72px; }

select.alm-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239590B0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem; cursor: pointer;
}

.alm-feedback {
  font-size: var(--alm-text-xs); margin-top: .3rem; font-weight: 500;
}
.alm-feedback--invalid { color: var(--alm-danger); }
.alm-feedback--valid   { color: var(--alm-ok); }

/* ── SELECTOR DE COLOR DE GRUPO ── */
.alm-color-selector {
  display: flex; gap: .5rem; flex-wrap: wrap;
}

.alm-color-opt {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform var(--alm-transition), border-color var(--alm-transition);
  position: relative;
}

.alm-color-opt:hover { transform: scale(1.15); }

.alm-color-opt.sel {
  border-color: var(--alm-text-primary);
  transform: scale(1.1);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--alm-text-primary);
}

.alm-color-opt::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--alm-c);
}

.alm-color-opt--g1 { --alm-c: var(--alm-g1); }
.alm-color-opt--g2 { --alm-c: var(--alm-g2); }
.alm-color-opt--g3 { --alm-c: var(--alm-g3); }
.alm-color-opt--g4 { --alm-c: var(--alm-g4); }
.alm-color-opt--g5 { --alm-c: var(--alm-g5); }
.alm-color-opt--g6 { --alm-c: var(--alm-g6); }
.alm-color-opt--g7 { --alm-c: var(--alm-g7); }
.alm-color-opt--g8 { --alm-c: var(--alm-g8); }

/* ── SELECTOR DE ÍCONO ── */
.alm-icon-selector {
  display: flex; flex-wrap: wrap; gap: .4rem;
}

.alm-icon-opt {
  width: 36px; height: 36px;
  border-radius: var(--alm-radius-sm);
  border: 1.5px solid var(--alm-border);
  background: #fff; color: var(--alm-text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer;
  transition: all var(--alm-transition);
}

.alm-icon-opt:hover { border-color: var(--alm-indigo); color: var(--alm-indigo); background: var(--alm-indigo-light); }
.alm-icon-opt.sel   { border-color: var(--alm-indigo); background: var(--alm-indigo-light); color: var(--alm-indigo-dark); border-width: 2px; }

/* ── SELECTOR DE PRODUCTOS (lista asignable) ── */
.alm-prod-picker {
  border: 1.5px solid var(--alm-border);
  border-radius: var(--alm-radius);
  overflow: hidden;
  background: #fff;
}

.alm-prod-picker__search {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--alm-border-soft);
  position: relative;
}

.alm-prod-picker__search input {
  padding-left: 2rem;
  font-size: var(--alm-text-sm); height: 32px;
  padding-top: 0; padding-bottom: 0;
}

.alm-prod-picker__search-icon {
  position: absolute; left: 1.2rem; top: 50%;
  transform: translateY(-50%);
  color: var(--alm-text-muted); font-size: .85rem;
  pointer-events: none;
}

.alm-prod-picker__list {
  max-height: 220px; overflow-y: auto;
}

.alm-prod-picker__list::-webkit-scrollbar { width: 4px; }
.alm-prod-picker__list::-webkit-scrollbar-thumb { background: var(--alm-border); border-radius: 99px; }

.alm-prod-picker__item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--alm-border-soft);
  cursor: pointer;
  transition: background var(--alm-transition);
  user-select: none;
}

.alm-prod-picker__item:last-child { border-bottom: none; }
.alm-prod-picker__item:hover { background: var(--alm-surface); }
.alm-prod-picker__item.sel  { background: var(--alm-indigo-light); }
.alm-prod-picker__item.sel .alm-prod-picker__name { color: var(--alm-indigo-dark); font-weight: 700; }

.alm-prod-picker__check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--alm-border);
  background: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; color: transparent;
  transition: all var(--alm-transition);
}

.alm-prod-picker__item.sel .alm-prod-picker__check {
  background: var(--alm-indigo);
  border-color: var(--alm-indigo);
  color: #fff;
}

.alm-prod-picker__name {
  flex: 1; font-size: var(--alm-text-sm); font-weight: 500;
  color: var(--alm-text-primary); line-height: 1.3;
}

.alm-prod-picker__code {
  font-family: var(--alm-font-mono); font-size: var(--alm-text-xs);
  color: var(--alm-text-muted);
}

.alm-prod-picker__footer {
  padding: .45rem .75rem;
  background: var(--alm-surface);
  border-top: 1px solid var(--alm-border-soft);
  font-size: var(--alm-text-xs); color: var(--alm-text-muted);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   9. PANEL RESUMEN (sidebar del formulario)
═══════════════════════════════════════════════════════ */
.alm-summary {
  background: #fff;
  border: 1.5px solid var(--alm-border);
  border-radius: var(--alm-radius-lg);
  overflow: hidden;
  box-shadow: var(--alm-shadow-sm);
}

.alm-summary__header {
  background: var(--alm-indigo);
  padding: .85rem 1.1rem;
  display: flex; align-items: center; gap: .6rem;
  color: #fff;
}

.alm-summary__title {
  font-size: var(--alm-text-md); font-weight: 700; margin: 0;
}

.alm-summary__body {
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
}

.alm-sum-row {
  display: flex; justify-content: space-between;
  align-items: center; font-size: var(--alm-text-sm);
  padding: .35rem 0; border-bottom: 1px solid var(--alm-border-soft);
}

.alm-sum-row:last-child { border-bottom: none; }
.alm-sum-row__lbl { color: var(--alm-text-secondary); font-weight: 500; }
.alm-sum-row__val { font-family: var(--alm-font-mono); font-weight: 700; color: var(--alm-text-primary); }

/* Preview de color/ícono seleccionado */
.alm-preview-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem;
  border-radius: var(--alm-radius);
  font-size: var(--alm-text-sm); font-weight: 700;
  background: var(--alm-indigo-light);
  color: var(--alm-indigo-dark);
  transition: all var(--alm-transition);
}

.alm-summary__footer {
  padding: .85rem 1.1rem;
  background: var(--alm-surface);
  border-top: 1px solid var(--alm-border-soft);
  display: flex; flex-direction: column; gap: .5rem;
}

/* ═══════════════════════════════════════════════════════
   10. BADGES
═══════════════════════════════════════════════════════ */
.alm-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: var(--alm-radius-pill);
  font-size: var(--alm-text-xs); font-weight: 700;
  line-height: 1; white-space: nowrap;
}

.alm-badge--activo   { background: var(--alm-ok-bg);  color: #14532D; }
.alm-badge--inactivo { background: var(--alm-surface-alt); color: var(--alm-text-muted); }
.alm-badge--ok       { background: var(--alm-ok-bg);   color: #14532D; }
.alm-badge--warn     { background: var(--alm-warn-bg); color: #78350F; }
.alm-badge--danger   { background: var(--alm-danger-bg); color: #7F1D1D; }
.alm-badge--info     { background: var(--alm-info-bg); color: #0C4A6E; }
.alm-badge--indigo   { background: var(--alm-indigo-light); color: var(--alm-indigo-dark); }

/* Badge contador de productos — prominente */
.alm-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 .5rem;
  border-radius: var(--alm-radius-pill);
  font-family: var(--alm-font-mono); font-size: var(--alm-text-sm);
  font-weight: 700; background: var(--alm-gcolor, var(--alm-indigo));
  color: #fff; line-height: 1;
}

/* ═══════════════════════════════════════════════════════
   11. CHIPS DE FILTRO
═══════════════════════════════════════════════════════ */
.alm-filters {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  padding: .85rem 1.1rem; background: #fff;
  border: 1px solid var(--alm-border-soft);
  border-radius: var(--alm-radius-lg); margin-bottom: 1.1rem;
}

.alm-filters__label {
  font-size: var(--alm-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--alm-text-muted); white-space: nowrap;
}

.alm-search-wrap { flex: 1; min-width: 180px; max-width: 300px; position: relative; }
.alm-search-wrap .alm-input { padding-left: 2.2rem; font-size: var(--alm-text-sm); height: 34px; padding-top: 0; padding-bottom: 0; }
.alm-search-icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--alm-text-muted); font-size: .9rem; pointer-events: none; }

.alm-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--alm-radius-pill);
  font-size: var(--alm-text-sm); font-weight: 500;
  border: 1.5px solid var(--alm-border); background: #fff;
  color: var(--alm-text-secondary); cursor: pointer;
  transition: all var(--alm-transition); user-select: none;
}

.alm-chip input { display: none; }
.alm-chip.active, .alm-chip:hover {
  border-color: var(--alm-indigo); color: var(--alm-indigo-dark);
  background: var(--alm-indigo-light); font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   12. BOTONES
═══════════════════════════════════════════════════════ */
.alm-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem 1.1rem;
  border-radius: var(--alm-radius);
  font-family: var(--alm-font-ui); font-size: var(--alm-text-sm); font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all var(--alm-transition); text-decoration: none;
  white-space: nowrap; outline: none; line-height: 1.4;
}

.alm-btn:focus-visible { box-shadow: 0 0 0 3px rgba(79,70,229,.28); }

.alm-btn--primary { background: var(--alm-indigo); color: #fff; border-color: var(--alm-indigo); }
.alm-btn--primary:hover { background: var(--alm-indigo-hover); border-color: var(--alm-indigo-hover); }

.alm-btn--secondary { background: transparent; color: var(--alm-text-secondary); border-color: var(--alm-border); }
.alm-btn--secondary:hover { border-color: var(--alm-indigo); color: var(--alm-indigo); background: var(--alm-indigo-light); }

.alm-btn--danger { background: transparent; color: var(--alm-danger); border-color: var(--alm-danger); }
.alm-btn--danger:hover { background: var(--alm-danger-bg); }

.alm-btn--ghost { background: transparent; color: var(--alm-text-muted); border-color: transparent; padding: .38rem .55rem; }
.alm-btn--ghost:hover { background: var(--alm-surface); color: var(--alm-text-secondary); }

.alm-btn--sm { padding: .28rem .7rem; font-size: var(--alm-text-xs); }
.alm-btn--block { width: 100%; justify-content: center; }
.alm-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════════════════════════════════
   13. PAGINADOR
═══════════════════════════════════════════════════════ */
.alm-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 1rem;
  background: var(--alm-surface);
  border-top: 1px solid var(--alm-border-soft);
}

.alm-pager__info {
  font-family: var(--alm-font-mono); font-size: var(--alm-text-xs);
  color: var(--alm-text-muted);
}

.alm-pager__controls { display: flex; align-items: center; gap: .35rem; }

.alm-pager__btn {
  width: 32px; height: 32px; border-radius: var(--alm-radius-sm);
  border: 1.5px solid var(--alm-border); background: #fff;
  color: var(--alm-text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: all var(--alm-transition);
}

.alm-pager__btn:hover:not(:disabled) { border-color: var(--alm-indigo); color: var(--alm-indigo); background: var(--alm-indigo-light); }
.alm-pager__btn:disabled { opacity: .3; cursor: not-allowed; }

.alm-pager__dots { display: flex; align-items: center; gap: .3rem; }

.alm-pager__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--alm-border); cursor: pointer;
  border: none; padding: 0; transition: all var(--alm-transition);
}

.alm-pager__dot.active { background: var(--alm-indigo); width: 20px; border-radius: 4px; }
.alm-pager__dot:hover:not(.active) { background: var(--alm-text-muted); }

/* ═══════════════════════════════════════════════════════
   14. ALERTAS Y ESTADO VACÍO
═══════════════════════════════════════════════════════ */
.alm-alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: var(--alm-radius);
  border-left: 4px solid transparent;
  font-size: var(--alm-text-sm); margin-bottom: 1rem;
}

.alm-alert--info    { background: var(--alm-info-bg);   border-color: var(--alm-info);   color: #0C4A6E; }
.alm-alert--warn    { background: var(--alm-warn-bg);   border-color: var(--alm-warn);   color: #78350F; }
.alm-alert--danger  { background: var(--alm-danger-bg); border-color: var(--alm-danger); color: #7F1D1D; }
.alm-alert--indigo  { background: var(--alm-indigo-light); border-color: var(--alm-indigo); color: var(--alm-indigo-dark); }

.alm-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: 3.5rem 1.5rem; text-align: center;
  color: var(--alm-text-muted);
}

.alm-empty i { font-size: 2.5rem; opacity: .4; }
.alm-empty p { font-size: var(--alm-text-sm); margin: 0; max-width: 240px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════
   15. SECCIÓN DIVISORA
═══════════════════════════════════════════════════════ */
.alm-section-title {
  display: flex; align-items: center; gap: .65rem;
  font-size: var(--alm-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--alm-text-muted); margin-bottom: .9rem;
}

.alm-section-title::after {
  content: ''; flex: 1; height: 1px; background: var(--alm-border);
}

/* ═══════════════════════════════════════════════════════
   16. TOGGLE ACTIVO
═══════════════════════════════════════════════════════ */
.alm-toggle {
  position: relative; display: inline-flex; align-items: center;
  gap: .5rem; cursor: pointer;
  font-size: var(--alm-text-sm); font-weight: 500;
  color: var(--alm-text-secondary); user-select: none;
}

.alm-toggle input { display: none; }

.alm-toggle__track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--alm-border); position: relative;
  transition: background var(--alm-transition); flex-shrink: 0;
}

.alm-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform var(--alm-transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.alm-toggle input:checked ~ .alm-toggle__track { background: var(--alm-indigo); }
.alm-toggle input:checked ~ .alm-toggle__track .alm-toggle__thumb { transform: translateX(16px); }

/* ═══════════════════════════════════════════════════════
   17. TOAST
═══════════════════════════════════════════════════════ */
.alm-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--alm-text-primary); color: var(--alm-text-inverse);
  padding: .7rem 1.1rem; border-radius: var(--alm-radius);
  font-size: var(--alm-text-sm); font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
  box-shadow: var(--alm-shadow-md); z-index: 9999;
  opacity: 0; transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.alm-toast.show { opacity: 1; transform: translateY(0); }
.alm-toast i { color: #a5b4fc; }

/* ═══════════════════════════════════════════════════════
   18. RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .alm-module { padding: 1rem .75rem 2.5rem; }
  .alm-header { flex-wrap: wrap; }
  .alm-header__actions { width: 100%; margin-left: 0; }
  .alm-grid { grid-template-columns: 1fr; }
  .alm-group-card__metrics { grid-template-columns: 1fr 1fr; }
  .alm-filters { gap: .4rem; }
  .alm-search-wrap { max-width: 100%; width: 100%; }
  .alm-icon-selector { gap: .3rem; }
  .alm-stats { grid-template-columns: 1fr 1fr; }

  .alm-table thead { display: none; }
  .alm-table tbody td { display: block; padding: .35rem .9rem; }
  .alm-table tbody td::before {
    content: attr(data-label);
    font-size: var(--alm-text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--alm-text-muted); display: block; margin-bottom: .15rem;
  }
  .alm-table tbody tr {
    display: block; border-bottom: 1.5px solid var(--alm-border); padding: .4rem 0;
  }
  .alm-table tbody tr:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  .alm-header__title { font-size: var(--alm-text-lg); }
  .alm-color-selector { gap: .4rem; }
  .alm-color-opt { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .alm-btn, .alm-chip, .alm-input, .alm-group-card,
  .alm-toggle__track, .alm-toggle__thumb,
  .alm-tree-node__children { transition: none; }
}