/* Marca GDS del panel: colores y tipografías sacados de la landing (growthdentalsystem.com/vsl---agendamiento-page).
   Todos los archivos del panel usan estas variables: para ajustar la marca se toca solo este archivo.
   Reglas de uso en panel-gds/DESIGN.md. */
:root {
  color-scheme: dark;
  /* Fondos: verde oscuro (no negro), de más hundido a más elevado. Encima del fondo van luces verdes (.app) */
  --fondo: #0E1612;
  --hundido: #121C17;
  --tarjeta: #17231D;
  --tarjeta-2: #1D2B24;
  --activo: #25362E;
  --linea: #22302A;
  --borde: #2A3B33;
  --borde-fuerte: #3A4F44;
  /* Texto */
  --texto: #EDF2EF;
  --texto-2: #C7D4CC;
  --texto-3: #98A79F;
  --texto-4: #80908A;
  --texto-off: #4A5650;
  /* Marca */
  --acento: #4A7A63;
  --menta: #8FC4AA;
  --menta-claro: #D7ECE2;
  --menta-hielo: #EAF5EF;
  --rango: rgba(74, 122, 99, 0.38);
  /* Estados: verde = bien, rojo = mal, ámbar = atención o falta marcar */
  --verde: #3DD68C;
  --verde-texto: #8CEBBE;
  --verde-fondo: rgba(61, 214, 140, 0.14);
  --verde-borde: #1F5A43;
  --rojo: #F06A6A;
  --rojo-texto: #FFB0AA;
  --rojo-fondo: rgba(240, 106, 106, 0.14);
  --rojo-borde: #5A2B28;
  --ambar: #F2B84B;
  --ambar-texto: #FFD98A;
  --ambar-fondo: rgba(242, 184, 75, 0.14);
  --ambar-borde: #5C4A1F;
  --ambar-oscuro: #B98A2E;
  --gris: #80908A;
  --gris-texto: #C7D4CC;
  --gris-fondo: rgba(128, 144, 138, 0.16);
  /* Categorías (tipo de cita y series de gráficos) */
  --cat-virtual: #8FC4AA;
  --cat-limpieza: #7CC6D6;
  --cat-carillas: #D9907F;
  --cat-implantes: #B9A0E0;
  --cat-ortodoncia: #93A9E2;
  --cat-alineadores: #E2B07A;
  --serie-2: #93A9E2;
  --serie-3: #6F9C86;
  /* Dorado «wins»: solo para logros y empujones (recuadro de wins, barra de bono) */
  --oro: #E8C468;
  --oro-claro: #FBE7A8;
  --oro-oscuro: #A9822C;
  --oro-fondo: rgba(232, 196, 104, 0.12);
  --oro-borde: rgba(232, 196, 104, 0.55);
  /* Forma y relieve: bordes redondeados y tarjetas con volumen (luz arriba, sombra abajo) */
  --r-chico: 12px;
  --r: 16px;
  --r-tarjeta: 20px;
  --r-grande: 24px;
  --brillo-sup: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 55%);
  --relieve: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 36px -22px rgba(0, 0, 0, 0.85);
  --relieve-alto: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3), 0 26px 44px -22px rgba(0, 0, 0, 0.9);
  --nav-activo: linear-gradient(90deg, rgba(143, 196, 170, 0.2), rgba(143, 196, 170, 0.05));
  --nav-activo-sombra: inset 0 0 0 1px rgba(143, 196, 170, 0.28), 0 0 18px -6px rgba(143, 196, 170, 0.45);
  --mov: cubic-bezier(0.22, 1, 0.36, 1);
  /* Tipografía: títulos en Space Grotesk mayúscula (como la landing), texto y datos en Plus Jakarta Sans */
  --f-titulo: 'Space Grotesk', system-ui, sans-serif;
  --f-texto: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto); }
/* Fondo con luces: degradados verdes fijos detrás de todo (no se mueven al bajar). Van en una capa fija aparte:
   se pinta una sola vez y el scroll no la repinta (background-attachment: fixed repintaba la pantalla entera). */
