/* =============================================================================
   BASE — tokens, reset y componentes compartidos.

   Estructura "control panel" oscura, con el naranja de Gin Heredero como color de
   acento de toda la app: botones, foco, links, estado activo, gráficos.

   Los tres colores de estado (verde / ámbar / azul) están validados contra el
   canvas #0d0f18: pasan piso de croma, separación en daltonismo y contraste. Se
   usan en texto, puntitos y barras finas — nunca como relleno grande.

   El ámbar se corrió hacia el dorado (#f5b942) para no confundirse con el naranja
   de marca: antes eran vecinos y "presupuestado" se leía igual que un botón.

   Regla de números: TODO importe, fecha o contador va en mono con tabular-nums.
   Es lo que hace que una columna de plata se lea como una columna.
   ============================================================================= */

:root{
  --canvas:#0d0f18;
  --card:#1a1d2b;
  --card2:#14161f;
  --card3:#232739;
  --line:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.10);

  --ink:#f5f6fa;
  --dim:#c7cbdb;
  --mut:#8992a8;
  --faint:#5c6579;

  /* Naranja Gin Heredero — color de marca y acento de la app */
  --acc:#fc5000;
  --acc-d:#c93a08;
  --acc-cl:#ff7a4d;          /* variante clara, para texto sobre fondo oscuro */
  /* Sobre el naranja va tinta oscura, no blanca: blanco sobre #fc5000 queda en 3,4:1
     y los botones tienen texto chico. */
  --sobre-acc:#200c03;

  --green:#6fcf97;
  --amber:#f5b942;
  --blue:#6fa8f5;
  --red:#f2735c;

  --mono:ui-monospace,'SF Mono',Menlo,'DejaVu Sans Mono',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;

  --r:14px;
  --r-sm:10px;
  --nav-w:228px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.2); }
::-webkit-scrollbar-track{ background:transparent; }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------- tipografía */
h1{ font-size:20px; font-weight:700; letter-spacing:-.2px; }
h2{ font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut); }
h3{ font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mut); }
/* Como TEXTO va la variante clara: el naranja pleno sobre las tarjetas oscuras
   queda en 4:1 y estos textos son de 11-12px. */
a{ color:var(--acc-cl); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* -------------------------------------------------------------------- panels */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 22px;
}
.panel.sm{ padding:16px 18px; }
.panel-hd{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:14px;
}

