/* ============================================================================
   CM · Cobros — sistema visual
   Tema: "modern minimal" de tweakcn, aplicado tal cual en superficies, tipografía
   (Inter + JetBrains Mono) y radio (0.375rem), en claro y oscuro.

   Con una excepción deliberada: el tema define chart-1..5, pero son CINCO AZULES
   — una rampa secuencial, no una paleta categórica. Usarlos para series distintas
   las volvería indistinguibles. Así que la rampa del tema se usa donde corresponde
   (--ramp-*, para escalas ordinales) y los categóricos --s1/--s2/--s3 se eligieron
   midiendo separación perceptual y contraste. Ver el detalle en los tokens.
   ========================================================================= */
@import url("fonts.css");

:root{
  /* ---------------------------------------------------------------- claro */
  --plane:#f9fafb;            /* fondo de pagina  (muted) */
  --surface:#ffffff;          /* tarjetas y superficie de grafico (card) */
  --surface-2:#f3f4f6;        /* (secondary) */
  --surface-3:#e9ebef;
  --rule:#e5e7eb;             /* (border) */
  --rule-2:#d8dce2;
  --edge:rgba(17,24,39,.07);

  --ink:#333333;              /* (foreground) */
  --ink-2:#4b5563;
  --muted:#6b7280;            /* (muted-foreground) */
  --faint:#9ca3af;

  /* Datos categoricos. El tema trae chart-1..5 pero son cinco AZULES: sirven
     como rampa ordinal, no para distinguir series. Estos tres se eligieron
     midiendo: separacion minima ΔE 26 en vision normal y ΔE 24 con
     deuteranopia, y >=3:1 de contraste sobre el fondo claro y el oscuro. */
  --s1:#3b82f6;               /* = primary del tema */
  --s2:#ea580c;
  --s3:#65a30d;

  /* Estado: rojo/ambar/verde reservados para mora, vencido y cobrado.
     Dos juegos a proposito: el vivo sirve de RELLENO (barras, puntos, chips) y el
     oscuro de TINTA (cifras y texto). Sobre blanco el ambar vivo da 2,15:1 — no
     alcanza ni para texto grande — asi que las cifras usan la variante -ink. */
  --good:#10b981; --warning:#f59e0b; --serious:#ea580c; --critical:#ef4444;
  --good-ink:#047857; --warning-ink:#b45309; --serious-ink:#c2410c; --critical-ink:#b91c1c;

  --grid:#e9ebef; --axis:#d8dce2;
  --halo:rgba(59,130,246,.07);
  --grano:.02;

  /* tipografia del tema: Inter para texto, JetBrains Mono para cifras */
  --display:"Inter",system-ui,-apple-system,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r:6px;                    /* radius 0.375rem del tema */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* La rampa ordinal SI sale tal cual del tema (chart-1..5, secuencial azul),
   extendida con dos pasos mas claros para que arranque suave sobre blanco. */
:root{ --ramp-0:#dbeafe; --ramp-1:#bfdbfe; --ramp-2:#93c5fd;
       --ramp-3:#60a5fa; --ramp-4:#3b82f6; --ramp-5:#2563eb; }

/* ----------------------------------------------------------------- oscuro */
:root[data-theme="dark"]{
  /* en oscuro el color vivo ya contrasta: tinta = relleno */
  --good-ink:#10b981; --warning-ink:#f59e0b; --serious-ink:#ea580c; --critical-ink:#ef4444;
  --plane:#171717;            /* (background) */
  --surface:#262626;          /* (card) */
  --surface-2:#2e2e2e;
  --surface-3:#383838;
  --rule:#303030;
  --rule-2:#404040;           /* (border) */
  --edge:rgba(255,255,255,.06);

  --ink:#e5e5e5;              /* (foreground) */
  --ink-2:#b8b8b8;
  --muted:#a3a3a3;            /* (muted-foreground) */
  --faint:#737373;

  --grid:#303030; --axis:#404040;
  --halo:rgba(59,130,246,.10);
  --grano:.035;
  /* en oscuro la rampa se invierte: el extremo "mas" tiene que brillar mas */
  --ramp-0:#1e3a8a; --ramp-1:#1e40af; --ramp-2:#1d4ed8;
  --ramp-3:#2563eb; --ramp-4:#3b82f6; --ramp-5:#60a5fa;
}
/* El tema arranca CLARO: es la cara principal de "modern minimal" y la que se ve
   en el editor. El oscuro no se activa solo por la preferencia del sistema — se
   elige con el boton de la barra y queda recordado por navegador. Motivo: en un
   tablero que se comparte y se proyecta, que cada pantalla salga de un color
   distinto segun la Mac de quien lo abre confunde mas de lo que ayuda. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--plane);color:var(--ink);
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Inter: cifras tabulares para que las columnas de dinero no bailen */
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.006em;
}
/* halo frío arriba: da profundidad sin ensuciar la superficie de los gráficos */
body::after{
  content:'';position:fixed;inset:0 0 auto 0;height:460px;z-index:0;pointer-events:none;
  background:radial-gradient(115% 100% at 50% -10%, var(--halo), transparent 68%);
}
/* grano: rompe el plano liso, muy tenue */
body::before{
  content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:1;max-width:1520px;margin:0 auto;padding:30px 26px 80px}

::selection{background:rgba(59,130,246,.25)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:20px;border:3px solid var(--plane)}
::-webkit-scrollbar-thumb:hover{background:#4a4a46}
:focus-visible{outline:2px solid var(--s1);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- cabecera */
.masthead{
  display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:baseline;gap:12px}
.brand h1{
  font-family:var(--display);font-size:26px;font-weight:700;margin:0;
  letter-spacing:-.035em;line-height:1;
}
.brand .div{width:1px;height:20px;background:var(--rule-2);align-self:center}
.brand .kicker{
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.16em;
}
.sub{
  font-family:var(--mono);color:var(--muted);font-size:11px;margin-top:9px;
  letter-spacing:.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.live{width:6px;height:6px;border-radius:50%;background:var(--good);
      box-shadow:0 0 0 0 rgba(12,163,12,.5);animation:pulse 2.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(12,163,12,.45)}
  70%{box-shadow:0 0 0 7px rgba(12,163,12,0)}
  100%{box-shadow:0 0 0 0 rgba(12,163,12,0)}
}

/* ---------------------------------------------------------------- controles */
.tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.vr{width:1px;height:18px;background:var(--rule-2);margin:0 3px}
.micro{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);
}
select,input,textarea,button{
  font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--edge);border-radius:8px;padding:7px 11px;transition:.16s var(--ease);
}
select{padding-right:26px}
input::placeholder{color:var(--faint)}
button{cursor:pointer;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
       letter-spacing:.11em;color:var(--ink-2);padding:8px 12px}
button:hover{background:var(--surface-3);color:var(--ink);border-color:var(--rule-2)}
button:active{transform:translateY(1px)}
select:hover,input:hover{border-color:var(--rule-2)}
a{color:var(--s1);text-decoration:none}
a.back{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em}
a.back:hover{text-decoration:underline;text-underline-offset:3px}

.seg{display:flex;background:var(--surface);border:1px solid var(--edge);border-radius:8px;padding:3px;gap:3px}
.seg button,.seg a{text-decoration:none;border:0;background:transparent;padding:5px 12px;
  border-radius:6px;color:var(--faint);white-space:nowrap;font:500 12px/1.45 "Archivo",sans-serif;
  letter-spacing:.01em;cursor:pointer;transition:.15s var(--ease)}
.seg button:hover,.seg a:hover{background:transparent;color:var(--ink-2)}
.seg button[aria-pressed=true],.seg a[aria-pressed=true]{background:var(--surface-3);color:var(--ink)}
label.check{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
label.check input{width:13px;height:13px;accent-color:var(--s1);padding:0}

/* ---------------------------------------------------------------- banda kpi */
.band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;margin-bottom:22px;
}
.stat{background:var(--surface);padding:16px 18px 17px;position:relative}
.stat::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
              background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
.stat-k{
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted);display:flex;align-items:center;gap:7px;
}
.stat-k i{color:var(--faint);font-style:normal}
.stat-v{
  font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.035em;
  margin-top:9px;line-height:1;font-variant-numeric:tabular-nums;
}
.stat-n{color:var(--ink-2);font-size:11.5px;margin-top:7px;letter-spacing:.005em}
.stat-n .dot{width:6px;height:6px;border-radius:50%;display:inline-block;vertical-align:.5px;margin-right:5px}