.app::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(900px 620px at 88% -8%, rgba(143, 196, 170, 0.17), transparent 62%),
  radial-gradient(760px 560px at 22% 4%, rgba(74, 122, 99, 0.22), transparent 64%),
  radial-gradient(820px 640px at 4% 92%, rgba(61, 214, 140, 0.08), transparent 60%),
  radial-gradient(700px 520px at 96% 78%, rgba(74, 122, 99, 0.1), transparent 62%),
  linear-gradient(180deg, #13201A, var(--fondo) 65%); }
.lateral { background: rgba(14, 22, 18, 0.72); }
.lateral nav a { transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms var(--mov); }
.lateral nav a:hover { background-color: rgba(143, 196, 170, 0.08); color: var(--texto); transform: translateX(2px); }
::selection { background: rgba(143, 196, 170, 0.32); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
* { scrollbar-color: var(--borde-fuerte) transparent; }
input, select { caret-color: var(--menta); }
input::placeholder { color: var(--texto-4); }
a { color: var(--menta-claro); text-underline-offset: 3px; }
a:hover { color: #FFFFFF; }
button { font: inherit; transition: filter 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
button[data-dc-click]:hover { filter: brightness(1.15); }
#dc-raiz { font-variant-numeric: tabular-nums; }

/* Títulos */
.titulo-1 { margin: 0; font-family: var(--f-titulo); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.titulo-2 { margin: 0; font-family: var(--f-titulo); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }

/* Tarjetas de indicadores: todas del mismo alto y con el mismo texto (nombre, valor, contexto). Las clave solo se
   distinguen por el brillo menta y, a veces, por ocupar más ancho. Rojo y verde quedan para la variación y los estados. */
.kpi { position: relative; isolation: isolate; box-sizing: border-box; min-height: 184px; background: var(--brillo-sup), var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--relieve); transition: transform 220ms var(--mov), box-shadow 220ms ease-out, border-color 220ms ease-out; }
/* Luz que sigue al mouse (--mx / --my los pone comun.js) */
.kpi::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 220ms ease-out; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(143, 196, 170, 0.14), transparent 65%); }
.kpi:hover { transform: translateY(-3px); border-color: var(--borde-fuerte); box-shadow: var(--relieve-alto); }
.kpi:hover::before { opacity: 1; }
.kpi--clave { border-color: rgba(143, 196, 170, 0.42); background: linear-gradient(180deg, rgba(143, 196, 170, 0.09), rgba(143, 196, 170, 0) 70%), var(--brillo-sup), var(--tarjeta); box-shadow: var(--relieve), 0 14px 34px -18px rgba(143, 196, 170, 0.5); }
.kpi--clave:hover { border-color: rgba(143, 196, 170, 0.65); box-shadow: var(--relieve-alto), 0 18px 40px -16px rgba(143, 196, 170, 0.6); }
.kpi-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 2.6em; }
.kpi-nombre { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--texto-2); }
.kpi--clave .kpi-nombre { color: var(--menta); }
.kpi-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.kpi-valores { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi-valor { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--f-titulo); font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--texto); }
.kpi--clave .kpi-valor { color: var(--menta-hielo); }
.kpi-sub { min-height: 1.4em; font-size: 12px; color: var(--texto-4); }
/* % dentro de la métrica: pastilla al lado del número, misma familia tipográfica, baja de peso para no competir con el valor */
.kpi-pct { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(143, 196, 170, 0.32); background: rgba(143, 196, 170, 0.12); font-family: var(--f-titulo); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--menta-claro); }
.kpi-pct:empty { display: none; }
.kpi-meta { align-self: flex-start; white-space: nowrap; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--linea); color: var(--texto-2); }
.kpi-meta:empty { display: none; }
.kpi-meta[data-estado="cumple"] { background: var(--verde-fondo); color: var(--verde-texto); }
.kpi-meta[data-estado="cerca"] { background: var(--ambar-fondo); color: var(--ambar-texto); }
.kpi-meta[data-estado="falta"] { background: var(--rojo-fondo); color: var(--rojo-texto); }
.kpi-spark { display: block; width: 100%; height: 34px; margin-top: auto; overflow: visible; }
.kpi-linea { fill: none; stroke: var(--menta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi-area { fill: var(--menta); fill-opacity: 0.12; stroke: none; }
.pill { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

/* Cajas (paneles con fondo de tarjeta): mismo relieve que las tarjetas, sin moverse */
.caja { box-shadow: var(--relieve); }
.rend-card, .rend-mini, .ini-anillo, .fc-seccion, .rec-cabeza { box-shadow: var(--relieve); transition: transform 220ms var(--mov), box-shadow 220ms ease-out, border-color 220ms ease-out; }
.rend-card:hover, .ini-anillo:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); box-shadow: var(--relieve-alto); }
/* Botones: se encienden al pasar el mouse y se hunden al tocar */
button:not(:disabled) { transition: filter 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms var(--mov), box-shadow 150ms ease-out; }
button:not(:disabled):active { transform: scale(0.97); }

/* Menú lateral: grupos desplegables (Inicio, Motor Agencia, Motor Clínicas, Administración) */
.nav-grupo { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 0 10px; border: none; border-radius: 10px; background: transparent; color: var(--texto-3); font-family: var(--f-titulo); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.nav-grupo:hover { color: var(--texto); }
.nav-grupo svg { transition: transform 150ms ease-out; }
.nav-grupo[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }

/* Bloques desplegables (cualquier sección con título): clic en el título para plegar o abrir */
h2.titulo-2[data-plegable] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
h2.titulo-2[data-plegable]::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: translateY(-2px) rotate(45deg); transition: transform 150ms ease-out; }
h2.titulo-2[data-plegable][aria-expanded="false"]::after { transform: translateY(0) rotate(-45deg); }
h2.titulo-2[data-plegable]:hover { color: #FFFFFF; }
[data-plegado] { display: none !important; }

/* Calendario de citas */
.titulo-cal { margin: 0; font-family: var(--f-titulo); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; }
.cal-dia-num { display: flex; justify-content: space-between; align-items: baseline; width: 100%; min-height: 28px; padding: 0 2px; border: none; border-radius: 6px; background: transparent; color: var(--texto); cursor: pointer; text-align: left; }
.cal-dia-num:hover { background: var(--activo); }
.cal-mas { align-self: flex-start; min-height: 24px; padding: 0 6px; border: none; border-radius: 6px; background: transparent; color: var(--menta-claro); font-size: 11px; font-weight: 600; cursor: pointer; }
/* Semana como en GHL: columna de horas + 7 días; la cabecera queda fija al bajar */
.cal-semana-scroll { overflow: auto; max-height: 72vh; border: 1px solid var(--borde); border-radius: 16px; background: var(--hundido); }
.cal-semana { display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); min-width: 900px; }
.cal-esquina, .cal-col-cab { position: sticky; top: 0; z-index: 3; background: var(--tarjeta); border-bottom: 1px solid var(--borde-fuerte); }
.cal-col-cab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: none; border-bottom: 1px solid var(--borde-fuerte); border-left: 1px solid var(--borde); color: var(--texto); cursor: pointer; }
.cal-horas { display: flex; flex-direction: column; }
.cal-horas span { box-sizing: border-box; padding: 2px 6px 0 0; font-size: 11px; color: var(--texto-4); text-align: right; font-variant-numeric: tabular-nums; }
.cal-col { position: relative; border-left: 1px solid var(--borde); background-image: linear-gradient(to bottom, var(--linea) 1px, transparent 1px); }
.cal-cita { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 2px 6px; border: none; border-radius: 6px; overflow: hidden; font: inherit; font-size: 11px; line-height: 1.25; text-align: left; cursor: pointer; z-index: 1; }
.cal-cita strong, .cal-cita span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cita strong { font-weight: 600; }
.cal-cita span { color: var(--texto-3); }
.cal-cita:hover { z-index: 2; filter: brightness(1.2); }
.cal-ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--rojo); z-index: 2; pointer-events: none; }
.cal-ahora::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); }

/* Ficha del lead: clínica bien visible y datos con la etiqueta arriba del valor */
.ficha-clinica { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(143, 196, 170, 0.45); background: var(--activo); color: var(--menta-claro); font-family: var(--f-titulo); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.ficha-datos { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ficha-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha-datos dt { color: var(--texto-3); font-size: 12px; }
.ficha-datos dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; }

/* Ficha comercial de la clínica: capa encima del panel del lead, mismo ancho; la flecha vuelve al lead */
.fc-capa { position: fixed; top: 0; right: 0; bottom: 0; z-index: 62; width: min(520px, 100vw); box-sizing: border-box; overflow-y: auto; padding: 18px 20px 32px; display: flex; flex-direction: column; gap: 16px; background: var(--hundido); border-left: 1px solid var(--borde-fuerte); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45); }
.fc-cabeza { display: flex; align-items: flex-start; gap: 12px; }
.fc-volver { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--texto); cursor: pointer; }
.fc-volver:hover { border-color: var(--menta); color: var(--menta-claro); }
.fc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--menta-claro); }
.fc-titulo { margin: 0; font-family: var(--f-titulo); font-size: 22px; font-weight: 700; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
.fc-rapidos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fc-seccion { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); }

