/* ============================================================
   Inicio — rediseño 4.1
   Tarjeta "Hoy" (ingresos + gráfico + tres números), acciones
   rápidas, "Esta semana" en barras, y a la derecha (abajo en
   celular) el próximo turno destacado y la agenda del día como
   línea de tiempo. Todo con las variables de color del tema, así
   que funciona igual en modo claro.
   ============================================================ */

.ini{ display:flex; flex-direction:column; gap:14px; }
.ini-main, .ini-side{ display:flex; flex-direction:column; gap:14px; min-width:0; }

@media (min-width: 860px){
  .ini{
    display:grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap:18px;
    align-items:start;
  }
  .ini-side{ position:sticky; top:24px; }
}
@media (min-width: 1400px){
  .ini{ grid-template-columns: minmax(0,1fr) 400px; }
}

/* ---------- Tarjetas base ---------- */
.ini-card, .ini-hero, .ini-proximo{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  min-width:0;
}
.ini-card{ padding: 18px 18px 16px; }
.ini-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ini-card-titulo{
  margin:0; font-size:1rem; font-weight:700; letter-spacing:-0.01em; color: var(--text);
  text-transform:none; display:block;
}
.ini-card-sub{ display:block; margin-top:3px; font-size:0.78rem; color: var(--text-dim); }
.ini-sube{ color: var(--ok); font-weight:700; }
.ini-baja{ color: var(--warn); font-weight:700; }

