/* Inteligencia de datos · EnLínea.
   Marco de producto oscuro, superficie de lectura en papel, proyección dominante.
   Todos los estilos quedan aislados de las demás escenas. */

#datos {
  --c-muted: #62716b;
  --c-border: #dedfd6;
  --c-soft: #eef0e8;
  --c-dark: #0c2421;
  --c-dark-muted: #a1b6ae;
  position: relative;
  margin-bottom: 0;
  animation: none;
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
#datos * { min-width: 0; }
#datos svg { display: block; flex: none; }
#datos button { -webkit-tap-highlight-color: transparent; }
#datos button:focus-visible, #datos [tabindex]:focus-visible { outline: 2px solid var(--linea-viva); outline-offset: 4px; }
#datos .c-ventana {
  overflow: hidden;
  border: 1px solid #35544b;
  border-radius: 14px;
  background: var(--papel);
  box-shadow: 0 24px 64px #03141055, 0 2px 8px #03141033;
}
#datos .c-eti { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .035em; }
#datos .c-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Encabezado de ventana */
#datos .c-barra { display: flex; align-items: center; gap: 22px; height: 54px; padding: 0 18px 0 22px; background: var(--noche); color: #f0f3eb; border-bottom: 1px solid #294039; }
#datos .c-marca { display: flex; align-items: center; flex: 0 0 164px; gap: 10px; }
#datos .c-marca > svg { width: 23px; height: 23px; fill: none; stroke: var(--linea); stroke-width: 2; stroke-linecap: round; }
#datos .c-marca b { font-size: 20px; font-weight: 650; letter-spacing: -.07em; }
#datos .c-marca b span { margin-left: 4px; color: var(--linea); font-weight: 400; }
#datos .c-ruta { display: flex; align-items: center; gap: 12px; font-size: 12px; }
#datos .c-ruta > span { color: var(--c-dark-muted); }
#datos .c-ruta b { font-weight: 500; }
#datos .c-ruta svg { width: 14px; height: 14px; fill: none; stroke: #789188; stroke-width: 1.5; }
#datos .c-buscar { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 7px 10px; border: 1px solid #31463e; border-radius: 6px; font-size: 12px; color: #c0cdc5; }
#datos .c-buscar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#datos .c-buscar-tecla { padding: 0 4px; border: 1px solid #40534b; border-radius: 3px; margin-left: 12px; font: 12px var(--mono); }
#datos .c-avatar { display: grid; place-items: center; width: 27px; height: 27px; flex: none; background: #28473d; border: 1px solid #426253; border-radius: 50%; color: #ddeddf; font-size: 12px; font-weight: 650; }