/* Ficha de clientes: ficha de la clínica */
.ficha-clinica--link { cursor: pointer; font-size: 15px; }
.ficha-clinica--link:hover { border-color: var(--menta); filter: brightness(1.15); }
.ficha-clinica-ver { font-family: var(--f-texto); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.rec-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 18px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--borde); }
.rec-rapido { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--hundido); border: 1px solid rgba(143, 196, 170, 0.35); box-shadow: 0 0 24px rgba(143, 196, 170, 0.08); }
.rec-rapido-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.rec-rapido-valor { font-family: var(--f-titulo); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--texto); overflow-wrap: anywhere; }
.rec-campos { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 20px; padding: 16px; border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--borde); font-size: 14px; }
.rec-campos > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rec-campos dt { font-size: 12px; color: var(--texto-3); }
.rec-campos dd { margin: 0; color: var(--texto); overflow-wrap: anywhere; line-height: 1.5; }
.rec-input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--borde-fuerte); background: var(--hundido); color: var(--texto); font: inherit; }
/* Comisión y descuentos: % de GDS y tabla de tratamientos. Descuentos = desplegable con casillas que se abre debajo
   del botón (dentro de la celda: la tabla tiene scroll horizontal y recortaría un menú flotante) */
.com-caja { display: flex; flex-direction: column; gap: 12px; }
.com-pct { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--hundido); border: 1px solid rgba(143, 196, 170, 0.35); box-shadow: 0 0 24px rgba(143, 196, 170, 0.08); max-width: 640px; }
.com-tabla td { vertical-align: top; }
.com-num { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.com-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--menta-claro); background: var(--rango); border: 1px solid var(--acento); white-space: nowrap; }
.com-desc-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 260px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--borde-fuerte); background: var(--hundido); color: var(--texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.com-desc-menu { margin-top: 6px; width: 290px; max-width: 100%; box-sizing: border-box; padding: 6px; background: var(--hundido); border: 1px solid var(--borde-fuerte); border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.com-desc-op { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: none; border-radius: 10px; background: transparent; color: var(--texto); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.com-desc-op:hover { background: var(--activo); }
.com-quitar { min-width: 40px; min-height: 40px; border-radius: 11px; border: 1px solid var(--borde); background: transparent; color: var(--texto-3); font: inherit; cursor: pointer; }
.com-quitar:hover { color: var(--rojo-texto); border-color: var(--rojo-borde); }
.com-agregar { align-self: flex-start; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px dashed var(--menta); background: transparent; color: var(--menta-claro); font: inherit; font-weight: 600; cursor: pointer; }

/* Rendimiento comercial: comisión, KPI contra meta, posiciones y alertas */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rend-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rend-total { grid-column: span 2; }
@media (max-width: 640px) { .rend-total { grid-column: auto; } }
.kpi--alerta { border-color: var(--ambar-borde); }
.kpi--alerta .kpi-valor { color: var(--ambar-texto); }
.rend-barra { display: block; height: 10px; margin-top: auto; border-radius: 999px; background: var(--borde); overflow: hidden; }
.rend-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acento), var(--menta)); box-shadow: 0 0 12px rgba(143, 196, 170, 0.5); transition: width 600ms ease-out; }
.rend-resumen { margin: 0; color: var(--texto-2); font-size: 14px; }
.rend-resumen strong { color: var(--menta-claro); }
.rend-scroll { position: relative; overflow-x: auto; border-radius: 16px; border: 1px solid var(--borde); background: var(--tarjeta); }
.rend-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.rend-tabla caption { padding: 10px 12px 4px; text-align: left; font-size: 12px; color: var(--texto-3); }
.rend-tabla th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; }
.rend-tabla td { padding: 8px 10px; border-top: 1px solid var(--linea); vertical-align: middle; }
.rend-tabla .rend-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rend-tabla td[data-estado="cumple"] { color: var(--verde-texto); font-weight: 700; }
.rend-tabla td[data-estado="cerca"] { color: var(--ambar-texto); font-weight: 700; }
.rend-tabla td[data-estado="falta"] { color: var(--rojo-texto); font-weight: 700; }
.rend-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--linea); color: var(--texto-2); white-space: nowrap; }
.rend-estado[data-estado="cumple"] { background: var(--verde-fondo); color: var(--verde-texto); }
.rend-estado[data-estado="cerca"] { background: var(--ambar-fondo); color: var(--ambar-texto); }
.rend-estado[data-estado="falta"] { background: var(--rojo-fondo); color: var(--rojo-texto); }
.rend-pos { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--f-titulo); font-weight: 700; color: var(--texto-2); background: var(--linea); }
.rend-pos--1 { background: var(--menta); color: var(--fondo); box-shadow: 0 0 14px rgba(143, 196, 170, 0.55); }
.rend-pos--2, .rend-pos--3 { background: var(--activo); color: var(--menta-claro); border: 1px solid rgba(143, 196, 170, 0.45); }
.rend-alertas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rend-alerta { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--tarjeta); font-size: 14px; }
.rend-alerta strong { color: var(--texto); }
.rend-alerta span { color: var(--texto-2); }
.rend-alerta[data-nivel="falta"] { border-color: var(--rojo-borde); background: var(--rojo-fondo); }
.rend-alerta[data-nivel="falta"] strong { color: var(--rojo-texto); }
.rend-alerta[data-nivel="cerca"] { border-color: var(--ambar-borde); background: var(--ambar-fondo); }
.rend-alerta[data-nivel="cerca"] strong { color: var(--ambar-texto); }
.rend-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: var(--tarjeta); border: 1px solid var(--borde); }
.rend-monto { font-family: var(--f-titulo); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--menta-claro); font-variant-numeric: tabular-nums; }
.rend-mini { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--hundido); border: 1px solid var(--borde); font-size: 12px; color: var(--texto-3); }
.rend-mini strong { font-family: var(--f-titulo); font-size: 22px; color: var(--texto); font-variant-numeric: tabular-nums; }
.rend-link { min-height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--hundido); color: var(--menta-claro); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.rend-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); }