/* ---------------------------------------------------------------- tarjetas */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:16px}
.cols{display:grid;grid-template-columns:minmax(480px,1.05fr) minmax(440px,1fr);gap:16px;align-items:start}
@media (max-width:1120px){.cols{grid-template-columns:1fr}}
@media (min-width:1040px){.wide{grid-column:span 2}}
.full{grid-column:1/-1}

.card{
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);
  padding:17px 19px 15px;position:relative;
}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;border-radius:var(--r) var(--r) 0 0;
              background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(255,255,255,.06) 70%,transparent)}
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.card h2{
  font-family:var(--display);font-size:15px;font-weight:600;margin:0;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:9px;
}
.card h2 i{
  font-family:var(--mono);font-style:normal;font-size:9.5px;font-weight:500;color:var(--faint);
  letter-spacing:.1em;
}
.desc{color:var(--muted);font-size:11.5px;margin-top:4px;letter-spacing:.005em}
.desc code{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);
           background:var(--surface-3);padding:1px 4px;border-radius:3px}
.box{position:relative;height:262px}
.tall .box{height:326px}
.ghost{border:0;background:transparent;padding:4px 8px;color:var(--faint)}
.ghost:hover{background:var(--surface-3);color:var(--ink-2)}

/* ---------------------------------------------------------------- tablas */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{
  font-family:var(--mono);text-align:left;color:var(--faint);font-weight:500;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.14em;padding:0 9px 9px;
  border-bottom:1px solid var(--rule-2);position:sticky;top:0;background:var(--surface);
  white-space:nowrap;z-index:1;
}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--ink-2)}
td{padding:9px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
td.num{text-align:right;white-space:nowrap;font-family:var(--mono);
       font-variant-numeric:tabular-nums;letter-spacing:-.01em}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover td{background:#1f1f1d}
tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--s1)}
.scroll{max-height:520px;overflow-y:auto;overflow-x:hidden;border-radius:8px}
.nm{color:var(--ink);font-weight:500;letter-spacing:-.005em}
.tiny{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.01em;margin-top:2px}
.strong{color:var(--ink);font-weight:500}