/* ------------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line2); border-radius:9px;
  padding:9px 14px;
  font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:border-color .14s, background .14s, transform .08s, opacity .14s;
}
.btn:hover{ border-color:var(--acc); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover{ border-color:var(--line2); }

.btn.primary{ background:var(--ink); color:var(--canvas); border-color:var(--ink); font-weight:700; }
.btn.primary:hover{ filter:brightness(.94); border-color:var(--ink); }
.btn.acc{ background:var(--acc); color:var(--sobre-acc); border-color:var(--acc); font-weight:700; }
.btn.acc:hover{ filter:brightness(1.1); border-color:var(--acc); }
.btn.ghost{ background:transparent; color:var(--mut); border-color:var(--line2); font-weight:600; }
.btn.ghost:hover{ color:var(--ink); background:var(--card); }
.btn.danger:hover{ border-color:var(--red); color:var(--red); }
.btn.sm{ padding:6px 10px; font-size:11.5px; border-radius:8px; }
.btn.icon{ padding:6px 9px; }

.link{
  background:none; border:0; padding:0;
  color:var(--acc-cl); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
}
.link:hover{ text-decoration:underline; }
.link.mut{ color:var(--mut); }
.link.mut:hover{ color:var(--ink); }

/* -------------------------------------------------------------------- campos */
.fld{ display:block; margin-bottom:12px; }
.fld > label{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.4px;
  color:var(--mut); margin-bottom:5px;
}
.fld input, .fld select, .fld textarea, .inp{
  width:100%;
  background:var(--card2); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-sm);
  padding:9px 11px;
  font:inherit; font-size:12.5px; font-family:var(--sans);
  transition:border-color .14s, box-shadow .14s;
}
.fld textarea{ resize:vertical; min-height:64px; line-height:1.5; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .inp:focus{
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
.fld input[readonly]{ color:var(--green); font-weight:700; background:#0f1119; }
.fld input.num, .inp.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }

/* appearance:none para que no aparezca el select nativo del SO, que en dark theme
   se ve claro y rompe el panel */
.fld select, select.inp{
  appearance:none; -webkit-appearance:none; padding-right:28px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238992a8'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
.fld .hint{ font-size:10.5px; color:var(--faint); margin-top:4px; }

.row{ display:flex; gap:12px; }
.row > *{ flex:1; min-width:0; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 12px; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0 12px; }

/* --------------------------------------------------------------------- pills */
.pill{
  display:inline-block;
  font-size:9.5px; font-weight:700; letter-spacing:.5px;
  padding:4px 10px; border-radius:20px; white-space:nowrap;
}
.pill.green{ background:rgba(111,207,151,.14); color:var(--green); }
.pill.amber{ background:rgba(242,169,59,.14);  color:var(--amber); }
.pill.blue{  background:rgba(111,168,245,.14); color:var(--blue);  }
.pill.red{   background:rgba(242,115,92,.16);  color:var(--red);   }
.pill.acc{   background:rgba(252,80,0,.18);   color:var(--acc-cl); }
.pill.mut{   background:rgba(137,146,168,.14); color:var(--mut);   }

/* ---------------------------------------------------------------------- KPIs */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:9px; }
.kpi{ background:var(--card2); border-radius:var(--r-sm); padding:12px 14px; }
.kpi .k{
  display:flex; align-items:center; gap:6px;
  font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mut);
}
.kpi .k i{ width:7px; height:7px; border-radius:50%; display:block; flex:none; }
.kpi .v{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:18px; font-weight:700; margin:6px 0 2px;
}
.kpi .n{ font-size:10.5px; color:var(--mut); }
.kpi.destacada{ border:1px solid rgba(111,207,151,.28); background:rgba(111,207,151,.07); }

.c-green{ color:var(--green); } .bg-green{ background:var(--green); }
.c-amber{ color:var(--amber); } .bg-amber{ background:var(--amber); }
.c-blue{  color:var(--blue);  } .bg-blue{  background:var(--blue);  }
.c-red{   color:var(--red);   } .bg-red{   background:var(--red);   }
.c-acc{   color:var(--acc-cl); } .bg-acc{   background:var(--acc);   }
.c-mut{   color:var(--mut);   } .bg-mut{   background:var(--mut);   }
.c-ink{   color:var(--ink);   }

/* --------------------------------------------------------------------- avisos */
.aviso{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--card2); border-left:3px solid var(--amber);
  border-radius:var(--r-sm); padding:10px 12px; margin-bottom:7px;
  font-size:11.5px; color:var(--dim);
}
.aviso:last-child{ margin-bottom:0; }
.aviso.error{ border-left-color:var(--red); }
.aviso.ok{ border-left-color:var(--green); }
.aviso .ic{ flex:none; line-height:1.3; }

/* --------------------------------------------------------------------- toast */
.cm-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  background:var(--card3); color:var(--ink);
  border:1px solid var(--line2); border-radius:11px;
  padding:11px 18px; font-size:12.5px; font-weight:600;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  opacity:0; pointer-events:none; z-index:12000;
  transition:opacity .2s, transform .2s;
  max-width:min(88vw, 460px); text-align:center;
}
.cm-toast.on{ opacity:1; transform:translate(-50%, 0); }
.cm-toast.error{ border-color:rgba(242,115,92,.5); }
.cm-toast.ok{ border-color:rgba(111,207,151,.5); }

/* ---------------------------------------------------------------- ficha modal
   La usan Pipeline, Clientes y Menús a través de CM.UI.modal(). Vive acá y no en
   el CSS de un módulo porque la caja es la misma en los tres: lo único que cambia
   es lo que se le mete adentro. */
.mdl{
  position:fixed; inset:0; z-index:10060; display:none;
  background:rgba(6,7,12,.78); padding:4vh 4vw;
  overflow:hidden; box-sizing:border-box;
}
.mdl.on{ display:flex; align-items:flex-start; justify-content:center; }
.mdl .fbox{
  background:var(--card); border:1px solid var(--line2); border-radius:16px;
  width:100%; max-width:660px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
}
.mdl.ancha .fbox{ max-width:820px; }
.mdl .fhd{ display:flex; align-items:flex-start; gap:14px; padding:20px 24px 16px;
  border-bottom:1px solid var(--line); flex:none; }