/* Estilo juego (todos los menús): barra que se llena hacia la meta o contra el período anterior, con brillo al cumplir */
@keyframes juego-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.juego-barra { display: block; height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.juego-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acento), var(--menta)); box-shadow: 0 0 10px rgba(143, 196, 170, 0.45); transform-origin: left center; animation: juego-llenar 900ms cubic-bezier(0.22, 1, 0.36, 1); transition: width 600ms ease-out; }
.juego-barra[data-estado="cumple"] > span { background: linear-gradient(90deg, var(--acento), var(--verde)); box-shadow: 0 0 14px rgba(61, 214, 140, 0.6); }
.juego-barra[data-estado="cerca"] > span { background: linear-gradient(90deg, var(--ambar-oscuro), var(--ambar)); box-shadow: 0 0 10px rgba(242, 184, 75, 0.45); }
.juego-barra[data-estado="falta"] > span { background: linear-gradient(90deg, #8A3A36, var(--rojo)); box-shadow: 0 0 10px rgba(240, 106, 106, 0.4); }
.kpi--logro { border-color: rgba(61, 214, 140, 0.5); box-shadow: 0 0 0 1px rgba(61, 214, 140, 0.12), 0 16px 34px -18px rgba(61, 214, 140, 0.55); }
.kpi--logro .kpi-meta { box-shadow: 0 0 12px rgba(61, 214, 140, 0.35); }

/* Mi rendimiento (closer): ganado, próximo objetivo y KPI cumplidos */
.juego-hero { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.6fr) auto; gap: 14px; padding: 20px; border-radius: 22px; border: 1px solid rgba(143, 196, 170, 0.45); background: radial-gradient(120% 140% at 0% 0%, rgba(143, 196, 170, 0.16), rgba(143, 196, 170, 0) 60%), var(--tarjeta); box-shadow: 0 18px 44px -22px rgba(143, 196, 170, 0.55); }
.juego-ganado, .juego-objetivo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.juego-objetivo { padding-left: 14px; border-left: 1px solid var(--borde); }
.juego-label { font-family: var(--f-titulo); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--menta); }
.juego-monto { font-family: var(--f-titulo); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--menta-hielo); font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(143, 196, 170, 0.45); }
.juego-sub { font-size: 12px; color: var(--texto-3); }
.juego-cuenta { font-family: var(--f-titulo); font-size: 18px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.juego-pista { position: relative; display: block; height: 16px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.juego-pista > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acento), var(--menta) 70%, var(--menta-hielo)); box-shadow: 0 0 20px rgba(143, 196, 170, 0.6); transform-origin: left center; animation: juego-llenar 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
.juego-pista > i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--fondo); opacity: 0.55; }
.juego-objetivo[data-gano="true"] .juego-label { color: var(--verde-texto); }
.juego-objetivo[data-gano="true"] .juego-pista > span { background: linear-gradient(90deg, var(--acento), var(--verde)); box-shadow: 0 0 22px rgba(61, 214, 140, 0.7); }
.juego-txt { margin: 0; font-size: 14px; color: var(--texto-2); }
.juego-anillo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--borde); text-align: center; }
@media (max-width: 860px) { .juego-hero { grid-template-columns: 1fr; } .juego-objetivo, .juego-anillo { padding: 14px 0 0; border-left: none; border-top: 1px solid var(--borde); } }