.ini-link{
  width:auto; min-height:auto; flex-shrink:0;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-size:0.78rem; font-weight:600; letter-spacing:0; text-transform:none;
  padding: 6px 13px; box-shadow:none; cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ini-link:hover{ border-color: var(--accent-vivido); color: var(--accent); }

/* ---------- Hero "Hoy" ---------- */
.ini-hero{
  position:relative; overflow:hidden;
  padding: 22px 22px 0;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--ok-rgb), 0.07), transparent 65%),
    var(--bg-panel);
}
.ini-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ini-hero-cifra{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ini-eyebrow{ font-size:0.82rem; font-weight:500; color: var(--text-dim); }
.ini-hero-valor{
  font-size: clamp(2.1rem, 4.6vw, 2.55rem); font-weight:600; line-height:1;
  letter-spacing:-0.035em; color: var(--text); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ini-moneda{
  font-size:0.52em; font-weight:500; color: var(--text-dim); letter-spacing:0;
  vertical-align: 0.62em; margin-right:4px;
}

/* Delta "▲ 12% vs ayer" (lo pinta pintarDeltaInicio con .up / .down). */
.ini-delta{
  display:inline-flex; align-items:center; gap:3px;
  font-size:0.76rem; font-weight:700; color: var(--ok); white-space:nowrap;
}
.ini-delta svg{ width:13px; height:13px; stroke: currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ini-delta.down{ color: var(--danger); }
.ini-hero-top > .ini-delta{
  margin-top:2px; padding: 5px 10px; border-radius: 999px;
  background: rgba(var(--ok-rgb), 0.12);
}
.ini-hero-top > .ini-delta.down{ background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Gráfico: reusa renderGraficoLineas (período "jornada": tus horas de trabajo de hoy). Acá se saca la banda gris de "lo que falta del día" y se deja la línea punteada sola. */
.ini-chart{ margin: 18px 0 0; }
.ini-chart .stat-chart-delta{ display:none; }
.ini-chart .stat-chart-svg-el rect{ display:none; }
.ini-chart .stat-chart-labels span{ font-size:0.68rem; }
.ini-chart .stat-chart-ref-label{ font-size:0.66rem; }

/* Los tres números al pie de la tarjeta, separados por divisores. */
.ini-stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin: 14px -20px 0; border-top: 1px solid var(--line);
}
.ini-stat{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding: 14px 20px 16px;
}
.ini-stat + .ini-stat{ border-left: 1px solid var(--line); }
.ini-stat-label{ font-size:0.74rem; font-weight:600; color: var(--text-dim); }
.ini-stat-valor{
  font-size:1.25rem; font-weight:600; letter-spacing:-0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ini-stat-sub{ font-size:0.72rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-stat .ini-delta{ font-size:0.72rem; }

/* ---------- Acciones rápidas ---------- */
.ini-acciones{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.ini-accion{
  display:flex; align-items:center; gap:12px; min-width:0; min-height:auto;
  padding: 14px; border-radius: 16px; text-align:left;
  background: var(--bg-panel); border: 1px solid var(--line); color: var(--text);
  text-transform:none; letter-spacing:0; font-weight:400; box-shadow:none; cursor:pointer;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.ini-accion:hover{ border-color: color-mix(in srgb, var(--accent-vivido) 60%, var(--line)); background: var(--bg-panel-2); }
.ini-accion:active{ transform: scale(0.98); }
.ini-accion-ico{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ini-accion-ico svg{ width:19px; height:19px; fill:none; stroke: currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ini-accion-ico-turno{ background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.ini-accion-ico-venta{ background: rgba(var(--ok-rgb), 0.14); color: var(--ok); }
.ini-accion-ico-gasto{ background: rgba(var(--warn-rgb), 0.14); color: var(--warn); }
.ini-accion-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ini-accion-label{ font-size:0.9rem; font-weight:650; white-space:nowrap; }
.ini-accion-hint{ font-size:0.72rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Esta semana ---------- */
.ini-semana-total{
  font-size:1.35rem; font-weight:600; letter-spacing:-0.025em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space:nowrap;
}
.ini-semana-barras{
  position:relative;
  display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:10px;
  height: 150px; align-items:stretch; padding-top:6px;
}
.ini-barra{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; }
.ini-barra-track{
  flex:1; width:100%; max-width:30px; position:relative;
  display:flex; flex-direction:column-reverse; gap:3px;
  border-bottom: 1px solid var(--line);
}
.ini-barra-cobrado{
  width:100%; border-radius: 7px 7px 3px 3px; min-height:4px;
  background: color-mix(in srgb, var(--ok) 45%, var(--bg-panel));
  transition: height .4s ease;
}
.ini-barra-agendado{
  width:100%; min-height:4px; border-radius: 7px 7px 3px 3px;
  background: repeating-linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.45) 0 2px, rgba(var(--accent-rgb), 0.12) 2px 6px);
}
.ini-barra-cobrado + .ini-barra-agendado{ border-radius: 7px 7px 3px 3px; }
.ini-barra.hoy .ini-barra-cobrado{ background: var(--ok); }
/* Día sin nada: una rayita sobre la línea base en vez de una caja vacía. */
.ini-barra.vacio .ini-barra-track::before{
  content:''; display:block; height:3px; width:100%; border-radius:3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.ini-barra-dia{
  display:flex; align-items:baseline; gap:3px; padding: 2px 7px; border-radius:999px;
  font-size:0.7rem; color: var(--text-dim); white-space:nowrap; line-height:1.4;
}
.ini-barra-dia b{ font-size:0.72rem; font-weight:600; color: var(--text); }
.ini-barra.hoy .ini-barra-dia{ background: rgba(var(--ok-rgb), 0.14); color: var(--ok); }
.ini-barra.hoy .ini-barra-dia b{ color: var(--ok); }
.ini-barra.futuro .ini-barra-dia{ opacity:.65; }
.ini-semana-leyenda{ display:flex; gap:16px; margin-top:14px; font-size:0.72rem; color: var(--text-dim); }
.ini-semana-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.ini-semana-leyenda i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.ini-ley-cobrado{ background: var(--ok); }
.ini-ley-agendado{ background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb), 0.6) 0 2px, rgba(var(--accent-rgb), 0.15) 2px 5px); }

/* ---------- Próximo turno ---------- */
.ini-proximo{
  padding: 18px; cursor:pointer;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    var(--bg-panel);
  border-color: color-mix(in srgb, var(--accent-vivido) 35%, var(--line));
  transition: transform .12s ease, border-color .15s ease;
}
.ini-proximo:hover{ border-color: color-mix(in srgb, var(--accent-vivido) 65%, var(--line)); }
.ini-proximo:active{ transform: scale(0.99); }
.ini-proximo.vacio{ cursor:default; background: var(--bg-panel); border-color: var(--line); }
.ini-prox-label{
  display:flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:650; color: var(--accent);
}
.ini-prox-pulso{
  width:8px; height:8px; border-radius:50%; background: var(--accent-vivido); flex-shrink:0;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5);
  animation: ini-pulso 2s ease-out infinite;
}
@keyframes ini-pulso{
  0%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  70%{ box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.ini-prox-cuerpo{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.ini-prox-avatar{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; font-weight:700; color: var(--av-color, var(--accent));
  background: color-mix(in srgb, var(--av-color, var(--accent)) 16%, transparent);
}
.ini-prox-datos{ min-width:0; }
.ini-prox-cliente{ font-size:1.15rem; font-weight:700; letter-spacing:-0.01em; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-prox-serv{ font-size:0.82rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.ini-prox-pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top: 1px solid var(--line);
}
.ini-prox-hora{ font-size:1rem; font-weight:700; color: var(--text); font-variant-numeric: tabular-nums; }
.ini-prox-chip{
  font-size:0.74rem; font-weight:650; padding: 4px 10px; border-radius:999px; white-space:nowrap;
}
.ini-prox-chip.ok{ color: var(--ok); background: rgba(var(--ok-rgb), 0.13); }
.ini-prox-chip.pend{ color: var(--pendiente); background: color-mix(in srgb, var(--pendiente) 14%, transparent); }
.ini-prox-vacio{ margin-top:10px; font-size:0.95rem; color: var(--text); }
.ini-prox-agendar{
  margin-top:14px; width:auto; min-height:auto;
  background: var(--accent-vivido); color:#16181c; border:0; border-radius: 999px;
  padding: 9px 16px; font-size:0.84rem; font-weight:700; text-transform:none; letter-spacing:0; cursor:pointer;
}

/* ---------- Agenda de hoy (línea de tiempo) ---------- */
.ini-agenda{ padding-bottom:8px; }
.ini-timeline{ display:flex; flex-direction:column; }
@media (min-width: 860px){
  .ini-timeline{ max-height: calc(100vh - 420px); min-height:120px; overflow-y:auto; scrollbar-width:none; margin-inline:-6px; padding-inline:6px; }
  .ini-timeline::-webkit-scrollbar{ display:none; }
}
/* .turno-compacto se mantiene para el menú de acciones; acá se pisa su aspecto de tarjeta. */
.ini-timeline .turno-compacto.ini-tl{
  display:grid; grid-template-columns: 48px 18px minmax(0,1fr) auto; align-items:stretch; gap:0 8px;
  background:none; border:0; border-radius:12px; padding: 0 6px; margin: 0 -6px;
  box-shadow:none; transform:none; cursor:pointer;
}
.ini-timeline .turno-compacto.ini-tl:hover{ background: color-mix(in srgb, var(--bg-panel-2) 70%, transparent); }
.ini-timeline .turno-compacto.ini-tl.turno-compacto-tocado{ background: var(--bg-panel-2); transform:none; box-shadow:none; }
.ini-tl-hora{
  padding: 12px 0; font-size:0.84rem; font-weight:700; color: var(--text);
  font-variant-numeric: tabular-nums; display:flex; flex-direction:column; line-height:1.25;
}
.ini-tl-hora small{ font-size:0.66rem; font-weight:500; color: var(--text-dim); }
.ini-tl-eje{ position:relative; display:flex; justify-content:center; }
.ini-tl-eje::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background: var(--line);
}
.ini-tl:first-child .ini-tl-eje::before{ top:18px; }
.ini-tl:last-child .ini-tl-eje::before{ bottom:calc(100% - 18px); }
.ini-tl-punto{
  position:relative; margin-top:15px; width:10px; height:10px; border-radius:50%;
  background: var(--bg-panel); border: 2px solid var(--tl-color, var(--accent));
}
.ini-tl.completado .ini-tl-punto{ background: var(--tl-color, var(--accent)); }
.ini-tl.en-curso .ini-tl-punto{ background: var(--accent-vivido); border-color: var(--accent-vivido); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
.ini-tl-info{ padding: 12px 0; min-width:0; }
.ini-tl-cliente{ font-size:0.92rem; font-weight:650; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ini-tl-serv{ font-size:0.76rem; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.ini-tl-der{ padding: 12px 0; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.ini-tl-precio{ font-size:0.84rem; font-weight:650; color: var(--text); font-variant-numeric: tabular-nums; }
.ini-tl.pasado .ini-tl-hora, .ini-tl.pasado .ini-tl-info, .ini-tl.pasado .ini-tl-precio{ opacity:.55; }

/* Marca de "ahora" entre lo que pasó y lo que viene. */
.ini-tl-ahora{
  position:relative; display:flex; align-items:center; gap:8px;
  margin: 2px 0; padding-left: 56px; height:20px;
}
.ini-tl-ahora::before{
  content:''; position:absolute; left:56px; right:0; top:50%; height:1.5px;
  background: linear-gradient(90deg, var(--accent-vivido), transparent);
}
.ini-tl-ahora span{
  position:relative; font-size:0.68rem; font-weight:700; color: var(--accent);
  background: var(--bg-panel); padding-right:8px;
}
.ini-tl-ahora::after{
  content:''; position:absolute; left:54px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background: var(--accent-vivido);
}
.ini-tl-ahora span{ margin-left:10px; }
.ini-vacio{ color: var(--text-dim); font-size:0.88rem; padding: 6px 0 12px; }

/* ---------- Celular ---------- */
@media (max-width: 859px){
  /* Orden en celular: Hoy → Próximo turno → Acciones → Agenda → Semana. */
  .ini-main, .ini-side{ display:contents; }
  .ini-hero{ order:1; }
  .ini-proximo{ order:2; }
  .ini-acciones{ order:3; }
  .ini-agenda{ order:4; }
  .ini-semana{ order:5; }
}
@media (max-width: 560px){
  .ini-hero{ padding: 18px 16px 0; border-radius:16px; }
  .ini-hero-valor{ font-size:2.2rem; }
  .ini-stats{ margin: 12px -16px 0; }
  .ini-stat{ padding: 12px 12px 14px; }
  .ini-stat:first-child{ padding-left:16px; }
  .ini-stat-valor{ font-size:1.08rem; }
  .ini-acciones{ gap:8px; }
  .ini-accion{ flex-direction:column; align-items:center; text-align:center; gap:8px; padding: 14px 6px 12px; }
  .ini-accion-txt{ align-items:center; }
  .ini-accion-label{ font-size:0.8rem; }
  .ini-accion-hint{ display:none; }
  .ini-card{ padding: 16px 16px 14px; border-radius:16px; }
  .ini-semana-barras{ gap:6px; height:136px; }
  .ini-barra-dia{ flex-direction:column; align-items:center; gap:0; padding: 3px 4px; border-radius:8px; line-height:1.2; }
}

/* ============================================================
   Turnos › Semana — rediseño 4.1
   Una sola fila de navegación, resumen de la semana, los 7 días
   entrando completos en compu (sin el panel lateral) y bloques
   con el color del servicio.
   ============================================================ */
.sem-nav{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sem-rango{
  flex:1; min-width:0; min-height:40px; padding: 8px 12px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-size:0.92rem; font-weight:650; text-transform:none; letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sem-nav .agenda-nav-btn{ background: var(--bg-panel); width:40px; height:40px; }
.sem-hoy{
  min-height:40px; padding: 8px 14px; border-radius: 12px;
  background: transparent; border: 1px solid var(--line); color: var(--accent);
  font-size:0.84rem; font-weight:650; text-transform:none; letter-spacing:0;
}
.sem-hoy.activo{ color: var(--text-dim); border-color: transparent; pointer-events:none; }
.sem-resumen{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin: 0 2px 12px;
  font-size:0.8rem; color: var(--text-dim);
}
.sem-resumen b{ color: var(--text); font-weight:700; font-variant-numeric: tabular-nums; }
.sem-resumen .sem-resumen-pend b{ color: var(--pendiente); }

#tab-historial .semana-grid-scroll{
  background: var(--bg-panel); border-radius: 16px;
  max-height: min(70vh, 720px);
}
.semana-hora-gutter{ background: var(--bg-panel); width:46px; }
.semana-hora-gutter-track{ margin-top:58px; }
.semana-hora-label{ font-weight:600; font-size:0.66rem; right:8px; }
.semana-dia-col{ width:112px; }
.semana-dia-col.hoy .semana-dia-track{ background: rgba(var(--accent-rgb), 0.04); }
.semana-dia-col.pasado .semana-block{ opacity:.6; }
.semana-dia-header-cell{
  height:58px; width:100%; min-height:auto; padding: 6px 2px; border-radius:0;
  background: var(--bg-panel); border:0; border-bottom: 1px solid var(--line);
  gap:0; text-transform:none; letter-spacing:0; font-weight:400; cursor:pointer;
}
.semana-dia-header-cell:hover{ background: var(--bg-panel-2); }
.semana-dia-header-nombre{ font-size:0.66rem; font-weight:600; text-transform:none; letter-spacing:0; }
.semana-dia-header-num{ font-size:1rem; font-weight:700; line-height:1.3; }
.semana-dia-header-cell.hoy .semana-dia-header-num{ width:26px; height:26px; font-size:0.9rem; color:#1a1206; }
.semana-dia-header-cant{ font-size:0.62rem; color: var(--text-dim); margin-top:1px; }
.semana-hora-line{ border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
.semana-ahora-line{ background: var(--accent-vivido); height:2px; z-index:3; }
.semana-ahora-line::before{
  content:''; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background: var(--accent-vivido);
}

/* Bloques de la semana: mismo sistema de color que la agenda del día (ver "Estado y cobro de turnos" al final); acá solo tamaño. */
.agenda-block.semana-block{ border-radius: 7px; padding: 3px 6px 3px 9px; }
.semana-block .agenda-block-cliente{ font-size:0.72rem; font-weight:650; }
.semana-block .agenda-block-hora{ font-size:0.62rem; font-weight:600; }

/* Compu: en la vista Semana la grilla ocupa todo el ancho y los 7 días se reparten parejo. */
@media (min-width: 860px){
  #tab-historial.modo-semana .historial-desktop-grid{ grid-template-columns: minmax(0,1fr); }
  #tab-historial.modo-semana .historial-lateral-panel{ display:none; }
  #tab-historial .semana-grid{ width:100%; min-width: 640px; }
  #tab-historial .semana-dias-cont{ flex:1; min-width:0; }
  #tab-historial .semana-dia-col{ flex:1 1 0; width:auto; min-width:84px; }
}
@media (max-width: 859px){
  .semana-dia-col{ width:96px; }
  .sem-hoy{ padding: 8px 10px; }
}

/* ============================================================
   Estadísticas › Resumen — rediseño 4.1
   Un solo período para todo. Arriba "Te quedó" con la barra de
   dónde vino la plata, después tres números grandes y lo más
   pedido; lo chico (cancelados, señas) solo si no es cero.
   ============================================================ */
#tab-stats .res{ display:flex; flex-direction:column; gap:14px; }
#tab-stats .res-periodo .est-seg{ width:100%; max-width:440px; }
#tab-stats .res-grid{ display:flex; flex-direction:column; gap:14px; }
@media (min-width: 1100px){
  #tab-stats .res-grid{
    display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap:16px; align-items:start;
  }
  #tab-stats .res-plata{ grid-column:1; grid-row:1; }
  #tab-stats .res-kpis{ grid-column:1; grid-row:2; }
  #tab-stats .res-top{ grid-column:2; grid-row: 1 / span 3; }
  #tab-stats .res-extras{ grid-column:1; grid-row:3; }
}

#tab-stats .res-eyebrow{ font-size:0.82rem; font-weight:600; color: var(--text-dim); }
#tab-stats .res-plata{ padding: 20px; }
#tab-stats .res-plata-head{ display:flex; flex-direction:column; gap:4px; margin-bottom:18px; }
#tab-stats .res-plata-valor{
  font-size: clamp(2rem, 5vw, 2.6rem); font-weight:750; letter-spacing:-0.03em; line-height:1.05;
  color: var(--text); font-variant-numeric: tabular-nums;
}
#tab-stats .res-plata-valor.negativo{ color: var(--warn); }
#tab-stats .res-plata-sub{ font-size:0.84rem; color: var(--text-dim); }
#tab-stats .res-plata-sub b{ color: var(--text); font-weight:650; font-variant-numeric: tabular-nums; }

#tab-stats .res-barra{
  display:flex; gap:3px; height:12px; min-width:6px; border-radius:999px; overflow:hidden;
  transition: width .35s ease;
}
#tab-stats .res-barra-gastos{ margin-top:6px; width:100%; background: transparent; }
#tab-stats .res-barra-tramo{ height:100%; min-width:4px; border-radius:999px; }
#tab-stats .res-barra-tramo.turnos, #tab-stats .res-dot.turnos{ background: var(--ok); }
#tab-stats .res-barra-tramo.ventas, #tab-stats .res-dot.ventas{ background: var(--info); }
#tab-stats .res-barra-tramo.manual, #tab-stats .res-dot.manual{ background: var(--accent-vivido); }
#tab-stats .res-barra-tramo.gasto, #tab-stats .res-dot.gasto{ background: var(--warn); }
#tab-stats .res-barra-tramo.gasto{ transition: width .35s ease; }
#tab-stats .res-barra-tramo.vacio{ flex:1; background: var(--bg-panel-2); }

#tab-stats .res-leyenda{ display:flex; flex-direction:column; margin-top:16px; border-top:1px solid var(--line); }
#tab-stats .res-ley-fila{
  display:flex; align-items:center; gap:10px; padding: 11px 0; font-size:0.88rem; color: var(--text);
  border-bottom:1px solid var(--line);
}
#tab-stats .res-ley-fila:last-child{ border-bottom:0; padding-bottom:0; }
#tab-stats .res-ley-fila span{ flex:1; min-width:0; }
#tab-stats .res-ley-fila b{ font-weight:650; font-variant-numeric: tabular-nums; }
#tab-stats .res-ley-gasto b{ color: var(--warn); }
#tab-stats .res-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }

#tab-stats .res-kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
#tab-stats .res-kpi{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--est-radius, 16px);
  padding: 16px;
}
#tab-stats .res-kpi-label{ font-size:0.78rem; font-weight:600; color: var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-stats .res-kpi-valor{
  font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#tab-stats .res-top{ padding:0; overflow:hidden; }
#tab-stats .res-top-servicio{
  display:flex; flex-direction:column; gap:3px; padding: 18px var(--est-pad, 18px);
  background: radial-gradient(120% 100% at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%);
}
#tab-stats .res-top-nombre{ font-size:1.35rem; font-weight:700; letter-spacing:-0.01em; color: var(--text); }
#tab-stats .res-top-sub{ font-size:0.8rem; color: var(--text-dim); }
#tab-stats .res-ganadores{ background:none; border:0; border-top:1px solid var(--line); border-radius:0; margin:0; padding:0; }

#tab-stats .res-extras{ display:flex; flex-wrap:wrap; gap:8px; }
#tab-stats .res-extras:not(:has(.res-extra:not([style*="none"]))){ display:none; }
#tab-stats .res-extra{
  font-size:0.8rem; color: var(--text-dim);
  background: var(--bg-panel); border:1px solid var(--line); border-radius:999px; padding: 6px 12px;
}
#tab-stats .res-extra b{ color: var(--text); font-weight:650; margin-left:4px; font-variant-numeric: tabular-nums; }

@media (max-width: 560px){
  #tab-stats .res-periodo .est-seg{ max-width:none; }
  #tab-stats .res-kpis{ gap:8px; }
  #tab-stats .res-kpi{ padding: 12px; }
  #tab-stats .res-kpi-label{ font-size:0.7rem; white-space:normal; }
  #tab-stats .res-kpi-valor{ font-size:1.2rem; }
}
@media (min-width: 860px) and (max-width: 1440px){
  .ini-accion-hint{ display:none; }
}

/* Tooltip del gráfico: cuando el punto está muy arriba, el cartel va debajo (ver configurarInteraccionGrafico). */
.stat-chart-tooltip.abajo{ transform: translate(-50%, 0); margin-top:14px; }

/* ============================================================
   Estado y cobro de turnos (agenda Día/Semana, listas, Inicio)
   Fondo = estado: pendiente ámbar suave, completado verde.
   Borde izquierdo + pastilla = cobro, con el color de cada medio que ya usa Caja:
   efectivo verde, transferencia azul, seña por Mercado Pago celeste, completado sin cobrar rojo.
   ============================================================ */
:root{
  --cobro-mp: #2aa9e0;
  --cobro-a-cobrar: var(--pendiente);
  --cobro-sena: var(--cobro-mp);
  --cobro-sin-cobrar: var(--danger);
  --cobro-efectivo: var(--ok);
  --cobro-transferencia: var(--info);
  --cobro-cancelado: var(--text-dim);
}
html[data-theme="light"]{ --cobro-mp: #0a86c2; }

.agenda-block{
  --estado-color: var(--pendiente);
  --cobro-color: var(--cobro-a-cobrar);
  background: color-mix(in srgb, var(--estado-color) 11%, var(--bg-panel));
  box-shadow: inset 3px 0 0 var(--cobro-color), inset 0 0 0 1px color-mix(in srgb, var(--estado-color) 16%, transparent);
  border-radius: 7px; padding-left: 12px;
}
.agenda-block.completado{
  --estado-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 17%, var(--bg-panel));
}
.agenda-block.pagado{ box-shadow: inset 3px 0 0 var(--cobro-color), inset 0 0 0 1px color-mix(in srgb, var(--estado-color) 16%, transparent); }
.agenda-block.cobro-sena{ --cobro-color: var(--cobro-sena); }
.agenda-block.cobro-efectivo{ --cobro-color: var(--cobro-efectivo); }
.agenda-block.cobro-transferencia{ --cobro-color: var(--cobro-transferencia); }
/* Completado sin cobrar: borde rojo más grueso y un velo rojo desde la izquierda, que se note de lejos. */
.agenda-block.cobro-sin-cobrar{
  --cobro-color: var(--cobro-sin-cobrar);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--danger) 22%, transparent), transparent 55%),
    color-mix(in srgb, var(--ok) 13%, var(--bg-panel));
  box-shadow: inset 4px 0 0 var(--cobro-color), inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent);
}
.agenda-block .agenda-block-hora{ color: color-mix(in srgb, var(--estado-color) 80%, var(--text)); }
.agenda-block.completado .agenda-block-hora{ color: var(--ok); }
.agenda-block.completado .agenda-block-cliente::before{
  content:''; display:inline-block; width:9px; height:6px; margin: 0 5px 2px 1px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.semana-block.completado .agenda-block-cliente::before{ width:7px; height:4px; margin-right:4px; border-width: 0 0 1.6px 1.6px; }
.agenda-block-sin-cobrar{
  display:block; margin-top:2px; font-size:0.58rem; font-weight:750; letter-spacing:.02em;
  color: var(--danger); text-transform: uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.agenda-block .agenda-block-inner{ padding-right: 18px; }
.agenda-block:not(.compacto) .agenda-block-inner{ padding-right: 0; }
.agenda-block:not(.compacto):has(.cobro-pill) .agenda-block-inner{ padding-right: 96px; }

/* Pastilla de cobro: ícono + texto en el color del medio. */
.cobro-pill{
  --c: var(--cobro-a-cobrar);
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  padding: 2px 8px 2px 6px; border-radius:999px; white-space:nowrap;
  font-size:0.68rem; font-weight:650; line-height:1.3;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.cobro-pill svg{ width:12px; height:12px; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.cobro-pill.cobro-sena{ --c: var(--cobro-sena); }
.cobro-pill.cobro-sin-cobrar{ --c: var(--cobro-sin-cobrar); }
.cobro-pill.cobro-efectivo{ --c: var(--cobro-efectivo); }
.cobro-pill.cobro-transferencia{ --c: var(--cobro-transferencia); }
.cobro-pill.cobro-cancelado{ --c: var(--cobro-cancelado); }

/* En la agenda la pastilla va arriba a la derecha; sin texto queda un círculo con el ícono. */
.agenda-block > .cobro-pill{ position:absolute; top:5px; right:5px; z-index:1; }
.agenda-block > .cobro-pill:not(:has(span)){ padding:0; width:18px; height:18px; justify-content:center; }
.agenda-block > .cobro-pill:not(:has(span)) svg{ width:11px; height:11px; }
.semana-block > .cobro-pill{ top:3px; right:3px; }
.semana-block > .cobro-pill:not(:has(span)){ width:16px; height:16px; }
.semana-block > .cobro-pill:not(:has(span)) svg{ width:10px; height:10px; }
.agenda-block.cobro-sin-cobrar > .cobro-pill{ color:#fff; background: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }
.semana-dia-col.pasado .semana-block.cobro-sin-cobrar{ opacity:.85; }

/* Listas (Ver turnos, lista al lado de la agenda): la pastilla abre la línea de servicios. */
.turno-compacto-servicios{ display:flex; align-items:center; gap:6px; }
.turno-compacto-servicios > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.turno-compacto-servicios .cobro-pill{ font-size:0.64rem; padding: 1px 7px 1px 5px; }
.turno-compacto-servicios .cobro-pill svg{ width:11px; height:11px; }
.turno-compacto.cancelado .turno-compacto-cliente{ text-decoration: line-through; text-decoration-color: var(--text-dim); color: var(--text-dim); }

/* Inicio: la pastilla reemplaza la etiqueta de estado de la línea de tiempo. */
.ini-tl-der .cobro-pill{ font-size:0.66rem; }