/* Reportes del dueño. Todo cuelga de .rp-app para no tocar el panel de administración.
   Marca: azul FastyPOS. Cada método de pago conserva su color en todos los gráficos (Yape morado, Plin celeste...). */

@font-face {
  font-family: "Inter";
  src: url("/vendor/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.rp-app {
  --rp-fondo: #f1f4f9;
  --rp-superficie: #ffffff;
  --rp-superficie-2: #f6f8fb;
  --rp-borde: #e2e7ef;
  --rp-borde-fuerte: #c9d1de;
  --rp-texto: #101a2c;
  --rp-suave: #566277;
  --rp-tenue: #8591a5;
  --rp-marca: #3154a1;
  --rp-marca-fuerte: #25437f;
  --rp-marca-suave: #e6edf9;
  --rp-sube: #0b7a52;
  --rp-sube-fondo: #def4ea;
  --rp-baja: #b4302a;
  --rp-baja-fondo: #fbe9e7;
  --rp-aviso: #9a5b0a;
  --rp-aviso-fondo: #fcf0d9;
  --rp-sombra: 0 1px 2px rgba(16, 26, 44, 0.04);

  --m-efectivo: #1f9d63;
  --m-tarjeta: #3154a1;
  --m-yape: #7c4dbd;
  --m-plin: #14a3c7;
  --m-otros: #8e99ad;

  --c-1: #3154a1;
  --c-2: #14a3c7;
  --c-3: #e0952b;
  --c-4: #7c4dbd;
  --c-5: #1f9d63;
  --c-6: #d4574c;
  --c-7: #8e99ad;

  min-height: 100vh;
  background: var(--rp-fondo);
  color: var(--rp-texto);
  font: 14.5px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .rp-app {
    --rp-fondo: #0c121c;
    --rp-superficie: #141c29;
    --rp-superficie-2: #19222f;
    --rp-borde: #26313f;
    --rp-borde-fuerte: #36445a;
    --rp-texto: #e8edf5;
    --rp-suave: #9aa6ba;
    --rp-tenue: #6f7b90;
    --rp-marca: #6b8fe0;
    --rp-marca-fuerte: #8fabea;
    --rp-marca-suave: #1d2a45;
    --rp-sube: #4cc795;
    --rp-sube-fondo: #12392b;
    --rp-baja: #f08a82;
    --rp-baja-fondo: #3d1d1b;
    --rp-aviso: #e6b35c;
    --rp-aviso-fondo: #3a2d12;
    --rp-sombra: none;
    --m-tarjeta: #6b8fe0;
    --c-1: #6b8fe0;
  }
}

.rp-app *, .rp-app *::before, .rp-app *::after { box-sizing: border-box; }
.rp-app h1, .rp-app h2, .rp-app h3 { margin: 0; line-height: 1.25; }
.rp-app p { margin: 0; }
.rp-app .num, .rp-app .rp-kpi-valor, .rp-app td.num { font-variant-numeric: tabular-nums; }

/* ---------- barra superior ---------- */
.rp-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 28px; background: var(--rp-superficie); border-bottom: 1px solid var(--rp-borde);
}
.rp-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rp-marca img { height: 26px; width: auto; display: block; }
.rp-marca-textos { min-width: 0; line-height: 1.25; }
.rp-marca-negocio { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-marca-local { color: var(--rp-suave); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-usuario { display: flex; align-items: center; gap: 12px; color: var(--rp-suave); font-size: 13px; white-space: nowrap; }
.rp-app button { font: inherit; }
.rp-boton {
  cursor: pointer; background: var(--rp-superficie); color: var(--rp-texto); border: 1px solid var(--rp-borde-fuerte);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500;
}
.rp-boton:hover { background: var(--rp-superficie-2); }
.rp-boton:disabled { opacity: 0.55; cursor: default; }
.rp-boton.primario { background: var(--rp-marca); border-color: var(--rp-marca); color: #fff; }
.rp-boton.primario:hover { background: var(--rp-marca-fuerte); }

/* ---------- contenedor ---------- */
.rp-app main.rp-main { padding: 0; max-width: none; margin: 0; }
.rp { max-width: 1240px; margin: 0 auto; padding: 18px 28px 48px; }

/* ---------- pestañas ---------- */
.rp-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rp-borde); margin-bottom: 16px; }
.rp-tabs::-webkit-scrollbar { display: none; }
.rp-tab {
  cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; color: var(--rp-suave); font-weight: 550; font-size: 14.5px; white-space: nowrap;
}
.rp-tab:hover { color: var(--rp-texto); }
.rp-tab.activa { color: var(--rp-marca); border-bottom-color: var(--rp-marca); }

/* ---------- filtros ---------- */
.rp-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px;
  background: var(--rp-superficie); border: 1px solid var(--rp-borde); border-radius: 12px; padding: 12px 14px; box-shadow: var(--rp-sombra);
}
.rp-segmentos { display: inline-flex; background: var(--rp-superficie-2); border: 1px solid var(--rp-borde); border-radius: 9px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.rp-segmento {
  cursor: pointer; border: 0; background: none; color: var(--rp-suave); border-radius: 7px; padding: 5px 11px; font-size: 13px; font-weight: 550; white-space: nowrap;
}
.rp-segmento:hover { color: var(--rp-texto); }
.rp-segmento.activa { background: var(--rp-superficie); color: var(--rp-marca); box-shadow: 0 1px 2px rgba(16, 26, 44, 0.12); }
.rp-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-campo > label, .rp-etiqueta { font-size: 12px; color: var(--rp-suave); font-weight: 500; margin: 0; }
.rp-app input[type="date"], .rp-app input[type="search"], .rp-app input[type="text"], .rp-app select {
  font: inherit; font-size: 13.5px; color: var(--rp-texto); background: var(--rp-superficie); border: 1px solid var(--rp-borde-fuerte);
  border-radius: 8px; padding: 6px 9px; width: auto; min-width: 0; height: 33px;
}
.rp-app input:focus-visible, .rp-app select:focus-visible, .rp-app button:focus-visible { outline: 2px solid var(--rp-marca); outline-offset: 1px; }
.rp-opciones { display: flex; gap: 12px; align-items: center; height: 33px; flex-wrap: wrap; }
.rp-opcion { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--rp-texto); cursor: pointer; margin: 0; }
.rp-opcion input { width: auto; height: auto; accent-color: var(--rp-marca); }
.rp-filtros-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--rp-borde); }