.mdl .fhd .k{ font-size:9.5px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--mut); }
.mdl .fhd .t{ font-size:18px; font-weight:700; margin-top:5px; }
.mdl .fhd .s{ font-size:11.5px; color:var(--mut); margin-top:4px; }
.mdl .fx{ margin-left:auto; flex:none; width:30px; height:30px; border-radius:8px;
  background:var(--card2); border:1px solid var(--line2); color:var(--ink);
  font:inherit; font-size:14px; cursor:pointer; }
.mdl .fx:hover{ border-color:var(--red); color:var(--red); }
.mdl .fbd{ overflow-y:auto; padding:4px 24px 24px; }
.mdl .fsec{ font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--acc); margin:20px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.mdl .fr{ display:flex; gap:16px; padding:6px 0; font-size:12.5px; align-items:baseline; }
.mdl .fr .k2{ color:var(--mut); flex:none; width:170px; }
.mdl .fr .v{ color:var(--ink); flex:1; min-width:0; font-family:var(--mono);
  font-variant-numeric:tabular-nums; white-space:pre-wrap; word-break:break-word; }
.mdl .fr .v.txt{ font-family:var(--sans); }
.mdl .facts{ display:flex; gap:8px; flex-wrap:wrap; padding:16px 24px;
  border-top:1px solid var(--line); flex:none; background:var(--card2); }

/* -------------------------------------------------------------- visor de PDF
   Casi a pantalla completa y no en una caja chica como .mdl: lo que se está
   mirando es una hoja A4 y hay que poder leerla, no adivinarla. */
.pv{
  position:fixed; inset:0; z-index:10070; display:none;
  background:rgba(6,7,12,.82); padding:3vh 3vw;
}
.pv.on{ display:flex; align-items:stretch; justify-content:center; }
.pv .pv-box{
  background:var(--card); border:1px solid var(--line2); border-radius:14px;
  width:100%; max-width:940px; display:flex; flex-direction:column; overflow:hidden;
}
.pv .pv-hd{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:12px 14px; background:var(--card2); border-bottom:1px solid var(--line);
}
.pv .pv-hd .t{ font-size:13px; font-weight:700; }
.pv .pv-hd .s{
  font-size:10.5px; color:var(--mut); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pv .pv-x{
  flex:none; width:30px; height:30px; border-radius:8px;
  background:var(--card); border:1px solid var(--line2); color:var(--ink);
  font:inherit; font-size:14px; cursor:pointer;
}
.pv .pv-x:hover{ border-color:var(--red); color:var(--red); }
/* El gris de atrás del PDF es a propósito más claro que el canvas: hace de mesa
   de luz y separa la hoja blanca del marco oscuro. */
.pv .pv-frame{ flex:1; width:100%; border:0; background:#33333a; min-height:0; }
.pv .pv-nativo{ display:none; padding:40px 24px; text-align:center;
  color:var(--dim); font-size:13px; line-height:1.7; }
.pv.nativo .pv-frame{ display:none; }
.pv.nativo .pv-nativo{ display:block; }

/* ----------------------------------------------------------------- utilidades */
.vacio{ color:var(--faint); font-size:12px; padding:22px 0; text-align:center; }
.sep{ height:1px; background:var(--line); margin:16px 0; border:0; }
.nowrap{ white-space:nowrap; }
.oculto{ display:none !important; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flex{ display:flex; align-items:center; gap:8px; }
.crece{ flex:1; min-width:0; }
.trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; }

/* =============================== TELÉFONO ================================== */
@media (max-width:900px){
  /* A pantalla completa: una ficha con márgenes en un teléfono deja una tira de
     fondo inútil arriba y abajo y menos lugar para lo que importa. */
  .mdl{ padding:0; }
  .mdl .fbox, .mdl.ancha .fbox{ max-width:none; max-height:100vh; border-radius:0; height:100%; }
  .mdl .fr{ flex-direction:column; gap:2px; }
  .mdl .fr .k2{ width:auto; font-size:10.5px; }

  .pv{ padding:0; }
  .pv .pv-box{ max-width:none; border-radius:0; }
  /* En 375px los tres botones y el título no entran en una línea: el encabezado
     se parte y el nombre del archivo pasa abajo. */
  .pv .pv-hd{ flex-wrap:wrap; padding-top:calc(12px + env(safe-area-inset-top)); }
  .pv .pv-hd .crece{ order:-1; width:100%; }
}