/* ============================================================ HOLOGRAM UI · v2 · tratamiento INSTRUMENTO Una hoja, sin build, sin librerías. La jerarquía la hacen tres cosas y nada más: 1. la retícula de líneas de 1 px 2. el salto de peso tipográfico (200 contra 800, como el logo) 3. el tamaño de la cifra No hay vidrio, ni glow, ni degradados, ni esquinas redondeadas. Densidad: (por defecto) campo, impreso y PDF ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ --hg-fondo:#000B1D; --hg-fondo-2:#04122B; --hg-linea:rgba(255,255,255,.13); --hg-linea-fuerte:rgba(255,255,255,.30); --hg-realce:rgba(255,255,255,.030); --hg-texto:#FFFFFF; --hg-texto-2:rgba(255,255,255,.62); --hg-texto-3:rgba(255,255,255,.38); --hg-azul:#2E8BFF; --hg-marca:#0E63AC; /* logo, impreso, sobre blanco */ --hg-p1:#3FD9A0; --hg-p2:#4FD9F0; --hg-p3:#FFB648; --hg-p4:#FF5C6B; --hg-tap:46px; --hg-corte:cubic-bezier(.2,.7,.2,1); /* nada rebota en un instrumento */ --hg-f:"Plus Jakarta Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif; --hg-fs-0:10px; /* etiqueta en versalitas */ --hg-fs-1:13.5px; --hg-fs-2:15px; --hg-fs-3:clamp(19px,2.4vw,24px); --hg-fs-4:clamp(30px,6.2vw,62px); } [data-densidad="claro"]{ --hg-fondo:#FFFFFF; --hg-fondo-2:#F4F6F8; --hg-linea:rgba(11,27,43,.16); --hg-linea-fuerte:rgba(11,27,43,.42); --hg-realce:rgba(11,27,43,.030); --hg-texto:#000B1D; --hg-texto-2:rgba(0,11,29,.66); --hg-texto-3:rgba(0,11,29,.42); --hg-azul:#0E63AC; --hg-p1:#0F7A52; --hg-p2:#0E7C93; --hg-p3:#9A6A05; --hg-p4:#C42B36; } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--hg-fondo); color:var(--hg-texto); font-family:var(--hg-f); font-size:var(--hg-fs-2); font-weight:400; line-height:1.5; } h1,h2,h3,h4{margin:0; line-height:1; font-weight:800; letter-spacing:-.035em} p{margin:0; max-width:62ch} a{color:var(--hg-azul); text-underline-offset:3px} :focus-visible{outline:2px solid var(--hg-azul); outline-offset:2px} /* ---------- 3. RETÍCULA · el componente base ---------- Los módulos se separan con línea, nunca flotando en tarjetas. */ .hg-hoja{max-width:1200px; margin-inline:auto; border-inline:1px solid var(--hg-linea)} .hg-modulo{padding:26px} .hg-modulo + .hg-modulo{border-top:1px solid var(--hg-linea)} .hg-corta{border-top:1px solid var(--hg-linea-fuerte)!important} .hg-cols{display:grid; grid-template-columns:1fr} .hg-cols > *{padding:26px; border-top:1px solid var(--hg-linea)} .hg-cols > *:first-child{border-top:0} @media(min-width:760px){ .hg-cols--2{grid-template-columns:repeat(2,1fr)} .hg-cols--3{grid-template-columns:repeat(3,1fr)} .hg-cols--4{grid-template-columns:repeat(4,1fr)} .hg-cols > *{border-top:0; border-left:1px solid var(--hg-linea)} .hg-cols > *:first-child{border-left:0} } /* ---------- 4. TIPOGRAFÍA ---------- */ .hg-et{ display:block; font-size:var(--hg-fs-0); font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--hg-texto-3); } .hg-fina{ display:block; font-weight:200; font-size:var(--hg-fs-4); letter-spacing:.14em; text-transform:uppercase; color:var(--hg-texto-2); line-height:.95; } .hg-pesada{display:block; font-weight:800; font-size:var(--hg-fs-4); letter-spacing:-.035em; line-height:.95} .hg-titulo{font-weight:200; font-size:var(--hg-fs-3); letter-spacing:.2em; text-transform:uppercase; color:var(--hg-texto-2)} .hg-cuerpo{font-weight:300; font-size:16px; color:var(--hg-texto-2)} .hg-secundario{font-size:var(--hg-fs-1); font-weight:400; color:var(--hg-texto-2)} /* ---------- 5. CIFRA · la protagonista ---------- */ .hg-cifra{ display:block; font-weight:800; font-size:clamp(40px,6.4vw,64px); letter-spacing:-.05em; font-variant-numeric:tabular-nums; line-height:1; margin-top:16px; } .hg-cifra sup{ font-size:.34em; font-weight:500; letter-spacing:0; vertical-align:.9em; margin-left:.14em; color:var(--hg-texto-3); } .hg-cifra--xl{font-size:clamp(56px,11vw,104px); letter-spacing:-.06em} .hg-var{display:block; margin-top:10px; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--hg-texto-2)} .hg-var i{font-style:normal; margin-right:6px} .hg-var--sube i{color:var(--hg-p1)} .hg-var--baja i{color:var(--hg-p4)} .hg-regla{display:block; width:100%; height:26px; margin-top:16px; overflow:visible} .hg-regla path{fill:none; stroke:var(--hg-azul); stroke-width:1; vector-effect:non-scaling-stroke} .hg-num{font-variant-numeric:tabular-nums} /* ---------- 6. TIRA DE CORTE ---------- Regla dura: ningún número aparece sin decir a qué corte pertenece. */ .hg-corte-tira{ display:flex; gap:20px; align-items:baseline; flex-wrap:wrap; padding:12px 26px; border-bottom:1px solid var(--hg-linea); font-size:var(--hg-fs-0); font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--hg-texto-3); } .hg-corte-tira b{color:var(--hg-texto-2); font-weight:500} .hg-corte-tira .der{margin-left:auto; text-align:right} /* ---------- 7. BUCKET · pestaña, no píldora ---------- */ .hg-fila-b{position:relative; padding-left:26px} .hg-fila-b::before{content:""; position:absolute; left:14px; top:12px; bottom:12px; width:3px; background:var(--hg-p1)} [data-b="P2"] .hg-fila-b::before, .hg-fila-b[data-b="P2"]::before{background:var(--hg-p2)} [data-b="P3"] .hg-fila-b::before, .hg-fila-b[data-b="P3"]::before{background:var(--hg-p3)} [data-b="P4"] .hg-fila-b::before, .hg-fila-b[data-b="P4"]::before{background:var(--hg-p4)} .hg-b{font-size:10.5px; font-weight:700; letter-spacing:.14em} [data-b="P1"] .hg-b{color:var(--hg-p1)} [data-b="P2"] .hg-b{color:var(--hg-p2)} [data-b="P3"] .hg-b{color:var(--hg-p3)} [data-b="P4"] .hg-b{color:var(--hg-p4)} /* ---------- 8. TABLA DE CONTROL ---------- */ .hg-tabla-wrap{overflow-x:auto} .hg-tabla{width:100%; border-collapse:collapse; font-size:var(--hg-fs-1)} .hg-tabla th{ text-align:left; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--hg-texto-3); padding:10px 14px; white-space:nowrap; border-top:1px solid var(--hg-linea-fuerte); border-bottom:1px solid var(--hg-linea); } .hg-tabla th small{display:block; letter-spacing:.12em; opacity:.7; font-weight:400} .hg-tabla td{padding:13px 14px; border-bottom:1px solid var(--hg-linea); white-space:nowrap} .hg-tabla th.hg-n,.hg-tabla td.hg-n{text-align:right; font-variant-numeric:tabular-nums} .hg-tabla tbody td:first-child{font-weight:700; letter-spacing:.02em} .hg-tabla tbody td .hg-sub{font-weight:300; color:var(--hg-texto-2); margin-left:9px; font-size:12.5px} .hg-tabla tbody tr:hover{background:var(--hg-realce)} .hg-tabla tbody tr:last-child td{border-bottom:0} /* ---------- 9. ESCALA DE DIEZ ---------- */ .hg-escala{display:flex; height:6px; border:1px solid var(--hg-linea-fuerte); margin-top:22px} .hg-escala span{flex:1; border-right:1px solid var(--hg-linea)} .hg-escala span:last-child{border-right:0} .hg-escala span[data-on]{background:var(--hg-azul)} .hg-escala-et{display:flex; justify-content:space-between; margin-top:7px; font-size:9.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--hg-texto-3)} /* ---------- 10. ESTADOS BINARIOS · Hard Gates ---------- */ .hg-estados{list-style:none; margin:18px 0 0; padding:0} .hg-estados li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--hg-linea); font-size:var(--hg-fs-1); font-weight:500; } .hg-estados li:last-child{border-bottom:0} .hg-estados .marca{width:9px; height:9px; flex:none; background:var(--hg-texto-3)} .hg-estados li[data-abierto] .marca{background:var(--hg-p4)} .hg-estados .st{margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hg-texto-3)} .hg-estados li[data-abierto] .st{color:var(--hg-p4)} /* ---------- 11. BOTONES ---------- */ .hg-btn{ font-family:var(--hg-f); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; min-height:var(--hg-tap); padding:0 20px; border:1px solid var(--hg-linea-fuerte); border-radius:0; background:transparent; color:var(--hg-texto); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; -webkit-tap-highlight-color:transparent; transition:background .16s var(--hg-corte), border-color .16s, color .16s; } .hg-btn--1{background:var(--hg-azul); border-color:var(--hg-azul); color:#001026} [data-densidad="claro"] .hg-btn--1{color:#fff} .hg-btn--3{border-color:transparent; padding:0 6px; color:var(--hg-azul)} .hg-btn:active{background:var(--hg-realce)} .hg-btn--1:active{background:var(--hg-azul); opacity:.86} .hg-btn:disabled{color:var(--hg-texto-3); border-color:var(--hg-linea); cursor:not-allowed} @media(hover:hover){ .hg-btn:hover{border-color:var(--hg-azul)} .hg-btn--1:hover{opacity:.9} } /* ---------- 12. CAMPO · línea, no caja ---------- */ .hg-campo{display:block} .hg-campo .hg-et{margin-bottom:6px} .hg-campo input,.hg-campo select,.hg-campo textarea{ width:100%; min-height:var(--hg-tap); background:transparent; color:var(--hg-texto); border:0; border-bottom:1px solid var(--hg-linea-fuerte); border-radius:0; font-family:var(--hg-f); font-size:16px; font-weight:500; padding:8px 2px; transition:border-color .16s; } .hg-campo input:focus,.hg-campo select:focus{outline:none; border-bottom-color:var(--hg-azul); border-bottom-width:2px; padding-bottom:7px} .hg-campo input::placeholder{color:var(--hg-texto-3); font-weight:300} /* ---------- 13. PESTAÑAS ---------- */ .hg-pestanas{display:flex; gap:0; border-bottom:1px solid var(--hg-linea)} .hg-pestanas input{position:absolute; opacity:0; pointer-events:none} .hg-pestanas label{ padding:14px 20px; min-height:var(--hg-tap); display:grid; place-items:center; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hg-texto-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .16s, border-color .16s; } .hg-pestanas input:checked + label{color:var(--hg-texto); border-bottom-color:var(--hg-azul)} /* ---------- 14. FILTROS ---------- */ .hg-filtros{display:flex; gap:0; overflow-x:auto; border:1px solid var(--hg-linea); scrollbar-width:none} .hg-filtros::-webkit-scrollbar{display:none} .hg-filtro{ flex:none; min-height:40px; padding:0 16px; border:0; border-right:1px solid var(--hg-linea); background:transparent; color:var(--hg-texto-3); cursor:pointer; font-family:var(--hg-f); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; -webkit-tap-highlight-color:transparent; } .hg-filtro:last-child{border-right:0} .hg-filtro[aria-pressed="true"]{background:var(--hg-azul); color:#001026} [data-densidad="claro"] .hg-filtro[aria-pressed="true"]{color:#fff} /* ---------- 15. ACORDEÓN · solo una regla ---------- */ .hg-acordeon{interpolate-size:allow-keywords; border-bottom:1px solid var(--hg-linea)} .hg-acordeon > summary{ cursor:pointer; list-style:none; padding:15px 0; min-height:var(--hg-tap); display:flex; align-items:center; gap:14px; font-size:var(--hg-fs-1); font-weight:700; letter-spacing:.02em; } .hg-acordeon > summary::-webkit-details-marker{display:none} .hg-acordeon > summary::after{content:"+"; margin-left:auto; color:var(--hg-azul); font-weight:400; font-size:18px} .hg-acordeon[open] > summary::after{content:"–"} .hg-acordeon__cuerpo{padding:0 0 16px; font-size:var(--hg-fs-1); color:var(--hg-texto-2)} @supports (interpolate-size:allow-keywords){ .hg-acordeon::details-content{block-size:0; overflow:clip; transition:block-size .3s var(--hg-corte), content-visibility .3s allow-discrete} .hg-acordeon[open]::details-content{block-size:auto} } /* ---------- 16. ANOTACIÓN AL MARGEN ---------- */ .hg-nota{ border-left:2px solid var(--hg-azul); padding:2px 0 2px 14px; margin-top:16px; font-size:12.5px; font-weight:400; color:var(--hg-texto-2); max-width:44ch; } /* ---------- 17. CAPAS ---------- */ .hg-dialogo{ border:1px solid var(--hg-linea-fuerte); border-radius:0; padding:0; background:var(--hg-fondo); color:var(--hg-texto); width:min(520px,92vw); margin:auto; transition:opacity .22s, transform .22s var(--hg-corte), overlay .22s allow-discrete, display .22s allow-discrete; opacity:0; transform:translateY(-10px); } .hg-dialogo[open]{opacity:1; transform:none} @starting-style{ .hg-dialogo[open]{opacity:0; transform:translateY(-10px)} } .hg-dialogo::backdrop{background:rgba(0,4,12,.72)} .hg-dialogo__cab{padding:16px 22px; border-bottom:1px solid var(--hg-linea)} .hg-dialogo__cuerpo{padding:22px} .hg-dialogo__pie{padding:16px 22px; border-top:1px solid var(--hg-linea); display:flex; gap:10px; justify-content:flex-end} .hg-aviso{ position:fixed; inset:auto 0 0 0; margin:0 auto; width:max-content; max-width:92vw; background:var(--hg-texto); color:var(--hg-fondo); border:0; border-radius:0; padding:14px 24px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; transition:opacity .2s, transform .2s var(--hg-corte), overlay .2s allow-discrete, display .2s allow-discrete; opacity:0; transform:translateY(100%); } .hg-aviso:popover-open{opacity:1; transform:none} @starting-style{ .hg-aviso:popover-open{opacity:0; transform:translateY(100%)} } /* ---------- 18. CARGA Y CONEXIÓN ---------- */ .hg-esqueleto{position:relative; overflow:hidden; background:var(--hg-realce); height:11px} .hg-esqueleto::after{ content:""; position:absolute; inset:0; width:34%; background:linear-gradient(90deg,transparent,var(--hg-linea),transparent); animation:hg-barrido 1.5s linear infinite; } @keyframes hg-barrido{ from{transform:translateX(-100%)} to{transform:translateX(400%)} } .hg-offline{ display:flex; gap:12px; align-items:center; padding:12px 14px; margin-top:16px; border:1px solid var(--hg-p3); color:var(--hg-p3); font-size:var(--hg-fs-1); font-weight:500; } .hg-offline .marca{width:8px; height:8px; background:currentColor; flex:none; animation:hg-parpadeo 1.4s steps(2,end) infinite} @keyframes hg-parpadeo{50%{opacity:.2}} /* ---------- 19. ESTADO VACÍO ---------- */ .hg-vacio{text-align:center; padding:44px 20px; border:1px dashed var(--hg-linea)} .hg-vacio b{display:block; font-weight:800; font-size:17px; letter-spacing:-.02em; margin-bottom:8px} .hg-vacio p{margin:0 auto 20px; max-width:34ch; font-size:var(--hg-fs-1); color:var(--hg-texto-2)} /* ---------- 20. PLOT DE COORDENADAS ---------- */ .hg-plot{position:relative; aspect-ratio:16/9; border:1px solid var(--hg-linea); background-image:linear-gradient(var(--hg-linea) 1px,transparent 1px),linear-gradient(90deg,var(--hg-linea) 1px,transparent 1px); background-size:calc(100%/8) calc(100%/5);} .hg-plot__p{position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%); translate:-50% -50%; width:7px; height:7px; background:var(--hg-p1)} .hg-plot__p[data-b="P2"]{background:var(--hg-p2)} .hg-plot__p[data-b="P3"]{background:var(--hg-p3)} .hg-plot__p[data-b="P4"]{background:var(--hg-p4)} .hg-plot__p span{position:absolute; left:13px; top:50%; translate:0 -50%; white-space:nowrap; font-size:9.5px; font-weight:700; letter-spacing:.14em; color:var(--hg-texto-2)} /* ---------- 21. DIAGRAMA · el motor ---------- */ .hg-motor{position:relative; width:min(240px,72vw); aspect-ratio:1; margin-inline:auto} .hg-motor i{position:absolute; inset:0; border:1px solid var(--hg-linea-fuerte); border-radius:50%} .hg-motor i:nth-child(2){inset:16%} .hg-motor i:nth-child(3){inset:32%} .hg-motor i:nth-child(4){inset:48%; border-color:var(--hg-azul)} .hg-motor b{position:absolute; left:50%; top:50%; translate:-50% -50%; width:9px; height:9px; background:var(--hg-azul)} .hg-motor u{position:absolute; inset:0; animation:hg-rota 22s linear infinite} .hg-motor u::after{content:""; position:absolute; top:-4px; left:50%; margin-left:-4px; width:8px; height:8px; background:var(--hg-p1)} .hg-motor u:nth-of-type(2){inset:16%; animation-duration:15s; animation-direction:reverse} .hg-motor u:nth-of-type(2)::after{background:var(--hg-p2)} @keyframes hg-rota{to{rotate:360deg}} /* ---------- 22. MOVIMIENTO · solo tres ---------- */ /* 22.1 la regla que se dibuja */ .hg-dibuja{transform:scaleX(0); transform-origin:left; animation:hg-dibuja .9s var(--hg-corte) both; animation-delay:calc(var(--i,0)*.08s)} @keyframes hg-dibuja{to{transform:scaleX(1)}} /* 22.2 la cifra que sube */ @property --hg-v{syntax:""; initial-value:0; inherits:false} .hg-sube{counter-reset:v var(--hg-v); animation:hg-sube-n 1.1s var(--hg-corte) both} .hg-sube::after{content:counter(v)} @keyframes hg-sube-n{from{--hg-v:0} to{--hg-v:var(--hg-fin,100)}} /* 22.3 la fila que aparece */ .hg-aparece > *{opacity:0; animation:hg-aparece .5s var(--hg-corte) both; animation-delay:calc(var(--i,0)*.05s)} @keyframes hg-aparece{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} /* entrada ligada al scroll, sin observers. Arranca visible al 30%: la página se lee completa aunque no se haga scroll. */ @keyframes hg-entra-scroll{from{opacity:.3; transform:translateY(8px)} to{opacity:1; transform:none}} .hg-scroll{animation:hg-entra-scroll linear both; animation-timeline:view(); animation-range:entry 6% cover 32%} @supports not (animation-timeline:view()){ .hg-scroll{animation:none; opacity:1} } /* ---------- 23. ICONOS ---------- */ .hg-i{width:20px; height:20px; flex:none; display:inline-block; vertical-align:-4px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:square; stroke-linejoin:miter} .hg-i--s{width:16px; height:16px} .hg-i--l{width:28px; height:28px; stroke-width:1.1} .hg-i--azul{color:var(--hg-azul)} .hg-i--tenue{color:var(--hg-texto-3)} /* ---------- 24. LOGO ---------- */ .hg-logo,.hg-isotipo{display:inline-block; background-repeat:no-repeat; background-position:left center; background-size:contain} .hg-logo{height:26px; aspect-ratio:996.2/202.7; background-image:url("logo/logo-blanco.svg")} .hg-isotipo{height:30px; aspect-ratio:1; background-image:url("logo/isotipo-blanco.svg")} [data-densidad="claro"] .hg-logo{background-image:url("logo/logo-navy.svg")} [data-densidad="claro"] .hg-isotipo{background-image:url("logo/isotipo-navy.svg")} .hg-logo--navy{background-image:url("logo/logo-navy.svg")!important} .hg-logo--blanco{background-image:url("logo/logo-blanco.svg")!important} .hg-logo--l{height:40px} .hg-logo--s{height:20px} /* ---------- 25. IMPRESIÓN ---------- La misma hoja, invertida. Esto es lo que el vidrio nunca pudo hacer. */ @media print{ :root{ --hg-fondo:#FFFFFF; --hg-fondo-2:#FFFFFF; --hg-linea:rgba(11,27,43,.22); --hg-linea-fuerte:rgba(11,27,43,.5); --hg-realce:transparent; --hg-texto:#000B1D; --hg-texto-2:rgba(0,11,29,.7); --hg-texto-3:rgba(0,11,29,.45); --hg-azul:#0E63AC; --hg-p1:#0F7A52; --hg-p2:#0E7C93; --hg-p3:#8A5E04; --hg-p4:#B02531; } body{background:#fff; color:#000B1D} .hg-logo{background-image:url("logo/logo-navy.svg")} .hg-btn,.hg-filtros,.hg-aviso{display:none} .hg-hoja{border:0; max-width:none} .hg-modulo{break-inside:avoid} } /* ---------- 26. ACCESIBILIDAD ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important} .hg-dibuja{transform:none!important} .hg-aparece > *,.hg-scroll{opacity:1!important; transform:none!important} } /* ---------- 27. PIEZAS NARRATIVAS ---------- Ideas del pack de animaciones, traducidas al tratamiento instrumento. */ /* 27.1 Pilares: columnas separadas por regla; la regla se dibuja al entrar */ .hg-pilares{display:grid; grid-template-columns:1fr; border-top:1px solid var(--hg-linea-fuerte)} @media(min-width:820px){ .hg-pilares{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} } .hg-pilares > *{padding:26px; border-top:1px solid var(--hg-linea); position:relative} @media(min-width:820px){ .hg-pilares > *{border-top:0; border-left:1px solid var(--hg-linea)} .hg-pilares > *:first-child{border-left:0} } .hg-pilares > *::after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--hg-azul); transform:scaleX(0); transform-origin:left; animation:hg-dibuja linear both; animation-timeline:view(); animation-range:entry 8% cover 40%; } @media(min-width:820px){ .hg-pilares > *::after{top:0} } @supports not (animation-timeline:view()){ .hg-pilares > *::after{transform:scaleX(1); animation:none} } /* 27.2 Fases: celdas numeradas que aparecen en orden */ .hg-fases{display:grid; grid-template-columns:1fr; border-top:1px solid var(--hg-linea-fuerte)} @media(min-width:760px){ .hg-fases{grid-template-columns:repeat(4,1fr)} } .hg-fases > *{ padding:24px; border-top:1px solid var(--hg-linea); counter-increment:fase; animation:hg-entra-scroll linear both; animation-timeline:view(); animation-range:entry 4% cover 30%; animation-delay:calc(var(--i,0) * -.04s); } @media(min-width:760px){ .hg-fases > *{border-top:0; border-left:1px solid var(--hg-linea)} .hg-fases > *:first-child{border-left:0} } .hg-fases{counter-reset:fase} .hg-fases > *::before{ content:counter(fase,decimal-leading-zero); display:block; margin-bottom:14px; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--hg-azul); } @supports not (animation-timeline:view()){ .hg-fases > *{animation:none; opacity:1} } /* 27.3 Cinta: banda de términos que corre, como una tira de teletipo */ .hg-cinta{overflow:hidden; border-block:1px solid var(--hg-linea); padding:11px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .hg-cinta__pista{display:flex; gap:0; width:max-content; animation:hg-corre 38s linear infinite} .hg-cinta__pista span{ padding:0 22px; border-right:1px solid var(--hg-linea); white-space:nowrap; font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--hg-texto-3); } .hg-cinta__pista span b{color:var(--hg-texto-2); font-weight:700} @keyframes hg-corre{to{transform:translateX(-50%)}} .hg-cinta:hover .hg-cinta__pista{animation-play-state:paused} /* 27.4 Barrido: recorre una cifra cuando el dato se actualiza */ .hg-barrido{position:relative; overflow:hidden} .hg-barrido::after{ content:""; position:absolute; inset:0; width:2px; background:var(--hg-azul); box-shadow:0 0 0 0 transparent; animation:hg-escanea 1.1s var(--hg-corte); } @keyframes hg-escanea{ from{transform:translateX(0); opacity:1} to{transform:translateX(var(--hg-ancho,340px)); opacity:0} } /* 27.5 Buscador rápido */ .hg-buscador{ border:1px solid var(--hg-linea-fuerte); border-radius:0; padding:0; background:var(--hg-fondo); color:var(--hg-texto); width:min(560px,92vw); margin:14vh auto auto; transition:opacity .2s, transform .2s var(--hg-corte), overlay .2s allow-discrete, display .2s allow-discrete; opacity:0; transform:translateY(-10px); } .hg-buscador[open]{opacity:1; transform:none} @starting-style{ .hg-buscador[open]{opacity:0; transform:translateY(-10px)} } .hg-buscador::backdrop{background:rgba(0,4,12,.74)} .hg-buscador__campo{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--hg-linea)} .hg-buscador__campo input{flex:1; background:transparent; border:0; outline:none; color:var(--hg-texto); font-family:var(--hg-f); font-size:17px; font-weight:500} .hg-buscador__campo kbd{font-family:var(--hg-f); font-size:9.5px; font-weight:700; letter-spacing:.14em; color:var(--hg-texto-3); border:1px solid var(--hg-linea); padding:4px 7px} .hg-buscador__lista{list-style:none; margin:0; padding:0; max-height:44vh; overflow-y:auto} .hg-buscador__lista li{display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--hg-linea); font-size:14px; cursor:pointer; color:var(--hg-texto-2)} .hg-buscador__lista li[aria-selected="true"]{background:var(--hg-realce); color:var(--hg-texto); box-shadow:inset 2px 0 0 var(--hg-azul)} .hg-buscador__lista li b{font-weight:700; color:var(--hg-texto)} .hg-buscador__lista li .hg-et{margin-left:auto} .hg-buscador__vacio{padding:26px 20px; text-align:center; color:var(--hg-texto-3); font-size:13.5px} /* ---------- 28. LA REGLA QUE SE TRAZA ---------- La línea de tendencia se dibuja sola cuando entra en pantalla. Requiere pathLength="1" en el . */ .hg-regla path{ stroke-dasharray:1; stroke-dashoffset:1; animation:hg-traza linear both; animation-timeline:view(); animation-range:entry 10% cover 40%; } @keyframes hg-traza{ to{ stroke-dashoffset:0 } } @supports not (animation-timeline:view()){ .hg-regla path{stroke-dashoffset:0; animation:none} } /* la cifra que sube: --hg-fin es el destino */ .hg-sube{font-variant-numeric:tabular-nums} .hg-sube::after{content:counter(v)} /* barrido de escaneo sobre un dato recién actualizado */ .hg-barrido{position:relative; overflow:hidden} .hg-barrido::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--hg-azul); animation:hg-escanea 1s var(--hg-corte) both; } @keyframes hg-escanea{ from{transform:translateX(0); opacity:1} to{transform:translateX(var(--hg-ancho,300px)); opacity:0} } @media (prefers-reduced-motion:reduce){ .hg-regla path{stroke-dashoffset:0!important; animation:none!important} .hg-cinta__pista{animation:none!important} .hg-barrido::after{display:none} } /* ============================================================ 29. MARCA BLANCA La plataforma se entrega bajo la marca del cliente o del partner. Solo tres cosas cambian; el resto del sistema es lo que garantiza que siga funcionando. Ver marcas.css para los perfiles por cliente. ============================================================ */ /* Lo único que un perfil de cliente puede redefinir: */ /* --hg-azul acento de interfaz (debe contrastar 4.5:1 sobre el fondo) --hg-marca su azul institucional, para impreso y sobre blanco --hg-fondo solo si su color oscuro mantiene el contraste --hg-logo-cli su logo, como url() NUNCA se redefinen: --hg-p1..p4, la tipografía, el radio, --hg-tap. */ .hg-logo-cli{ display:inline-block; height:26px; width:auto; min-width:90px; background-image:var(--hg-logo-cli); background-repeat:no-repeat; background-position:left center; background-size:contain; } .hg-logo-cli--l{height:40px} /* Cofirma: el cliente al frente, Hologram como operador */ .hg-cofirma{display:flex; align-items:center; gap:18px; flex-wrap:wrap} .hg-cofirma__sep{width:1px; height:24px; background:var(--hg-linea-fuerte); flex:none} .hg-cofirma__op{ display:flex; align-items:center; gap:9px; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--hg-texto-3); } .hg-cofirma__op .hg-isotipo{height:18px} /* Firma discreta al pie: el único rastro en modo silencioso */ .hg-firma{ padding:16px 26px; border-top:1px solid var(--hg-linea); display:flex; align-items:center; gap:10px; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--hg-texto-3); } .hg-firma .hg-isotipo{height:16px} /* Aviso de acento en conflicto: se pinta en el catálogo, no en producción */ .hg-conflicto{ border-left:2px solid var(--hg-p3); padding:2px 0 2px 14px; margin-top:14px; font-size:12.5px; color:var(--hg-p3); max-width:46ch; } /* ============================================================ 30. FLUJOS Diagramas en el mismo lenguaje: línea de 1 px, nodo cuadrado, sin curvas y sin sombras. Sirven para el método, la ruta del RV, el ciclo del gerente y cualquier proceso de implementación. ============================================================ */ /* --- 30.1 Cadena de pasos (horizontal en desktop, vertical en móvil) --- */ .hg-flujo{display:grid; grid-template-columns:1fr; counter-reset:paso} @media(min-width:820px){ .hg-flujo{grid-auto-flow:column; grid-auto-columns:1fr; grid-template-columns:none} } .hg-flujo__paso{position:relative; padding:22px 22px 22px 0; counter-increment:paso} @media(min-width:820px){ .hg-flujo__paso{padding:22px 22px 22px 0} } .hg-flujo__paso::before{ /* nodo */ content:""; position:absolute; left:0; top:26px; width:9px; height:9px; background:var(--hg-azul); z-index:1; } .hg-flujo__paso{padding-left:26px} .hg-flujo__paso::after{ /* línea al siguiente */ content:""; position:absolute; left:4px; top:35px; bottom:-4px; width:1px; background:var(--hg-linea-fuerte); } @media(min-width:820px){ .hg-flujo__paso::after{left:9px; top:30px; bottom:auto; height:1px; width:calc(100% - 9px)} } .hg-flujo__paso:last-child::after{display:none} .hg-flujo__n{ display:block; font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--hg-azul); margin-bottom:10px; } .hg-flujo__n::before{content:counter(paso,decimal-leading-zero)} .hg-flujo__paso b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em} .hg-flujo__paso p{margin-top:7px; font-size:13px; font-weight:300; color:var(--hg-texto-2); max-width:34ch} /* estados del paso */ .hg-flujo__paso[data-estado="hecho"]::before{background:var(--hg-p1)} .hg-flujo__paso[data-estado="curso"]::before{background:var(--hg-azul); box-shadow:0 0 0 4px color-mix(in oklab,var(--hg-azul) 26%,transparent)} .hg-flujo__paso[data-estado="bloqueado"]::before{background:var(--hg-p4)} .hg-flujo__paso[data-estado="pendiente"]::before{background:transparent; border:1px solid var(--hg-linea-fuerte)} /* --- 30.2 Decisión: una pregunta y dos salidas --- */ .hg-decision{border-top:1px solid var(--hg-linea-fuerte); padding-top:18px} .hg-decision__q{display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700} .hg-decision__q::before{ content:""; width:11px; height:11px; flex:none; background:var(--hg-p3); rotate:45deg; } .hg-decision__ramas{display:grid; grid-template-columns:1fr; margin-top:16px} @media(min-width:700px){ .hg-decision__ramas{grid-template-columns:1fr 1fr} } .hg-decision__ramas > *{padding:16px 0 16px 22px; border-top:1px solid var(--hg-linea); position:relative} @media(min-width:700px){ .hg-decision__ramas > *:last-child{border-left:1px solid var(--hg-linea); padding-left:26px} } .hg-decision__ramas > *::before{ content:""; position:absolute; left:0; top:24px; width:14px; height:1px; background:var(--hg-linea-fuerte); } @media(min-width:700px){ .hg-decision__ramas > *:last-child::before{left:26px; width:0} } .hg-decision__ramas .et-si{color:var(--hg-p1)} .hg-decision__ramas .et-no{color:var(--hg-p4)} /* --- 30.3 Carriles: quién hace qué --- */ .hg-carriles{border-top:1px solid var(--hg-linea-fuerte); overflow-x:auto} .hg-carril{display:grid; grid-template-columns:130px 1fr; border-bottom:1px solid var(--hg-linea); min-width:620px} .hg-carril__quien{ padding:18px 16px 18px 0; border-right:1px solid var(--hg-linea); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--hg-texto-3); } .hg-carril__pista{display:flex; align-items:center; gap:0; padding:14px 0 14px 18px; overflow-x:auto} .hg-carril__act{ flex:none; padding:11px 16px; border:1px solid var(--hg-linea-fuerte); font-size:12.5px; font-weight:500; white-space:nowrap; background:var(--hg-fondo); } .hg-carril__act[data-clave]{border-color:var(--hg-azul); color:var(--hg-azul); font-weight:700} .hg-carril__une{flex:none; width:26px; height:1px; background:var(--hg-linea-fuerte)} /* --- 30.4 Hito: el corte dentro de un flujo --- */ .hg-hito{ display:flex; align-items:center; gap:14px; padding:14px 0; border-block:1px solid var(--hg-linea-fuerte); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--hg-texto-2); } .hg-hito::before{content:""; width:11px; height:11px; background:var(--hg-texto); flex:none} .hg-hito span{margin-left:auto; color:var(--hg-texto-3); font-weight:500} /* --- 30.5 Ciclo: un flujo que se repite --- */ .hg-ciclo{display:grid; grid-template-columns:1fr; border-top:1px solid var(--hg-linea-fuerte)} @media(min-width:760px){ .hg-ciclo{grid-template-columns:repeat(4,1fr)} } .hg-ciclo > *{padding:22px; border-top:1px solid var(--hg-linea); position:relative} @media(min-width:760px){ .hg-ciclo > *{border-top:0; border-left:1px solid var(--hg-linea)} .hg-ciclo > *:first-child{border-left:0} } .hg-ciclo > *::after{ content:"→"; position:absolute; right:-9px; top:26px; color:var(--hg-linea-fuerte); font-size:14px; } @media(max-width:759px){ .hg-ciclo > *::after{content:"↓"; right:auto; left:22px; top:auto; bottom:-10px} } .hg-ciclo > *:last-child::after{content:"↻"; color:var(--hg-azul)} /* ============================================================ 31. USABILIDAD · lo que se puede exigir desde el CSS Las reglas de criterio viven en el manual; aquí van las que el código puede garantizar solo. ============================================================ */ /* --- objetivo táctil · WCAG 2.2 SC 2.5.8 pide 24 px CSS mínimo. Nosotros exigimos 46 porque se usa de pie y con el pulgar. --- */ button,[role="button"],a.hg-btn,input[type="checkbox"],input[type="radio"],select{min-block-size:24px} .hg-btn,.hg-filtro,.hg-chip,.hg-pestanas label{min-block-size:var(--hg-tap)} /* separación mínima entre objetivos vecinos */ .hg-row,.hg-fila-acciones{--hg-sep:8px} .hg-row > * + *{margin-inline-start:0} /* --- foco visible siempre, nunca se quita --- */ :focus-visible{outline:2px solid var(--hg-azul); outline-offset:2px} :focus:not(:focus-visible){outline:none} .hg-btn--1:focus-visible{outline-color:var(--hg-texto)} /* --- salto al contenido · primer tabulador de toda pantalla --- */ .hg-salto{ position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px; background:var(--hg-texto); color:var(--hg-fondo); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; } .hg-salto:focus{left:0} /* --- solo para lectores de pantalla --- */ .hg-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} /* --- en móvil el input nunca baja de 16 px: iOS hace zoom solo --- */ input,select,textarea{font-size:max(16px, 1rem)} /* --- estados obligatorios de cualquier componente de datos --- */ .hg-estado{padding:26px; text-align:center; border:1px dashed var(--hg-linea); font-size:var(--hg-fs-1)} .hg-estado b{display:block; font-weight:800; font-size:16px; margin-bottom:7px} .hg-estado p{margin:0 auto 16px; max-width:36ch; color:var(--hg-texto-2)} .hg-estado--error{border-style:solid; border-color:var(--hg-p4); color:var(--hg-p4)} .hg-estado--error b{color:var(--hg-p4)} /* --- error de campo: qué pasó y qué hacer, junto al campo --- */ .hg-campo[data-error] input{border-bottom-color:var(--hg-p4); border-bottom-width:2px} .hg-campo__error{display:flex; gap:8px; align-items:flex-start; margin-top:8px; font-size:12.5px; font-weight:500; color:var(--hg-p4)} .hg-campo__error::before{content:""; width:9px; height:9px; margin-top:4px; flex:none; background:currentColor} .hg-campo__ayuda{display:block; margin-top:7px; font-size:12px; color:var(--hg-texto-3)} /* --- deshacer: mejor que confirmar --- */ .hg-deshacer{display:flex; align-items:center; gap:16px} .hg-deshacer button{background:none; border:0; color:var(--hg-fondo); font-family:var(--hg-f); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0} /* --- carga: el esqueleto entra a los 300 ms, no antes --- */ .hg-tarda{animation:hg-tarda 0s linear .3s both} @keyframes hg-tarda{to{visibility:visible}} .hg-tarda{visibility:hidden} /* --- destructivo: separado y en rojo, nunca junto al primario --- */ .hg-btn--peligro{color:var(--hg-p4); border-color:color-mix(in oklab,var(--hg-p4) 50%,transparent)} .hg-btn--peligro:active{background:color-mix(in oklab,var(--hg-p4) 14%,transparent)} .hg-acciones{display:flex; gap:10px; align-items:center} .hg-acciones .hg-btn--peligro{margin-inline-start:auto} /* --- tabla: cabecera fija al hacer scroll largo --- */ .hg-tabla--fija thead th{position:sticky; top:0; background:var(--hg-fondo); z-index:2} /* --- lectura: ancho máximo de texto corrido --- */ .hg-lectura{max-width:66ch} /* ============================================================ 32. PATRONES DE APLICACIÓN Lo que faltaba para cubrir una app completa, no solo tableros. ============================================================ */ /* --- 32.1 Encabezado de aplicación --- */ .hg-encabezado{ display:flex; align-items:center; gap:18px; padding:14px 22px; border-bottom:1px solid var(--hg-linea-fuerte); background:var(--hg-fondo); position:sticky; top:0; z-index:30; } .hg-encabezado__ctx{font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--hg-texto-3)} .hg-encabezado__acc{margin-left:auto; display:flex; align-items:center; gap:6px} .hg-icono-btn{ width:var(--hg-tap); height:var(--hg-tap); display:grid; place-items:center; position:relative; background:transparent; border:1px solid transparent; color:var(--hg-texto-2); cursor:pointer; } .hg-icono-btn:hover{border-color:var(--hg-linea); color:var(--hg-texto)} .hg-icono-btn[data-n]::after{ content:attr(data-n); position:absolute; top:6px; right:6px; min-width:15px; height:15px; padding:0 3px; background:var(--hg-p4); color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; } /* --- 32.2 Menú lateral de aplicación --- */ .hg-lateral{width:212px; flex:none; border-right:1px solid var(--hg-linea-fuerte); background:var(--hg-fondo)} .hg-lateral a{ display:flex; align-items:center; gap:12px; padding:12px 18px; min-height:var(--hg-tap); text-decoration:none; border-bottom:1px solid var(--hg-linea); color:var(--hg-texto-3); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .hg-lateral a:hover{color:var(--hg-texto); background:var(--hg-realce)} .hg-lateral a[aria-current="page"]{color:var(--hg-texto); box-shadow:inset 2px 0 0 var(--hg-azul)} .hg-lateral a .hg-i{width:17px; height:17px} @media(max-width:860px){ .hg-lateral{width:100%; display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--hg-linea-fuerte)} .hg-lateral a{flex:none; border-bottom:0; border-right:1px solid var(--hg-linea)} .hg-lateral a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--hg-azul)} } /* --- 32.3 Volver y ruta --- */ .hg-ruta{display:flex; align-items:center; gap:10px; padding:12px 0; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--hg-texto-3)} .hg-ruta a{color:var(--hg-texto-2); text-decoration:none} .hg-ruta a:hover{color:var(--hg-texto)} .hg-ruta .sep{color:var(--hg-linea-fuerte)} .hg-volver{display:inline-flex; align-items:center; gap:9px; min-height:var(--hg-tap); background:none; border:0; color:var(--hg-texto-2); font-family:var(--hg-f); cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:0} .hg-volver:hover{color:var(--hg-texto)} /* --- 32.4 Insight · qué pasa, por qué importa, qué hacer --- */ .hg-insight{border:1px solid var(--hg-linea); border-left:3px solid var(--hg-azul); padding:18px 20px; display:grid; gap:10px} .hg-insight[data-t="riesgo"]{border-left-color:var(--hg-p3)} .hg-insight[data-t="critico"]{border-left-color:var(--hg-p4)} .hg-insight[data-t="logro"]{border-left-color:var(--hg-p1)} .hg-insight__q{font-size:15px; font-weight:800; letter-spacing:-.015em} .hg-insight__p{font-size:13.5px; font-weight:400; color:var(--hg-texto-2)} .hg-insight__a{display:flex; gap:10px; align-items:center; margin-top:4px} .hg-insight__f{margin-left:auto; font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--hg-texto-3)} /* --- 32.5 Notificación en línea --- */ .hg-noti{display:flex; align-items:flex-start; gap:13px; padding:13px 16px; border:1px solid var(--hg-linea); font-size:13.5px; font-weight:500} .hg-noti .hg-i{margin-top:1px; color:var(--hg-azul)} .hg-noti[data-t="riesgo"]{border-color:color-mix(in oklab,var(--hg-p3) 45%,transparent)} .hg-noti[data-t="riesgo"] .hg-i{color:var(--hg-p3)} .hg-noti[data-t="critico"]{border-color:color-mix(in oklab,var(--hg-p4) 45%,transparent)} .hg-noti[data-t="critico"] .hg-i{color:var(--hg-p4)} .hg-noti button{margin-left:auto; flex:none} .hg-noti__x{background:none; border:0; color:var(--hg-texto-3); cursor:pointer; padding:0 0 0 8px; line-height:1} /* --- 32.6 Fila expandible --- */ .hg-exp{border-bottom:1px solid var(--hg-linea)} .hg-exp > summary{ cursor:pointer; list-style:none; display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:14px 0; min-height:var(--hg-tap); font-size:13.5px; } .hg-exp > summary::-webkit-details-marker{display:none} .hg-exp > summary b{font-weight:700} .hg-exp > summary .v{font-variant-numeric:tabular-nums; font-weight:800} .hg-exp > summary::after{content:"⌄"; color:var(--hg-texto-3); transition:rotate .25s var(--hg-corte)} .hg-exp[open] > summary::after{rotate:180deg} .hg-exp__d{padding:0 0 16px; display:grid; gap:8px} .hg-exp__d > div{display:grid; grid-template-columns:1fr auto; gap:14px; font-size:12.5px; color:var(--hg-texto-2); padding:7px 0; border-top:1px solid var(--hg-linea)} .hg-exp__d > div span:last-child{font-variant-numeric:tabular-nums; color:var(--hg-texto); font-weight:600} /* --- 32.7 Menú desplegable --- */ .hg-desplegable{position:relative; display:inline-block} .hg-desplegable > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px; min-height:var(--hg-tap); padding:0 16px; border:1px solid var(--hg-linea-fuerte); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hg-texto); } .hg-desplegable > summary::-webkit-details-marker{display:none} .hg-desplegable > summary::after{content:"⌄"; color:var(--hg-texto-3)} .hg-desplegable__m{ position:absolute; z-index:40; top:calc(100% + 2px); left:0; min-width:220px; background:var(--hg-fondo); border:1px solid var(--hg-linea-fuerte); box-shadow:var(--hg-sombra); } .hg-desplegable__m button{ display:block; width:100%; text-align:left; padding:12px 16px; min-height:var(--hg-tap); background:none; border:0; border-bottom:1px solid var(--hg-linea); cursor:pointer; font-family:var(--hg-f); font-size:13px; font-weight:500; color:var(--hg-texto-2); } .hg-desplegable__m button:last-child{border-bottom:0} .hg-desplegable__m button:hover{background:var(--hg-realce); color:var(--hg-texto)} .hg-desplegable__m button[aria-selected="true"]{color:var(--hg-texto); box-shadow:inset 2px 0 0 var(--hg-azul)} /* --- 32.8 Ayuda contextual --- */ .hg-ayuda{position:relative; display:inline-block; vertical-align:middle; margin-left:7px} .hg-ayuda > summary{ cursor:help; list-style:none; width:17px; height:17px; display:grid; place-items:center; border:1px solid var(--hg-linea-fuerte); color:var(--hg-texto-3); font-size:10px; font-weight:800; line-height:1; } .hg-ayuda > summary::-webkit-details-marker{display:none} .hg-ayuda > summary::before{content:"i"} .hg-ayuda[open] > summary{color:var(--hg-azul); border-color:var(--hg-azul)} .hg-ayuda__p{ position:absolute; z-index:45; top:calc(100% + 8px); left:-10px; width:min(300px,72vw); background:var(--hg-fondo); border:1px solid var(--hg-azul); padding:14px 16px; box-shadow:var(--hg-sombra); font-size:12.5px; font-weight:400; color:var(--hg-texto-2); text-transform:none; letter-spacing:0; line-height:1.55; } .hg-ayuda__p b{display:block; color:var(--hg-texto); font-weight:800; font-size:13px; margin-bottom:6px} .hg-ayuda__p code{font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--hg-cian)} /* --- 32.9 Progreso hacia meta --- */ .hg-progreso{display:grid; gap:9px} .hg-progreso__p{position:relative; height:12px; background:var(--hg-realce); border:1px solid var(--hg-linea)} .hg-progreso__v{position:absolute; inset:0 auto 0 0; width:var(--v); background:var(--hg-azul)} .hg-progreso[data-e="alcanzado"] .hg-progreso__v{background:var(--hg-p1)} .hg-progreso[data-e="superado"] .hg-progreso__v{background:var(--hg-p1)} .hg-progreso[data-e="riesgo"] .hg-progreso__v{background:var(--hg-p3)} .hg-progreso__o{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--hg-texto); left:var(--o,100%)} .hg-progreso__t{display:flex; gap:12px; font-size:12px; font-weight:600} .hg-progreso__t .e{margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hg-texto-3)} .hg-progreso[data-e="alcanzado"] .e,.hg-progreso[data-e="superado"] .e{color:var(--hg-p1)} .hg-progreso[data-e="riesgo"] .e{color:var(--hg-p3)} /* --- 32.10 Estados de campo --- */ .hg-campo[data-e="ok"] input{border-bottom-color:var(--hg-p1)} .hg-campo[data-e="ok"] .hg-campo__ayuda{color:var(--hg-p1)} .hg-campo input:disabled,.hg-campo select:disabled{color:var(--hg-texto-3); border-bottom-style:dashed; cursor:not-allowed} .hg-campo__req{color:var(--hg-p4); margin-left:3px} /* ============================================================ 33. MÓVIL · no es una variante, es la mitad del sistema Todo componente de este archivo tiene que funcionar a 360 px. Regla: la página nunca se desplaza de lado; lo ancho se desplaza dentro de su propio contenedor. ============================================================ */ html,body{max-inline-size:100%; overflow-x:clip} img,svg,video{max-inline-size:100%} /* zona segura en iPhone: lo fijo abajo respeta la barra de gestos */ .hg-aviso,.hg-hoja-modal,.hg-dialogo{padding-block-end:max(0px, env(safe-area-inset-bottom))} .hg-lateral{padding-block-end:env(safe-area-inset-bottom)} @media (max-width:760px){ .hg-modulo{padding:20px 16px} .hg-hoja{border-inline:0} .hg-corte-tira{padding:10px 16px; gap:8px; font-size:9px} .hg-corte-tira .der{margin-left:0; width:100%; text-align:left} /* la cifra baja de tamaño pero nunca deja de ser la protagonista */ .hg-cifra{font-size:clamp(32px,11vw,44px)} .hg-cifra--xl{font-size:clamp(44px,15vw,64px)} .hg-fina,.hg-pesada{font-size:clamp(26px,8.5vw,40px)} /* tabla → tarjetas apiladas. Cada celda lleva su etiqueta */ .hg-tabla--movil thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} .hg-tabla--movil tbody tr{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:14px 0; border-bottom:1px solid var(--hg-linea)} .hg-tabla--movil td{border:0; padding:3px 0; white-space:normal} .hg-tabla--movil td:first-child{grid-column:1/-1; font-size:15px; padding-bottom:6px} .hg-tabla--movil td[data-et]::before{ content:attr(data-et) " "; font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--hg-texto-3); margin-right:6px; } .hg-tabla--movil td.hg-n{text-align:left} /* el mapa de calor se desplaza con la primera columna fija */ .hg-md-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch} .hg-md td.q,.hg-md th.q{position:sticky; left:0; z-index:2; background:var(--hg-fondo)} /* barras: la etiqueta se encoge, el número nunca */ .hg-barra,.hg-bullet > div,.hg-vs > div,.hg-embudo > div{--hg-b-et:84px; grid-template-columns:84px 1fr auto; gap:10px} .hg-barra > i,.hg-bullet i,.hg-vs i,.hg-embudo i{font-size:11.5px; overflow:hidden; text-overflow:ellipsis} /* controles a lo ancho: el pulgar no apunta fino */ .hg-row > .hg-btn,.hg-acciones > .hg-btn{flex:1 1 auto; min-width:0} .hg-pestanas{overflow-x:auto; scrollbar-width:none} .hg-pestanas::-webkit-scrollbar{display:none} .hg-pestanas label{flex:none; padding:14px 16px} /* la acción principal, al alcance del pulgar */ .hg-barra-accion{ position:sticky; bottom:0; z-index:25; display:flex; gap:10px; padding:12px 16px; padding-bottom:max(12px, env(safe-area-inset-bottom)); background:var(--hg-fondo); border-top:1px solid var(--hg-linea-fuerte); } .hg-barra-accion .hg-btn{flex:1} /* capas: a pantalla completa, no flotando */ .hg-dialogo,.hg-buscador{width:100%; max-width:none; margin:0; border-inline:0; border-top:0} .hg-buscador{margin-top:0} /* diagramas y plots: alto mínimo para que sigan siendo legibles */ .hg-plot,.hg-disp{aspect-ratio:4/3} .hg-motor{width:min(200px,68vw)} .hg-md td.v{min-width:38px; padding:8px 3px; font-size:11px} } @media (max-width:400px){ .hg-modulo{padding:18px 14px} .hg-barra,.hg-bullet > div,.hg-vs > div,.hg-embudo > div{grid-template-columns:70px 1fr auto} .hg-btn{padding:0 14px; font-size:10.5px} } /* orientación horizontal en celular: no desperdiciar alto */ @media (max-height:520px) and (orientation:landscape){ .hg-modulo{padding-block:14px} .hg-cifra{font-size:34px} } /* ============================================================ 34. LOS OCHO ESTADOS DEL SISTEMA Diseñar solo "con datos" es el error más caro. Vacío y sin datos NO son lo mismo: uno nunca ha tenido nada, el otro sí pero el filtro no encuentra. La salida es distinta. ============================================================ */ .hg-sis{border:1px dashed var(--hg-linea); padding:28px 22px; text-align:center; display:grid; gap:10px; justify-items:center} .hg-sis b{font-weight:800; font-size:16px; letter-spacing:-.02em} .hg-sis p{margin:0; max-width:38ch; font-size:13.5px; color:var(--hg-texto-2)} .hg-sis .hg-et{margin-bottom:2px} .hg-sis .hg-btn{margin-top:6px} .hg-sis[data-s="error"]{border-style:solid; border-color:var(--hg-p4)} .hg-sis[data-s="error"] b{color:var(--hg-p4)} .hg-sis[data-s="offline"]{border-style:solid; border-color:var(--hg-p3)} .hg-sis[data-s="offline"] b{color:var(--hg-p3)} .hg-sis[data-s="exito"]{border-style:solid; border-color:var(--hg-p1)} .hg-sis[data-s="exito"] b{color:var(--hg-p1)} .hg-sis[data-s="disabled"]{opacity:.5} .hg-sis[data-s="disabled"] *{pointer-events:none} /* cargando y esqueleto no llevan borde: son contenido, no aviso */ .hg-sis[data-s="cargando"],.hg-sis[data-s="esqueleto"]{border:0; padding:14px 0; justify-items:stretch; text-align:left} .hg-cargando{display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--hg-texto-3); letter-spacing:.14em; text-transform:uppercase; font-weight:600} .hg-cargando::before{content:""; width:9px; height:9px; background:var(--hg-azul); animation:hg-late 1s steps(2,end) infinite} @keyframes hg-late{50%{opacity:.2}}