/* Inicio: métricas primero; la proyección cumplida, en un anillo al costado (abajo en pantallas chicas) */
.ini-fin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 12px; align-items: start; }
.ini-anillo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px; border-radius: 18px; border: 1px solid rgba(143, 196, 170, 0.32); background: var(--tarjeta); text-align: center; }
.ini-anillo[data-estado="cerca"] { border-color: var(--ambar-borde); }
.ini-anillo[data-estado="falta"] { border-color: var(--rojo-borde); }
.ini-anillo-label { font-family: var(--f-titulo); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--menta); }
.ini-anillo-graf { position: relative; width: 132px; height: 132px; }
.ini-anillo-graf--chico { width: 108px; height: 108px; }
.ini-anillo-graf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ini-anillo-fondo { fill: none; stroke: var(--borde); stroke-width: 10; }
.ini-anillo-arco { fill: none; stroke: var(--menta); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(143, 196, 170, 0.6)); transition: stroke-dasharray 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.ini-anillo[data-estado="cumple"] .ini-anillo-arco, .juego-anillo[data-estado="cumple"] .ini-anillo-arco { stroke: var(--verde); filter: drop-shadow(0 0 7px rgba(61, 214, 140, 0.65)); }
.ini-anillo[data-estado="cerca"] .ini-anillo-arco, .juego-anillo[data-estado="cerca"] .ini-anillo-arco { stroke: var(--ambar); filter: drop-shadow(0 0 6px rgba(242, 184, 75, 0.5)); }
.ini-anillo[data-estado="falta"] .ini-anillo-arco, .juego-anillo[data-estado="falta"] .ini-anillo-arco { stroke: var(--rojo); filter: drop-shadow(0 0 6px rgba(240, 106, 106, 0.45)); }
.ini-anillo-marca { stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; }
.ini-anillo-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-titulo); font-size: 28px; font-weight: 700; color: var(--menta-hielo); font-variant-numeric: tabular-nums; }
.ini-anillo-graf--chico .ini-anillo-pct { font-size: 24px; }
.ini-anillo-monto { font-family: var(--f-titulo); font-size: 14px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ini-anillo-txt { margin: 0; font-size: 12px; line-height: 1.4; color: var(--texto-3); }
.ini-anillo-ritmo { font-size: 12px; color: var(--texto-4); }
.ini-anillo-ritmo:empty { display: none; }
.ini-anillo-ir { min-height: 36px; padding: 0 10px; border: none; background: none; color: var(--menta-claro); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 900px) {
  .ini-fin-layout { grid-template-columns: 1fr; }
  .ini-anillo { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; justify-items: start; padding: 14px 16px; text-align: left; }
  .ini-anillo > * { grid-column: 2; }
  .ini-anillo > .ini-anillo-graf { grid-column: 1; grid-row: 1 / span 6; width: 96px; height: 96px; }
  .ini-anillo .ini-anillo-pct { font-size: 22px; }
  .ini-anillo-ir { padding: 0; }
}

/* Inicio: proyección que se llena (la marca blanca es dónde habría que estar hoy), barras en las tarjetas, ranking y agenda de hoy */
.ini-barra > i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
.ini-meta { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.ini-barra { position: relative; overflow: visible; }
.ini-proy { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ini-fila-barra { display: flex; align-items: center; gap: 10px; }
.ini-fila-barra .rend-barra { flex: 1; margin: 0; }
.ini-fila-barra strong { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.ini-fila-barra[data-estado="cumple"] strong { color: var(--verde-texto); }
.ini-fila-barra[data-estado="cerca"] strong { color: var(--ambar-texto); }
.ini-fila-barra[data-estado="falta"] strong { color: var(--rojo-texto); }
.ini-ranking { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ini-ranking li { display: flex; align-items: center; gap: 12px; }
.ini-ranking-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ini-ranking-cab { display: flex; justify-content: space-between; gap: 10px; }
.ini-ranking-cab strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-ranking-total { font-family: var(--f-titulo); font-weight: 700; color: var(--menta-claro); font-variant-numeric: tabular-nums; }
.ini-ranking .rend-barra { margin: 0; height: 8px; }
.ini-ranking-sub { font-size: 12px; color: var(--texto-3); }
.ini-alerta { align-items: center; justify-content: space-between; }
.ini-hoy { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--borde); background: var(--tarjeta); overflow: hidden; }
.ini-hoy-cita { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 48px; padding: 8px 14px; border: none; border-top: 1px solid var(--linea); background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.ini-hoy-cita:first-child { border-top: none; }
.ini-hoy-cita:hover { background: var(--activo); }
.ini-hoy-hora { flex: none; min-width: 46px; font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
.ini-hoy-nombre { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.ini-hoy-nombre strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-hoy-nombre span { font-size: 12px; color: var(--texto-3); }

/* Finanzas: gastos por categoría y casilla de comisión cobrada */
.fin-cat { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.fin-cat .rend-barra { margin: 0; height: 8px; }
.fin-cat-n { color: var(--texto-2); }
.fin-cat-v { font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-cat-v small { font-family: var(--f-texto); font-weight: 500; color: var(--texto-4); }
@media (max-width: 520px) { .fin-cat { grid-template-columns: 1fr auto; } .fin-cat .rend-barra { grid-column: 1 / -1; grid-row: 2; } }
.fin-cobro { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ambar-borde); background: var(--ambar-fondo); color: var(--ambar-texto); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.fin-cobro-caja { width: 14px; height: 14px; border-radius: 4px; border: 2px solid currentColor; box-sizing: border-box; }
.fin-cobro[aria-pressed="true"] { border-color: rgba(143, 196, 170, 0.5); background: var(--verde-fondo); color: var(--verde-texto); }
.fin-cobro[aria-pressed="true"] .fin-cobro-caja { background: currentColor; box-shadow: inset 0 0 0 2px var(--verde-fondo); }
@media (prefers-reduced-motion: reduce) { .rend-barra > span, .juego-barra > span, .juego-pista > span, .ini-anillo-arco { transition: none; animation: none; } }
.fin-cot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); }
.fin-cot-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.fin-cot strong { font-family: var(--f-titulo); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--texto); }
.fin-cot-sub { font-size: 12px; color: var(--texto-4); }

/* Selector de clínicas (igual en todos los menús): buscador y «Solo» para quedarse con una clínica */
.cli-busca { width: 100%; box-sizing: border-box; min-height: 36px; margin: 0 0 6px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 13px; }
.cli-busca:focus-visible { outline: 2px solid var(--menta); outline-offset: 1px; }
.cli-fila { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.cli-fila:hover { background: var(--tarjeta); }
.cli-solo { flex: none; min-height: 30px; padding: 0 10px; border-radius: 6px; border: none; background: transparent; color: var(--menta-claro); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0; }
.cli-fila:hover .cli-solo, .cli-solo:focus-visible { opacity: 1; }
.cli-solo:hover { background: var(--activo); }
@media (hover: none) { .cli-solo { opacity: 1; } }
/* Grupos del filtro de clínicas (admin): título del grupo con «Marcar todas» */
.cli-grupo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px 4px 10px; }
.cli-fila + .cli-grupo { border-top: 1px solid var(--linea); margin-top: 6px; }
.cli-grupo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cli-grupo-txt strong { font-family: var(--f-titulo); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--menta-claro); }
.cli-grupo-txt span { font-size: 11px; color: var(--texto-3); }
.cli-marcar { flex: none; min-height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cli-marcar:hover { background: var(--activo); color: var(--texto); }

/* ===== Sistema visual v4 (C2): componentes comunes para todos los menús ===== */

/* Grilla simétrica de tarjetas: --n columnas en escritorio (las pone grillaEstilo() de comun.js según cuántas hay);
   en tablet y celular, 2 columnas y la última, si queda sola, ocupa la fila entera. Nunca queda una tarjeta huérfana. */
.grilla { display: grid; gap: 12px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grilla > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .grilla .kpi { padding: 14px; } .grilla .kpi-valor { font-size: 26px; } }
/* Bloques lado a lado (ej. ranking junto a clínicas activas): dos columnas iguales, una en pantallas chicas */
.bloques { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.bloques > * { min-width: 0; }
@media (max-width: 1000px) { .bloques { grid-template-columns: 1fr; } }

/* Métricas secundarias: un solo bloque de ancho completo debajo de las clave, en lista que se pliega (el estado se
   guarda en el navegador; lo maneja dcPostRender con data-sec="<clave>"). */
.sec { border-radius: var(--r-tarjeta); border: 1px solid var(--borde); background: var(--brillo-sup), var(--tarjeta); box-shadow: var(--relieve); overflow: hidden; }
.sec-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border: none; background: transparent; color: var(--texto-2); font-family: var(--f-titulo); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; cursor: pointer; }
.sec-cab:hover { color: var(--texto); background: rgba(143, 196, 170, 0.05); }
.sec-n { padding: 2px 9px; border-radius: 999px; background: var(--linea); font-family: var(--f-texto); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--texto-2); }
.sec-flecha { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--texto-3); border-bottom: 2px solid var(--texto-3); transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--mov); }
.sec-cab[aria-expanded="false"] .sec-flecha { transform: translateY(0) rotate(-45deg); }
.sec-lista { margin: 0; padding: 0 20px 6px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.sec[data-sec-cerrado] .sec-lista { display: none; }
.sec-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre valor" "sub delta"; gap: 3px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linea); }
.sec-nombre { grid-area: nombre; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.sec-valor { grid-area: valor; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-titulo); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sec-valor .kpi-pct { padding: 1px 7px; font-size: 12px; }
.sec-sub { grid-area: sub; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--texto-4); }
.sec-delta { grid-area: delta; justify-self: end; }
@media (max-width: 1100px) { .sec-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sec-lista { grid-template-columns: 1fr; } .sec-cab, .sec-lista { padding-left: 16px; padding-right: 16px; } }

/* Filtros y desplegables con la marca: todo <select> (categorías de Finanzas, closer, clínica, rol…). En navegadores
   que lo permiten (Chrome) la lista que se abre también es propia: fondo hundido, opciones redondeadas, elegida en menta. */
select { cursor: pointer; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
select:hover { border-color: rgba(143, 196, 170, 0.6) !important; }
select:focus-visible { outline: none; border-color: var(--menta) !important; box-shadow: 0 0 0 3px rgba(143, 196, 170, 0.22); }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; gap: 10px; }
  select::picker-icon { color: var(--menta); transition: rotate 200ms var(--mov); }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) { margin-top: 6px; padding: 6px; border: 1px solid var(--borde-fuerte); border-radius: var(--r); background: var(--hundido); color: var(--texto); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); max-height: 340px; }
  select option { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--texto-2); font-size: 14px; }
  select option:hover, select option:focus-visible { background: var(--activo); color: #FFFFFF; outline: none; }
  select option:checked { background: var(--rango); color: var(--menta-hielo); font-weight: 600; }
  select option::checkmark { color: var(--menta); }
}
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; filter: invert(86%) sepia(18%) saturate(420%) hue-rotate(95deg); }
input[type="date"]:hover, input[type="text"]:hover, input[type="number"]:hover, input[type="search"]:hover, textarea:hover { border-color: rgba(143, 196, 170, 0.5) !important; }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--menta) !important; box-shadow: 0 0 0 3px rgba(143, 196, 170, 0.22); }