/* etiquetas de estado */
.chip{
  display:inline-block;font-family:var(--mono);font-size:9.5px;padding:2px 6px;border-radius:4px;
  border:1px solid var(--rule-2);color:var(--ink-2);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.08em;
}
/* El texto del chip usa la TINTA (contrasta); el borde y el fondo salen del color
   vivo mezclado con la superficie, asi el mismo CSS sirve en claro y en oscuro. */
.chip.pag{color:var(--good-ink);
  border-color:color-mix(in srgb, var(--good) 40%, transparent);
  background:color-mix(in srgb, var(--good) 10%, var(--surface))}
.chip.imp{color:var(--warning-ink);
  border-color:color-mix(in srgb, var(--warning) 45%, transparent);
  background:color-mix(in srgb, var(--warning) 12%, var(--surface))}
.chip.ven{color:var(--critical-ink);
  border-color:color-mix(in srgb, var(--critical) 42%, transparent);
  background:color-mix(in srgb, var(--critical) 10%, var(--surface))}
.chip.mut{color:var(--muted)}

/* acciones de contacto */
.acts{display:flex;gap:4px}
.acts a{
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 7px;border:1px solid var(--edge);border-radius:5px;color:var(--muted);
  background:var(--surface-2);white-space:nowrap;line-height:1.4;transition:.14s var(--ease);
}
.acts a:hover{color:var(--ink);border-color:var(--s1);background:var(--surface-3)}
.acts a.off{opacity:.28;pointer-events:none}

/* ---------------------------------------------------------------- calendario */
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.dow div{
  font-family:var(--mono);color:var(--muted);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.15em;text-align:center;
}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cell{
  min-height:78px;border:1px solid var(--rule);border-radius:8px;padding:7px 8px 8px;
  background:var(--surface-2);cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.cell.void{background:transparent;border-color:transparent;cursor:default}
.cell:not(.void):hover{transform:translateY(-2px);border-color:var(--rule-2);
                       box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cell .d{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.cell .m{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:-.03em;
         font-variant-numeric:tabular-nums;color:var(--ink)}
.cell .p{font-family:var(--mono);font-size:9.5px;color:var(--ink-2);letter-spacing:.01em;margin-top:1px}
.cell.dark-fill .d{color:rgba(255,255,255,.7)}
.cell.dark-fill .p{color:rgba(255,255,255,.85)}
.cell.dark-fill .m{color:#fff}
.cell.on-fill .d{color:rgba(11,11,11,.6)}
.cell.on-fill .p{color:rgba(11,11,11,.74)}
.cell.on-fill .m{color:#0b0b0b}
.cell.hoy{border-color:var(--s1)}
.cell.hoy::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:var(--s1)}
.cell.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.cell .flag{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%}
.legend{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--rule);font-family:var(--mono);color:var(--faint);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.1em;
}
.ramp{display:flex;gap:2px;align-items:center}
.ramp i{width:16px;height:8px;border-radius:2px;display:inline-block}

/* ---------------------------------------------------------------- varios */
.empty{color:var(--muted);font-size:12.5px;padding:30px 4px;text-align:center;font-family:var(--mono)}
.note{
  color:var(--muted);font-size:11.5px;margin-top:18px;line-height:1.75;max-width:1100px;
  padding-top:16px;border-top:1px solid var(--rule);
}
.note code{font-family:var(--mono);font-size:10.5px;color:var(--ink-2)}
.note b{color:var(--ink-2);font-weight:500}
textarea{width:100%;height:88px;resize:vertical;font-family:var(--mono);font-size:12px;
         line-height:1.6;text-transform:none;letter-spacing:0}
.err{color:var(--critical);font-family:var(--mono);font-size:11.5px;margin-top:9px}

/* ---------------------------------------------------------------- entrada */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.band,.card{animation:rise .5s var(--ease) both}
.grid > .card:nth-child(1),.cols > .card:nth-child(1){animation-delay:.05s}
.grid > .card:nth-child(2),.cols > .card:nth-child(2){animation-delay:.1s}
.grid > .card:nth-child(3){animation-delay:.15s}
.grid > .card:nth-child(4){animation-delay:.2s}
.grid > .card:nth-child(5){animation-delay:.25s}
.grid > .card:nth-child(n+6){animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}