/* Menú y objetivo */
#datos .c-app { display: grid; grid-template-columns: 188px minmax(0, 1fr); }
#datos .c-lado { display: flex; flex-direction: column; padding: 22px 12px 16px; background: var(--c-dark); color: #bccdc3; border-right: 1px solid #294039; }
#datos .c-empresa { display: flex; align-items: center; gap: 9px; padding: 0 4px 20px; }
#datos .c-empresa-icono { display: grid; place-items: center; width: 30px; height: 32px; border: 1px solid #3a5347; border-radius: 6px; flex: none; color: var(--linea); }
#datos .c-empresa-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#datos .c-empresa .c-eti { font-family: var(--sans); color: #9bb0a5; letter-spacing: 0; }
#datos .c-empresa strong { display: block; margin-top: 3px; font-size: 13px; color: #f2f5ee; font-weight: 600; line-height: 1.35; }
#datos .c-nav-rotulo { margin: 16px 9px 8px; color: #94aa9e; font-size: 12px; }
#datos .c-nav-rotulo:first-child { margin-top: 0; }
#datos .c-navegacion ul { margin: 0; padding: 0; list-style: none; }
#datos .c-navegacion li { position: relative; display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 8px; margin: 2px 0; font-size: 12px; line-height: 1.2; border-radius: 5px; }
#datos .c-navegacion li > span { flex: 1; }
#datos .c-navegacion li small { padding: 2px 4px; margin-left: auto; font: 12px var(--mono); color: #b9ccc1; background: #203a31; border-radius: 3px; }
#datos .c-navegacion li.on { color: #eef5eb; }
#datos .c-navegacion .c-nav-activo { color: #d9f5e6; background: #234639; }
#datos .c-nav-activo::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--linea); }
#datos .c-menu-toggle { display: none; }
#datos .c-objetivo { padding: 16px 10px 12px; margin-top: auto; }
#datos .c-objetivo-top { display: flex; align-items: center; gap: 8px; padding-top: 32px; }
#datos .c-objetivo .c-eti { font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: #b7c9bd; }
#datos .c-estado-punto { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--ambar); }
#datos .c-objetivo h3 { margin: 10px 0 20px; color: #f0f4e9; font-size: 16px; font-weight: 500; letter-spacing: -.025em; line-height: 1.4; text-wrap: pretty; }
#datos .c-objetivo-cifras { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#datos .c-objetivo-cifras strong { font-size: 24px; font-weight: 500; letter-spacing: -.04em; color: var(--linea); }
#datos .c-objetivo-cifras > span { font: 12px var(--mono); color: #adbdaf; }
#datos .c-progreso { height: 4px; margin-top: 9px; background: #294239; border-radius: 2px; overflow: hidden; }
#datos .c-progreso > span { display: block; height: 100%; border-radius: inherit; background: var(--linea); clip-path: inset(0 100% 0 0); }
#datos .c-objetivo > p { margin: 8px 0 0; font-size: 12px; color: #e4b973; }
#datos .c-salud { display: flex; align-items: center; gap: 8px; padding: 16px 8px 0; margin-top: 12px; border-top: 1px solid #294238; font-size: 12px; color: #adbdaf; }
#datos .c-salud > span { width: 5px; height: 5px; border-radius: 50%; background: var(--linea); }

/* Superficie de trabajo */
#datos .c-panel { padding: 24px 24px 18px; }
#datos .c-panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#datos .c-panel-cabecera .c-eti { margin: 0 0 5px; color: var(--linea-honda); }
#datos .c-panel-cabecera h3 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
#datos #c-nombre { margin: 6px 0 0; color: var(--c-muted); font-size: 12px; }
#datos .c-periodo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #d6d9cf; border-radius: 6px; color: #4c5d54; font-size: 12px; white-space: nowrap; }
#datos .c-periodo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
#datos .c-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 24px; padding: 0 0 19px; border-bottom: 1px solid var(--c-border); }
#datos .c-kpi { padding: 0 17px; border-left: 1px solid var(--c-border); opacity: 0; transform: translateY(6px); }
#datos .c-kpi:first-child { padding-left: 0; border-left: 0; }
#datos .c-kpi:last-child { padding-right: 0; }
#datos .c-kpi-label { display: block; color: var(--c-muted); font-size: 12px; line-height: 1.4; }
#datos .c-kpi-reading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 5px 0; }
#datos .c-kpi-value { font-size: 27px; font-weight: 550; line-height: 1.2; letter-spacing: -.045em; white-space: nowrap; }
#datos .c-spark { width: 57px; height: 28px; overflow: visible; }
#datos .c-spark-line { fill: none; stroke: var(--linea-honda); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#datos .c-kpi-foot { display: flex; gap: 6px; align-items: center; color: var(--c-muted); }
#datos .c-kpi-note { font-size: 12px; line-height: 1.5; }
#datos .c-kpi-arrow { width: 13px; height: 13px; color: var(--linea-honda); }
#datos .c-kpi-meter { position: relative; width: 46px; height: 20px; display: flex; align-items: center; }
#datos .c-kpi-meter::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: #dce2d6; }
#datos .c-kpi-meter b { position: absolute; top: 6px; width: 1px; height: 8px; background: #9b650b; }
#datos .c-kpi-meter i { position: relative; display: block; height: 4px; background: var(--linea-honda); border-radius: 2px; }
#datos .c-ledger-mini { display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; width: 36px; height: 23px; color: var(--linea-honda); }
#datos .c-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
#datos .c-principal, #datos .c-contexto { display: grid; gap: 24px; }
#datos .c-grafica, #datos .c-oport, #datos .c-clientes { position: relative; }
#datos .c-grafica::after, #datos .c-oport::after, #datos .c-clientes::after { content: ''; position: absolute; inset: -9px; border: 1px solid #9ac9b7; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
#datos.foco-proyeccion .c-grafica::after, #datos.foco-oportunidades .c-oport::after, #datos.foco-clientes .c-clientes::after { opacity: .7; }
#datos .c-grafica-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#datos .c-grafica h3, #datos .c-oport h3, #datos .c-clientes h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: -.015em; }
#datos .c-proyeccion-sello { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--linea-honda); }
#datos .c-proyeccion-sello i { height: 5px; width: 5px; background: var(--linea-honda); border-radius: 50%; }
#datos .c-proy-etiqueta { margin: 13px 0 2px; font-size: 12px; color: var(--c-muted); }
#datos .c-proy-lectura { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 13px; }
#datos #c-proy-valor { display: flex; align-items: baseline; gap: 9px; }
#datos .c-proy-num { font-size: 46px; font-weight: 550; line-height: 1.08; letter-spacing: -.065em; }
#datos .c-proy-unidad { font-size: 13px; color: var(--c-muted); }
#datos .c-proy-delta { display: inline-flex; align-items: center; gap: 4px; color: var(--linea-honda); font-size: 12px; opacity: 0; transform: translateY(4px); }
#datos .c-proy-delta svg { width: 13px; height: 13px; }

