/* ========================================================================= Plataforma Digital — Programa PESA · PAE styles.css — sistema visual portado del prototipo (dirección burdeos editorial). Mobile-first. Colores verificados WCAG 2.1 AA. Foco visible. Reduce-motion. Print. ========================================================================= */ /* ---------- Tokens ---------- */ :root { /* Paleta burdeos (tema "Burdeos clásico" del prototipo) */ --accent: #6e2536; --accent-deep: #48141f; --accent-soft: #f7eef0; --berry-panel: #5d1f2e; /* berry profundo intermedio (ya en uso como hover del CTA) — tarjeta de riesgo y botón de cierre de consulta/inicial */ --hl: #c1853f; /* dorado — uso decorativo / sobre fondo oscuro */ /* * DORADO CLARO — el mismo tono y la misma saturación que --hl (32,3° · 51 %), sólo más claro. * Existe porque --hl NO alcanza AA cuando lleva TEXTO sobre el berry del botón de finalizar * estudio: medido, 3,38:1 contra --accent, y AA pide 4,5. El primero de la familia que pasa es * #d0a26d con 4,58:1, y ese margen de 0,08 se lo come el degradé del botón, que aclara. Éste da * 5,06:1 contra el stop claro y 5,89:1 contra el hondo. * Se descartó --band-1 (#d3a417, 4,59:1): pasa, pero es un token CLÍNICO —la banda «Leve» de * HEARTS-OPS— y teñir un botón con el color de una categoría de riesgo es exactamente la * confusión que la paleta de este proyecto evita. */ --hl-claro: #d5ac7c; /* Verde de ACCIÓN (avanzar/continuar) — familia propia del CTA de avance. El hue es vecino del verde clínico --band-0 #277a4c (Δ≈6°): la distinción NO es cromática sino de profundidad, saturación y sobre todo de FORMA/CONTEXTO (botón con degradé y sombra vs dot de 12px en una tabla). Consigna del director: "más saturado o más profundo" — cumplida por esa vía. */ --action: #0e7245; /* base — blanco encima 5.97:1 (AA) */ --action-hi: #117347; /* stop claro del radial — medido: blanco ≥4.9:1 aun con brightness(1.08) */ --action-mid: #0b5c38; /* stop medio de los degradés */ --action-deep: #06331f; /* stop profundo / sombras */ --bg: #fbf7f6; --surface: #ffffff; --ink: #2a1a1e; /* texto principal — AA sobre claro */ /* CREMA institucional (bordó / crema / blanco). Tres pasos para el mismo degradé que el resto de los CTA; el texto y el ícono van en --ink, que sobre estos tres da >11:1. */ --crema: #f6ebd8; --crema-mid: #efdfc4; --crema-deep: #e3cda6; --crema-line: #c9ad7e; /* borde/filo sobre crema — para piezas sobre fondo OSCURO (berry) */ /* CONTORNO de un componente crema sobre fondo CLARO. El verde de acción se recortaba solo contra el fondo de página; una pieza crema sobre #fbf7f6 no, y --crema-line se queda en 2,03:1 — por debajo del 3:1 que WCAG 2.2 §1.4.11 pide para el límite de un control. Misma familia (h 37°, s 41%), sólo más profundo: medido 4,08:1 atenuado y 3,51:1 pleno. */ --crema-edge: #97753f; --muted: #6b5a5e; /* texto secundario — AA sobre blanco (6.46:1) */ --muted-2: #736266; /* labels/uppercase pequeños — AA (5.73:1) */ --line: rgba(42, 26, 30, .10); --line-strong: rgba(42, 26, 30, .16); /* Bandas de riesgo HEARTS-OPS por índice (espejo de clinica.CATEGORIAS) — AA verificadas. OJO: #kpis-root las RE-DECLARA avivadas (más saturación, mismo hue) solo para el reporte. */ --band-0: #277a4c; /* Bajo · <5% */ --band-1: #caa12a; /* Leve · 5-<10% (texto oscuro) */ --band-2: #b05a26; /* Moderado · 10-<20% */ --band-3: #b23a30; /* Alto · 20-<30% */ --band-4: #7d1f2b; /* Muy alto · ≥30% */ /* Escala de estratificación con TEXTO BLANCO (pills de banda, celdas HTA). Semáforo extendido, los 5 con ratio de blanco ≥ 4,5:1 (AA). Reusan --band-* salvo Leve, que necesita un ámbar más oscuro (#caa12a daba 2,43). Ratios vs blanco: Bajo 5,28 · Leve 5,02 · Moderado 4,84 · Alto 5,93 · Muy alto 9,99. Es la escala de la BANDA de riesgo; el NIVEL de metas sigue en su escala de 2. */ --strat-0: #127f45; /* Bajo — verde vivo (blanco 5,06; ITER4: +croma, no se puede aclarar sin romper AA) */ --strat-1: #8c6a08; /* Leve — ámbar/dorado (blanco 5,02; ≠ naranja Moderado) */ --strat-2: #b85519; /* Moderado — naranja marcado (blanco 4,83; ITER4: +croma) */ --strat-3: #b23a30; /* Alto — rojo (blanco 5,93) */ --strat-4: #7d1f2b; /* Muy alto — bordó (blanco 9,99) */ /* Encabezados de la matriz HTA: rampa de GRISES de severidad creciente (ITER4: sale de la rampa berry para no competir con el semáforo de estratificación). Texto blanco AA en los tres (limítrofe 5,77 · nivel 1 8,48 · nivel 2 12,18). */ --hta-h1: #6b6466; --hta-h2: #524b4e; --hta-h3: #3a3436; --ok-bg: #e6f3ec; --ok-fg: #176039; --ok-line: #bfe3cd; --warn-bg: #fbeceb; --warn-fg: #a8392f; --warn-line: #efc9c6; --neutral-bg: #f3eef0; --neutral-fg: #736266; --neutral-line: rgba(42,26,30,.10); /* SIN CRITERIO PARA PARTICIPAR (ELEG-1). Arena/ámbar: no es un error —la ficha está bien, la persona no entra al circuito— así que no puede leerse como el rojo de --warn, ni como el verde de --ok, ni como el bordó institucional. Hue 41°, lejos del verde (150°) y del rojo (8°). Contraste MEDIDO sobre #f5e2b8: leyenda 6,76:1 · --ink 13,01:1 · --muted 5,06:1 — los tres AA. Y 1,28:1 contra --surface, que es lo que hace que la fila se despegue del blanco. El color NO es la única señal (WCAG 1.4.1): la fila dice el motivo con todas las letras. */ --sincriterio-bg: #f5e2b8; --sincriterio-fg: #6b430c; --sincriterio-line: #d9bc78; /* El arena SUAVE (PART-2 · B8): la misma familia, para la fila de la tabla de participantes — donde el arena pleno pesaba más que las 28 filas en circuito. Mezcla 60% del arena sobre blanco. Contraste MEDIDO (WCAG 2.2): leyenda #6b430c 7,48:1 (sube desde 6,76) · --ink 14,39:1. Contra blanco es 1,15:1: el color ya NO es señal confiable por sí solo, y por eso la fila conserva OBLIGATORIAMENTE el filete lateral y la leyenda con todas las letras. Analítica y los buscadores conservan el arena pleno: allí la marca es UNA fila en una lista blanca y necesita despegue, no convivencia con una grilla entera. */ --sincriterio-bg-suave: #f9eed4; /* Tipografía */ --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala tipográfica consolidada (aplicada en consulta/inicial; extensible al resto). Familias: serif = títulos + valores clínicos protagonistas · sans = texto funcional · mono = SOLO cifras/datos numéricos (nunca texto corrido). */ --fs-display: clamp(28px, 2.7vw, 38px); /* título de vista — serif, lh 1.1 */ --fs-hero: 28px; /* valor clínico protagonista — serif */ --fs-h2: 21px; /* título de card / identidad — serif */ --fs-h3: 15px; /* nombre de factor / grupo — sans 600 */ --fs-body: 14px; /* cuerpo (opciones, descripciones) — sans 400, lh 1.55 */ --fs-label: 13px; /* labels — sans 500 */ --fs-caption: 11px; /* eyebrows/rótulos uppercase — sans 600 */ --fs-num: 13px; /* cifra inline — mono 600 */ --ls-caption: .12em; /* * ══ ESCALA DE ENCABEZADO DE SEGMENTO (PRACTICA-1 · D) ═══════════════════════════════ * * Los tres segmentos del Consultorio —Práctica de Enfermería, Ecografía Doppler Vascular y * Consulta Médica y Tratamiento— están al MISMO nivel de la jerarquía y hasta este lote se * leían en tres cuerpos distintos: 23 px el primero, 44 el segundo y 12 el tercero. Eso es * lo que hacía ver el Consultorio desprolijo, y no se arregla campo por campo: hace falta * UNA escala, con tres voces y un solo lugar donde se definen. * * LA REFERENCIA ES EL DOPPLER, que era el que estaba bien. Los otros dos SUBEN hasta ahí; * ninguno baja. * * --fs-segmento el NOMBRE del segmento. Voz dominante, serif, berry. * --fs-segmento-paso el paso DENTRO del segmento («Estratificación de Riesgo»). * Subordinado a propósito: es el destino, no la identidad. * --fs-segmento-meta participante y DNI. METADATO. Hasta este lote compartían cuerpo con * el título del segmento, así que el nombre de la persona competía de * igual a igual con el nombre del acto clínico. */ --fs-segmento: clamp(28px, 3.1vw, 44px); --fs-segmento-paso: clamp(21px, 2.1vw, 30px); --fs-segmento-meta: clamp(15px, 1.2vw, 18px); /* Forma */ --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-sm: 0 10px 30px rgba(42, 26, 30, .06); --shadow-md: 0 18px 50px rgba(42, 26, 30, .12); --shadow-accent: 0 12px 30px rgba(110, 37, 54, .22); --nav-h: 66px; --maxw: 1180px; --clinical-search-width: clamp(360px, 30vw, 480px); --clinical-control-height: 50px; --focus: 3px solid var(--accent); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } /* el atributo hidden gana a display de clases */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.5; } ::selection { background: rgba(110, 37, 54, .16); } img, svg { max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; color: var(--ink); } p { margin: 0; } /* ---------- Accesibilidad ---------- */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 8px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: 3px; } .on-dark :focus-visible, .hero :focus-visible, .kpi-masthead :focus-visible, footer :focus-visible { outline-color: #fff; } /* Encabezado de vista/sub-flujo: recibe foco programático al entrar (anuncio SR), no es tabulable (tabindex="-1"); se suprime su anillo de foco para que no dibuje un recuadro. */ [data-view-heading]:focus, [data-view-heading]:focus-visible, [data-subflow-heading]:focus, [data-subflow-heading]:focus-visible { outline: none; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; } section { scroll-margin-top: 80px; padding: clamp(60px, 9vw, 120px) clamp(20px, 6vw, 80px); } .sec-light { background: var(--surface); } .sec-tint { background: var(--bg); } .sec-soft { background: var(--accent-soft); } .sec-dark { background: var(--accent-deep); color: #fff; } .sec-accent { background: var(--accent); color: #fff; } .eyebrow { font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .sec-dark .eyebrow, .on-dark .eyebrow { color: rgba(255, 255, 255, .72); } .step-tag { display: inline-flex; align-items: center; gap: 9px; font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .step-tag > span { background: var(--accent-soft); padding: 5px 11px; border-radius: var(--r-pill); } .h2 { font: 600 clamp(30px, 4.6vw, 52px)/1.04 var(--serif); margin: 0 0 16px; text-wrap: balance; } .lead { font: 400 17px/1.6 var(--sans); color: var(--muted); margin: 0; } .sec-dark .lead, .on-dark .lead { color: rgba(255, 255, 255, .82); } .sec-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 46px); } .grid { display: grid; gap: clamp(18px, 2.4vw, 30px); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-clin { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; } /* Grid "El desafío": 4 tarjetas parejas — 4 en fila (desktop), 2x2 (intermedio), 1 col (mobile). */ .grid-desafio { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .grid-desafio { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .grid-desafio { grid-template-columns: 1fr; } } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.8vw, 34px); } .card-soft { background: var(--bg); } .card-pad-sm { padding: clamp(20px, 2.4vw, 30px); } .card-dark { background: var(--accent-deep); color: #fff; border: none; } .card-accent { background: var(--accent); color: #fff; border: none; } /* "La oportunidad": título dominante + cita que acompaña (menor); columnas alineadas al tope. */ .op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 36px); } .op-grid .op-title { margin: 0; font: 500 clamp(26px, 3vw, 34px)/1.15 var(--serif); color: #fff; } .op-grid .op-quote { margin: 0; font: 400 italic clamp(15px, 1.5vw, 18px)/1.55 var(--serif); color: rgba(255, 255, 255, .8); } .op-cita { border-left: 2px solid rgba(255, 255, 255, .25); padding-left: 18px; } @media (max-width: 600px) { .op-grid { grid-template-columns: 1fr; gap: 16px; } .op-br { display: none; } .op-cita { border-left: none; padding-left: 0; border-top: 2px solid rgba(255, 255, 255, .25); padding-top: 16px; } } .icon-badge { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--accent); } .card h3 { font: 700 18px var(--sans); margin: 0 0 8px; } .card p { font: 400 14.5px/1.6 var(--sans); color: var(--muted); } .card-dark h3, .card-accent h3 { color: #fff; } .card-dark p { color: rgba(255, 255, 255, .7); } /* Remate de "Lo que demostró PESA": callout serif con punto de acento (no pastilla). */ .hallazgo-remate { display: flex; gap: 12px; align-items: flex-start; margin-top: clamp(26px, 3.5vw, 38px); max-width: 52ch; } .hallazgo-remate__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--hl); margin-top: .5em; } .hallazgo-remate p { margin: 0; font: 400 14px/1.5 var(--sans); color: rgba(255, 255, 255, .7); } /* Salvedad de no-extrapolación (documento §3.4): pie del bloque, un escalón por debajo del remate — misma familia, menor peso, para que lea como nota al pie y no como hallazgo. padding-left iguala el eje óptico del texto del remate (punto 8px + gap 12px). */ .hallazgo-nota { margin: clamp(16px, 2vw, 22px) 0 0; padding-left: 20px; max-width: 52ch; font: 400 var(--fs-label)/1.55 var(--sans); color: rgba(255, 255, 255, .6); } .label-mini { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; } .sec-dark .label-mini, .card-dark .label-mini, .on-dark .label-mini { color: rgba(255, 255, 255, .55); } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 700 15px var(--sans); border-radius: var(--r-pill); padding: 14px 24px; text-decoration: none; transition: transform .12s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); } .btn-primary:hover { background: #5d1f2e; } .btn-on-accent { background: #fff; color: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); } .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .32); } .btn-outline { background: var(--surface); color: var(--accent); border: 1px solid rgba(110, 37, 54, .22); font-size: 14.5px; } .btn-block { width: 100%; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 5vw, 48px); background: rgba(251, 247, 246, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(110, 37, 54, .3); flex-shrink: 0; } .brand-name { font: 800 16px var(--sans); letter-spacing: .04em; color: var(--ink); line-height: 1; } .brand-sub { font: 500 9px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-top: 3px; } /* margin-left auto (AUTH-2): corre el nav hacia la derecha junto al segmento de usuario, dejando el extremo derecho para éste. Sin excepciones: la que había —el Doppler lo anulaba para centrar los logos que llevaba en la barra— se fue con los logos (DOP-UI · 1), y con ella la última razón por la que el nav se comportaba distinto en un segmento. */ .nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; } .nav-links a { font: 600 13.5px var(--sans); color: #4a3a3e; text-decoration: none; } .nav-links a:hover { color: var(--accent); } .nav-cta { font: 700 13.5px var(--sans); color: #fff; background: var(--accent); padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none; } .burger { display: none; width: 42px; height: 42px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(110, 37, 54, .08); } .nav-panel { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 55; background: rgba(251, 247, 246, .98); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 14px clamp(16px, 5vw, 48px); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow-md); } .nav-panel[hidden] { display: none; } .nav-panel a { font: 600 16px var(--sans); color: #3a2a2e; text-decoration: none; padding: 12px 6px; border-bottom: 1px solid var(--line); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(84px, 10vh, 120px) clamp(20px, 6vw, 80px) clamp(48px, 8vh, 96px); background: radial-gradient(135% 125% at 84% -12%, var(--accent) 0%, var(--accent-deep) 73%); color: #fff; } .hero-ring { position: absolute; top: -180px; right: -160px; width: 620px; height: 620px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); pointer-events: none; } .hero-ring-2 { position: absolute; top: 8%; right: 14%; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); pointer-events: none; animation: spinslow 90s linear infinite; } .hero-ecg { position: relative; width: 100vw; height: 44px; margin: auto calc(50% - 50vw) 0; overflow: hidden; pointer-events: none; opacity: .5; } .hero-ecg svg { display: block; max-width: none; width: calc(100% + 165px); height: 100%; animation: ecgflow 4s linear infinite; } /* Columna a alto completo: el aire sobrante se reparte en partes iguales entre texto→ECG y ECG→botones (doble margin-top:auto), y los botones asientan contra el pie del hero en cualquier alto de pantalla. */ .hero-inner { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; flex: 1; } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-bottom: 26px; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 2.4s ease-in-out infinite; } .hero h1 { font: 600 clamp(40px, 7vw, 82px)/1.0 var(--serif); margin: 0 0 24px; max-width: 15ch; color: #fff; } .hero-sub { margin: 0 0 14px; max-width: none; } /* sin tope: subtítulo y bajada en una sola fila a 1440 */ .hero-sub-1 { margin: 0 0 7px; font: 500 clamp(17px, 1.85vw, 21px)/1.4 var(--sans); color: rgba(255, 255, 255, .92); } .hero-sub-1 strong { font-weight: 700; } .hero-sub-2 { margin: 0; font: 400 clamp(15px, 1.5vw, 17px)/1.5 var(--sans); color: rgba(255, 255, 255, .72); } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: auto; } .hero-actions .btn { padding: 17px 40px; font-size: 15.5px; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease; } .hero-actions .btn-on-accent { box-shadow: 0 10px 28px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18); } .hero-actions .btn-on-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, .32), 0 3px 8px rgba(0, 0, 0, .2); } .hero-actions .btn-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-actions .btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .62); } /* Fila de logos institucionales en la parte superior del bloque del hero (PNG blancos sobre fondo berry). Flex con wrap para que no se desborden en mobile. */ .hero-logos { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 3vw, 34px); margin-bottom: clamp(38px, 6vh, 56px); } .hero-logos img { height: 44px; width: auto; } @media (max-width: 480px) { .hero-logos { flex-wrap: nowrap; gap: 14px; } .hero-logos img { height: 29px; } } /* El encabezado del hero recibe foco programático al entrar a la vista (anuncio para lector de pantalla) y no es tabulable; se suprime su anillo de foco para que no dibuje un recuadro alrededor del título. */ .hero h1:focus, .hero h1:focus-visible { outline: none; } /* ---------- Banda de riesgo ---------- */ .risk-panel { background: var(--accent-soft); border: 1px solid rgba(110, 37, 54, .12); border-radius: var(--r-lg); padding: clamp(24px, 2.8vw, 34px); } .risk-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } .risk-figure { font: 500 clamp(40px, 7vw, 72px)/.95 var(--serif); color: var(--accent); } .risk-figure .pending { font: 600 clamp(18px, 2.4vw, 24px)/1.2 var(--sans); color: var(--accent); display: block; max-width: 16ch; } .risk-cat { display: inline-flex; align-items: center; gap: 9px; color: #fff; border-radius: var(--r-pill); padding: 9px 16px; font: 700 15px var(--sans); } .risk-cat .rango { font: 500 12px var(--mono); opacity: .9; } .band-bar { display: flex; gap: 6px; } .band { flex: 1; border-radius: 10px; padding: 12px 6px; text-align: center; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s; opacity: .55; } .band[data-active="true"] { opacity: 1; transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 26px rgba(0,0,0,.20); } .band .nm { display: block; font: 700 12.5px var(--sans); line-height: 1.15; } .band .rg { display: block; font: 500 10px var(--mono); opacity: .9; margin-top: 3px; white-space: nowrap; } /* Bandas inactivas: chips neutros del sistema (crema + borde) con una MINI-BARRA del color semántico de banda — integra la escala a la paleta del proyecto y deja la tinta plena (AA holgado) en vez de texto sobre pastel. La banda activa conserva su color pleno con mini-barra blanca. */ .band[data-active="false"] { opacity: 1; color: var(--ink); background: var(--bg); border: 1px solid var(--line); } .band::before { content: ""; display: block; width: 24px; height: 4px; border-radius: 2px; margin: 0 auto 7px; background: rgba(255, 255, 255, .85); } .band-0[data-active="false"]::before { background: var(--band-0); } .band-1[data-active="false"]::before { background: var(--band-1); } .band-2[data-active="false"]::before { background: var(--band-2); } .band-3[data-active="false"]::before { background: var(--band-3); } .band-4[data-active="false"]::before { background: var(--band-4); } .band-1[data-active="true"]::before { background: rgba(42, 26, 30, .55); } /* Nota de escala bajo la banda (inyectada por estratificacion.js) */ .estrat-escala { font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 9px 0 0; } @media (max-width: 560px) { /* "Muy alto"/"Moderado" deben entrar en UNA línea con aire (no al límite del chip). */ .band-bar { gap: 4px; } .band { padding: 10px 2px; } .band .nm { font-size: 9.5px; white-space: nowrap; letter-spacing: -.02em; } .band .rg { font-size: 9px; } } .band-0 { background: var(--band-0); color: #fff; } .band-1 { background: var(--band-1); color: var(--ink); } .band-2 { background: var(--band-2); color: #fff; } .band-3 { background: var(--band-3); color: #fff; } .band-4 { background: var(--band-4); color: #fff; } .risk-axis { display: flex; align-items: center; gap: 8px; color: var(--muted-2); margin: 14px 0 22px; } .risk-axis .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(154,138,142,.2), rgba(154,138,142,.5)); } .risk-axis span { font: 500 11.5px var(--sans); } .note-box { display: flex; gap: 11px; align-items: flex-start; background: rgba(255, 255, 255, .6); border-radius: var(--r-md); padding: 15px 16px; } .note-box p { font: 400 12.5px/1.55 var(--sans); color: var(--muted); margin: 0; } .note-box svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); } /* Estado pendiente / aviso del motor */ .estado-pill { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px var(--sans); padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid; } .estado-pendiente { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-line); } /* ---------- Formularios ---------- */ .field { margin-bottom: 22px; } .field-label { display: block; font: 600 13.5px var(--sans); color: #3a2a2e; margin-bottom: 10px; } .field-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .field-val { font: 600 18px var(--mono); color: var(--accent); } .field-val small { font: 500 11px var(--sans); color: var(--muted-2); margin-left: 4px; } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .seg-btn, .toggle-btn { padding: 12px; border: 1.5px solid var(--line-strong); border-radius: 11px; font: 600 14px var(--sans); transition: all .15s; background: var(--surface); color: var(--muted); } .seg-btn[aria-pressed="true"], .toggle-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } .toggle-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; width: 100%; } .toggle-btn .state { font: 700 12px var(--mono); opacity: .85; } .text-input, .select { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; font: 500 15px var(--sans); background: var(--surface); color: var(--ink); } .select { font-size: 13.5px; padding: 10px 12px; } .num-input { font: 600 15px var(--mono); color: var(--accent); } /* Sliders accesibles */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: var(--r-pill); background: rgba(42, 26, 30, .14); outline-offset: 6px; margin: 6px 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 9px rgba(110, 37, 54, .45); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 9px rgba(110, 37, 54, .45); cursor: pointer; } input[type=range]:focus-visible { outline: var(--focus); } /* ---------- Doppler ---------- */ .tree-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; } .tree-svg { width: 170px; height: auto; } .tree-region { cursor: pointer; } .tree-vessel { stroke: #d6a0a6; transition: stroke .2s; } .tree-region[aria-pressed="true"] .tree-vessel { stroke: var(--band-3); } .tree-legend { display: flex; flex-direction: column; gap: 12px; padding-left: 4px; } .tree-legend .ttl { font: 700 13.5px var(--sans); color: var(--ink); } .tree-legend .sub { font: 500 12px var(--sans); color: var(--muted-2); } .region-card { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; transition: all .2s; } .region-card[data-on="true"] { background: #fbeceb; border-color: #e7b6b2; } .region-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 13px; } .region-head .nm { font: 700 15px var(--sans); color: var(--ink); } .region-state { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px var(--sans); color: var(--muted-2); } .region-card[data-on="true"] .region-state { color: var(--band-3); } .region-state .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; } /* ---------- Reclasificación / flujo ---------- */ .flow-step { display: flex; align-items: center; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; } .flow-arrow { display: flex; justify-content: center; padding: 8px 0; color: #c79aa0; } .recap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .recap-col { display: flex; flex-direction: column; gap: 5px; } .recap-col .k { font: 500 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); } .recap-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); padding: 7px 14px; font: 700 13px var(--sans); } .recap-chip.basal { background: rgba(255,255,255,.12); color: #fff; } /* ---------- Metas ---------- */ .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid transparent; border-radius: 13px; padding: 14px 18px; transition: all .25s; background: rgba(255,255,255,.5); } .meta-row[data-active="true"] { background: var(--surface); box-shadow: var(--shadow-sm); } .meta-row .nm { font: 700 15px var(--sans); color: var(--ink); } .meta-row .sub { font: 500 12px var(--sans); color: var(--muted-2); margin-left: 7px; } .meta-row .val { font: 600 16px var(--mono); } .status-box { border: 1.5px solid; border-radius: var(--r-md); padding: 16px 18px; transition: all .25s; } .status-ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); } .status-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); } .status-neutral { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-line); } /* ---------- Derivación banner ---------- */ .deriv-banner { display: flex; align-items: flex-start; gap: 12px; border-radius: 13px; padding: 16px 18px; border: 1px solid; } .deriv-banner.is-deriva { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-line); } .deriv-banner.no-deriva { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-line); } /* ---------- Ficha viva (aside fijo) ---------- */ .ficha { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; } .ficha-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; background: var(--accent); color: #fff; } .ficha-toggle .ttl { display: flex; align-items: center; gap: 9px; font: 700 13px var(--sans); } .ficha-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #9be7b6; animation: blink 1.8s ease-in-out infinite; } .ficha-body { padding: 16px; } .ficha-body[hidden] { display: none; } .ficha-figure { font: 400 30px var(--serif); color: var(--ink); line-height: 1; } .ficha-figure small { font: 500 14px var(--sans); color: var(--muted-2); } .ficha-figure .pending { font: 600 14px var(--sans); color: var(--accent); } .ficha-cells { display: flex; gap: 8px; margin: 12px 0; } .ficha-cell { flex: 1; background: var(--accent-soft); border-radius: var(--r-sm); padding: 9px 11px; } .ficha-cell .k { font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); } .ficha-cell .v { font: 600 16px var(--mono); color: var(--accent); } /* ---------- Footer ---------- BORDÓ INSTITUCIONAL, GLOBAL (PART-2 · C11, decisión declarada): el footer es compartido por toda la SPA y era el único chrome BLANCO al pie — la página terminaba más clara que su contenido, un escalón de valor invertido. Cierra con el bordó profundo de la casa (el mismo en que terminan los heros) y el crédito en el beige de la paleta: #f5e2b8 sobre #48141f mide 11,79:1 (AAA, fórmula WCAG 2.2). De paso vuelve coherente la regla global que ya pintaba el focus-visible del footer en blanco presumiendo fondo oscuro. */ footer { background: var(--accent-deep); padding: 20px clamp(20px, 6vw, 80px); text-align: center; } .footer-credit { margin: 0; font: 500 13px var(--sans); color: var(--sincriterio-bg); } .footer-credit strong { font-weight: 700; color: var(--sincriterio-bg); } .footer-ecg { position: absolute; left: 0; right: 0; bottom: 24px; height: 44px; overflow: hidden; pointer-events: none; opacity: .22; } .footer-ecg svg { display: block; max-width: none; width: calc(100% + 165px); height: 100%; animation: ecgflow 2.8s linear infinite; } .paho-link { display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Indicadores (sec-dark) ---------- */ .kpi { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-md); padding: 24px; } .kpi .ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--hl); } .kpi h3 { font: 700 17px var(--sans); margin: 0 0 6px; color: #fff; } .kpi p { font: 400 13px/1.5 var(--sans); margin: 0; color: rgba(255, 255, 255, .7); } /* ---------- Animaciones ---------- */ @keyframes ecgflow { from { transform: translateX(0); } to { transform: translateX(-165px); } } @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.16); opacity: .65; } } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes spinslow { to { transform: rotate(360deg); } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } } [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } [data-reveal][data-in] { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 920px) { .nav-links { display: none; } .burger { display: inline-flex; } } @media (max-width: 1180px) { .ficha { right: 12px; bottom: 12px; width: auto; max-width: 330px; } } @media (max-width: 560px) { .ficha { left: 10px; right: 10px; max-width: none; } .seg { grid-template-columns: 1fr; } } /* ---------- Reduce motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---------- Print (la vista/sub-flujo activo de consulta) ---------- */ @media print { .app-header, .burger, .nav-panel, .logo-band, [data-noprint], footer, .hero, .skip-link, .back-link { display: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } body { background: #fff; } .view section { padding-top: 16px !important; } /* Tarjetas oscuras -> legibles en papel, conservando los colores semánticos de banda */ .card-dark, .on-dark { background: #fff !important; color: #1a1a1a !important; box-shadow: none !important; border: 1px solid #ccc !important; } .card-dark .label-mini, .on-dark .label-mini, .card-dark p, .on-dark p, .card-dark span, .on-dark span { color: #2a1a1e !important; } .estrat-pill, .recap-chip, .band[data-active="true"], .meta-row span[style*="color"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ========================================================================= Reestructuración a vistas (router) — header, vistas, consulta, estratificación ========================================================================= */ /* ---------- Header de la app (fijo) ---------- */ .app-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 5vw, 48px); background: rgba(251, 247, 246, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-links a[aria-current="page"] { color: var(--accent); font-weight: 700; } .nav-links a[aria-current="page"]::after { content: ""; display: block; height: 2px; border-radius: 2px; background: var(--accent); margin-top: 3px; } .nav-panel a[aria-current="page"] { color: var(--accent); font-weight: 700; } /* ---------- Banda institucional global (en flujo, bajo el header fijo) ---------- */ .logo-band { margin-top: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 12px clamp(16px, 5vw, 48px); background: var(--bg); border-bottom: 1px solid var(--line); } .logo-band img { height: 30px; width: auto; display: block; /* PNG blanco → berry #6e2536 exacto (cadena calibrada por canvas, ΔRGB = 0) */ filter: brightness(0) saturate(100%) invert(14%) sepia(35%) saturate(3552%) hue-rotate(-40deg) brightness(96.3%) contrast(85.2%); } .logo-band img:nth-child(1) { justify-self: start; } .logo-band img:nth-child(2) { justify-self: center; } .logo-band img:nth-child(3) { justify-self: end; } /* En #estudio la banda se oculta: el hero ya lleva sus propios logos (.hero-logos) */ body:has(#view-estudio:not([hidden])) .logo-band { display: none; } /* En #kpis ídem (KPI-HEADER): el masthead del dashboard lleva sus propios logos */ body:has(#view-kpis:not([hidden])) .logo-band { display: none; } /* ══════════════════════════════════════════════════════════════════════════════════════════ LOS TRES LOGOS SE FUERON DE LA BARRA DEL DOPPLER (DOP-UI · 1) ══ QUÉ HABÍA ══════════════════════════════════════════════════════════════════════════ Un `.dop-header-logos` metía los tres logos institucionales DENTRO de `.app-header`, sólo en #consulta/doppler y sólo arriba de 701 px, y apagaba la `.logo-band` global para compensar. ══ POR QUÉ SE VA — MEDIDO, NO OPINADO ═════════════════════════════════════════════════ No comprimía el nav: CHOCABA con él. Medición en el navegador (DSF 1, carga fresca), en 22 anchos, comparando cada uno contra el MISMO documento con los logos en `display:none`: ancho CON logos SIN logos 701 Brisa pisa el SWITCH DEMO por 46 px sin choques 921 4 choques a la vez (hasta 61 px) sin choques 1000 4 choques (hasta 72 px) sin choques 1100 2 choques · 3 links en dos renglones 0 renglones partidos 1200 2 choques (50 y 20 px) sin choques 1300 Brisa pisa «Estudio PESA» por 54 px sin choques 1440 Brisa pisa «Estudio PESA» por 56 px sin choques 1600 Brisa pisa «Estudio PESA» por 14 px sin choques 1920+ sin choques sin choques Diez de los veintidós anchos con superposición REAL de cajas, y el nav perdía hasta 163 px de ancho útil (521 contra 684 a 1301 px). Los tres links largos —«Estudio PESA», «Circuito Operativo», «Analítica de Laboratorio»— caían en dos renglones en TODA la franja 921–1600, contra ninguno sin los logos arriba de 1100. ══ LA CAUSA RAÍZ, CON FECHA ═══════════════════════════════════════════════════════════ `git log -S` lo fecha en a7325c2 (3/7/2026, "feat(doppler): eco doppler vascular + landing consulta + banda institucional"). Ese día la barra tenía marca + CINCO links. Hoy tiene marca + SIETE links + el switch de modo demostración (UI-1) + el segmento de usuario (AUTH-2). Cuatro ocupantes nuevos entraron después y nadie volvió a medir el ancho. Los logos no dejaron de entrar por un cambio de estilo: dejaron de entrar porque la barra se llenó. ══ QUÉ QUEDA ═════════════════════════════════════════════════════════════════════════ Nada especial. El Doppler pasa a usar la `.logo-band` de arriba, que es la franja institucional de TODOS los segmentos y que este segmento YA mostraba abajo de 701 px — no se agrega ninguna pieza, se saca el override que la apagaba. Con la banda de vuelta, la compensación de `padding-top` que existía por su ausencia también se va: dejarla sumaría un `--nav-h` de aire arriba del contenido, que es el defecto contrario. ══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .logo-band { padding: 9px 16px; gap: 12px; } .logo-band img { height: 21px; } } /* ---------- Sistema de vistas ---------- */ /* Columna flexible a viewport completo: el main absorbe el alto sobrante y el footer asienta siempre contra el borde inferior, sin franja blanca. */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; display: flex; flex-direction: column; } main > .view { flex: 1 0 auto; } .view { display: block; } .view[hidden] { display: none !important; } /* Con la banda institucional en flujo, las vistas ya no despejan el header fijo con padding: solo aire editorial respecto de la banda. */ .view:not(#view-estudio) section { padding-top: clamp(34px, 4.5vw, 56px); } .view-enter { animation: viewIn .32s cubic-bezier(.2, .7, .2, 1); } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- Circuito: la vista LLENA el alto disponible ---------- main > .view ya es flex:1, pero la cadena moría ahí: la sección no se estiraba y quedaban ~134px muertos bajo la grilla a 1440×900 (medido), con el conjunto "flotando" arriba. Se propaga el flex hasta la grilla: la lista reparte sus 6 botones en el alto disponible y la card de detalle acompaña (align-items:stretch del grid). En viewports bajos o apilados el contenido manda: min-height en los botones y nada se comprime por debajo de su contenido. */ #view-circuito { display: flex; flex-direction: column; } #view-circuito.view section { padding-top: 24px; padding-bottom: 44px; flex: 1; display: flex; } #view-circuito.view section > .container { display: flex; flex-direction: column; width: 100%; } #view-circuito .etapas-grid { flex: 1; } #etapas-list button { flex: 1; min-height: 64px; } /* Apilado (móvil): el botón se dimensiona por su CONTENIDO. Con flex:1 (basis 0) y el título largo de la etapa 6 a 3 líneas, el padding de 15px colapsaba y el texto quedaba a 0,4px del borde (los hermanos, a 19,7px) — medido a 375 y 414. Sólo rige donde la lista apila; en dos columnas la card de detalle da altura de sobra y flex:1 reparte con aire. */ @media (max-width: 700px) { #etapas-list button { flex: 0 0 auto; } } /* Elevación en la escala YA unificada (#metas / 3 pasos): la card de detalle es la pieza destacada de la vista → --shadow-md, el mismo escalón que .rcl-strat. */ #etapa-detalle { box-shadow: var(--shadow-md); } /* max-width liberado: la bajada entra en una sola fila a 1440 */ #view-circuito .sec-head { margin-bottom: 16px; max-width: none; } #view-circuito .sec-head h1.h2 { font: 600 clamp(30px, 3.6vw, 44px)/1.06 var(--serif); margin: 0 0 8px; } #view-circuito .lead { font-size: 15px; line-height: 1.5; } #etapas-list button > span:first-child { width: 32px !important; height: 32px !important; font-size: 14px !important; } /* Tarjeta de detalle: pill anclada arriba y bloque de texto centrado en el espacio restante (elimina el aire muerto entre pill y texto; la altura sigue igualada a la lista). */ #etapa-detalle { justify-content: flex-start; } #etapa-detalle .etapa-pill { margin-bottom: 18px !important; } #etapa-detalle .etapa-body { margin: auto 0 !important; } /* Marca de agua UNIFICADA: icono + número como un solo lockup (el icono, oblicuo, corona al número sobre el mismo eje vertical), centrado a la derecha y SIEMPRE entero dentro de la tarjeta (recorte consistente en las 6 etapas). El número manda; el icono susurra (menor tamaño relativo y opacidad .07 vs .10 del número). */ #etapa-detalle .etapa-marca { position: absolute; top: 50%; right: clamp(18px, 3vw, 36px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .8vw, 10px); pointer-events: none; } #etapa-detalle .etapa-marca-icono { display: block; width: clamp(48px, 6.5vw, 88px); height: clamp(48px, 6.5vw, 88px); color: rgba(255, 255, 255, .07); transform: rotate(-15deg); } #etapa-detalle .etapa-marca-num { font: 500 clamp(150px, 24vw, 290px)/.8 var(--serif); color: rgba(255, 255, 255, .10); } /* Progreso del circuito al pie de la tarjeta (llena el pie con propósito: "recorrido trazable"). Decorativo (aria-hidden: el dato lo da "Etapa N de 6"); la etapa activa se distingue por grosor y anillo además del color de su fase. */ #etapa-detalle .etapa-progreso { position: relative; display: flex; align-items: center; gap: 6px; height: 6px; margin-top: 22px; flex-shrink: 0; } #etapa-detalle .etapa-progreso span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); } #etapa-detalle .etapa-progreso span.pasada { background: rgba(255, 255, 255, .34); } #etapa-detalle .etapa-progreso span.activa { height: 6px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); } @media (max-width: 700px) { #view-circuito.view section { padding-top: 30px; padding-bottom: clamp(40px, 8vw, 60px); } /* Holgura de seguridad: separa el pie del numeral del anillo del progreso en tarjetas bajas. */ #etapa-detalle .etapa-marca { top: calc(50% - 2px); } } .grid-3 { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ---------- Tarjetas bordó de Consulta (marca de agua editorial) ---------- */ .consulta-cards { align-items: stretch; } .consulta-card { /* Tamaño de la marca de agua por tarjeta: calibrado por getBBox para igualar la TINTA óptica (~74px de render) — el trazo de cada ícono llena distinto su viewBox 24 (transductor 18.8 · estetoscopio 19.4 · clipboard 18.0). */ --wm-size: 94px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 316px; text-decoration: none; /* Degradé berry diagonal (accent → panel → deep, tokens de la casa) para dar profundidad; el hover ya no cambia el fondo: solo eleva (criterio Apple). */ background: linear-gradient(145deg, var(--accent) 0%, var(--berry-panel) 72%, var(--accent-deep) 125%); color: #fff; border: 1px solid rgba(255, 255, 255, .10); border-radius: var(--r-lg); padding: clamp(24px, 2.3vw, 30px) clamp(24px, 2.3vw, 30px) 78px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 48px rgba(72, 20, 31, .26), 0 10px 22px rgba(110, 37, 54, .22), 0 2px 6px rgba(72, 20, 31, .14); transition: transform .15s ease, box-shadow .15s ease; } /* * EL TAMAÑO SIGUE AL ÍCONO, NO A LA POSICIÓN (ORG-1). * * Estas dos reglas eran `:nth-child(2)` y `:nth-child(3)`. El tamaño está calibrado por la TINTA * óptica de cada glifo —cada ícono llena distinto su viewBox—, así que pertenece a la tarjeta y no * al lugar donde cae. Con el selector posicional, reordenar la portada le cambiaba el tamaño del * glifo a dos tarjetas sin que nadie lo pidiera; ORG-1 reordenó, y esto habría sido el defecto * silencioso del lote. El `href` es la identidad estable de cada tarjeta —es identificador de ruta * y no cambia—, así que anclarlo ahí lo deja resuelto para siempre. */ .consulta-cards .consulta-card[href="#consulta/inicial"] { --wm-size: 92px; } /* estetoscopio */ .consulta-cards .consulta-card[href="#consulta/reclasificacion"] { --wm-size: 99px; } /* clipboard */ .consulta-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 32px 64px rgba(72, 20, 31, .32), 0 14px 30px rgba(110, 37, 54, .26), 0 3px 8px rgba(72, 20, 31, .16); } .consulta-card:hover .cc-wm { color: rgba(255, 255, 255, .16); } .consulta-card:hover .cc-arrow { transform: translateX(4px); } .consulta-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Pulso ECG de la casa (mismo patrón del hero y del botón Finalizar) escalado ×1.33 (período 220px) y a ritmo calmo, corriendo entero al pie de cada tarjeta. */ .cc-ecg { position: absolute; left: -6px; right: -6px; bottom: 8px; height: 59px; overflow: hidden; opacity: .45; pointer-events: none; } .cc-ecg svg { display: block; max-width: none; width: calc(100% + 220px); height: 100%; animation: ecgflow-cc 5s linear infinite; } @keyframes ecgflow-cc { from { transform: translateX(0); } to { transform: translateX(-220px); } } /* Marca de agua ENTERA dentro de la card (antes offsets negativos + overflow:hidden la recortaban): offsets positivos y tamaño --wm-size por tarjeta; la rotación −12° expande el bbox ~9px por lado, los 22px de margen la contienen con aire. El overflow:hidden se conserva (recorta el ECG del pie y respeta el radio). */ .cc-wm { position: absolute; top: 22px; right: 22px; width: var(--wm-size); height: var(--wm-size); color: rgba(255, 255, 255, .11); transform: rotate(-12deg); pointer-events: none; transition: color .15s ease; } /* Ritmo vertical: kicker anclado arriba como marcador de índice; el lockup título+flecha+subtítulo se centra en la zona libre (doble margen auto); el pie queda reservado para el ECG por el padding inferior de la card. */ .cc-kicker { position: relative; font: 800 15px/1 var(--sans); letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--hl); margin-bottom: auto; } .cc-titlerow { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 18px; } .cc-title { font: 700 var(--fs-hero)/1.15 var(--serif); } .cc-sub { position: relative; font: 400 15px/1.5 var(--sans); color: rgba(255, 255, 255, .78); margin: 10px 0 auto; } .cc-arrow { flex-shrink: 0; color: rgba(255, 255, 255, .7); transition: transform .15s ease; } @media (max-width: 899px) { .consulta-card { min-height: 244px; padding-bottom: 70px; } .cc-title { font-size: 25px; } .cc-kicker { font-size: 14px; } /* Misma proporción óptica que desktop (×.76), también entera dentro de la card. */ .cc-wm { width: calc(var(--wm-size) * .76); height: calc(var(--wm-size) * .76); top: 16px; right: 16px; color: rgba(255, 255, 255, .08); } } /* ---------- Consulta (landing): la vista es columna flex y la landing llena el espacio disponible (flex: 1) — el centrado interno distribuye el contenido y el footer queda asentado exacto, sin calibrar alturas a mano. ---------- */ #view-consulta { display: flex; flex-direction: column; } #view-consulta section[data-subflow="landing"] { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-top: 26px; padding-bottom: 44px; } /* ---------- Dashboard de KPIs (KPI-A3): REPORTE EJECUTIVO COMPACTO ---------- Paradigma one-pager (apto A4): 3 niveles — HERO de hallazgos-titular · PANELES de distribución (barras apiladas horizontales UNIFORMES, sin donuts repetidos con "TOTAL") · TABLAS densas de apoyo. Grilla 12-col con clases estables (kpi-q=3 · kpi-card=4 · kpi-wide=6 · kpi-full=12). El fill de TODA barra es display:block / flex-item (evita el bug de KPI-A2: span inline con width:0). El denominador se declara UNA vez (faja de cohorte / base de nivel). */ /* Costura masthead→contenido: aire mayor que el 16px del one-pager viejo — la franja berry full-bleed pide respiro antes del banner demo (en print vuelve a 16px vía la regla global .view section). */ #view-kpis.view > section { padding-top: clamp(22px, 3vw, 28px); padding-bottom: 24px; } /* Separación figura-fondo (KPI-A4): el lienzo del reporte baja medio punto de luminosidad respecto de --bg (gris-berry frío) para que las cards blancas despeguen con la sombra difusa. Sólo esta vista; en print vuelve a blanco. */ #view-kpis > section.sec-tint { background: #f3eeef; } /* Masthead estilo portada (KPI-HEADER): franja berry full-bleed que hereda el lenguaje del hero de #estudio (mismo gradiente, logos blancos, serif display, strip ECG) en versión COMPACTA de dashboard (~320px content-driven, sin 100vh ni los clamps del hero, calibrados para pantalla completa). Grid con áreas: en mobile el botón PDF cae al FINAL de la franja (nunca entre logos y título). Base del A4 de KPI-B. Ritmo interno: logos→h1 clamp(18,2.5vh,26) · h1→meta 10px · meta→ECG clamp(16,2.5vh,24). --kpi-mast-gap sobrevive al masthead viejo: lo consume el marco del reporte (banner→faja). */ #view-kpis { --kpi-mast-gap: 10px; } .kpi-masthead { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(22px, 3.5vh, 32px)) clamp(20px, 6vw, 80px) 0; background: radial-gradient(135% 125% at 84% -12%, var(--accent) 0%, var(--accent-deep) 73%); color: #fff; } .kpi-masthead-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: start; grid-template-areas: 'logos btn' 'title title' 'meta meta'; } .kpi-masthead-logos { grid-area: logos; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 3vw, 34px); margin-bottom: clamp(18px, 2.5vh, 26px); } .kpi-masthead-logos img { height: 44px; width: auto; } /* 46px máx = una línea holgada a 1440 (título medido: 870px vs 1180 útiles) y jerarquía clara bajo el hero de portada (82px); excepción consciente a --fs-display (38px). */ .kpi-masthead h1 { grid-area: title; font: 600 clamp(28px, 3.2vw, 46px)/1.08 var(--serif); letter-spacing: -.01em; margin: 0 0 10px; color: #fff; } .kpi-masthead-meta { grid-area: meta; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; } .kpi-masthead-sub { margin: 0; font: 500 clamp(15px, 1.7vw, 17.5px)/1.45 var(--sans); color: rgba(255, 255, 255, .92); } .kpi-masthead-corte { margin: 0; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; } /* Botón de descarga (operativo desde KPI-B): ghost sobre berry, ahora con afford pleno (borde .45 + hover/active) porque la acción existe: dispara window.print() → "Guardar como PDF". La transición sobria respeta el lenguaje del hero. */ #view-kpis .kpi-pdf-btn { grid-area: btn; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font: 700 13.5px var(--sans); color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); padding: 10px 18px; transition: background .15s ease, border-color .15s ease; } #view-kpis .kpi-pdf-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .7); } #view-kpis .kpi-pdf-btn:active { background: rgba(255, 255, 255, .12); } #view-kpis .kpi-pdf-btn svg { flex-shrink: 0; } #view-kpis .kpi-pdf-btn[disabled] { cursor: not-allowed; } /* Strip ECG al pie de la franja: reusa .hero-ecg (full-bleed + ecgflow); compacto y más sutil que en portada. El margin-top explícito reemplaza el auto del hero (columna flex). */ .kpi-masthead .hero-ecg { height: 36px; margin: clamp(16px, 2.5vh, 24px) calc(50% - 50vw) clamp(14px, 2.2vh, 22px); opacity: .4; } /* margen inferior (AUTH-2): el ECG ya no toca el borde */ @media (max-width: 680px) { .kpi-masthead-inner { grid-template-columns: 1fr; grid-template-areas: 'logos' 'title' 'meta' 'btn'; } #view-kpis .kpi-pdf-btn { justify-self: stretch; justify-content: center; margin-top: 14px; } } @media (max-width: 480px) { .kpi-masthead-logos { flex-wrap: nowrap; gap: 14px; } .kpi-masthead-logos img { height: 29px; } } /* === Sistema de diseño (KPI-A3/A4) — un valor por rol; escala de KPI-A2 bajada levemente para densificar el one-pager (section 28→25 · ctitle 17→15 · cdesc 13→12 · datanum 32→30 · gap 20→16 · pad 20→16 · radius 16→14). === */ #kpis-root { --kpi-fs-section: 25px; /* título de nivel (serif 600, peso real cargado) — domina sobre ctitle */ --kpi-fs-ctitle: 15px; /* título de panel (serif 600) */ --kpi-fs-cdesc: 12px; /* descripción de panel (sans 400 muted) */ --kpi-fs-datanum: 30px; /* número de dato (serif 600) */ --kpi-fs-titular: 40px; /* hallazgo-titular del hero (serif 600) */ --kpi-fs-cval: 13px; /* valores %/n (sans 500) */ --kpi-fs-axis: 11px; /* ejes/leyendas (sans 600 uppercase) */ --kpi-fs-base: 11px; /* nota de base (sans 500 muted) */ --kpi-fs-kick: 13px; /* kicker de nivel 01/02/03 (mono 600) */ --kpi-fs-cohv: 15px; /* valor de la faja de cohorte (mono 600) */ --kpi-fs-gnum: 15px; /* valor al centro de gauge/muescas (mono 600) */ --kpi-fs-unit: 14px; /* unidad junto a k-datanum (sans 600 muted) */ --kpi-gap: 16px; /* gap de grilla */ --kpi-pad: 16px; /* padding de panel */ --kpi-radius: var(--r-md); /* radio de panel/hero (deriva del token global, no lo duplica) */ --kpi-radius-inner: 10px; /* superficie interna: banner · tile · cohorte (10 y no --r-sm 9: óptico anidado en 14) */ --kpi-hole: var(--surface); /* "agujero" de semi-donut/gauge = superficie portante (los tiles lo re-declaran) */ --kpi-radius-bar: 5px; /* tracks y fills de barra */ --kpi-radius-chip: 3px; /* chips de leyenda */ --kpi-shadow: 0 1px 2px rgba(42, 26, 30, .04), 0 8px 24px rgba(42, 26, 30, .07); /* elevación macOS: contacto + difusa, sin borde duro */ --kpi-shadow-hero: 0 2px 4px rgba(42, 26, 30, .05), 0 14px 34px rgba(110, 37, 54, .13); /* hero: un punto más de elevación */ --kpi-track: rgba(42, 26, 30, .15); /* pista de barras/gauges — perceptible como escala (antes .09 ≈ invisible) */ --kpi-demo-accent: #c9a227; /* dorado del banner demo (borde) */ --kpi-demo-ink: #8a6d00; /* dorado profundo del ícono del banner */ --kpi-divider: rgba(110, 37, 54, .3); /* divisor interno bordó tenue (metas C-LDL | PA) — .18 de A5 renderizaba pero era imperceptible sobre la card blanca (KPI-A6) */ --muted-2: #6d5c60; /* re-tune scoped: recupera margen AA (≥5.2:1) sobre el lienzo #f3eeef */ /* Bandas AVIVADAS scoped al reporte (KPI-A4): MISMO hue clínico que las --band-* globales (motor y resto del sitio intactos); sólo +saturación para que los charts pinten con presencia. band-1 (ámbar) es segmento gráfico, nunca portador de texto. */ --band-0: #1b8d4e; /* verde · global #277a4c · hsl(147) S 52→68 */ --band-1: #d3a417; /* ámbar · global #caa12a · hsl(45) S 66→80 */ --band-2: #c85c19; /* naranja · global #b05a26 · hsl(23) S 64→78 */ --band-3: #be3127; /* rojo · global #b23a30 · hsl(5→4) S 58→66 */ --band-4: #8c1d2b; /* bordó · global #7d1f2b · hsl(352) S 60→66 */ } /* Serif del sitio a peso REAL: Source Serif 4 se carga 400/500/600 (index.html) — el 700 anterior era bold sintético (trazo empastado). 600 = mismo peso que los h1–h4 del sitio. */ #kpis-root .k-sec { font: 600 var(--kpi-fs-section)/1.12 var(--serif); letter-spacing: -.02em; color: var(--ink); margin: 0; } #kpis-root .k-ctitle { font: 600 var(--kpi-fs-ctitle)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 0; } #kpis-root .k-cdesc { font: 400 var(--kpi-fs-cdesc)/1.4 var(--sans); color: var(--muted-2); margin: 2px 0 0; } #kpis-root .k-base { font: 500 var(--kpi-fs-base)/1.35 var(--sans); color: var(--muted-2); margin: 0; } #kpis-root .k-base b { font-weight: 700; color: var(--muted); } #kpis-root .k-val { font: 500 var(--kpi-fs-cval)/1.15 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } #kpis-root .k-num { font: 600 var(--kpi-fs-cval)/1.15 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } #kpis-root .k-axis { font: 600 var(--kpi-fs-axis)/1.3 var(--sans); color: var(--muted-2); letter-spacing: .03em; } #kpis-root .k-datanum { font: 600 var(--kpi-fs-datanum)/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; } #kpis-root .k-titular { font: 600 var(--kpi-fs-titular)/.95 var(--serif); letter-spacing: -.01em; color: var(--accent); font-variant-numeric: tabular-nums; } #kpis-root .k-chip { width: 12px; height: 12px; border-radius: var(--kpi-radius-chip); flex-shrink: 0; } /* Banner demo (la meta-line vieja murió con el masthead KPI-HEADER: el programa vive en el h1 de la franja y el corte en su slot [data-kpi-corte]) */ #kpis-root .kpi-banner { display: flex; align-items: center; gap: 9px; background: var(--accent-soft); border: 1px solid var(--line); border-left: 3px solid var(--kpi-demo-accent); border-radius: var(--kpi-radius-inner); padding: 7px 12px; margin: 0 0 var(--kpi-mast-gap); } #kpis-root .kpi-banner svg { flex-shrink: 0; color: var(--kpi-demo-ink); } #kpis-root .kpi-banner .k-val { color: var(--muted); } /* Faja de cohorte — declara los denominadores UNA vez */ #kpis-root .kpi-cohort { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--kpi-radius-inner); background: var(--surface); box-shadow: var(--kpi-shadow); } #kpis-root .kpi-coh-kick { flex-shrink: 0; text-transform: uppercase; } #kpis-root .kpi-coh-group { display: flex; flex-wrap: wrap; gap: 12px 22px; } /* 22 = mismo intervalo que la canaleta de los separadores (KPI-A6: item-item medía 20 y desbalanceaba 2px) */ /* Desktop: la faja ocupa TODO el ancho — los grupos crecen y reparten sus stats (space-between; el gap 22 pasa a ser el mínimo entre items). Sólo cuando el contenido entra en UNA fila (medido: ≥961 el ancho útil ≥ los 797px naturales); más angosto vuelve al flujo compacto con wrap — estirado + wrap dejaba el separador huérfano pegado al borde (KPI-A6b). */ @media (min-width: 961px) { #kpis-root .kpi-coh-group { flex: 1 1 auto; justify-content: space-between; } } #kpis-root .kpi-coh-item { display: flex; flex-direction: column; gap: 1px; } #kpis-root .kpi-coh-v { font: 600 var(--kpi-fs-cohv)/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } #kpis-root .kpi-coh-l { font: 600 var(--kpi-fs-axis)/1.2 var(--sans); color: var(--muted-2); letter-spacing: .03em; } #kpis-root .kpi-coh-u { font: 600 var(--kpi-fs-axis) var(--sans); color: var(--muted-2); } #kpis-root .kpi-coh-pct { color: var(--accent); } #kpis-root .kpi-coh-sep { width: 1px; align-self: stretch; background: var(--line-strong); } /* Encabezado de nivel */ #kpis-root .kpi-lvlhead { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; } #kpis-root .kpi-lvlkick { font: 600 var(--kpi-fs-kick)/1 var(--mono); color: var(--accent); letter-spacing: .04em; font-variant-numeric: tabular-nums; } #kpis-root .kpi-lvlbase { margin-left: auto; } /* NIVEL 1 — HERO */ #kpis-root .kpi-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kpi-gap); } #kpis-root .kpi-herocell { display: flex; align-items: center; gap: 16px; padding: 15px 17px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--kpi-radius); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); box-shadow: var(--kpi-shadow-hero); break-inside: avoid; } #kpis-root .kpi-herocell .k-titular { flex-shrink: 0; } #kpis-root .kpi-herotxt { min-width: 0; } #kpis-root .kpi-herotxt .k-base { margin-top: 6px; } /* Hero protagonista (KPI-A4): el hallazgo central de PESA (celda 1) manda en berry profundo con acento dorado — dominancia por MATERIAL, no por otro tamaño (la escala sigue única). Contraste: titular/título #fff ≥12:1 · cdesc .8 ≥8:1 · base .68 ≥5.5:1 (verificado en DOM). */ #kpis-root .kpi-herocell-lead { background: linear-gradient(135deg, var(--accent-deep), var(--berry-panel)); border-color: var(--accent-deep); border-left-color: var(--hl); } #kpis-root .kpi-herocell-lead .k-titular, #kpis-root .kpi-herocell-lead .k-ctitle { color: #fff; } #kpis-root .kpi-herocell-lead .k-cdesc { color: rgba(255, 255, 255, .8); } #kpis-root .kpi-herocell-lead .k-base { color: rgba(255, 255, 255, .68); } #kpis-root .kpi-herocell-lead .k-base b { color: rgba(255, 255, 255, .88); } /* ≤940: el min-content de una herocell (titular 40px no-comprimible + gap + palabra más larga del título) ronda 255px — con 3 columnas el grid desbordaba en 761–940 (blowout medido a 768: scrollW 845). Cazado en KPI-A5; antes el corte estaba en 760. */ @media (max-width: 940px) { #kpis-root .kpi-hero { grid-template-columns: 1fr; } } /* GRILLA 12-col — align-items:stretch (altura pareja por fila, sin bordes escalonados); las cards se ordenan por altura de contenido (fila de 5 bandas junta) y el sobrante de las más cortas respira SIMÉTRICO vía .kpi-cbody{justify-content:center} (KPI-A4). */ #kpis-root .kpi-grid { display: grid; gap: var(--kpi-gap); grid-template-columns: repeat(12, 1fr); align-items: stretch; } #kpis-root .kpi-grid > .kpi-card { grid-column: span 4; } /* default */ #kpis-root .kpi-grid > .kpi-q { grid-column: span 3; } /* DESPUÉS de kpi-card: gana en la cascada (misma especificidad) */ #kpis-root .kpi-grid > .kpi-wide { grid-column: span 6; } #kpis-root .kpi-grid > .kpi-full { grid-column: 1 / -1; } @media (max-width: 1040px) { #kpis-root .kpi-grid > .kpi-q { grid-column: span 6; } #kpis-root .kpi-grid > .kpi-card { grid-column: span 6; } #kpis-root .kpi-grid > .kpi-wide { grid-column: 1 / -1; } /* kpi-full DEBE re-declararse: las cards llevan "kpi-card kpi-full" y el span 6 de arriba (posterior en el archivo) le ganaba al 1/-1 de la base → Metas quedaba a MEDIA fila en 681–1040 (columnas de ~140px, valores tachando el divisor). Cazado en KPI-A5. */ #kpis-root .kpi-grid > .kpi-full { grid-column: 1 / -1; } } @media (max-width: 680px) { #kpis-root .kpi-grid > .kpi-q, #kpis-root .kpi-grid > .kpi-card, #kpis-root .kpi-grid > .kpi-wide, #kpis-root .kpi-grid > .kpi-full { grid-column: 1 / -1; } } /* PANEL uniforme */ #kpis-root .kpi-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--kpi-radius); padding: var(--kpi-pad); box-shadow: var(--kpi-shadow); break-inside: avoid; page-break-inside: avoid; } /* Los .kpi-card son
: el override global .view:not(#view-estudio) section (1,1,1) les pisaba el padding-top con 56px (aire muerto sobre TODOS los títulos). Se empata la especificidad con id — mismo idioma que #view-consulta section.rcl-card. */ #view-kpis section.kpi-card { padding: var(--kpi-pad); } #kpis-root .kpi-chead { display: flex; flex-direction: column; gap: 2px; } /* Respiración simétrica (KPI-A4): dentro de una fila pareja (stretch), el sobrante de las cards más cortas se reparte arriba/abajo del contenido — sin pozos al pie (la nota de base sigue anclada abajo porque es hermana del cbody, no hija). */ #kpis-root .kpi-cbody { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-top: 12px; } #kpis-root .kpi-card > .k-base { margin-top: 12px; } /* BARRA APILADA horizontal (sBar) + leyenda. Junta blanca de 1px entre segmentos contiguos (WCAG 1.4.11: pares equiluminantes como band-3/muted-2 dan 1.0:1 — la frontera la traza la junta física, no el color). Ídem hairline en chips y puntos. */ #kpis-root .k-sbar { display: flex; flex-direction: column; gap: 11px; } #kpis-root .k-strack { display: flex; height: 18px; border-radius: var(--kpi-radius-bar); overflow: hidden; background: var(--kpi-track); } #kpis-root .k-sseg { min-width: 2px; } #kpis-root .k-sseg + .k-sseg { box-shadow: -1px 0 0 var(--surface); } #kpis-root .k-chip:not(.k-chip-none), #kpis-root .k-ddot-b { box-shadow: inset 0 0 0 1px rgba(42, 26, 30, .18); } #kpis-root .k-sleg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } #kpis-root .k-sli { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; } #kpis-root .k-slbl { font: 500 var(--kpi-fs-cval)/1.2 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #kpis-root .k-spct { text-align: right; } #kpis-root .k-sn { text-align: right; min-width: 40px; } /* DUMBBELL basal→final (reclasificación · KPI-A4): por banda, línea que conecta el punto basal (aro) con el final (sólido) sobre una pista común 0→max — comunica magnitud y DIRECCIÓN del movimiento mejor que dos apiladas. Valores n→n en mono a la derecha. */ #kpis-root .k-dumb { list-style: none; margin: 0; padding: 0; } #kpis-root .k-drow { display: grid; grid-template-columns: 12px minmax(70px, auto) 1fr auto; align-items: center; gap: 9px; min-height: 30px; border-top: 1px solid var(--line); } #kpis-root .k-dumb > li:first-child { border-top: 0; } #kpis-root .k-dtrack { position: relative; height: 18px; margin: 0 7px; } #kpis-root .k-dtrack::before { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--kpi-track); } #kpis-root .k-dline { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; opacity: .4; } #kpis-root .k-ddot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; } #kpis-root .k-ddot-a { background: var(--surface); border: 2.5px solid; } /* basal: aro */ #kpis-root .k-ddot-b { border: 0; } /* final: sólido */ #kpis-root .kpi-rec-note { margin: 10px 0 0; } #kpis-root .kpi-rec-key { display: flex; align-items: center; gap: 6px; } #kpis-root .kpi-rec-key .k-ddot { position: static; margin: 0; flex-shrink: 0; } /* Cabecera de leyenda del dumbbell: clave basal/final a la derecha de la primera fila */ #kpis-root .kpi-rec-head { display: flex; justify-content: flex-end; margin-bottom: 2px; } /* TABLA densa (barTable): label · barra fina · valor */ #kpis-root .k-tbl { list-style: none; margin: 0; padding: 0; } #kpis-root .k-trow { display: grid; grid-template-columns: minmax(110px, 42%) 1fr auto; align-items: center; gap: 12px; min-height: 30px; border-top: 1px solid var(--line); } #kpis-root .k-tbl > li:first-child { border-top: 0; } #kpis-root .k-tlbl { font: 500 var(--kpi-fs-cval)/1.2 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #kpis-root .k-tbar { height: 7px; border-radius: var(--kpi-radius-bar); overflow: hidden; background: var(--kpi-track); } #kpis-root .k-tfill { display: block; height: 100%; border-radius: var(--kpi-radius-bar); } #kpis-root .k-tval { text-align: right; white-space: nowrap; } #kpis-root .k-tgroup { font: 600 var(--kpi-fs-axis)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding: 9px 0 3px; border-top: 1px solid var(--line-strong); } #kpis-root .k-tbl > .k-tgroup:first-child { border-top: 0; } /* STATS compactos (chip · label · % · n) */ #kpis-root .k-stats { list-style: none; margin: 0; padding: 0; } #kpis-root .k-statrow { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 9px; min-height: 30px; border-top: 1px solid var(--line); } #kpis-root .k-stats > li:first-child { border-top: 0; } #kpis-root .k-chip-none { background: transparent; } /* TILES de dato (carga y cobertura) — matriz 2×2 PAREJA: filas iguales (auto-rows 1fr) y cada tile centra su contenido; gauge, muescas y stat-numbers quedan en celdas del mismo alto (sin 2×2 cabezón) y la card no infla su fila. */ #kpis-root .k-tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 10px; } #kpis-root .k-tile { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px 8px; background: var(--accent-soft); border-radius: var(--kpi-radius-inner); } #kpis-root .k-tile { --kpi-hole: var(--accent-soft); } /* el agujero de un anillo montado en tile hereda la superficie del tile */ #kpis-root .k-tile .k-unit { font: 600 var(--kpi-fs-unit) var(--sans); color: var(--muted-2); } #kpis-root .k-tile .k-tilelbl { margin-top: 5px; display: block; } #kpis-root .k-tile .k-tsub { margin-top: 1px; display: block; } /* SEMI-DONUT (extensión PESA · KPI-A4): proporción del todo en arco de 180° — conic-gradient del motor propio; el agujero es un disco a --kpi-hole (sin mask: imprime fiel) y ALOJA el dato-resumen (% con placa) como los gauges — misma convención en la familia de anillos. Leyenda estándar debajo (chip · label · % · n). Un solo ejemplar: variedad sin ruido. */ #kpis-root .k-sdon { display: flex; flex-direction: column; gap: 10px; } #kpis-root .k-semi { position: relative; width: 160px; height: 80px; margin: 0 auto; overflow: hidden; } #kpis-root .k-semi-ring { position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%; } #kpis-root .k-semi-hole { position: absolute; left: 50%; bottom: -53px; transform: translateX(-50%); width: 106px; height: 106px; border-radius: 50%; background: var(--kpi-hole); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 15px; gap: 1px; } /* GAUGE radial chico (carga/cobertura · KPI-A4): anillo de progreso conic-gradient con el valor al CENTRO en tinta (el color sólo codifica avance); remanente en --kpi-track (.15, legible como escala). Solo para el dato de completitud; 214 y 2,3 mm siguen stat-number. */ #kpis-root .k-gauge { position: relative; width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; display: block; } #kpis-root .k-gauge-hole { position: absolute; inset: 6px; border-radius: 50%; background: var(--kpi-hole); display: flex; align-items: center; justify-content: center; } #kpis-root .k-gnum { font: 600 var(--kpi-fs-gnum)/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } #kpis-root .k-gnum .k-unit { font: 600 var(--kpi-fs-axis) var(--sans); color: var(--muted-2); } #kpis-root .k-tile-g .k-tilelbl { margin-top: 7px; } /* MUESCAS 5/5 (territorios · KPI-A4): indicador DISCRETO para una media sobre 5 — 4 llenas + 1 parcial es geometría honesta con el dato (un anillo al 92% no lo es). */ #kpis-root .k-notches { display: flex; gap: 3px; width: 84px; margin: 5px auto 0; } #kpis-root .k-notch { flex: 1; height: 9px; border-radius: 3px; background: var(--kpi-track); } /* Pila de dos sub-bloques dentro de un panel (BEWAT basal + reestratificación): mismo eje clínico, un solo chrome de card; sub-headers en k-axis (como Metas). */ #kpis-root .kpi-stack2 { display: flex; flex-direction: column; gap: 15px; } /* METAS dual (C-LDL + PA) en un panel — cada columna es una barTable densa (label · barra que llena · valor), sin pasillos label→valor del panel full. DIVISOR (KPI-A5): línea bordó tenue CENTRADA en el pasillo de 28px (margen negativo de media canaleta + padding que la devuelve): sub-bloques diferenciados, márgenes parejos. */ #kpis-root .kpi-metas2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; } #kpis-root .kpi-metas-col { min-width: 0; } #kpis-root .kpi-metas-col + .kpi-metas-col { border-left: 1px solid var(--kpi-divider); margin-left: -14px; padding-left: 13px; } #kpis-root .kpi-metas-col .k-trow { grid-template-columns: minmax(88px, 32%) 1fr auto; } /* piso 88px: "Individualizar" entra completo (categoría clínica, no se elipsa) */ #kpis-root .kpi-metas-h { display: block; margin-bottom: 8px; } @media (max-width: 680px) { #kpis-root .kpi-metas2 { grid-template-columns: 1fr; } /* Apilado: el divisor pasa de vertical a horizontal entre los dos sub-bloques. */ #kpis-root .kpi-metas-col + .kpi-metas-col { border-left: 0; margin-left: 0; padding-left: 0; border-top: 1px solid var(--kpi-divider); padding-top: 14px; } } /* FOOTER metodológico — colofón editorial (KPI-A5): label FUENTE diferenciado (uppercase bordó) + texto a la izquierda. KPI-FUENTE: el texto usa TODO el ancho de la columna 1fr (acotado por el container 1180px del layout) — la medida de lectura acotada (70ch) dejaba la mitad derecha vacía y el renglón normativo envolvía en ~3-4 líneas; a ancho completo baja a 1-2 líneas y reduce el alto del bloque. Medida amplia propia de fine-print/colofón. OJO cascada: el