/* ---------- tarjetas y cuadrículas ---------- */
.rp-tarjeta {
  background: var(--rp-superficie); border: 1px solid var(--rp-borde); border-radius: 12px; padding: 18px 20px; box-shadow: var(--rp-sombra); min-width: 0;
}
.rp-tarjeta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-tarjeta-cab h2 { font-size: 16px; font-weight: 650; }
.rp-nota { color: var(--rp-suave); font-size: 13px; }
.rp-apilado { display: grid; gap: 16px; }
.rp-apilado > .rp-segmentos { justify-self: start; }
.rp-dos { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.rp-dos.desigual { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rp-vacio { color: var(--rp-suave); padding: 18px 4px; text-align: center; }

/* ---------- KPIs ---------- */
.rp-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.rp-kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-kpis.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-kpis.hero { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.rp-kpi { background: var(--rp-superficie); border: 1px solid var(--rp-borde); border-radius: 12px; padding: 16px 18px; box-shadow: var(--rp-sombra); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-kpi-titulo { color: var(--rp-suave); font-size: 13px; font-weight: 500; }
.rp-kpi-valor { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.rp-kpi.hero .rp-kpi-valor { font-size: 34px; }
.rp-kpi-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; min-height: 22px; color: var(--rp-suave); font-size: 12.5px; }
.rp-kpi-chispa { margin-top: auto; padding-top: 8px; }
.rp-kpi-texto { font-size: 18px; letter-spacing: -0.01em; }
.rp-delta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-delta.sube { color: var(--rp-sube); background: var(--rp-sube-fondo); }
.rp-delta.baja { color: var(--rp-baja); background: var(--rp-baja-fondo); }
.rp-delta.igual { color: var(--rp-suave); background: var(--rp-superficie-2); }

/* ---------- gráficos ---------- */
.rp-grafico { position: relative; width: 100%; }
.rp-grafico svg { display: block; overflow: visible; }
.rp-eje { fill: var(--rp-tenue); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rp-rejilla { stroke: var(--rp-borde); stroke-width: 1; }
.rp-promedio { stroke: var(--rp-suave); stroke-width: 1; stroke-dasharray: 4 4; }
.rp-promedio-texto { fill: var(--rp-suave); font-size: 11.5px; }
.rp-barra-svg { fill: var(--c-1); }
.rp-barra-svg.activa { fill: var(--rp-marca-fuerte); }
.rp-area { fill: var(--c-1); opacity: 0.12; }
.rp-linea { fill: none; stroke: var(--c-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-punto { fill: var(--rp-superficie); stroke: var(--c-1); stroke-width: 2; }
.rp-guia { stroke: var(--rp-borde-fuerte); stroke-width: 1; }
.rp-tooltip {
  position: absolute; z-index: 5; pointer-events: none; background: var(--rp-texto); color: var(--rp-superficie); border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; line-height: 1.35; white-space: nowrap; transform: translate(-50%, -100%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.rp-tooltip strong { font-weight: 650; }

.rp-dona-fila { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.rp-dona { position: relative; width: 170px; height: 170px; }
.rp-dona svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-dona-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 30px; }
.rp-dona-centro span { color: var(--rp-suave); font-size: 12px; }
.rp-dona-centro strong { font-size: 17px; font-weight: 680; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rp-leyenda { display: grid; gap: 9px; min-width: 0; max-width: 560px; }
.rp-leyenda-fila { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13.5px; }
.rp-leyenda-punto { width: 10px; height: 10px; border-radius: 3px; }
.rp-leyenda-fila .num { font-variant-numeric: tabular-nums; }
.rp-leyenda-fila .pct { color: var(--rp-suave); min-width: 46px; text-align: right; }

.rp-ranking { display: grid; gap: 4px; }
.rp-ranking-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 7px 0; }
.rp-ranking-fila + .rp-ranking-fila { border-top: 1px solid var(--rp-borde); }
.rp-ranking-pos { color: var(--rp-tenue); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rp-ranking-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; }
.rp-ranking-valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-ranking-valor small { display: block; color: var(--rp-suave); font-size: 12px; }
.rp-ranking-pista { grid-column: 2 / 4; height: 5px; background: var(--rp-superficie-2); border-radius: 999px; overflow: hidden; }
.rp-ranking-pista i { display: block; height: 100%; background: var(--c-1); border-radius: 999px; }

.rp-calor { display: grid; gap: 3px; }
.rp-calor-fila { display: grid; gap: 3px; align-items: center; }
.rp-calor-dia { color: var(--rp-suave); font-size: 12px; }
.rp-calor-hora { color: var(--rp-tenue); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
.rp-celda { height: 26px; border-radius: 4px; background: var(--rp-superficie-2); }
.rp-calor-leyenda { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--rp-suave); font-size: 12px; }
.rp-calor-leyenda i { display: block; width: 110px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c-1) 8%, var(--rp-superficie-2)), var(--c-1)); }

/* ---------- tablas ---------- */
.rp-tabla-caja { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.rp-tabla { border-collapse: collapse; width: 100%; font-size: 14px; }
.rp-tabla th {
  text-transform: none; letter-spacing: normal;
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--rp-suave); padding: 8px 12px; border-bottom: 1px solid var(--rp-borde-fuerte); white-space: nowrap; background: var(--rp-superficie);
}
.rp-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--rp-borde); vertical-align: middle; }
.rp-tabla tr:last-child td { border-bottom: 0; }
.rp-tabla th.num, .rp-tabla td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-tabla td .rp-nota { display: block; font-size: 12.5px; }
.rp-tabla tr.clic { cursor: pointer; }
.rp-tabla tr.clic:hover td { background: var(--rp-superficie-2); }
.rp-tabla tr.anulada td { color: var(--rp-tenue); }
.rp-tabla tr.anulada td:not(.sin-tachar) { text-decoration: line-through; }
.rp-celda-barra { min-width: 180px; }
.rp-celda-barra .rp-ranking-pista { margin-top: 6px; }
.rp-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; color: var(--rp-suave); font-size: 13px; }
.rp-pager-botones { display: flex; gap: 6px; }

/* ---------- etiquetas ---------- */
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 550; white-space: nowrap; background: var(--rp-superficie-2); color: var(--rp-suave); }
.rp-chip.ok { background: var(--rp-sube-fondo); color: var(--rp-sube); }
.rp-chip.mal { background: var(--rp-baja-fondo); color: var(--rp-baja); }
.rp-chip.espera { background: var(--rp-aviso-fondo); color: var(--rp-aviso); }
.rp-punto-color { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- detalle (ventana) ---------- */
.rp-fondo-modal { position: fixed; inset: 0; background: rgba(8, 14, 25, 0.55); display: grid; place-items: start center; padding: 28px 12px; overflow-y: auto; z-index: 50; }
.rp-modal { background: var(--rp-superficie); color: var(--rp-texto); border-radius: 14px; padding: 22px 24px; width: 100%; max-width: 580px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.rp-modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.rp-modal h2 { font-size: 18px; font-weight: 650; }
.rp-modal h3 { font-size: 13.5px; font-weight: 650; margin: 18px 0 6px; }
.rp-detalle-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.rp-detalle-fila span:first-child { color: var(--rp-suave); }
.rp-detalle-fila.total { border-top: 1px solid var(--rp-borde-fuerte); margin-top: 6px; padding-top: 8px; font-size: 16px; font-weight: 650; }
.rp-detalle-fila.total span:first-child { color: var(--rp-texto); }
.rp-aviso-error { color: var(--rp-baja); background: var(--rp-baja-fondo); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 13.5px; }
.rp-cargando { color: var(--rp-suave); padding: 28px 4px; text-align: center; }

/* ---------- pantallas medianas y celulares ---------- */
@media (max-width: 980px) {
  .rp-kpis, .rp-kpis.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpis.hero > .rp-kpi.hero { grid-column: 1 / -1; }
  .rp-kpis.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-dos, .rp-dos.desigual { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rp-barra { padding: 10px 16px; }
  .rp { padding: 14px 14px 40px; }
  .rp-usuario .rp-usuario-nombre { display: none; }
  .rp-kpi { padding: 13px 14px; }
  .rp-kpi-valor { font-size: 21px; }
  .rp-kpi.hero .rp-kpi-valor { font-size: 28px; }
  .rp-tarjeta { padding: 15px 14px; }
  .rp-dona-fila { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rp-leyenda { width: 100%; }
  .rp-filtros { padding: 10px; gap: 10px; }
  .rp-filtros > .rp-campo:first-child { flex: 1 1 100%; }
  .rp-filtros > .rp-campo:first-child .rp-segmentos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rp-filtros > .rp-campo:nth-child(2), .rp-filtros > .rp-campo:nth-child(3) { flex: 1 1 calc(50% - 5px); }
  .rp-campo { flex: 1 1 130px; }
  .rp-app input[type="date"], .rp-app input[type="search"], .rp-app select { width: 100%; }
  .rp-modal { padding: 18px 16px; }
}