/* Gráfica SVG con ejes HTML nítidos y período futuro delimitado */
#datos .c-graf { height: 174px; margin-top: 18px; }
#datos .g-proy { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 22px; height: 100%; gap: 7px 10px; }
#datos .g-axis-y { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: right; color: #6d7970; font: 12px/1 var(--mono); }
#datos .g-lienzo { position: relative; grid-column: 2; grid-row: 1; }
#datos .g-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#datos .g-grid { stroke: #dee2d7; stroke-width: 1; vector-effect: non-scaling-stroke; }
#datos .g-area { fill: #dce8dc; opacity: 0; }
#datos .g-pasado, #datos .g-futuro { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#datos .g-pasado { stroke: var(--linea-honda); stroke-dasharray: 1; stroke-dashoffset: 1; }
#datos .g-futuro { stroke: var(--linea-honda); stroke-dasharray: 4 5; }
#datos .g-forecast { clip-path: inset(-10% 100% -10% 0); }
#datos .g-banda { fill: #bde3d4; opacity: .55; }
#datos .g-hoy { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #95ac9b; }
#datos .g-hoy > span { position: absolute; top: -6px; right: 7px; padding: 2px 0 2px 5px; background: var(--papel); font: 12px var(--mono); color: #506c5d; }
#datos .g-hoy-punto, #datos .g-prevision { position: absolute; z-index: 1; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 2px solid var(--papel); border-radius: 50%; background: var(--linea-honda); box-shadow: 0 0 0 1px var(--linea-honda); opacity: 0; }
#datos .g-prevision { background: var(--linea-viva); border-color: var(--papel); box-shadow: 0 0 0 1px var(--linea-honda); }
#datos .g-tooltip { position: absolute; z-index: 2; right: 0; bottom: 12px; display: grid; gap: 3px; max-width: 164px; padding: 8px 10px; border: 1px solid #264c3f; border-radius: 5px; background: var(--c-dark); color: #f5f7ee; opacity: 0; transform: translateY(5px); pointer-events: none; }
#datos .g-tooltip > span { color: #b9d2c1; font: 12px var(--mono); }
#datos .g-tooltip strong { font-size: 13px; font-weight: 550; }
#datos .g-axis-x { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; font: 12px var(--mono); color: #6d7970; }
#datos .g-axis-x .actual { color: var(--tinta); font-weight: 600; }
#datos .g-axis-x .fut { color: var(--linea-honda); }
#datos .c-graf-leyenda { display: flex; align-items: center; gap: 16px; padding-left: 48px; margin-top: 2px; font-size: 12px; color: var(--c-muted); }
#datos .c-graf-leyenda > span { display: flex; align-items: center; gap: 6px; }
#datos .c-graf-leyenda i { width: 15px; border-top: 2px solid var(--linea-honda); }
#datos .c-graf-leyenda > span:nth-child(2) i { border-top-style: dashed; }
#datos .c-graf-leyenda .c-graf-precision { margin-left: auto; font-size: 12px; color: #738074; }

