/* ============================================================
   TEMA «COACH» — piel de app de fitness para el panel de FWT.
   Elegido por Pau el 2026-09-23 (concepto 3 de la propuesta).
   Se carga DESPUÉS de app.css y lo re-tematiza entero:
   claro y cálido, acento naranja, tarjetas grandes redondeadas
   que flotan, cabecera con degradado energético.

   🚨 Es una CAPA: no borra nada de app.css. Para quitarlo, se
   quita el <link> de index.html. Fuerza modo CLARO en los tres
   estados de tema (Pau: «clarito, no oscuro»).
   No toca ni una regla de negocio ni ninguna cifra.
   ============================================================ */

/* ---------- tokens Coach, forzados en los tres estados ---------- */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: light;

  --plano: #fbf7f4;
  --superficie: #ffffff;
  --superficie-alta: #ffffff;
  --tinta: #1d1b19;
  --tinta-2: #6b6560;
  --tinta-suave: #a19a93;
  --gridline: #efe9e3;
  --eje: #e2dbd2;
  --borde: rgba(29,27,25,.08);
  --exito-texto: #0a8f4e;

  /* acento naranja de marca (sustituye al azul en enlaces, activos, botones) */
  --acento: #ff5a2c;
  --acento-2: #ff8a3d;
  --enlace: #e0451f;
  --acento-suave: #ffe9df;

  /* rampa secuencial → naranja cálido (barras de una sola serie, funnels, progreso) */
  --sec-100:#ffe0d2; --sec-150:#ffd0bb; --sec-200:#ffbfa2; --sec-250:#ffab88;
  --sec-300:#ff976d; --sec-350:#ff8253; --sec-400:#ff6d3a; --sec-450:#ff5a2c;
  --sec-500:#f24d22; --sec-550:#db4019; --sec-600:#c03714; --sec-650:#a12d0f; --sec-700:#82230b;
  --serie-1: #ff5a2c;

  /* estados: se mantienen semánticos, solo suavizados al mundo cálido */
  --estado-good:#12b981; --estado-warning:#e8a11d; --estado-serious:#f0803a; --estado-critical:#e14b5a;
  --critico-texto:#d3384a;

  --radio: 22px;
  --radio-sm: 12px;
  --sombra: 0 2px 6px rgba(70,40,20,.06);
  --sombra-1: 0 6px 20px rgba(70,40,20,.07), 0 0 0 1px var(--borde);
  --sombra-2: 0 16px 40px rgba(70,40,20,.14), 0 0 0 1px var(--borde);
  --superficie-hover: #fdf5f0;
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
/* y para el visitante con SO en oscuro sin toggle explícito: también claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root[data-theme="dark"] {
    color-scheme: light;
    --plano: #fbf7f4; --superficie: #ffffff; --superficie-alta: #ffffff;
    --tinta: #1d1b19; --tinta-2: #6b6560; --tinta-suave: #a19a93;
    --gridline: #efe9e3; --eje: #e2dbd2; --borde: rgba(29,27,25,.08);
    --acento: #ff5a2c; --enlace: #e0451f; --acento-suave: #ffe9df;
    --serie-1: #ff5a2c;
    --sombra: 0 2px 6px rgba(70,40,20,.06);
    --sombra-1: 0 6px 20px rgba(70,40,20,.07), 0 0 0 1px var(--borde);
    --sombra-2: 0 16px 40px rgba(70,40,20,.14), 0 0 0 1px var(--borde);
    --superficie-hover: #fdf5f0;
  }
}

/* ---------- tipografía general un poco más redonda y amable ---------- */
body { letter-spacing: -.004em; }