/* Recuadro dorado de «wins»: logros y empujones (bono, récord, «te faltan N para…»). Dorado = premio; no es estado. */
@keyframes wins-brillo { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(220%) skewX(-18deg); } }
.wins { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-tarjeta); border: 1px solid var(--oro-borde); background: radial-gradient(120% 140% at 0% 0%, rgba(232, 196, 104, 0.2), rgba(232, 196, 104, 0) 58%), var(--brillo-sup), #1B2118; box-shadow: var(--relieve), 0 0 0 1px rgba(232, 196, 104, 0.14), 0 18px 46px -18px rgba(232, 196, 104, 0.5); }
.wins::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 236, 180, 0.16), transparent); animation: wins-brillo 5s ease-in-out infinite; }
.wins-label { font-family: var(--f-titulo); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
.wins-monto { font-family: var(--f-titulo); font-size: 40px; font-weight: 700; line-height: 1.05; color: var(--oro-claro); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(232, 196, 104, 0.45); }
.wins-txt { margin: 0; font-size: 14px; color: var(--texto-2); }
.wins-barra { display: block; height: 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); overflow: hidden; }
.wins-barra > span { position: relative; display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro) 70%, var(--oro-claro)); box-shadow: 0 0 16px rgba(232, 196, 104, 0.6); transform-origin: left center; animation: juego-llenar 1100ms var(--mov); overflow: hidden; }
/* Mi rendimiento: el próximo objetivo (bono) es el recuadro de wins */
.juego-objetivo .juego-label { color: var(--oro); }
.juego-objetivo .juego-pista > span, .juego-objetivo[data-gano="true"] .juego-pista > span { background: linear-gradient(90deg, var(--oro-oscuro), var(--oro) 70%, var(--oro-claro)); box-shadow: 0 0 20px rgba(232, 196, 104, 0.6); }
.juego-objetivo[data-gano="true"] .juego-label { color: var(--oro-claro); text-shadow: 0 0 14px rgba(232, 196, 104, 0.6); }

/* Barras que se llenan (todas) y un destello que las recorre una vez al aparecer */
@keyframes barra-destello { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.rend-barra > span { transform-origin: left center; animation: juego-llenar 900ms var(--mov); }
.rend-barra > span, .juego-barra > span, .juego-pista > span { position: relative; overflow: hidden; }
.rend-barra > span::after, .juego-barra > span::after, .juego-pista > span::after, .wins-barra > span::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: barra-destello 2.4s ease-in-out 0.8s 1 backwards; }
/* Tarjeta que cumplió la meta: un destello al aparecer */
.kpi--logro::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(140, 235, 190, 0.16) 50%, transparent 65%); background-size: 250% 100%; animation: logro-destello 1600ms var(--mov) 300ms both; }
@keyframes logro-destello { from { background-position: 120% 0; } to { background-position: -40% 0; } }
/* Entrada suave de las tarjetas al cambiar de menú */
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* (fill backwards: al terminar no deja un transform fijo, así el hover puede levantar la tarjeta) */
.kpi, .sec, .rend-card { animation: aparecer 420ms var(--mov) backwards; }

@media (prefers-reduced-motion: reduce) {
  .kpi, .sec, .wins, .rend-card, .wins-barra > span, .wins::after, .kpi--logro::after,
  .rend-barra > span::after, .juego-barra > span::after, .juego-pista > span::after, .wins-barra > span::after { animation: none; }
  .kpi:hover, .rend-card:hover, .ini-anillo:hover, .lateral nav a:hover { transform: none; }
}

/* ===== Finanzas (C3) ===== */
.kpi-ir { align-self: flex-start; margin-top: auto; min-height: 32px; padding: 0; border: none; background: none; color: var(--menta-claro); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kpi-ir:hover { color: var(--menta-hielo); text-decoration: underline; text-underline-offset: 3px; }
.sec-pie, .sec-cuerpo { padding: 4px 20px 16px; }
.sec-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.sec[data-sec-cerrado] .sec-pie, .sec[data-sec-cerrado] .sec-cuerpo { display: none; }
.fin-h3 { margin: 0; font-family: var(--f-titulo); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--menta); }
.fin-chico { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--menta-claro); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out; }
.fin-chico:hover { background: var(--activo); border-color: var(--menta); }
.fin-boton { min-height: 44px; padding: 0 16px; border-radius: 12px; border: none; background: var(--acento); color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(143, 196, 170, 0.6); transition: transform 150ms var(--mov), filter 150ms ease-out; }
.fin-boton:hover { transform: translateY(-1px); filter: brightness(1.12); }
.fin-bloque { display: flex; flex-direction: column; gap: 12px; }
.fin-bloque-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.fin-total { font-family: var(--f-titulo); font-size: 22px; color: var(--menta-claro); font-variant-numeric: tabular-nums; }
.fin-cats { gap: 4px; padding: 10px 12px; }
.fin-cats:empty { display: none; }
/* Barra de categoría que filtra el listado: toda la fila es el botón */
.fin-cat--filtro { width: 100%; min-height: 40px; padding: 4px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out; }
.fin-cat--filtro:hover { background: rgba(143, 196, 170, 0.06); }
.fin-cat--filtro[aria-pressed="true"] { background: var(--rango); border-color: var(--acento); }
.fin-cat--filtro[aria-pressed="true"] .fin-cat-n { color: var(--menta-hielo); font-weight: 600; }
/* Chips de opciones (estado del reparto) */
.fin-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 12px; border: 1px solid var(--borde); background: var(--tarjeta); }
.fin-chips button { min-height: 34px; padding: 0 12px; border: none; border-radius: 9px; background: transparent; color: var(--texto-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 150ms ease-out, color 150ms ease-out; }
.fin-chips button:hover { color: var(--texto); background: rgba(143, 196, 170, 0.06); }
.fin-chips button[aria-pressed="true"] { background: var(--acento); color: #FFFFFF; }
/* Estado del reparto de cada ingreso */
.fin-rep { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fin-rep::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fin-rep[data-est="repartido"] { background: var(--verde-fondo); color: var(--verde-texto); }
.fin-rep[data-est="pendiente"] { background: var(--ambar-fondo); color: var(--ambar-texto); }
.fin-rep[data-est="reservas"] { background: var(--oro-fondo); color: var(--oro-claro); }
.fin-cat[data-est="pendiente"] .rend-barra > span { background: linear-gradient(90deg, var(--ambar-oscuro), var(--ambar)); box-shadow: 0 0 12px rgba(242, 184, 75, 0.45); }
.fin-cat[data-est="reservas"] .rend-barra > span { background: linear-gradient(90deg, var(--oro-oscuro), var(--oro)); box-shadow: 0 0 12px rgba(232, 196, 104, 0.45); }
/* Reparto en el formulario */
#fin-ingresos .rend-link { white-space: nowrap; }
.fin-cats .fin-cat-v, .fin-cat[data-est] .fin-cat-v { min-width: 120px; text-align: right; }
.fin-rep-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--hundido); border: 1px solid var(--borde-fuerte); }
.fin-quitar { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--texto-3); font: inherit; font-size: 18px; cursor: pointer; }
.fin-quitar:hover { color: var(--rojo-texto); border-color: var(--rojo-texto); }
.fin-queda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--rango); font-size: 13px; color: var(--texto-2); }
.fin-queda strong { font-family: var(--f-titulo); font-size: 20px; color: var(--menta-hielo); font-variant-numeric: tabular-nums; }
.fin-queda[data-mal="true"] { background: var(--rojo-fondo); }
.fin-queda[data-mal="true"] strong { color: var(--rojo-texto); }
/* Ganancia por categoría: dona sobre el cash neto. Al pasar por un arco o por su fila de la leyenda, el centro muestra
   la categoría, su monto y su % (y los demás arcos se apagan). */