/* Oportunidades como objetos de trabajo */
#datos .c-oport { padding-top: 18px; border-top: 1px solid var(--c-border); }
#datos .c-oport > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
#datos .c-oport header p { margin: 3px 0 0; color: var(--c-muted); font-size: 12px; }
#datos .c-oport-total { font: 12px var(--mono); color: var(--linea-honda); }
#datos .c-oport ul { list-style: none; padding: 0; margin: 0; }
#datos .c-oportunidad { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--c-border); opacity: 0; transform: translateY(8px); }
#datos .c-opp-num { padding-top: 1px; flex: 0 0 20px; font: 12px var(--mono); color: #687d6f; }
#datos .c-opp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; flex: 1; }
#datos .c-opp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; grid-column: 1; font-size: 12px; }
#datos .c-opp-category { color: var(--linea-honda); font-weight: 600; }
#datos .c-confidence { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
#datos .c-confidence::before { content: '·'; margin-right: 8px; }
#datos .c-opp-title { grid-column: 1; margin: 0; max-width: 36ch; font-size: 13px; font-weight: 500; line-height: 1.45; text-wrap: pretty; }
#datos .c-opp-bottom { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 7px; grid-column: 2; grid-row: 1 / 3; }
#datos .c-opp-impact { font-size: 12px; font-weight: 650; white-space: nowrap; }
#datos .c-opp-action { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0 3px 6px; color: var(--linea-honda); font-size: 12px; font-weight: 650; transition: transform .16s var(--ease-out); }
#datos .c-opp-action svg { width: 13px; height: 13px; }
#datos .c-oportunidad.seleccionada .c-opp-num { color: var(--linea-honda); font-weight: 600; }
#datos .c-oportunidad.seleccionada .c-opp-action { color: var(--tinta); }
#datos .c-accion-estado { margin: 8px 0 0; font-size: 12px; color: var(--linea-honda); }
#datos .c-accion-estado:empty { display: none; }

/* Asistente integrado */
#datos .c-consulta { position: relative; display: flex; flex-direction: column; padding: 18px; border-radius: 9px; border: 1px solid #264c3f; background: var(--c-dark); color: #edf4e9; }
#datos .c-consulta::after { content: ''; position: absolute; inset: -3px; border: 1px solid var(--linea-viva); border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease-out); }
#datos.foco-consulta .c-consulta::after { opacity: .75; }
#datos .c-consulta > header { display: flex; align-items: center; gap: 9px; }
#datos .c-asistente-icono { display: grid; place-items: center; width: 30px; height: 32px; background: #244b3c; color: var(--linea); border-radius: 5px; }
#datos .c-asistente-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#datos .c-consulta h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
#datos #c-consulta-estado { display: block; font-size: 12px; margin-top: 1px; color: #aac8b8; }
#datos .c-consulta-senal { width: 5px; height: 5px; margin-left: auto; align-self: flex-start; margin-top: 5px; border-radius: 50%; background: var(--linea); }
#datos .c-pregunta { margin-top: 16px; padding: 12px; border: 1px solid #375343; border-radius: 6px; background: #193b2f; }
#datos .c-pregunta > .c-eti { font-family: var(--sans); color: #a7c1af; font-size: 12px; letter-spacing: 0; }
#datos .c-pregunta p { min-height: 40px; margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: #eef6e9; }
#datos #c-pregunta:empty::before { content: 'Consulta en lenguaje natural'; color: #a7c1af; }
#datos .c-cursor { display: inline-block; width: 1px; height: 13px; margin-left: 3px; vertical-align: -2px; background: var(--linea); opacity: 0; }
#datos .c-respuesta-bloque { margin-top: 18px; opacity: 0; transform: translateY(6px); }
#datos .c-respuesta-etiqueta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--linea); }
#datos .c-respuesta-etiqueta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#datos .c-respuesta { margin: 9px 0 0; font-size: 16px; font-weight: 450; line-height: 1.55; letter-spacing: -.015em; text-wrap: pretty; }
#datos .c-evidencia { padding-top: 14px; margin-top: 16px; border-top: 1px solid #34503e; opacity: 0; transform: translateY(5px); }
#datos .c-evidencia > .c-eti { margin-bottom: 9px; font-family: var(--sans); font-size: 12px; color: #b2c8b7; letter-spacing: 0; }
#datos #c-fuentes { display: grid; gap: 7px; }
#datos .c-source { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #d0e1d0; line-height: 1.4; }
#datos .c-source .c-icon { width: 14px; height: 14px; color: #8cbfa5; }

