/* ─────────────────────────────────────────────────────────────────────────
   KARTERA · COLOR
   El color de marca es el CAFÉ (Kartera → cartera → billetera de cuero).
   Café = ÚNICO color de acción y marca: primarios, links, foco, superficies de
   marca. NUNCA para estado.
   Estado = SEMÁFORO en canal separado (verde/ámbar/rojo), SIEMPRE como badge de
   relleno claro + texto oscuro — nunca botón sólido.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Base neutrals · gris cálido neutro (sin tinte azul, combina con el café) ── */
  --neutral-0:   #ffffff;   /* base canvas                            */
  --neutral-25:  #fbfaf9;   /* app background (warm white)            */
  --surface-2:   #f6f5f3;   /* superficie secundaria (warm gray)      */
  --neutral-100: #f0eeeb;   /* muted fill / info badge fill           */
  --neutral-150: #e9e7e3;   /* zebra / hover fill                     */
  --border-base: #e6e3df;   /* divisores y bordes de tabla, 1px       */
  --neutral-250: #d6d2cc;   /* stronger border / disabled             */
  --neutral-400: #a6a19a;   /* placeholder, muted icons               */
  --neutral-500: #8a847c;   /* tertiary text                          */
  --text-2:      #6a645c;   /* texto secundario (warm gray)           */
  --neutral-800: #2d2a26;   /* strong text                            */
  --text-1:      #16140f;   /* texto principal (warm near-black)      */

  /* ── Café · acción + marca (único acento) · paleta aclarada (leather, no negro) ── */
  --cafe-50:   #f8f4f0;   /* fila seleccionada / fondo suave          */
  --cafe-100:  #efe6dd;   /* hover de superficie / tags de marca      */
  --cafe-200:  #e1cfbf;   /* soft borders on brand tints              */
  --cafe-300:  #c9ae97;   /* derived — soft brand                     */
  --cafe-500:  #a07e5e;   /* lighter accent option                    */
  --cafe-600:  #8b6a4c;   /* botón primario, link, foco (texto blanco)*/
  --cafe-700:  #74563c;   /* hover / pressed                          */
  --cafe-900:  #4f3a28;   /* acentos profundos / headers de marca     */

  /* ── Semáforo · ESTADO (badge = fill claro + texto oscuro) ── */
  --success-text: #1e7a4e;  --success-fill: #e6f4ec;  --success-bd: #cde7d7;
  --warning-text: #8a5a0a;  --warning-fill: #fbf0dc;  --warning-bd: #f1e0bb;
  --danger-text:  #a02620;  --danger-fill:  #fbe9e8;  --danger-bd:  #f3d2cf;
  --info-text:    #6a645c;  --info-fill:    #f0eeeb;  --info-bd:    #e2ded8;

  /* ─────────────── SEMANTIC ALIASES ─────────────── */
  --bg-app:        var(--neutral-25);
  --bg-canvas:     var(--neutral-0);
  --bg-subtle:     var(--surface-2);
  --bg-muted:      var(--neutral-100);
  --bg-hover:      var(--surface-2);
  --bg-selected:   var(--cafe-50);          /* fila seleccionada      */

  --surface-card:    var(--neutral-0);
  --surface-overlay: var(--neutral-0);
  --surface-panel:   var(--neutral-0);
  --surface-brand:   var(--cafe-900);       /* dark brand headers     */

  --border-subtle:  var(--border-base);
  --border-default: var(--border-base);
  --border-strong:  var(--neutral-250);
  --border-focus:   var(--cafe-600);

  --text-primary:   var(--text-1);
  --text-secondary: var(--text-2);
  --text-tertiary:  var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-on-accent: var(--neutral-0);
  --text-link:      var(--cafe-600);

  /* Acción = café */
  --action:         var(--cafe-600);
  --action-hover:   var(--cafe-700);
  --action-active:  var(--cafe-900);
  --action-fg:      var(--neutral-0);
  --focus-ring:     rgba(139, 106, 76, 0.34);

  /* Brand surface tints */
  --brand-soft:     var(--cafe-50);
  --brand-tint:     var(--cafe-100);

  /* Status semantic triplets — fg / bg / border (badges & cells only) */
  --status-paid-fg:    var(--success-text);  --status-paid-bg:    var(--success-fill);  --status-paid-bd:    var(--success-bd);
  --status-due-fg:     var(--danger-text);   --status-due-bg:     var(--danger-fill);   --status-due-bd:     var(--danger-bd);
  --status-risk-fg:    var(--warning-text);  --status-risk-bg:    var(--warning-fill);  --status-risk-bd:    var(--warning-bd);
  --status-neutral-fg: var(--info-text);     --status-neutral-bg: var(--info-fill);     --status-neutral-bd: var(--info-bd);
  --status-info-fg:    var(--info-text);     --status-info-bg:    var(--info-fill);     --status-info-bd:    var(--info-bd);

  /* Signed money */
  --num-positive: var(--success-text);
  --num-negative: var(--danger-text);
}