.fin-dona { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 20px; }
.fin-dona-graf { position: relative; width: 200px; height: 200px; }
.fin-dona-graf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fin-dona-graf .fin-dona-capa { position: absolute; inset: 0; pointer-events: none; }
.fin-dona-capa .fin-dona-arco { pointer-events: stroke; }
.fin-dona-fondo { fill: none; stroke: var(--borde); stroke-width: 16; }
.fin-dona-arco { fill: none; stroke-width: 16; cursor: pointer; transition: stroke-width 180ms var(--mov), opacity 180ms ease-out; animation: dona-aparecer 900ms var(--mov) backwards; }
@keyframes dona-aparecer { from { opacity: 0; stroke-width: 4; } }
.fin-dona-centro { position: absolute; inset: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none; }
.fin-dona-centro span { font-size: 12px; line-height: 1.25; color: var(--texto-3); }
.fin-dona-centro strong { font-family: var(--f-titulo); font-size: 24px; font-weight: 700; color: var(--menta-hielo); font-variant-numeric: tabular-nums; }
.fin-dona-det { display: none; }
.fin-dona-ley { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fin-dona-ley li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: 10px; font-size: 13px; cursor: default; transition: background 150ms ease-out; }
.fin-dona-ley li:hover, .fin-dona-ley li:focus-visible { background: rgba(143, 196, 170, 0.08); outline: none; }
.fin-dona-color { width: 12px; height: 12px; border-radius: 4px; }
.fin-dona-n { color: var(--texto-2); }
.fin-dona-v { font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-dona-v small { font-family: var(--f-texto); font-weight: 500; color: var(--texto-4); }
.fin-dona:has([data-i]:hover, li[data-i]:focus-visible) .fin-dona-total { display: none; }
.fin-dona:has([data-i]:hover, li[data-i]:focus-visible) .fin-dona-arco { opacity: 0.35; }
.fin-dona:has([data-i="0"]:hover, li[data-i="0"]:focus-visible) :is(.fin-dona-det, .fin-dona-arco)[data-i="0"],
.fin-dona:has([data-i="1"]:hover, li[data-i="1"]:focus-visible) :is(.fin-dona-det, .fin-dona-arco)[data-i="1"],
.fin-dona:has([data-i="2"]:hover, li[data-i="2"]:focus-visible) :is(.fin-dona-det, .fin-dona-arco)[data-i="2"],
.fin-dona:has([data-i="3"]:hover, li[data-i="3"]:focus-visible) :is(.fin-dona-det, .fin-dona-arco)[data-i="3"],
.fin-dona:has([data-i="4"]:hover, li[data-i="4"]:focus-visible) :is(.fin-dona-det, .fin-dona-arco)[data-i="4"],
.fin-dona:has([data-i="5"]:hover, li[data-i="5"]:focus-visible) :is(.fin-dona-det, .fin-dona-arco)[data-i="5"] { display: flex; opacity: 1; stroke-width: 20; }
@media (max-width: 560px) { .fin-dona { grid-template-columns: 1fr; justify-items: center; } .fin-dona-ley { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fin-dona-arco { animation: none; transition: none; } .fin-boton:hover { transform: none; } }

/* ===== Inicio (C7): bloques de a dos con su acceso al menú ===== */
.ini-bloque { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ini-bloque-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.ini-bloque-cab .kpi-ir { margin-top: 0; align-self: center; }
.ini-nota { font-size: 12px; color: var(--texto-3); }
.ini-nota:empty { display: none; }
/* Proyección: anillo + texto arriba, cumplimiento por línea abajo */
.ini-proy-cuerpo { display: flex; align-items: center; gap: 18px; }
.ini-proy-cuerpo .ini-anillo-graf { flex: none; width: 112px; height: 112px; }
.ini-proy-cuerpo .ini-anillo-pct { font-size: 24px; }
.ini-proy-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ini-proy-txt .ini-anillo-monto { font-size: 16px; color: var(--texto); }
.ini-proyeccion[data-estado="cumple"] .ini-anillo-arco { stroke: var(--verde); filter: drop-shadow(0 0 7px rgba(61, 214, 140, 0.65)); }
.ini-proyeccion[data-estado="cerca"] .ini-anillo-arco { stroke: var(--ambar); filter: drop-shadow(0 0 6px rgba(242, 184, 75, 0.5)); }
.ini-proyeccion[data-estado="falta"] .ini-anillo-arco { stroke: var(--rojo); filter: drop-shadow(0 0 6px rgba(240, 106, 106, 0.45)); }
.ini-lineas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ini-lineas li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(60px, 1fr) 44px; align-items: center; gap: 10px; min-height: 34px; border-top: 1px solid var(--linea); font-size: 13px; }
.ini-lineas li:first-child { border-top: none; }
.ini-linea-n { font-weight: 600; color: var(--texto-2); }
.ini-linea-v { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-linea-v small { color: var(--texto-4); font-size: 12px; }
@media (max-width: 560px) { .ini-lineas li { grid-template-columns: minmax(0, 1fr) auto 44px; } .ini-lineas .rend-barra { display: none; } }
/* Cash collected por mes: barras horizontales, el período elegido resaltado y la marca de la proyección */
.ini-meses { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ini-meses li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 92px; align-items: center; gap: 10px; font-size: 13px; }
.ini-mes-n { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ini-mes-v { text-align: right; font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.ini-mes-barra { position: relative; display: block; height: 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45); }
.ini-mes-barra > span { position: relative; display: block; height: 100%; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(143, 196, 170, 0.35), rgba(143, 196, 170, 0.6)); transform-origin: left center; animation: juego-llenar 900ms var(--mov); }
.ini-mes-barra > i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: #FFFFFF; opacity: 0.75; }
.ini-meses li[data-actual="true"] .ini-mes-n, .ini-meses li[data-actual="true"] .ini-mes-v { color: var(--menta-hielo); }
.ini-meses li[data-actual="true"] .ini-mes-barra > span { background: linear-gradient(90deg, var(--acento), var(--menta)); box-shadow: 0 0 14px rgba(143, 196, 170, 0.55); }
.ini-meses li[data-cumple="true"] .ini-mes-barra > span { background: linear-gradient(90deg, #1F8F5B, var(--verde)); box-shadow: 0 0 14px rgba(61, 214, 140, 0.5); }
.ini-mes-barra > span::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: barra-destello 2.4s ease-in-out 0.8s 1 backwards; }
/* Conteo de citas de hoy */
.ini-cuentas { display: flex; flex-wrap: wrap; gap: 8px; }
.ini-cuenta { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--rango); font-size: 13px; color: var(--texto-2); }
.ini-cuenta strong { font-family: var(--f-titulo); font-size: 18px; color: var(--menta-hielo); font-variant-numeric: tabular-nums; }
.ini-bloque .ini-hoy { background: transparent; }
.ini-bloque .rend-alertas { margin: 0; }
/* Cotización del dólar */
.ini-cot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 18px; border-radius: var(--r-tarjeta); background: var(--brillo-sup), var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--relieve); }
/* Inicio del closer y el doctor */
.ini-wins { justify-content: center; min-height: 100%; box-sizing: border-box; }
.ini-wins .kpi-ir { margin-top: 4px; }
.ini-est { font-size: 12px; font-weight: 600; color: var(--texto-3); white-space: nowrap; }
.ini-est[data-estado="cumple"] { color: var(--verde-texto); }
.ini-est[data-estado="cerca"] { color: var(--ambar-texto); }
.ini-est[data-estado="falta"] { color: var(--rojo-texto); }
.ini-pend-tipo { flex: none; min-width: 92px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; background: var(--ambar-fondo); color: var(--ambar-texto); }
.ini-pend-tipo[data-nivel="falta"] { background: var(--rojo-fondo); color: var(--rojo-texto); }
@media (prefers-reduced-motion: reduce) { .ini-mes-barra > span, .ini-mes-barra > span::after { animation: none; } }
.ini-bloque > .fin-dona, .ini-bloque > sc-if > .fin-dona { flex: 1; }

/* --- Vidrio (v5): tarjetas y paneles traslúcidos sobre las luces del fondo, con canto iluminado arriba y sombra abajo.
   Leve: da volumen y separa lo tangible (métricas, paneles) del fondo sin perder lo minimalista. --- */
:root {
  --vidrio: linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 38%, rgba(255, 255, 255, 0) 62%), rgba(29, 45, 37, 0.82);
  --vidrio-borde: rgba(205, 235, 220, 0.11);
  --canto: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 1px 0 0 rgba(255, 255, 255, 0.035), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  --relieve: var(--canto), 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 40px -22px rgba(0, 0, 0, 0.95);
  --relieve-alto: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.35), 0 30px 50px -22px rgba(0, 0, 0, 1);
}
/* Sin backdrop-filter: el desenfoque por tarjeta era lo más caro al hacer scroll; el fondo casi opaco da el mismo tono */
.kpi, .sec, .rend-card, .rend-mini { background: var(--vidrio); border-color: var(--vidrio-borde); }
.kpi--clave { background: linear-gradient(180deg, rgba(143, 196, 170, 0.11), rgba(143, 196, 170, 0) 70%), var(--vidrio); }
/* Las cajas traen el fondo en línea (var(--tarjeta)): el vidrio lo pisa */
.caja { background: var(--vidrio) !important; border-color: var(--vidrio-borde) !important; }
.kpi:hover, .rend-card:hover { border-color: rgba(205, 235, 220, 0.2); }