/* Distribución, leyenda y hallazgo */
#datos .c-clientes { padding: 0 2px; }
#datos .c-clientes > header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
#datos .c-clientes > header > span { font: 12px var(--mono); color: var(--c-muted); }
#datos .c-segment-bar { display: flex; overflow: hidden; gap: 3px; height: 15px; margin: 17px 0 14px; border-radius: 3px; clip-path: inset(0 100% 0 0); }
#datos .c-segment { flex: 0 1 var(--segment-width); height: 100%; }
#datos [data-segmento="0"] { background: var(--linea-honda); }
#datos [data-segmento="1"] { background: #57987b; }
#datos [data-segmento="2"] { background: #adceaf; }
#datos [data-segmento="3"] { background: #849185; }
#datos .c-segment-bar .en-riesgo, #datos .c-segment-legend .en-riesgo { background: var(--ambar); }
#datos .c-segment-legend { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
#datos .c-segment-legend li { display: flex; align-items: center; gap: 8px; color: #536358; font-size: 12px; }
#datos .c-segment-legend i { width: 6px; height: 6px; flex: none; border-radius: 1px; }
#datos .c-segment-legend b { margin-left: auto; color: var(--tinta); font: 12px var(--mono); }
#datos .c-hallazgo { margin: 16px 0 0; padding: 11px 0 0; border-top: 1px solid var(--c-border); color: var(--linea-honda); font-size: 13px; font-weight: 600; line-height: 1.5; text-wrap: pretty; opacity: 0; transform: translateY(5px); }

/* Estado y declaración de datos ficticios siempre visible */
#datos .c-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--c-border); background: #eef0e7; color: #536b5b; }
#datos .c-paso { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#datos .c-paso > i { width: 5px; height: 5px; flex: none; background: var(--linea-honda); border-radius: 50%; }
#datos .ficticio { color: #647064; font-size: 12px; letter-spacing: 0; text-transform: none; }

