/* panel-vivo.css — capa visual compartida del panel nuevo ("Panel vivo", PR 1,
 * propuesta 2026-10-31 aprobada por Harold).
 *
 * Qué hace, en orden:
 *   1. Un color por sección del menú. panel-vivo.js pone data-gp-sec en <html>
 *      (según la tab activa) y en cada .sidebar-section; acá ese atributo
 *      redefine --accent/--accent-light, así botones, badges, barrita activa y
 *      logo toman el tono de la sección sin tocar ninguna página.
 *      html[data-gp-sec] (0,1,1) le gana al :root inline de cada página (0,1,0).
 *   2. Movimiento que informa: entrada en escalera de tarjetas (solo en la carga
 *      inicial, ver data-gpv-settled), brillo cuando un número cambia
 *      (.gpv-flash), globito que late una vez al subir (.gpv-pop), puntito vivo
 *      (.gpv-live), anillos y barras de avance (.gpv-ring / .gpv-bar).
 *   3. Apagado: "Modo tranquilo" (html[data-gpv-motion="off"], botón en el
 *      sidebar) y prefers-reduced-motion apagan SOLO lo que agrega este archivo.
 *      No se toca animation/transition de las páginas (Aprobar redes, skeletons).
 *
 * Se enlaza DESPUÉS de panel-sidebar.css y antes del <style> de cada página.
 */

/* ── 1. Color por sección ──────────────────────────────────────────────── */
/* Tokens PROPIOS de identidad (--sec / --sec-light).
   NO se pisa --accent. Varias páginas lo usan con sentido semántico (azul = "informativo", ej.
   .badge-blue de comercios-bandeja distingue approved de published, o
   "En su dominio" vs "En Google" en seo-blog) y en Productos quedarían verdes,
   iguales al estado de éxito (hallazgo Codex, PR #1077). La identidad se aplica
   explícitamente a logo, barrita activa, topbar, botón primario y anillos. */