/* --- Borde vivo: una luz menta fija en el canto de los bloques importantes (KPI clave, proyección del Inicio, hero de
   Mi rendimiento, semáforo y cualquier .borde-vivo). Quieta: girarla repintaba cada cuadro y hacía pesado el scroll. --- */
.ini-proyeccion, .juego-hero, .borde-vivo { position: relative; }
.kpi--clave:not(.kpi--logro):not(.kpi--oro)::after, .ini-proyeccion::after, .juego-hero::after, .borde-vivo::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from 300deg, transparent 0deg 250deg, rgba(143, 196, 170, 0.15) 290deg, rgba(215, 236, 226, 0.85) 330deg, rgba(143, 196, 170, 0.15) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.6; transition: opacity 220ms ease-out;
}
.kpi--clave:hover::after { opacity: 0.95; }

/* Admin viendo como otro usuario */
.ver-como { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--ambar-borde); background: var(--ambar-fondo); color: var(--ambar-texto); font-size: 13px; box-shadow: var(--canto); }
.ver-como strong { color: #FFFFFF; font-weight: 700; }
.ver-como button { min-height: 36px; padding: 0 14px; border-radius: var(--r-chico); border: 1px solid var(--ambar-borde); background: rgba(0, 0, 0, 0.25); color: var(--ambar-texto); font-weight: 700; cursor: pointer; }

/* Botón de sonidos (menú lateral) */
.sonido-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; min-height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borde); background: transparent; color: var(--texto-3); font-size: 12px; cursor: pointer; }
.sonido-btn[aria-pressed="true"] { color: var(--menta-claro); border-color: rgba(143, 196, 170, 0.35); }

/* Métrica en dorado (Flujo de caja neto del Inicio admin): el mismo recuadro de wins de la vista closer */
.kpi--oro { overflow: hidden; border-color: var(--oro-borde); background: radial-gradient(120% 140% at 0% 0%, rgba(232, 196, 104, 0.2), rgba(232, 196, 104, 0) 58%), var(--brillo-sup), #1B2118; box-shadow: var(--relieve), 0 0 0 1px rgba(232, 196, 104, 0.14), 0 18px 46px -18px rgba(232, 196, 104, 0.5); }
.kpi--oro:hover { border-color: var(--oro); box-shadow: var(--relieve-alto), 0 0 0 1px rgba(232, 196, 104, 0.22), 0 22px 52px -16px rgba(232, 196, 104, 0.62); }
.kpi--oro::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 196, 104, 0.14), transparent 65%); }
.kpi--oro::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(255, 236, 180, 0.16), transparent); background-size: auto; pointer-events: none; animation: wins-brillo 5s ease-in-out infinite; }
.kpi--oro .kpi-nombre { font-family: var(--f-titulo); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
.kpi--oro .kpi-valor { color: var(--oro-claro); text-shadow: 0 0 24px rgba(232, 196, 104, 0.45); }
.kpi--oro.kpi--alerta .kpi-valor { color: var(--ambar-texto); text-shadow: none; }
.kpi--oro .kpi-pct { border-color: rgba(232, 196, 104, 0.4); background: var(--oro-fondo); color: var(--oro-claro); }
.kpi--oro .kpi-sub, .kpi--oro .ini-proy { color: var(--texto-2); }
.kpi--oro .rend-barra { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.kpi--oro .rend-barra > span { background: linear-gradient(90deg, var(--oro-oscuro), var(--oro) 70%, var(--oro-claro)); box-shadow: 0 0 16px rgba(232, 196, 104, 0.6); }
.kpi--oro .kpi-ir { color: var(--oro-claro); }

@media (prefers-reduced-motion: reduce) { .kpi--oro::after { animation: none; } }