/* ---------- barra lateral: blanca, cálida, con la activa en naranja ---------- */
.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--borde);
  color: var(--tinta-2);
  padding: 22px 14px 16px;
}
.logo { color: var(--tinta); }
.logo::before {
  width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(140deg, var(--acento-2), var(--acento));
  box-shadow: 0 4px 14px rgba(255,90,44,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-enlace {
  color: var(--tinta-2); border-radius: 14px; padding: 10px 13px; font-weight: 600;
}
.nav-enlace:hover { background: var(--acento-suave); color: var(--enlace); }
.nav-enlace.activo {
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  color: #fff; font-weight: 700;
  box-shadow: 0 6px 16px rgba(255,90,44,.32);
}
.nav-enlace.activo::before { display: none; }
.nav-icono { opacity: .85; }
.nav-enlace.activo .nav-icono { opacity: 1; }
.btn-tema {
  background: var(--plano); color: var(--tinta-2);
  border: 1px solid var(--borde); border-radius: 14px;
}
.btn-tema:hover { color: var(--tinta); border-color: var(--eje); }

/* ---------- cabecera de vista → banner con degradado energético ---------- */
.vista-cabecera {
  background: linear-gradient(120deg, #ff5a2c 0%, #ff8a3d 58%, #ffb057 100%);
  color: #fff;
  border-radius: 24px;
  padding: 26px 28px;
  margin: 0 0 22px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(255,90,44,.24);
  position: relative; overflow: hidden;
}
.vista-cabecera::after {
  content: ""; position: absolute; right: -60px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.14); pointer-events: none;
}
.vista-cabecera h1 { color: #fff; position: relative; }
.vista-cabecera .subtitulo { color: rgba(255,255,255,.92); position: relative; }
.vista-cabecera a { color: #fff; text-decoration: underline; }

/* ---------- títulos de sección: sin la barrita, más redondos ---------- */
h2 { padding-left: 0; }
h2::before { display: none; }

/* ---------- tarjetas: grandes, redondeadas, que flotan ---------- */
.tile, .tarjeta, .tabla-scroll, .vacio, .aviso-semilla, .reunion-metricas, .fuente-chip {
  border-radius: var(--radio);
}
.tile, .tarjeta {
  box-shadow: var(--sombra-1);
  padding: 20px 22px;
}
.tile-etiqueta { color: var(--tinta-suave); letter-spacing: .05em; font-weight: 700; }
.tile-valor { font-weight: 800; letter-spacing: -.02em; }
.tile-hero .tile-valor { color: var(--acento); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover, .tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
}

/* ---------- tablas dentro de tarjeta redonda ---------- */
.tabla-scroll { box-shadow: var(--sombra-1); }
.tabla th { background: #fff; color: var(--tinta-suave); }
.tabla tbody tr:hover td { background: var(--superficie-hover); }

/* ---------- pills, badges y botones redondos y cálidos ---------- */
.badge-estado { border-radius: 999px; font-weight: 700; }
.btn { border-radius: 14px; font-weight: 650; }
.btn:active { transform: scale(.97); }
.btn-primario {
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  border-color: transparent; color: #fff; font-weight: 750;
  box-shadow: 0 8px 20px rgba(255,90,44,.3);
}
.btn-primario:hover { filter: brightness(1.04); background: linear-gradient(135deg, var(--acento), var(--acento-2)); }
.selector-tipos, .clientes-pestanas { border-radius: 14px; }
.selector-tipos .btn.activo, .clientes-pestanas .btn.activo { background: var(--acento); color: #fff; }
.met-pestana.activa { color: var(--enlace); border-bottom-color: var(--acento); }

/* ---------- barras de progreso hacia objetivo: naranjas y gruesas ---------- */
.inicio-progreso-pista { height: 10px; }
.inicio-progreso-barra { background: linear-gradient(90deg, var(--acento), var(--acento-2)); }

/* ---------- foco accesible en el naranja de marca ---------- */
:focus-visible { outline-color: var(--acento); }

/* ---------- aviso de datos de ejemplo, cálido ---------- */
.aviso-semilla { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 30%, transparent); }

/* ============================================================
   COACH · piezas nuevas: avatares, anillo de progreso y dock flotante
   (markup generado en js/coach-ui.js y en las vistas). 2026-09-23.
   ============================================================ */

/* ---------- avatares con iniciales ---------- */
.cav {
  width: 34px; height: 34px; border-radius: 12px; flex: none;
  display: inline-grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  vertical-align: middle;
}
.cav-fila { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.cav-fila > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cav-1 { background: linear-gradient(140deg,#ff8a3d,#ff5a2c); }
.cav-2 { background: linear-gradient(140deg,#3d8bff,#2d63ff); }
.cav-3 { background: linear-gradient(140deg,#1ecb8f,#0fa06f); }
.cav-4 { background: linear-gradient(140deg,#9b84ff,#7a5cff); }
.cav-5 { background: linear-gradient(140deg,#ff86ab,#f2568a); }
.cav-6 { background: linear-gradient(140deg,#22c0d4,#128fa4); }
.cav-7 { background: linear-gradient(140deg,#f7b733,#e79a1a); }
.cav-8 { background: linear-gradient(140deg,#ff6f66,#f2564f); }

/* que el avatar quepa en las etiquetas de las barras (columna más ancha en Coach) */
.barras .barra-fila { grid-template-columns: minmax(150px, 190px) 1fr minmax(60px, auto); }

/* ---------- anillo de progreso ---------- */
.cav-anillos { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
.cav-anillo {
  flex: 1 1 320px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 22px; box-shadow: var(--sombra-1);
  padding: 20px 24px; display: flex; align-items: center; gap: 22px;
  animation: cav-rise .6s cubic-bezier(.22,1,.32,1) both;
}
.cav-ring { position: relative; width: 118px; height: 118px; flex: none; }
.cav-ring svg { display: block; }
.cav-ring-base { stroke: var(--gridline); }
.cav-ring-lab { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.cav-ring-lab b { display: block; font-size: 26px; font-weight: 840; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cav-ring-lab span { font-size: 11px; color: var(--tinta-suave); font-weight: 600; }
.cav-anillo-k { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.cav-anillo-v { font-size: 28px; font-weight: 840; letter-spacing: -.025em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.cav-anillo-s { color: var(--tinta-2); font-size: 13px; }
.cav-anillo-ok .cav-ring-lab b { color: var(--estado-good); }
@keyframes cav-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 🔄 DOCK RETIRADO (Pau, 2026-09-23): «pon el menú a la izquierda con las palabras de cada cosa,
   no abajo en el medio con solo iconos». La barra vuelve a la izquierda con icono + texto — la usa
   la sidebar coach de arriba (líneas ~75-98: blanca, activa en naranja). No se toca el HTML: los
   textos de cada enlace ya están en index.html; solo dejamos de esconderlos. */

@media (prefers-reduced-motion: reduce) {
  .cav-anillo { animation: none; }
  .nav-enlace:hover { transform: none; }
}