html[data-gp-sec="hoy"]       { --sec: #2563eb; --sec-light: #eff6ff; --sec-ink: #1d4ed8; }
html[data-gp-sec="clientes"]  { --sec: #0891b2; --sec-light: #ecfeff; --sec-ink: #0e7490; }
html[data-gp-sec="trabajo"]   { --sec: #7c3aed; --sec-light: #f5f3ff; --sec-ink: #6d28d9; }
html[data-gp-sec="ventas"]    { --sec: #ea580c; --sec-light: #fff7ed; --sec-ink: #c2410c; }
html[data-gp-sec="productos"] { --sec: #16a34a; --sec-light: #f0fdf4; --sec-ink: #15803d; }
html[data-gp-sec="plata"]     { --sec: #ca8a04; --sec-light: #fefce8; --sec-ink: #a16207; }
/* Salud va gris: el rojo queda reservado para alarmas reales. */
html[data-gp-sec="salud"]     { --sec: #64748b; --sec-light: #f1f5f9; --sec-ink: #475569; }

/* Dónde se ve la identidad de sección (y solo ahí). */
html[data-gp-sec] .sidebar-logo .logo-mark { background: var(--sec); }
html[data-gp-sec] .nav-item.active::before { background: var(--sec); }
html[data-gp-sec] .btn-primary { background: var(--sec); border-color: var(--sec); }
html[data-gp-sec] .btn-primary:hover { background: var(--sec-ink); border-color: var(--sec-ink); }

/* Etiqueta de cada sección del menú con su punto de color. */
.sidebar-section[data-gp-sec] .sidebar-label { display: flex; align-items: center; gap: 6px; }
.sidebar-section[data-gp-sec] .sidebar-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gpv-dot, #555); flex-shrink: 0;
}
.sidebar-section[data-gp-sec="hoy"]       { --gpv-dot: #3b82f6; }
.sidebar-section[data-gp-sec="clientes"]  { --gpv-dot: #06b6d4; }
.sidebar-section[data-gp-sec="trabajo"]   { --gpv-dot: #8b5cf6; }
.sidebar-section[data-gp-sec="ventas"]    { --gpv-dot: #f97316; }
.sidebar-section[data-gp-sec="productos"] { --gpv-dot: #22c55e; }
.sidebar-section[data-gp-sec="plata"]     { --gpv-dot: #eab308; }
.sidebar-section[data-gp-sec="salud"]     { --gpv-dot: #94a3b8; }
/* La sección activa muestra su etiqueta en color; las demás siguen grises. */
html[data-gp-sec="hoy"]       .sidebar-section[data-gp-sec="hoy"]       .sidebar-label,
html[data-gp-sec="clientes"]  .sidebar-section[data-gp-sec="clientes"]  .sidebar-label,
html[data-gp-sec="trabajo"]   .sidebar-section[data-gp-sec="trabajo"]   .sidebar-label,
html[data-gp-sec="ventas"]    .sidebar-section[data-gp-sec="ventas"]    .sidebar-label,
html[data-gp-sec="productos"] .sidebar-section[data-gp-sec="productos"] .sidebar-label,
html[data-gp-sec="plata"]     .sidebar-section[data-gp-sec="plata"]     .sidebar-label,
html[data-gp-sec="salud"]     .sidebar-section[data-gp-sec="salud"]     .sidebar-label { color: var(--gpv-dot); }

/* Barra superior teñida con el color de la sección + título con su rayita. */
html[data-gp-sec] .topbar {
  background: linear-gradient(90deg, var(--sec-light) 0%, var(--surface, #fff) 60%);
}
html[data-gp-sec] .topbar-title { border-left: 3px solid var(--sec); padding-left: 10px; }

/* ── 2. Movimiento ─────────────────────────────────────────────────────── */
@keyframes gpv-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gpv-flash  { 0% { box-shadow: inset 0 0 0 999px var(--gpv-flash-color, #eff6ff); } 100% { box-shadow: inset 0 0 0 999px transparent; } }
@keyframes gpv-pop    { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes gpv-pulso  { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@keyframes gpv-confeti { to { opacity: 0; } }

/* Entrada en escalera: solo mientras la página arranca (panel-vivo.js marca
   data-gpv-settled a los 3 s). Lo que se re-renderiza después NO vuelve a
   animarse (Sala de Control refresca cada 25 s, Hoy cada 2 min). */
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) .card,
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) .grupo-card,
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) .plata-cell,
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) .kanban-card,
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) .sc-card,
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) .metric-card,
html:not([data-gpv-settled]):not([data-gpv-motion="off"]) [data-gp-module] {
  animation: gpv-entrar .45s cubic-bezier(.2,.7,.2,1) both;
}
html:not([data-gpv-settled]) :is(.card, .grupo-card, .plata-cell, .kanban-card, .sc-card, .metric-card, [data-gp-module]):nth-child(2) { animation-delay: .06s; }
html:not([data-gpv-settled]) :is(.card, .grupo-card, .plata-cell, .kanban-card, .sc-card, .metric-card, [data-gp-module]):nth-child(3) { animation-delay: .12s; }
html:not([data-gpv-settled]) :is(.card, .grupo-card, .plata-cell, .kanban-card, .sc-card, .metric-card, [data-gp-module]):nth-child(4) { animation-delay: .18s; }
html:not([data-gpv-settled]) :is(.card, .grupo-card, .plata-cell, .kanban-card, .sc-card, .metric-card, [data-gp-module]):nth-child(5) { animation-delay: .24s; }
html:not([data-gpv-settled]) :is(.card, .grupo-card, .plata-cell, .kanban-card, .sc-card, .metric-card, [data-gp-module]):nth-child(n+6) { animation-delay: .3s; }

/* Botones y filas: la transición de 0,1 s era invisible; 0,18 s se siente. */
html:not([data-gpv-motion="off"]) :is(.btn, .action-pill, .nav-item, .kanban-card, tbody tr) { transition-duration: .18s; }
html:not([data-gpv-motion="off"]) :is(.btn, .action-pill):active { transform: scale(.96); }
html:not([data-gpv-motion="off"]) .btn-primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--sec, #2563eb) 35%, transparent); }

/* Brillo de "esto cambió" (lo pone panel-vivo.js al detectar texto nuevo). */
html:not([data-gpv-motion="off"]) .gpv-flash { --gpv-flash-color: var(--sec-light, #eff6ff); animation: gpv-flash 1.2s ease-out; border-radius: 6px; }
/* Globito del menú que late una vez cuando sube el número. */
html:not([data-gpv-motion="off"]) .gpv-pop { animation: gpv-pop .5s ease-out; }

/* Puntito vivo: "esto se actualiza solo". */
.gpv-live {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a;
  vertical-align: middle; margin-right: 5px;
}
html:not([data-gpv-motion="off"]) .gpv-live { animation: gpv-pulso 1.8s infinite; }
.gpv-live.rojo { background: #dc2626; animation-name: none; }
.gpv-live.gris { background: #9ca3af; animation-name: none; }

/* Anillo de avance (conic). --p lo anima panel-vivo.js (0..100). */
.gpv-ring {
  --p: 0; --gpv-ring-color: var(--sec, #2563eb); --gpv-ring-size: 54px;
  width: var(--gpv-ring-size); height: var(--gpv-ring-size); border-radius: 50%; position: relative; flex-shrink: 0;
  background: conic-gradient(var(--gpv-ring-color) calc(var(--p) * 1%), var(--border, #e8e8e6) 0);
  display: grid; place-items: center;
}
.gpv-ring::after {
  content: attr(data-texto); position: absolute; inset: 6px; border-radius: 50%;
  background: var(--surface, #fff); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--text, #1a1a1a); letter-spacing: -.3px;
}
.gpv-ring.lleno { --gpv-ring-color: #16a34a; }
.gpv-ring-label { font-size: 10.5px; color: var(--text-3, #9a9a9a); text-align: center; margin-top: 4px; line-height: 1.2; }
.gpv-rings { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.gpv-rings > div { text-align: center; }

/* Barra de avance. */
.gpv-bar { height: 8px; border-radius: 4px; background: var(--border, #e8e8e6); overflow: hidden; }
.gpv-bar > i { display: block; height: 100%; width: 0; background: var(--sec, #2563eb); border-radius: 4px; }
html:not([data-gpv-motion="off"]) .gpv-bar > i { transition: width 1.2s cubic-bezier(.2,.7,.2,1); }

/* Racha estilo GitHub: un cuadradito por día. */
.gpv-racha { display: flex; gap: 3px; flex-wrap: wrap; }
.gpv-racha i { width: 12px; height: 12px; border-radius: 3px; background: #16a34a; opacity: .9; }
.gpv-racha i.off { background: var(--border, #e8e8e6); }
.gpv-racha i.hoy { outline: 2px solid var(--sec, #2563eb); outline-offset: 1px; }

/* Confeti (canvas que crea panel-vivo.js por 1,6 s). */
.gpv-confeti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 20000; animation: gpv-confeti .3s 1.3s forwards; }

/* Botón "Modo tranquilo" del sidebar. */
.gpv-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 14px; margin-top: 2px;
  background: none; border: 0; color: var(--sidebar-text, #9b9b9b); font: inherit; font-size: 11px; cursor: pointer; text-align: left;
}
.gpv-toggle:hover { color: #ddd; }
.gpv-toggle .sw { width: 24px; height: 14px; border-radius: 7px; background: #444; position: relative; flex-shrink: 0; transition: background .18s; }
.gpv-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #bbb; transition: transform .18s; }
.gpv-toggle[aria-pressed="true"] .sw { background: var(--sec, #2563eb); }
.gpv-toggle[aria-pressed="true"] .sw::after { transform: translateX(10px); background: #fff; }

/* ── 3. Apagado por preferencia del sistema ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card, .grupo-card, .plata-cell, .kanban-card, .sc-card, .metric-card, [data-gp-module],
  .gpv-flash, .gpv-pop, .gpv-live, .gpv-confeti-canvas { animation: none !important; }
  .gpv-bar > i { transition: none !important; }
}