/* Estilos de las gráficas (admin-graficas.js).
 *
 * Viven aparte porque las usan DOS pantallas con paletas distintas: la consola
 * de plataforma (/admin, oscura por defecto) y el panel del restaurante, que
 * va dentro de la tienda y es claro. Antes estaban dentro de admin.css, así
 * que reutilizarlas fuera obligaba a cargar toda la hoja de la consola y
 * arrasar con los estilos de la tienda.
 *
 * Aquí no se decide ningún color: todo sale de variables que define quien
 * incrusta la gráfica. Cada contexto pone las suyas.
 */

/* ── Gráficas ────────────────────────────────────────────────────────── */
.g-svg { display: block; width: 100%; overflow: visible; }
.g-rejilla { stroke: var(--borde-suave); stroke-width: 1; }
.g-eje { fill: var(--texto-3); font-size: 15px; font-family: inherit; }
.g-linea { fill: none; stroke: var(--serie-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g-linea-comp { fill: none; stroke: var(--comparacion); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.g-area { fill-opacity: 1; stroke: none; }

/* Tramo en curso: mismo color que la serie, pero punteado y traslúcido.
   Se ve que la línea continúa ahí sin afirmar que ese valor sea el final. */
.g-linea-parcial {
    fill: none;
    stroke: var(--serie-1);
    stroke-width: 2.5;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    opacity: .55;
    vector-effect: non-scaling-stroke;
}
.g-marca-parcial {
    background: repeating-linear-gradient(90deg, var(--serie-1) 0 3px, transparent 3px 6px);
    opacity: .7;
}
.g-area-alto { stop-color: var(--serie-1); stop-opacity: .16; }
.g-area-bajo { stop-color: var(--serie-1); stop-opacity: 0; }
.g-cruz { stroke: var(--texto-3); stroke-width: 1; stroke-dasharray: 3 3; }
.g-punto { fill: var(--serie-1); stroke: var(--sup-1); stroke-width: 2.5; }
.g-punto-comp { fill: var(--comparacion); stroke: var(--sup-1); stroke-width: 2; }
.g-captura { cursor: crosshair; }

.g-col { fill: var(--serie-1); }
.g-col:hover { fill: var(--serie-1); filter: brightness(1.15); }
/* Las horas de madrugada se marcan con el color de aviso Y con etiqueta en el
   tooltip: el color nunca lleva el significado solo. */
.g-col-alerta { fill: var(--serio); }

.g-leyenda { display: flex; gap: 16px; margin-top: 10px; color: var(--texto-2); font-size: 12.5px; }
.g-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.g-marca { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.g-marca-linea { background: var(--serie-1); }
.g-marca-comp { background: var(--comparacion); }

.g-vacia {
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-3); font-size: 13px;
}

.g-spark { width: 100%; height: 34px; }
.g-spark path { fill: none; stroke: var(--serie-1); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .75; }

/* Barras de ranking */
.g-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.g-barras li {
    position: relative; display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 12px;
    padding: 9px 11px; border-radius: 8px; overflow: hidden; cursor: default;
}
.g-barras li[role="button"] { cursor: pointer; }
.g-barras li:hover { background: var(--sup-2); }
.g-barras li:focus-visible { outline: 2px solid var(--serie-1); outline-offset: -2px; }
.g-barra-fondo {
    position: absolute; inset: 0 auto 0 0; z-index: 0;
    background: color-mix(in srgb, var(--serie-1) 14%, transparent);
    border-radius: 8px;
}
.g-barra-nombre, .g-barra-valor { position: relative; z-index: 1; }
.g-barra-nombre { font-size: 13px; font-weight: 600; min-width: 0; }
.g-barra-nombre small { display: block; color: var(--texto-3); font-size: 11.5px; font-weight: 400; }
.g-barra-valor { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Estados */
.g-pila { display: flex; gap: 2px; height: 30px; margin-bottom: 14px; }
/* Sin un mínimo, un estado con el 1% queda en un pixel y no se puede ni
   señalar con el ratón. La proporción se lee en la lista de abajo. */
.g-pila-seg { border-radius: 4px; cursor: default; min-width: 6px; }
.g-lista-estados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.g-lista-estados li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 9px; font-size: 13px; }
.g-le-nombre { color: var(--texto-2); }
.g-le-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.g-le-pct { color: var(--texto-3); font-size: 12px; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

.g-estado-pendiente   { background: var(--texto-3); }
.g-estado-preparando  { background: var(--aviso); }
.g-estado-enviado     { background: var(--serie-1); }
.g-estado-entregado   { background: var(--bien); }
.g-estado-cancelado   { background: var(--critico); }

/* Tooltip */
.g-tip {
    position: fixed; z-index: 9999; display: none; pointer-events: none;
    min-width: 150px; padding: 9px 11px;
    background: var(--sup-1); border: 1px solid var(--borde);
    border-radius: 9px; box-shadow: 0 6px 22px rgba(0,0,0,.14);
    font-size: 12.5px; color: var(--texto);
}
.g-tip-titulo { font-weight: 700; margin-bottom: 5px; }
.g-tip-fila { display: flex; align-items: center; gap: 7px; color: var(--texto-2); }
.g-tip-fila b { margin-left: auto; color: var(--texto); font-variant-numeric: tabular-nums; }
.g-tip-extra { margin-top: 5px; color: var(--texto-3); font-size: 11.5px; }


/* ── Movimiento ──────────────────────────────────────────────────────── */
/* ── Gráficas ────────────────────────────────────────────────────────── */
/* La línea se dibuja de izquierda a derecha: es la dirección en la que se
   lee el tiempo. El área la sigue con retraso para que no compita. */
.g-linea.anim, .g-linea-comp.anim {
    stroke-dasharray: var(--largo);
    stroke-dashoffset: var(--largo);
    animation: dibuja .85s var(--curva-suave) forwards;
}
.g-linea-comp.anim { animation-delay: .12s; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }

.g-area.anim { animation: aparece .6s .35s var(--curva-suave) backwards; }

/* Las columnas crecen desde la base. transform-box + transform-origin son
   necesarios: por defecto un rect de SVG escala desde el origen del lienzo,
   no desde su propia base. */
.g-col.anim {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: crece-alto var(--lento) var(--curva) backwards;
    animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes crece-alto { from { transform: scaleY(0); opacity: .4 } to { transform: none; opacity: 1 } }

/* Las barras de ranking crecen a lo ancho, en el sentido en que se leen. */
.g-barra-fondo {
    transform-origin: left center;
    animation: crece-ancho .55s var(--curva) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes crece-ancho { from { transform: scaleX(0) } to { transform: none } }

.g-barras li { animation: aparece .4s var(--curva-suave) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.g-barras li:hover { transform: translateX(2px); }

/* Los segmentos de estado se despliegan desde la izquierda, como una barra
   que se va llenando. */
.g-pila-seg {
    transform-origin: left center;
    animation: crece-ancho .5s var(--curva) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
    transition: filter var(--rapido) var(--curva-suave);
}
.g-pila-seg:hover { filter: brightness(1.12); }

/* El punto de la gráfica y la cruz no se animan al aparecer: siguen al
   cursor y cualquier retardo se percibe como lag. Solo el radio. */
.g-punto, .g-punto-comp { transition: r .1s var(--curva-suave); }

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.g-tip { animation: tip-entra .12s var(--curva) ; }
@keyframes tip-entra { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }


/* Las barras del ranking comparten la transición de la consola; aquí se
   declara para que también la tengan fuera de /admin. */
.g-barras li {
    transition: background-color .16s cubic-bezier(.22,.61,.36,1);
}