/* Secuencia explicativa. Solo composición, opacidad y trazado. */
#datos.armada .c-kpi { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
#datos.armada .c-progreso > span { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out) .2s; }
#datos.armada .c-spark-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out) .2s; }
#datos.armada .g-pasado { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out) .2s; }
#datos.armada .g-area { opacity: 1; transition: opacity .8s var(--ease-out) .45s; }
#datos.armada .g-hoy-punto { opacity: 1; transition: opacity .4s var(--ease-out) 1s; }
#datos.proyecta .g-forecast { clip-path: inset(-10% 0 -10% 0); transition: clip-path 1s var(--ease-out); }
#datos.proyecta .g-prevision { opacity: 1; transition: opacity .45s var(--ease-out) .7s; }
#datos.proyecta .g-tooltip, #datos.proyecta .c-proy-delta { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: .45s; }
#datos .c-oportunidad.on { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
#datos.analiza .c-segment-bar { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-out); }
#datos.analiza .c-hallazgo { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .5s, transform .5s var(--ease-out) .5s; }
#datos.pregunta .c-cursor { animation: datos-cursor .8s var(--ease-in-out) infinite; }
#datos.responde .c-cursor { animation: none; opacity: 0; }
#datos.responde .c-respuesta-bloque { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
#datos.evidencia .c-evidencia { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
#datos.armada .c-consulta-senal, #datos.armada .c-paso > i { animation: datos-senal 1.6s var(--ease-in-out) infinite; }
#datos .c-panel, #datos .c-navegacion, #datos .c-objetivo, #datos .c-empresa { transition: opacity .35s var(--ease-out); }
#datos.sale .c-panel, #datos.sale .c-navegacion, #datos.sale .c-objetivo, #datos.sale .c-empresa { opacity: 0; }
@keyframes datos-cursor { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes datos-senal { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (hover: hover) and (pointer: fine) {
  #datos .c-buscar:hover { border-color: #88b39a; color: #f0f5ec; }
  #datos .c-opp-action:hover { transform: translateX(2px); text-decoration: underline; text-underline-offset: 3px; }
  #datos .c-menu-toggle:hover { color: #fff; }
}
#datos .c-buscar:active, #datos .c-opp-action:active { transform: translateY(1px); }

/* Tableta y teléfono, sin reducir el tamaño del texto. */
@media (max-width: 1100px) and (min-width: 761px) {
  #datos .c-app { grid-template-columns: 164px minmax(0, 1fr); }
  #datos .c-marca { flex-basis: 140px; }
  #datos .c-panel { padding: 22px 20px 18px; }
  #datos .c-cuerpo { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; }
  #datos .c-kpi { padding: 0 10px; }
  #datos .c-kpi-value { font-size: 24px; }
  #datos .c-spark, #datos .c-ledger-mini { display: none; }
  #datos .c-opp-body { grid-template-columns: minmax(0, 1fr); }
  #datos .c-opp-bottom { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; }
  #datos .c-graf-precision { display: none; }
  #datos .c-navegacion li { gap: 6px; padding-right: 4px; }
  #datos .c-navegacion li small { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  #datos .c-cuerpo { grid-template-columns: 1fr; }
  #datos .c-contexto { grid-template-columns: 1fr 1fr; align-items: start; }
  #datos .c-opp-body { grid-template-columns: minmax(0, 1fr) auto; }
  #datos .c-opp-bottom { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; }
  #datos .c-ruta > span, #datos .c-ruta > svg { display: none; }
  #datos .c-kpi-meter { display: none; }
}
@media (max-width: 760px) {
  #datos { width: calc(100% - 24px); }
  #datos .c-ventana { border-radius: 11px; }
  #datos .c-barra { gap: 11px; height: 53px; padding: 0 14px; }
  #datos .c-marca { flex-basis: auto; gap: 7px; }
  #datos .c-marca b { font-size: 19px; }
  #datos .c-marca > svg { width: 20px; height: 20px; }
  #datos .c-ruta { display: none; }
  #datos .c-buscar { padding: 7px; gap: 6px; }
  #datos .c-buscar-tecla { display: none; }
  #datos .c-avatar { width: 25px; height: 25px; }
  #datos .c-app { grid-template-columns: 1fr; }
  #datos .c-lado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 16px; border-right: 0; }
  #datos .c-empresa { padding: 0; }
  #datos .c-empresa strong { font-size: 14px; }
  #datos .c-empresa-icono { width: 32px; height: 34px; }
  #datos .c-menu-toggle { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #c8d8cb; }
  #datos .c-menu-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  #datos .c-navegacion { display: none; grid-column: 1 / -1; padding-top: 20px; }
  #datos[data-menu="abierto"] .c-navegacion { display: block; }
  #datos[data-menu="abierto"] .c-menu-toggle svg { transform: rotate(180deg); }
  #datos .c-navegacion li { min-height: 42px; font-size: 13px; }
  #datos .c-objetivo { grid-column: 1 / -1; padding: 16px 0 0; margin-top: 16px; border-top: 1px solid #34513f; }
  #datos .c-objetivo-top { padding-top: 0; }
  #datos .c-objetivo h3 { max-width: 28ch; margin: 6px 0 12px; font-size: 17px; }
  #datos .c-objetivo-cifras strong { font-size: 22px; }
  #datos .c-salud { display: none; }
  #datos .c-panel { padding: 22px 16px 24px; }
  #datos .c-panel-cabecera { flex-wrap: wrap; gap: 12px; }
  #datos .c-panel-cabecera h3 { font-size: 26px; }
  #datos .c-periodo { padding: 6px 9px; }
  #datos .c-kpis { grid-template-columns: 1fr; margin: 18px 0 22px; padding-bottom: 0; border-top: 1px solid var(--c-border); }
  #datos .c-kpi, #datos .c-kpi:first-child, #datos .c-kpi:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 13px 0; border-left: 0; border-bottom: 1px solid var(--c-border); }
  #datos .c-kpi:last-child { border-bottom: 0; }
  #datos .c-kpi-reading { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
  #datos .c-kpi-label, #datos .c-kpi-foot { grid-column: 1; }
  #datos .c-kpi-value { font-size: 24px; }
  #datos .c-kpi-note { font-size: 12px; }
  #datos .c-spark { width: 56px; height: 15px; }
  #datos .c-kpi-meter { height: 12px; width: 48px; }
  #datos .c-kpi-meter b { top: 2px; }
  #datos .c-ledger-mini { display: none; }
  #datos .c-cuerpo, #datos .c-contexto { grid-template-columns: 1fr; gap: 26px; }
  #datos .c-principal { gap: 24px; }
  #datos .c-proy-num { font-size: 43px; }
  #datos .c-proy-lectura { gap: 6px 10px; }
  #datos .c-proy-delta { flex-basis: 100%; }
  #datos .c-graf { height: 185px; margin-top: 25px; }
  #datos .g-proy { grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; }
  #datos .g-tooltip { max-width: 145px; padding: 7px 8px; bottom: 12px; }
  #datos .g-hoy > span { top: 22px; }
  #datos .c-graf-leyenda { padding-left: 44px; gap: 15px; }
  #datos .c-graf-leyenda .c-graf-precision { display: none; }
  #datos .c-oport > header { padding-bottom: 10px; }
  #datos .c-oportunidad { gap: 8px; padding: 13px 0; }
  #datos .c-opp-num { flex-basis: 18px; }
  #datos .c-opp-body { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  #datos .c-opp-title { font-size: 14px; }
  #datos .c-opp-bottom { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 8px; }
  #datos .c-opp-action { min-height: 40px; padding: 8px; margin-right: -8px; }
  #datos .c-opp-impact { white-space: normal; }
  #datos .c-consulta { padding: 18px; }
  #datos .c-pregunta p { font-size: 14px; }
  #datos .c-respuesta { font-size: 17px; }
  #datos .c-clientes { padding: 0; }
  #datos .c-segment-bar { height: 18px; }
  #datos .c-segment-legend { gap: 10px; }
  #datos .c-hallazgo { font-size: 14px; }
  #datos .c-pie { flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 16px; }
  #datos .ficticio { font-size: 12px; }
}

/* Instantes de revisión inmóviles y preferencia de movimiento reducido. */
#datos[data-fijo="si"] *, #datos[data-fijo="si"] *::before, #datos[data-fijo="si"] *::after { transition: none !important; animation: none !important; }
#datos[data-fijo="si"] .c-cursor { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #datos *, #datos *::before, #datos *::after { transition: none !important; animation: none !important; }
  #datos .c-cursor { opacity: 0; }
  #datos .c-opp-action:hover { transform: none; }
}