/* ==========================================================================
   Panel de la central — pensado para escritorio, usable en el celular.
   Acá se mira todo el día: lo que entra de los vendedores, lo que hay en
   depósito y quién debe plata.
   ========================================================================== */

body { background: var(--arena); }

.app { display: flex; min-height: 100vh; }

/* ------------------------------ Lateral --------------------------------- */
.lateral {
  width: 232px;
  flex: none;
  background: var(--petroleo);
  color: #C9DDE7;
  display: flex;
  flex-direction: column;
  padding: var(--e-4) 0;
  position: sticky;
  top: 0;
  height: 100vh;
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--e-4) var(--e-5);
  color: #fff;
  text-decoration: none;
}

.lateral__marca:hover { text-decoration: none; opacity: .92; }

.lateral__iso {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--naranja);
  display: grid;
  place-items: center;
}

.lateral__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
}

.lateral__nombre small {
  display: block;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7FA6BA;
  margin-top: 3px;
}

.lateral__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

.lateral__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: #C9DDE7;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: background var(--t), color var(--t);
}

.lateral__item svg { width: 19px; height: 19px; flex: none; }
.lateral__item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral__item.is-activo { background: var(--naranja); color: #fff; }

.lateral__contador {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lateral__item.is-activo .lateral__contador { background: rgba(0, 0, 0, .2); }

.lateral__salir {
  margin-top: auto;
  padding: 12px var(--e-5) 0;
  color: #7FA6BA;
  font-size: 13px;
  text-decoration: none;
}

.lateral__salir:hover { color: #fff; text-decoration: underline; }

/* ------------------------------ Principal -------------------------------- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: 11px var(--e-5);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.topbar__menu { display: none; }
.topbar__empresa { display: flex; align-items: center; gap: 9px; }
.topbar__empresa .select { min-width: 210px; height: 38px; }
.topbar__acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.cab__campana { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--tinta-2); }
.cab__campana:hover { background: var(--arena); color: var(--tinta); }
.cab__campana svg { width: 21px; height: 21px; }
.cab__punto[hidden] { display: none; }

.cab__punto {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--naranja);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.vista { padding: var(--e-5); max-width: 1240px; width: 100%; }
.vista > * + * { margin-top: var(--e-5); }

.cabecera-vista { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.cabecera-vista h1 { font-size: 26px; line-height: 1.1; }
.cabecera-vista .sub { color: var(--tinta-2); font-size: 14px; margin-top: 2px; }

/* --------------------------------- KPIs ---------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-3); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 660px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  /* En pantalla chica el importe no puede partirse dejando el signo solo
     en una línea: se achica y se mantiene entero. */
  .kpi__valor { font-size: 22px; white-space: nowrap; }
  .kpi { padding: var(--e-3); }
}

/* -------------------------------- Tablero -------------------------------- */
.tablero { display: grid; grid-template-columns: 1fr 340px; gap: var(--e-5); align-items: start; }
@media (max-width: 1000px) { .tablero { grid-template-columns: 1fr; } }

.panel {
  padding: var(--e-5);
  border-radius: var(--r-md);
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
}

.panel__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.panel__titulo { font-size: 16px; font-weight: 700; }

/* Gráfico de barras */
.gr { width: 100%; height: auto; }
.gr__barra { transition: opacity var(--t); }
.gr__barra:hover { opacity: .82; }
.leyenda { display: flex; gap: var(--e-4); font-size: 12.5px; color: var(--tinta-2); margin-top: 10px; }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Movimiento en vivo */
.vivo { display: flex; flex-direction: column; gap: 0; max-height: 470px; overflow-y: auto; margin: 0 calc(var(--e-5) * -1) calc(var(--e-5) * -1); }

.vivo__item {
  display: flex;
  gap: 10px;
  padding: 11px var(--e-5);
  border-top: 1px solid var(--linea-2);
}

.vivo__ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--info-bg); color: var(--info); }
.vivo__ico svg { width: 17px; height: 17px; }
.vivo__ico--cobro { background: var(--cobro-bg); color: var(--cobro); }
.vivo__ico--entrega { background: var(--porvencer-bg); color: var(--porvencer-osc); }
.vivo__titulo { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.vivo__texto { display: block; font-size: 12.5px; color: var(--tinta-2); }
.vivo__hora { margin-left: auto; font-size: 12px; color: var(--tinta-3); white-space: nowrap; }

/* --------------------------------- Tablas -------------------------------- */
.tabla-caja { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--linea); background: var(--blanco); }
.tabla-caja table { min-width: 720px; }
.tabla th { white-space: nowrap; }
.tabla td { vertical-align: middle; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla__mini { width: 38px; height: 38px; border-radius: var(--r-xs); overflow: hidden; background: var(--arena-2); }
.tabla__mini .da-svg { width: 100%; height: 100%; }
.tabla__prod { display: flex; align-items: center; gap: 10px; }
.tabla__nombre { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.tabla__marca { display: block; font-size: 11.5px; color: var(--tinta-3); }
.tabla tr.is-critico td { background: var(--vencido-bg); }
.tabla tr.is-bajo td { background: var(--porvencer-bg); }

/* -------------------------------- Pedidos -------------------------------- */
.pedidos { display: grid; gap: 10px; }

.pedido {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: 13px var(--e-4);
  border-radius: var(--r-md);
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  width: 100%;
  text-align: left;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t-rapida);
}

.pedido:hover { border-color: #CFC5B6; box-shadow: var(--sombra-2); transform: translateY(-1px); }
.pedido__nro { display: block; font-family: var(--f-mono); font-size: 12.5px; color: var(--tinta-3); }
.pedido__comercio { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; }
.pedido__meta { display: block; font-size: 12.5px; color: var(--tinta-2); }
.pedido__cuerpo { min-width: 0; flex: 1; }
.pedido__lado { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pedido__total { font-family: var(--f-display); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }

/* -------------------------------- Cuentas -------------------------------- */
.tramos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
@media (max-width: 800px) { .tramos { grid-template-columns: repeat(2, 1fr); } }

.cuenta__nombre { display: block; font-weight: 600; font-size: 14px; }
.cuenta__tipo { display: block; font-size: 12px; color: var(--tinta-3); }

/* ------------------------------- Vendedores ------------------------------ */
.vendedores { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
@media (max-width: 900px) { .vendedores { grid-template-columns: 1fr; } }

.vend__cab { display: flex; align-items: center; gap: 11px; }
.vend__nombre { display: block; font-weight: 700; font-size: 15px; }
.vend__zona { display: block; font-size: 12.5px; color: var(--tinta-2); }
.vend__datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin-top: var(--e-4); }
.vend__dato { text-align: center; padding: 9px 4px; border-radius: var(--r-sm); background: var(--arena-2); }
.vend__valor { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.vend__etiqueta { display: block; font-size: 11px; color: var(--tinta-2); }

/* --------------------------------- Sheet --------------------------------- */
.sheet {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 60;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--arena);
  box-shadow: -12px 0 40px rgba(18, 59, 79, .24);
  animation: da-lateral 260ms cubic-bezier(.22, .9, .3, 1);
}

@keyframes da-lateral { from { transform: translateX(100%); } to { transform: translateX(0); } }

.sheet__cab {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 14px var(--e-5);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.sheet__titulo { font-size: 17px; font-weight: 700; }
.sheet__cerrar { margin-left: auto; }
.sheet__cuerpo { padding: var(--e-5); overflow-y: auto; flex: 1; }
.sheet__pie { padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linea); background: var(--blanco); }

/* --------------------------------- Varios -------------------------------- */
.dato { display: flex; justify-content: space-between; gap: var(--e-3); padding: 6px 0; font-size: 14px; }
.dato__etiqueta { color: var(--tinta-2); }
.dato__valor { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.linea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea-2);
}

.linea:last-child { border-bottom: 0; }
.linea__mini { width: 40px; height: 40px; flex: none; border-radius: var(--r-xs); overflow: hidden; background: var(--arena-2); }
.linea__mini .da-svg { width: 100%; height: 100%; }
.linea__cuerpo { min-width: 0; flex: 1; }
.linea__nombre { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.linea__pres { display: block; font-size: 12px; color: var(--tinta-3); }
.linea__sub { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.comp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--linea); background: var(--blanco); }
.comp + .comp { margin-top: 7px; }
.comp__nro { display: block; font-family: var(--f-mono); font-size: 12.5px; color: var(--tinta-2); }
.comp__fecha { display: block; font-size: 12.5px; color: var(--tinta-3); }
.comp__lado { margin-left: auto; text-align: right; }
.comp__saldo { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.comp__pagado { display: block; font-size: 12px; color: var(--cobro); }

.pista { font-size: 12.5px; color: var(--tinta-3); line-height: 1.45; margin-top: 9px; }
.notifs { margin: calc(var(--e-5) * -1); }

/* --------------------------- Mapa de zonas ------------------------------- */
/* Con el ancho del panel entero el plano queda de 800 px de alto y se come
   la pantalla: va acotado y centrado. */
.mapa-caja { padding: var(--e-4); }
.mapa-caja .mapa-zonas { max-width: 520px; margin: 0 auto; display: block; }

/* ------------------------------- Mobile ---------------------------------- */
@media (max-width: 900px) {
  .lateral {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform var(--t-lenta);
    box-shadow: 8px 0 30px rgba(18, 59, 79, .3);
  }

  .lateral.is-abierto { transform: translateX(0); }
  .topbar__menu { display: grid; }
  .topbar__empresa .t-etiqueta { display: none; }
  .topbar__empresa .select { min-width: 150px; }
  .vista { padding: var(--e-4); }
  #txtOjo { display: none; }
}