:root{
/* Fondo verde agradable (energía) */
--bg:#f3fff6;
--text:#0f172a;
--muted:#475569;
--border:#d7efe0;
/* Verde principal */
--primary:#16a34a;
--primary-700:#15803d;
--primary-rgb:22,163,74;
/* Superficies */
--chip:#ecfdf5;
--shadow:0 10px 30px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
--radius:9999px;
}
/* Anti-CLS: tamaños y proporciones fijas en imágenes clave */
.brand-sun{ width:24px; height:24px; flex:0 0 24px; }
/* Variante con fondo CSS */
.brand-sun{
background-repeat:no-repeat;
background-position:center;
background-size:contain;
/* ajusta la ruta si usas fondo */
background-image:url("./assets/brand-sun.svg");
}
/* Si tienes una imagen grande en la portada/hero */
.hero img{
display:block;
width:100%;
height:auto;
aspect-ratio: 16 / 9; /* reserva alto aproximado; ajusta si tu hero es 4:3 u otro */
}
/* Evidencias fotográficas del diagnóstico */
img.dial-photo{
display:block;
width:100%;
height:auto;
aspect-ratio: 4 / 3; /* típico de fotos de campo */
object-fit: cover; /* evita deformaciones manteniendo recorte agradable */
}
/* Lectura cómoda en texto de reportes dentro del diagnóstico */
.diag-page p{ line-height: 1.6; }
.diag-page .report,
.diag-page .diagnostico,
.diag-page .resultados-energeticos{
line-height: 1.6;
}
/* ===== Reporte energético: grid en 2 columnas ===== */
.report-grid {
display: grid;
grid-template-columns: 1.2fr 1fr; /* ficha + listas/kpis */
gap: 22px;
align-items: start;
margin-top: 8px;
}
.report-grid .col { break-inside: avoid; }
@media (max-width: 1024px){
.report-grid { grid-template-columns: 1fr; }
}
/* Si tienes dos columnas de resumen, garantiza separación */
.diag-page .summary-grid{
display:grid; gap:16px;
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
@media (max-width: 900px){
.diag-page .summary-grid{ grid-template-columns: 1fr; }
}
/* === Intro DIALUMEX (splash) === */
/* Anti-CLS del logotipo (no toca el SVG interno) */
.brand { display:inline-flex; align-items:center; gap:8px; }
.brand-sun{
display:block;
inline-size:24px; /* = width */
block-size:24px; /* = height */
flex:0 0 24px;
aspect-ratio: 1 / 1; /* por si el agente ignora block-size */
}
/* Micro-animación del semáforo al cambiar */
@media (prefers-reduced-motion: no-preference){
.semaforo .estado.changed{
animation: sema-pulse .6s ease-out;
}
@keyframes sema-pulse{
0%{ transform: scale(.96); filter: brightness(1.05); }
50%{ transform: scale(1.04); filter: brightness(1.12); }
100%{ transform: scale(1); filter: brightness(1); }
}
}
/* Barra de progreso del diagnóstico */
.diag-progress { margin: 16px 0 20px; }
.stepper{
counter-reset: step;
list-style:none;
display:flex;
gap:12px;
padding:0;
margin:0 0 16px;
flex-wrap:wrap;
justify-content:center; /* << centrado */
}
.step {
position: relative;
padding: 14px 18px;
border:1px solid #e2e8f0;
border-radius:16px;
background:#fff;
min-height: 84px; /* da aire vertical */
display:flex; align-items:center; /* centra el texto */
}
.step .step-label{
font-weight:600;
font-size: 1rem;
line-height: 1.3;
}
.step::before{
counter-increment: step;
content: counter(step);
display:inline-grid; place-items:center;
width:28px;height:28px;margin-right:12px;
border-radius:999px; border:2px solid #cbd5e1;
font-size:13px; font-weight:700;
flex: 0 0 28px; /* fija el círculo y no empuja el texto */
}
/* ===== Sidebar Diagnósticos: números controlados por JS (data-num) ===== */
.diag-progress .step::before{
content: attr(data-num);
counter-increment: none;
}
/* ===== Sidebar Diagnósticos: activo con contorno azul (usa is-active) ===== */
/* ===== Sidebar Diagnósticos: activo EN AZUL (usa is-active) ===== */
.diag-progress .step.is-active{
background: #eff6ff; /* azul claro */
border-color: #bfdbfe; /* borde azul claro */
}
.diag-progress .step.is-active .step-label{
color: #1d4ed8; /* texto azul */
}
.diag-progress .step.is-active::before{
border-color: #2563eb; /* contorno del número en azul */
color: #2563eb; /* número azul */
box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 18%, transparent);
}
.step.is-complete{
border-color:#22c55e33;
background: linear-gradient(0deg,#22c55e0f,#ffffff 65%);
}
.step.is-complete::before{
content:"✓";
background:#22c55e; color:#fff; border-color:#16a34a;
}
.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;
}
/* Distribución fluida de la barra de pasos */
@media (max-width: 1100px){
.steps { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 620px){
.steps { grid-template-columns: 1fr; }
}
/* Contenedor ancho cómodo para el flujo del diagnóstico */
.diag-page{
max-width: 1160px;
margin-inline: auto;
padding-inline: 20px;
}
/* Aire vertical entre bloques principales dentro del diagnóstico */
.diag-page > section,
.diag-page .panel,
.diag-page .card,
.diag-page .resultados,
.diag-page .resumen,
.diag-page article{
margin-block: 16px 28px;
}
/* Titulares más respirados */
.diag-page h2{ margin: 20px 0 12px; line-height: 1.25; }
.diag-page h3{ margin: 16px 0 10px; line-height: 1.25; }
/* Listas legibles */
.diag-page ul{ margin: 8px 0 12px 20px; }
.diag-page li{ margin: 6px 0; }
/* Foco visible accesible y consistente */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-ghost:focus-visible, .btn-secondary:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
border-radius: 10px;
}
a:focus, button:focus, .btn:focus, .btn-ghost:focus, .btn-secondary:focus {
outline: none; /* delegamos en :focus-visible */
}
/* Skip link accesible (aparece al enfocar con Tab) */
/* Asegura anclaje cómodo si hay header fijo */
:target{
scroll-margin-top: 76px; /* ajusta a la altura real de tu topbar */
}
.skip-link{
position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus, .skip-link:focus-visible{
left:16px; top:12px; width:auto; height:auto; padding:8px 12px;
background:#fff; border:2px solid var(--primary); border-radius:8px;
box-shadow: var(--shadow); z-index:1000;
}
*{ box-sizing:border-box; }
html,body{
height:100%;
overflow-x:hidden; /* aquí va la parte que querías */
}
body{
margin:0;
font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
color:var(--text);
background:var(--bg);
line-height:1.5;
}
img, table{
max-width:100%;
}
a{color:inherit; text-decoration:none}
/* Links de ayuda (ejemplos/placas) */
.help-link{
color:#0b66ff;
font-weight:600;
text-decoration:underline;
}
.help-link:hover{ text-decoration:underline; }
/* Preview de fotos (Datos base) */
.photo-preview-grid{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:8px;
}
.photo-preview-grid img{
width:96px;
height:72px;
object-fit:cover;
border-radius:12px;
border:1px solid #e5e7eb;
}
img{max-width:100%; height:auto; display:block}
/* Top bar */
.topbar{
width:100%;
position:sticky; top:0; z-index:20;
backdrop-filter:saturate(180%) blur(6px);
background:rgba(255,255,255,.9);
border-bottom:1px solid var(--border);
box-shadow:0 2px 10px rgba(2,6,23,.04);
}
.topbar-inner{
max-width:1240px; margin:0 auto; padding:14px 28px;
display:flex; align-items:center; gap:16px; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
width:36px; height:36px; border-radius:12px; display:grid; place-items:center;
background:var(--chip); border:1px solid var(--border); box-shadow:var(--shadow);
font-weight:700; font-size:11px; letter-spacing:.08em;
}
.brand-sun{ width:18px; height:18px; }
.brand-name{
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
/* Fallback */
color:var(--text);
}
/* Degradado tipo logo (azul -> verde) */
@supports (-webkit-background-clip: text) or (background-clip: text){
.brand-name{
background:linear-gradient(
90deg,
#104E71 0%,
#1F7C8A 35%,
#3DAC82 70%,
#90CCBE 100%
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
}
/* Accesibilidad: modos de alto contraste */
@media (forced-colors: active){
.brand-name{
background:none !important;
color:CanvasText !important;
}
}
/* Brand: logo DIALUMEX + nombre del dispositivo */
.brand-mark.brand-mark-logo{
padding:0;
overflow:hidden;
}
.brand-logo{
width:22px;
height:22px;
object-fit:contain;
display:block;
}
/* Icon button (perfil / menú) */
.icon-btn{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:14px;
background:var(--chip);
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.icon-btn svg{
width:20px;
height:20px;
stroke:var(--text);
}
.icon-btn:hover{
transform:translateY(-1px);
}
nav ul{ list-style:none; display:flex; gap:28px; padding:0; margin:0; align-items:center; }
nav a{ font-weight:500; opacity:.9 }
nav a:hover{ opacity:1 }
.actions{ display:flex; gap:12px; align-items:center }
.user-avatar{
display:none; /* se muestra solo cuando haya sesión */
border:none;
background:var(--chip);
border-radius:50%;
padding:4px;
width:32px;
height:32px;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 2px 6px rgba(15,23,42,.12);
}
.user-avatar svg{
width:20px;
height:20px;
stroke:var(--text);
fill:#e5e7eb;
}
.user-avatar:hover{
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(15,23,42,.18);
}
/* Buttons */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 18px; border-radius:var(--radius); border:1px solid transparent;
font-weight:600; transition:.2s ease; white-space:nowrap;
}
.btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow) }
.btn-primary:hover{ background:var(--primary-700) }
.btn-secondary{ background:var(--chip); color:var(--text); border-color:var(--border) }
.btn-secondary:hover{ filter:brightness(.97) }
.btn-ghost{ background:#fff; border:1px solid var(--border); color:var(--text) }
.btn-ghost:hover{ background:#f8fafc }
/* === Foco accesible global === */
:where(a, button, [role="button"], input, select, textarea, .btn):focus-visible{
outline: 2px solid rgba(var(--primary-rgb), .9);
outline-offset: 2px;
box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(var(--primary-rgb), .25);
}
/* Estados deshabilitados siguen teniendo foco perceptible */
:where(button[disabled], .btn[aria-disabled="true"]):focus-visible{
outline-color: rgba(148,163,184,.8);
box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(148,163,184,.25);
}
/* Hero */
.hero{
position:relative; /* para CTAs absolutos */
max-width:1240px; margin:0 auto;
padding:20px clamp(20px, 4vw, 40px) 104px;
min-height:70vh;
}
.hero-grid{
display:grid;
grid-template-columns:
minmax(260px, 320px)
minmax(560px, 680px)
minmax(280px, 340px);
gap: clamp(28px, 6vw, 72px);
align-items:center;
}
.hero-center{
display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-center h1{
font-size:clamp(38px, 5.2vw, 56px);
line-height:1.08; margin:0 0 14px;
text-align:center; font-weight:800; letter-spacing:.01em;
}
.hero-center .sub{
margin:0 auto; text-align:center; color:var(--muted);
max-width:52ch; font-size:clamp(15px, 1.6vw, 18px);
}
.hero-col{ display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center }
.hero-col.right{ align-items:center; text-align:center }
.partner{ opacity:.98; filter: drop-shadow(0 2px 6px rgba(2,6,23,.06)); }
.partner.upiita{ width:200px; margin-bottom:8px }
.partner.lsdtc{ width:140px; margin-bottom:6px }
.helper{
color:var(--muted); max-width:38ch;
font-size:15.5px; line-height:1.65; margin:10px 0 10px;
}
/* CTAs fijos dentro del hero */
.cta-left{
position:absolute;
left: clamp(16px, 4vw, 40px);
bottom: clamp(18px, 4vw, 32px);
display:flex; gap:14px; flex-wrap:wrap;
z-index:10;
}
.cta-right{
position:absolute;
right: clamp(16px, 4vw, 40px);
bottom: clamp(18px, 4vw, 32px); /* <-- inferior derecha */
/* aseguramos que 'top' no interfiera */
top: auto;
box-shadow: 0 10px 24px rgba(var(--primary-rgb), .22), 0 2px 6px rgba(var(--primary-rgb), .16);
z-index:10;
}
.spacer{ height:42px }
/* ===== HERO V2 (fila de logos + 2 columnas) ===== */
.hero{
/* fondo verde suave por sección (sin afectar topbar) */
background:
radial-gradient(900px 380px at 50% -120px, rgba(var(--primary-rgb), .14), transparent 60%),
radial-gradient(700px 280px at 80% 0px, rgba(var(--primary-rgb), .08), transparent 55%);
border-radius: 28px;
}
/* Fila superior de logos */
.hero-partners{
display:grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
align-items:center;
column-gap: 48px;
row-gap: 8px;
margin-top: 0px;
margin-bottom: 14px;
}
.hero header{
margin-bottom: 0;
}
/* Asegura extremos reales */
.hero-partners .partner.ipn{ justify-self: start; }
.hero-partners .partner.lsdtc{ justify-self: center; grid-column: 2; grid-row: 1; }
.hero-partners .partner.upiita{ justify-self: end; }
/* Dialumex debajo del laboratorio */
.hero-partners .dialumex-below{
grid-column: 2;
grid-row: 2;
justify-self: center;
}
/* Dialumex + significado en columna (centrado) */
.dialumex-stack{
display:flex;
flex-direction: column;
align-items:center;
gap: 8px;
}
/* Línea de significado bajo DIALUMEX */
.dialumex-meaning{
text-align: center;
font-size: 0.90rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.35;
}
.dialumex-meaning .meaning-text{
font-weight: 500;
color: #334155;
}
/* Degradado similar al logo */
.dialumex-meaning .grad{
background: linear-gradient(90deg, #0b4b8f 0%, #0ea5a5 45%, #22c55e 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Centro (Dialumex + LSDTC) */
.partners-center{
display:flex;
align-items:center;
justify-content:center;
gap:48px;
}
/* Tamaños base */
.partner{
height:auto;
width:auto;
max-height:140px; /* DOBLE de tamaño */
object-fit:contain;
transition: transform .25s ease;
}
/* Laterales (IPN y UPIITA) */
.partner.small{
max-height:64px;
opacity:0.95;
}
/* Centro (ligeramente más grandes) */
.partner.large{
max-height:86px;
opacity:1;
}
/* Ajuste fino por logo */
/* Laterales */
/* Fila superior: los 3 del mismo tamaño (un poquito más grandes) */
.partner.ipn{ max-height:78px; }
.partner.lsdtc{ max-height:78px; }
.partner.upiita{ max-height:78px; }
/* Fila inferior: Dialumex más grande */
.partner.dialumex{ max-height:1000px; }
/* Responsive */
@media (max-width: 900px){
.hero-partners{
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
row-gap: 14px;
justify-items: center;
}
.hero-partners .partner.ipn,
.hero-partners .partner.lsdtc,
.hero-partners .partner.upiita,
.hero-partners .dialumex-below{
grid-column: auto;
grid-row: auto;
justify-self: center;
}
}
/* Evita que la regla .hero img (aspect-ratio 16/9) aplaste logos */
.hero-partners .partner{
width:auto;
height:auto;
aspect-ratio:auto;
max-width: none;
}
/* Tamaños y prioridad visual */
.partner.ipn{
width: 72px;
opacity: .92;
}
.partner.dialumex{
width: 280px;
opacity: .98;
filter: drop-shadow(0 10px 22px rgba(2,6,23,.08));
}
.partners-right{
display:flex;
align-items:center;
gap:16px;
}
/* Prioridad a UPIITA y LSDTC (más visibles a la derecha) */
.partners-right .partner.upiita{ width: 190px; }
.partners-right .partner.lsdtc{ width: 140px; }
/* Layout v2 */
.hero-grid-v2{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(18px, 3.2vw, 34px);
align-items: start;
}
/* Copia */
.hero-copy h1{
margin: 0 0 10px;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.12;
letter-spacing: .01em;
}
.hero-copy .sub{
margin: 0 0 14px;
color: var(--muted);
max-width: 62ch;
font-size: 16.5px;
line-height: 1.6;
}
/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0 14px; }
.chip{
display:inline-flex;
align-items:center;
padding: 8px 12px;
border-radius: 999px;
background: var(--chip);
border: 1px solid var(--border);
color: #14532d;
font-weight: 600;
font-size: 12.5px;
}
/* Lista de bullets */
.hero-bullets{
margin: 0;
padding-left: 18px;
color: var(--text);
display:grid;
gap: 8px;
}
.hero-bullets li{ line-height: 1.55; }
/* Links */
.hero-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 14px; }
.hero-links .link{
color: #14532d;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
opacity: .92;
}
.hero-links .link:hover{ opacity: 1; }
/* Aside */
.hero-aside{
background: rgba(255,255,255,.78);
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px 16px;
box-shadow: var(--shadow);
}
.hero-aside .helper{
margin: 0 0 12px;
max-width: none;
}
.hero-badges{
display:grid;
grid-template-columns: 1fr;
gap: 10px;
}
.badge{
border: 1px solid var(--border);
background: #ffffff;
border-radius: 14px;
padding: 12px 12px;
}
.badge strong{ display:block; font-size: 13.5px; }
.badge span{ display:block; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* Topbar auth buttons */
.actions-auth{ gap: 10px; }
/* Responsive */
@media (max-width: 900px){
.hero{ border-radius: 0; background: none; }
.hero-partners{
flex-direction: column;
align-items: center;
gap: 10px;
}
.partners-right{
justify-content: center;
}
.partner.dialumex{ width: 240px; }
.hero-grid-v2{ grid-template-columns: 1fr; }
.hero-aside{ margin-top: 8px; }
}
/* Canvas de huella */
#cursor-trail{
position:fixed; inset:0; z-index:50; pointer-events:none;
}
/* Responsive */
@media (max-width: 1100px){
.hero-grid{
grid-template-columns:
minmax(240px, 300px)
minmax(520px, 1fr)
minmax(260px, 320px);
}
}
@media (max-width: 900px){
nav{ display:none }
.hero{ padding:56px 20px 96px }
.hero-grid{ grid-template-columns:1fr; gap:26px; text-align:center }
.hero-col, .hero-col.right{ align-items:center; text-align:center }
.partner.upiita{ width:180px }
.partner.lsdtc{ width:130px }
.helper{ max-width:48ch; margin-inline:auto }
/* CTAs en mobile: siguen en esquinas, con márgenes seguros */
.cta-left{ left: 16px; bottom: 18px }
.cta-right{ right: 16px; bottom: 18px }
}
/* Respeto a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
#cursor-trail{ display:none }
}
/* --- Animación “pulse” al pasar el cursor sobre Comenzar diagnóstico --- */
/* Sugerencia: una transición base para que se sienta suave al entrar/salir */
.cta-right{
transition: transform .18s ease, box-shadow .22s ease;
will-change: transform, box-shadow;
}
/* Keyframes del pulso (ligero zoom + brillo en la sombra) */
@keyframes btnPulse {
0% { transform: scale(1); box-shadow: 0 10px 24px rgba(var(--primary-rgb), .22), 0 2px 6px rgba(var(--primary-rgb), .16); }
50% { transform: scale(1.05); box-shadow: 0 16px 32px rgba(var(--primary-rgb), .26), 0 6px 12px rgba(var(--primary-rgb), .18); }
100% { transform: scale(1); box-shadow: 0 10px 24px rgba(var(--primary-rgb), .22), 0 2px 6px rgba(var(--primary-rgb), .16); }
}
/* Aplica la animación SOLO cuando hay hover real (no táctil) */
@media (hover: hover) {
.cta-right:hover,
.cta-right:focus-visible {
animation: btnPulse 1.1s ease-in-out 1;
}
}
/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
.cta-right{ animation: none !important; transition: none !important; }
}
/* ======= PÁGINA: LOGIN ======= */
.auth-page{
min-height: calc(100vh - 72px); /* ocupa alto disponible */
display: grid; place-items: center;
padding: clamp(24px, 4vw, 48px);
background:
radial-gradient(900px 400px at 90% -10%, rgba(37,99,235,.06), transparent 60%),
radial-gradient(700px 300px at -10% 110%, rgba(2,6,23,.04), transparent 60%);
}
.auth-card{
width: min(560px, 92vw);
background:#fff;
border:1px solid var(--border);
border-radius:18px;
box-shadow: var(--shadow);
padding: clamp(18px, 3.6vw, 28px);
}
.logo-row{
display:flex; align-items:center; gap:16px;
opacity:.95; margin-bottom:8px;
}
.logo-row img:first-child{ width:120px }
.logo-row img:last-child{ width:86px }
.auth-header h1{ margin:2px 0 4px; font-size:clamp(22px, 3.2vw, 28px) }
.auth-header p{ margin:0 0 8px }
.auth-form{ display:grid; gap:14px; }
/* ============================================================
Registro — selector de rol (Crear cuenta)
============================================================ */
.role-choices{
display:grid;
grid-template-columns: 1fr;
gap:10px;
margin-top:6px;
}
.role-choice{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px 12px;
border:1px solid var(--border);
border-radius:14px;
cursor:pointer;
background:#fff;
}
.role-choice input{ margin-top:3px; }
.role-choice-body{ display:flex; flex-direction:column; gap:4px; }
.role-choice:has(input:checked){
border-color:#93c5fd;
box-shadow:0 0 0 4px rgba(147,197,253,.25);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{ font-weight:600 }
.field input{
padding:12px 14px;
border:1px solid var(--border);
border-radius:12px;
font-size:16px;
outline: none;
}
.field input:focus{ border-color:#93c5fd; box-shadow:0 0 0 4px rgba(147,197,253,.35) }
.field select{
padding:12px 14px;
border:1px solid var(--border);
border-radius:12px;
font-size:16px;
outline:none;
background:#fff;
}
.field select:focus{
border-color:#93c5fd;
box-shadow:0 0 0 4px rgba(147,197,253,.35);
}
.actions-row{
display:flex;
gap:12px;
align-items:center;
justify-content:flex-end;
margin-top:8px;
flex-wrap:wrap;
}
.field-error{ color:#b91c1c; min-height:16px } /* espacio para mensaje */
.input-with-icon{ position:relative }
.toggle-pass{
position:absolute; right:10px; top:50%; transform:translateY(-50%);
width:38px; height:38px; border-radius:10px;
border:1px solid var(--border); background:#fff; cursor:pointer;
}
.toggle-pass::before{
content:""; display:block; width:20px; height:20px; margin:0 auto;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
background:#334155;
}
.toggle-pass.is-on::before{
/* icono con una línea (ojo tachado) */
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.remember{ display:flex; align-items:center; gap:8px; user-select:none }
.btn-link{ color:#0b66ff; font-weight:600 }
.btn-link:hover{ text-decoration:underline }
.auth-row{ display:flex; justify-content:space-between; align-items:center; }
.auth-submit{ width:100%; margin-top:6px }
/* OTP / código de verificación (recuperar contraseña) */
.otp-input{ letter-spacing:.32em; text-align:center; font-weight:700 }
/* Estados de error */
.is-invalid{ border-color:#fb7185 !important; box-shadow:0 0 0 3px rgba(251,113,133,.25) !important }
/* ======= PÁGINA: CREAR CUENTA ======= */
/* reutiliza .auth-page, .auth-card, .auth-form, .field, .input-with-icon,
.toggle-pass, .remember, .btn-link, .auth-row, .auth-submit, .field-error
que ya añadimos para login. Solo añadimos extras: grid-2, medidor fuerza, pills. */
.grid-2{
display:grid; gap:14px;
grid-template-columns: repeat(2, minmax(160px, 1fr));
}
@media (max-width: 640px){
.grid-2{ grid-template-columns: 1fr; }
}
/* Medidor de fuerza */
.strength{ margin-top:8px }
.strength-bars{
display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:4px;
}
.strength-bars span{
height:8px; background:#e5e7eb; border-radius:999px;
transition: background .2s ease;
}
.strength-1 .strength-bars span:nth-child(1){ background:#ef4444 } /* rojo */
.strength-2 .strength-bars span:nth-child(-n+2){ background:#f59e0b } /* naranja */
.strength-3 .strength-bars span:nth-child(-n+3){ background:#84cc16 } /* lima */
.strength-4 .strength-bars span:nth-child(-n+4){ background:#22c55e } /* verde */
.strength-label{ color: var(--muted) }
/* Pills de rol */
.role-pills{ display:flex; gap:10px; flex-wrap:wrap }
.pill{
display:inline-flex; align-items:center;
border:1px solid var(--border); border-radius:999px; padding:8px 12px;
cursor:pointer; user-select:none; background:#fff;
}
.pill.is-disabled{
opacity: .55;
cursor: not-allowed;
}
.pill.is-disabled span{
opacity: .9;
}
.pill input{ display:none }
.pill input:checked + span{
font-weight:700; color:#1e3a8a; /* blue-900 */
}
.pill input:checked + span::after{
content:"✔"; margin-left:8px; font-weight:700; font-size:12px;
}
/* Tooltips para los “pills” de rol */
.role-pills .pill{ position:relative }
.role-pills .pill[data-tip]::after{
content: attr(data-tip);
position:absolute;
left:50%; bottom: calc(100% + 10px);
transform: translateX(-50%);
width: min(280px, 70vw);
padding:10px 12px;
background:#0f172a; color:#fff; font-size:12px; line-height:1.4;
border-radius:10px; box-shadow: 0 6px 18px rgba(2,6,23,.25);
opacity:0; pointer-events:none; transition: opacity .16s ease, transform .16s ease;
transform-origin: bottom center; z-index:15;
}
.role-pills .pill[data-tip]:hover::after{
opacity:1; transform: translateX(-50%) translateY(-2px);
}
.role-pills .pill[data-tip]::before{
content:""; position:absolute; left:50%; bottom:100%; transform: translateX(-50%);
border:7px solid transparent; border-top-color:#0f172a;
}
/* Texto de ayuda bajo la selección de rol */
.role-help{
margin-top:8px;
background:#f8fafc;
border:1px solid var(--border);
border-radius:12px;
padding:10px 12px;
}
/* ======= PÁGINA: DIAGNÓSTICOS ======= */
/* Informe de resultados: ancho legible, centrado y mejor tipografía */
#eResultados{
max-width: 920px; /* columna de lectura cómoda */
margin-inline: auto; /* centra dentro de .diag-card */
line-height: 1.65; /* lectura amable */
padding-inline: 6px; /* franja mínima que ayuda a la lectura en breakpoints raros */
}
/* Barras “placeholder” opcionales (se verán hasta que tus datos reales lleguen) */
#eResultados .meter{ margin: 8px 0; }
#eResultados h2,
#eResultados h3,
#eResultados h4,
#eResultados h5{
line-height: 1.25;
margin: 18px 0 10px;
}
#eResultados p{ margin: 6px 0 10px; }
#eResultados ul{ margin: 8px 0 12px 20px; }
#eResultados li{ margin: 4px 0; }
/* Regla suave para que los bloques no se peguen entre sí */
#eResultados hr{
margin: 18px 0;
border: 0;
border-top: 1px solid var(--border, #e5e7eb);
}
/* Botonera bajo el informe (si aparece justo después) separada y alineada */
/* Botonera bajo el informe (si aparece justo después) */
#eResultados + .inline{
margin-top: 14px;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: space-between; /* << reparte izquierda-derecha */
align-items: center;
}
/* Utilidades por si en algún momento quieres forzar alineación */
.inline.center { justify-content: center !important; }
.inline.end { justify-content: flex-end !important; }
/* En pantallas muy anchas, reparte mejor el contenido largo del informe
SIN convertir listas en columnas (evitamos “amontonamiento”). */
@media (min-width: 1280px){
#eResultados{ max-width: 1040px; }
}
/* Centrado de elementos anchos dentro del informe */
#eResultados :is(.result-box, .semaforo, .photo-grid, figure){
margin-inline:auto;
}
#eResultados .photo-grid{ max-width: 920px } /* no desborda */
#eResultados figure img{ margin-inline:auto; display:block }
/* Centra elementos anchos dentro del informe */
#eResultados :is(.result-box, .semaforo, .photo-grid, figure, table){
margin-inline:auto;
}
#eResultados figure img, #eResultados table{
max-width:100%;
height:auto;
}
.diag-page{
min-height: calc(100vh - 72px);
padding: clamp(24px, 4vw, 48px);
background:
radial-gradient(1000px 420px at 100% -10%, rgba(37,99,235,.06), transparent 60%),
radial-gradient(800px 320px at -10% 110%, rgba(2,6,23,.04), transparent 60%);
display:flex; /* << flex en vez de grid */
justify-content:center; /* << centra horizontal */
}
.diag-card{
width:min(1100px, 96vw);
margin-inline:auto;
background:#fff;
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow);
padding: clamp(18px, 3.6vw, 28px);
box-sizing:border-box; /* << todo calcula dentro */
overflow: visible; /* deja que el contenido crezca hacia abajo */
}
/* Hijos de .diag-card no deben crear ancho extra */
.diag-card :is(.wizard, .steps, .stepper, .space-grid, .report-grid, .summary-grid, #eResultados){
width:100%;
max-width:100%;
box-sizing:border-box;
}
/* Las rejillas internas pueden encogerse sin romper layout */
.space-grid, .report-grid, .summary-grid{
grid-auto-flow: row;
}
.diag-header h1{ margin:6px 0 6px; font-size:clamp(24px, 3.2vw, 32px) }
.diag-header p{ margin:0 0 10px }
/* Encabezados de paneles/secciones centrados suavemente */
.diag-card h2.section-title,
.diag-card h3.section-title{
text-align:center;
margin-top: 8px;
}
.diag-role{ margin:6px 0 14px }
.role-help{
margin-top:8px; background:#f8fafc; border:1px solid var(--border);
border-radius:12px; padding:10px 12px;
}
/* Wizard base */
.wizard{ border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow); padding:18px; }
.stepper{
counter-reset: step;
list-style:none;
display:flex;
gap:12px;
padding:0;
margin:0 0 16px;
flex-wrap:wrap;
justify-content:center; /* << centra las “pastillas” del paso */
}
.step{ padding:10px 12px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:600 }
.step.is-active{ background:#dbeafe; color:#1e3a8a }
.steps{ position:relative; min-height:200px }
.step-panel{ display:none; animation: fadeIn .18s ease }
.step-panel.is-active{ display:block }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
.wizard-actions{
margin-top:16px;
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center; /* << centrado por defecto */
align-items:center;
}
@media (min-width: 960px){
.wizard-actions{ justify-content:space-between } /* en desktop se reparte */
}
/* Grids y controles */
.grid-3{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(140px, 1fr)); }
/* ===== Selector de nivel del diagnóstico: tarjetas en rejilla ===== */
.scope-cards{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
align-items: stretch;
margin-top: 10px;
}
.scope-cards .nivel{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
box-shadow: var(--shadow);
padding:16px;
display:flex;
flex-direction:column;
min-height:184px; /* alturas homogéneas */
gap:8px;
}
.scope-cards .nivel .btnNivel{
margin-top:auto;
align-self:center; /* botón centrado */
min-width:140px;
}
.space-grid{ margin-top:10px; display:grid; gap:12px; grid-template-columns: repeat(4, minmax(120px,1fr)); }
.grid-3 label, .space-grid label{ display:flex; flex-direction:column; gap:6px; font-weight:600 }
.grid-3 input, .grid-3 select, .space-grid input, .space-grid select{
padding:10px 12px; border:1px solid var(--border); border-radius:10px
}
.only-esp{ display:none } /* se muestra al seleccionar especialista */
.diag-card.is-especialista .only-esp{ display:flex }
/* Progreso y lecturas */
.progress{ height:10px; background:#eef2ff; border-radius:999px; margin:12px 0 6px; overflow:hidden }
.progress-bar{ height:100%; background:linear-gradient(90deg, #2563eb, #60a5fa); width:0% }
.measure-readouts{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top:8px; color:#0b3b83 }
/* Resultados */
.result-box{
margin-top:8px; border:1px solid var(--border); border-radius:12px; padding:12px;
background:#f8fafc
}
/* Tooltips rol (reutiliza regla de crear-cuenta) */
.role-pills .pill{ position:relative }
.role-pills .pill[data-tip]::after{
content: attr(data-tip);
position:absolute; left:50%; bottom: calc(100% + 10px);
transform: translateX(-50%); width: min(320px, 75vw);
padding:10px 12px; background:#0f172a; color:#fff; font-size:12px;
border-radius:10px; box-shadow: 0 6px 18px rgba(2,6,23,.25);
opacity:0; pointer-events:none; transition: opacity .16s ease, transform .16s ease;
transform-origin: bottom center; z-index:15;
}
.role-pills .pill[data-tip]:hover::after{ opacity:1; transform: translateX(-50%) translateY(-2px) }
.role-pills .pill[data-tip]::before{
content:""; position:absolute; left:50%; bottom:100%; transform: translateX(-50%);
border:7px solid transparent; border-top-color:#0f172a;
}
/* Responsive */
@media (max-width: 960px){
.grid-3{ grid-template-columns:1fr 1fr }
.space-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
.grid-3, .space-grid{ grid-template-columns:1fr }
}
/* ====== Normatividad ====== */
.page-normas .wrap-normas{
max-width: 1240px;
margin: 0 auto;
padding: 56px 20px 80px;
}
.page-normas .intro h1{
margin: 0 0 6px;
font-size: clamp(28px, 4.2vw, 40px);
font-weight: 800;
letter-spacing: .01em;
}
.page-normas .muted{ color: var(--muted); }
.pdf-section{
margin-top: 28px;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
background: #fff;
overflow: hidden;
}
.pdf-header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 18px 12px;
border-bottom: 1px solid var(--border);
}
.pdf-header h2{
margin: 0;
font-size: clamp(20px, 2.6vw, 26px);
}
.pdf-actions{ display:flex; gap:10px; flex-wrap:wrap }
.pdf-viewer{
width: 100%;
height: 82vh; /* “por completo” en viewport */
background: #f8fafc;
position: relative; /* necesario para el skeleton */
}
.pdf-viewer iframe{
width: 100%;
height: 100%;
border: 0;
opacity: 0; /* transición de entrada */
transition: opacity .2s ease-in;
}
/* Skeleton / placeholder mientras carga el PDF */
.pdf-viewer::before{
content: 'Cargando documento…';
position: absolute; left:16px; top:12px;
font-size:14px; color: var(--muted);
}
/* Quitar skeleton y hacer visible el iframe al cargar */
.pdf-viewer.is-ready::before{ content:''; }
.pdf-viewer.is-ready iframe{ opacity: 1; }
/* Apoyo */
.apoyo{ margin-top: 36px }
.apoyo h3{ margin: 0 0 12px; font-size: 20px }
.apoyo-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.doc-card{
display:block;
padding: 16px;
border:1px solid var(--border);
border-radius: 14px;
background: #fff;
box-shadow: var(--shadow);
transition: transform .15s ease, box-shadow .15s ease;
}
.doc-card:hover{ transform: translateY(-2px) }
.doc-card h4{ margin: 0 0 6px; font-size: 16px }
.doc-card p{ margin: 0 0 10px; color: var(--muted) }
.chip{
display:inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--chip);
border:1px solid var(--border);
font-size: 12px;
}
/* Activo en menú */
nav a.is-active{
position: relative;
font-weight: 700;
}
nav a.is-active::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -10px;
height: 2px;
background: var(--primary);
opacity: .65;
}
/* Responsive */
@media (max-width: 860px){
.pdf-header{ flex-direction: column; align-items: flex-start }
.apoyo-grid{ grid-template-columns: 1fr }
.pdf-viewer{ height: 78vh }
}
/* ====== AYUDA ====== */
.page-ayuda .help-wrap{
max-width: 1240px;
margin: 0 auto;
padding: 56px 20px 80px;
}
.page-ayuda h1{ margin:0 0 6px; font-size: clamp(28px,4.2vw,40px); font-weight:800 }
.page-ayuda h2{ margin:0 0 10px; font-size: clamp(20px,3vw,26px) }
.page-ayuda .muted{ color: var(--muted) }
.help-hero{
display:grid; grid-template-columns: 1fr minmax(300px, 420px); gap: 18px; align-items:start;
margin-bottom: 22px;
}
.contact-card{
border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow);
padding:16px; display:flex; flex-direction:column; gap:10px;
}
.contact-card .row{ display:flex; gap:10px; align-items:center }
.contact-card .row.small{ font-size: 14px }
.contact-card .label{ width:90px; color:var(--muted) }
.contact-card .value{ font-weight:600 }
.contact-card .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
.links-sec{ margin-top: 18px }
.links-grid{
display:grid; gap:12px;
grid-template-columns: repeat(7, minmax(120px,1fr));
}
.link-card{
display:grid; place-items:center; text-align:center; padding:14px;
border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow);
font-weight:600; transition: transform .15s ease;
}
.link-card:hover{ transform: translateY(-2px) }
.quick-guide{ margin-top: 26px }
.quick-guide ol{ padding-left: 18px }
.faq-sec{ margin-top: 18px }
.faq-item{
background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px;
margin-bottom:10px; box-shadow:var(--shadow)
}
.faq-item summary{ cursor:pointer; font-weight:700 }
/* Glosario (Ayuda) */
.glossary-sec{ margin-top: 18px; }
.glossary-grid{
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.g-item{
background:#fff;
border:1px solid var(--border);
border-radius:12px;
box-shadow: var(--shadow);
padding:12px 14px;
display:grid;
gap:6px;
}
.g-item strong{ font-size: 14px; }
.g-item span{ color: var(--muted); font-size: 14px; line-height: 1.35; }
@media (max-width: 980px){
.glossary-grid{ grid-template-columns: 1fr; }
}
.ticket-sec{ margin-top: 24px }
.ticket-form{
display:grid; gap:12px; grid-template-columns: 1fr;
}
.ticket-form input, .ticket-form textarea{
padding:12px 14px; border:1px solid var(--border); border-radius:10px
}
/* Responsive */
@media (max-width: 980px){
.help-hero{ grid-template-columns: 1fr }
.links-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
@media (max-width: 560px){
.links-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
/* ====== CONTACTO ====== */
.page-contact .contact-wrap{
max-width: 1240px; margin: 0 auto; padding: 56px 20px 80px;
}
.page-contact .contact-hero h1{
margin: 0 0 6px; font-size: clamp(28px,4.2vw,40px); font-weight:800;
}
.page-contact .contact-hero p{ margin: 0 0 16px; color: var(--muted) }
.contact-grid{
display: grid; gap: 18px;
grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
align-items: start;
}
/* Evita encimados por overflow (especialmente en pantallas medianas) */
.contact-grid > *{ min-width: 0; }
/* Contacto: columnas internas */
.c-left, .c-right{
display: grid;
gap: 18px;
align-items: start;
}
.c-form{
display:grid; gap:12px; grid-template-columns: 1fr 1fr;
background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
padding:16px;
}
.c-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600 }
.c-form input, .c-form textarea{
padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-weight:500;
}
.c-form .full{ grid-column: 1 / -1 }
.c-side .card{
background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
padding:16px; margin-bottom:16px;
}
.c-side .list{ margin: 0 0 10px; padding-left: 18px }
.c-side .cta-row{ display:flex; gap:10px; flex-wrap:wrap }
.map-box{ height: 260px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.map-box iframe{ width:100%; height:100%; border:0 }
/* Responsive */
@media (max-width: 980px){
.contact-grid{ grid-template-columns: 1fr; }
}
/* ===== Bloque educativo (home) ===== */
.edu-card{
max-width:1240px; margin:0 auto 32px; padding:22px 20px;
border:1px solid var(--border); border-radius:18px; background:#fff; box-shadow:var(--shadow);
}
.edu-card h2{ margin:0 0 10px; font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:.01em }
.choice-row{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 6px }
.edu-panel{ margin-top:10px; border-top:1px dashed var(--border); padding-top:16px; }
.edu-intro{ margin:0 0 8px; color:var(--text) }
.edu-list{ margin:0 0 14px 18px; color:var(--muted) }
.edu-list li{ margin:6px 0 }
.video-box{ position:relative; background:#0b1220; border-radius:14px; overflow:hidden; border:1px solid var(--border) }
.video-box video{ display:block; width:100%; max-height:62vh; object-fit:contain; background:#000 }
.edu-links h3{ margin:12px 0 8px; font-size:18px }
.edu-links ul{ margin:0; padding-left:18px }
.edu-links a{ color:#0b66ff; font-weight:600 }
.edu-links a:hover{ text-decoration:underline }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { filter: brightness(0.95); }
#spaceAnim { margin-top:12px }
.scene{width:180px;height:180px;margin:auto;perspective:600px}
.shape{position:relative;transform-style:preserve-3d;animation:spin 10s linear infinite}
.shape.cube span{position:absolute;width:140px;height:140px;left:20px;top:20px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.3)}
.shape.cube span:nth-child(1){transform:rotateY(0deg) translateZ(70px)}
.shape.cube span:nth-child(2){transform:rotateY(90deg) translateZ(70px)}
.shape.cube span:nth-child(3){transform:rotateY(180deg) translateZ(70px)}
.shape.cube span:nth-child(4){transform:rotateY(-90deg) translateZ(70px)}
.shape.cube span:nth-child(5){transform:rotateX(90deg) translateZ(70px)}
.shape.cube span:nth-child(6){transform:rotateX(-90deg) translateZ(70px)}
@keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}
/* ===== Splash DIALUMEX: capa, fondo y bloqueo de scroll ===== */
#intro-splash{
position: fixed; inset: 0;
z-index: 2147483647; /* por encima del header */
outline: none; border: none; cursor: pointer;
display: grid; place-items: center;
transition: opacity .35s ease, visibility .35s ease;
/* Fondo con atmósfera de iluminación */
background:
radial-gradient(1200px 700px at 50% -10%, #ffffff 0%, #f8fafc 45%, #eef2ff 80%),
radial-gradient(900px 500px at 20% 30%, rgba(32, 160, 128, .18), transparent 60%),
radial-gradient(700px 400px at 80% 65%, rgba(0, 96, 128, .16), transparent 60%),
linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #eef2ff 100%);
}
#intro-splash.fadeout{ opacity: 0; visibility: hidden; }
html.no-scroll, body.no-scroll { overflow: hidden !important; }
/* ===== Relleno de luz (3.5 s) mediante variable --p ===== */
@property --p { syntax: ''; inherits: true; initial-value: 0; }
#intro-splash{ --p: 0; animation: dial-fill 3.5s linear forwards; }
@keyframes dial-fill { to { --p: 100; } }
/* Contenedor del texto con sutil profundidad */
#intro-word{
margin: 0;
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-weight: 900;
letter-spacing: .14em;
font-size: clamp(40px, 8vw, 92px);
color: #0f172a;
text-shadow: 0 10px 26px rgba(2,6,23,.10);
display: inline-block;
perspective: 800px;
transform-style: preserve-3d;
line-height: 1.1; /* evita saltos verticales */
}
/* Cada letra: relleno amarillo + oleaje tipo bandera */
.intro-letter{
display: inline-block;
will-change: transform, background-position;
backface-visibility: hidden;
transform-origin: 50% 80%;
/* Relleno: hasta --p% en amarillo, resto en color base */
color: transparent;
/* Relleno progresivo: 1) degradado del logo (solo hasta --p%) + 2) base oscura */
background-image:
linear-gradient(90deg,
#104E71 0%,
#1F7C8A 35%,
#3DAC82 70%,
#90CCBE 100%
),
linear-gradient(90deg, #0f172a 0%, #0f172a 100%);
background-size:
calc(var(--p) * 1%) 100%,
100% 100%;
background-position: 0 0, 0 0;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
/* Oleaje continuo (no interfiere con el relleno) */
animation: wave 1.6s ease-in-out infinite, introShine 2.8s ease-in-out infinite;
}
/* Fase escalonada para ola de izquierda a derecha */
.intro-letter:nth-child(1){ animation-delay: 0ms; }
.intro-letter:nth-child(2){ animation-delay: 90ms; }
.intro-letter:nth-child(3){ animation-delay: 180ms; }
.intro-letter:nth-child(4){ animation-delay: 270ms; }
.intro-letter:nth-child(5){ animation-delay: 360ms; }
.intro-letter:nth-child(6){ animation-delay: 450ms; }
.intro-letter:nth-child(7){ animation-delay: 540ms; }
.intro-letter:nth-child(8){ animation-delay: 630ms; }
/* Curva del oleaje (ajusta amplitud si la quieres más sutil) */
@keyframes wave{
0% { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
25% { transform: translateY(-6px) rotateX(-6deg) rotateZ(-0.6deg); }
50% { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
75% { transform: translateY(6px) rotateX(6deg) rotateZ(0.6deg); }
100% { transform: translateY(0) rotateX(0deg) rotateZ(0deg); }
}
@keyframes introShine{
0%,100%{ filter: drop-shadow(0 0 0 rgba(32,160,128,0)); }
50% { filter: drop-shadow(0 6px 18px rgba(32,160,128,.22)); }
}
/* “clic para saltar” abajo a la derecha (no captura el clic) */
.intro-skip{
position: fixed; right: 16px; bottom: 14px;
margin: 0; padding: 6px 10px;
font-size: .9rem; color: #334155;
background: rgba(255,255,255,.65);
border: 1px solid rgba(2,6,23,.08);
border-radius: 999px;
backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(2,6,23,.08);
pointer-events: none;
}
/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
#intro-splash{ animation: none; --p: 100; }
.intro-letter{ animation: none; }
}
/* ===== Confirmación inline (sustituye al confirm() del navegador) ===== */
.inline-confirm[hidden]{ display:none !important; }
.inline-confirm{
margin-top: 12px;
padding: 14px;
border: 1px solid rgba(2,6,23,.08);
border-radius: 12px;
background: rgba(255,255,255,.75);
backdrop-filter: blur(6px);
box-shadow: 0 6px 22px rgba(2,6,23,.06);
animation: ic-fade .22s ease-out both;
}
.inline-confirm-text{
margin: 0 0 10px 0;
color: #0f172a;
}
.inline-confirm-actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn.btn-ghost{
background: #f1f5f9;
border: 1px solid rgba(2,6,23,.06);
}
@keyframes ic-fade{
from{ opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.ok { color: #16a34a; font-weight: 600; }
.bad { color: #dc2626; font-weight: 600; }
.fieldset-grid {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 12px 16px;
margin: 12px 0 18px;
border: 1px solid #e3e3e3;
padding: 12px 12px 6px;
border-radius: 8px;
background: #fafafa;
}
.fieldset-grid .full { grid-column: 1 / -1; }
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
line-height: 18px;
vertical-align: middle;
}
.badge.ok { background: #e6f7ed; border: 1px solid #b7e2c5; }
.badge.warn { background: #fff8e6; border: 1px solid #ffe0a3; }
.badge.err { background: #fdeaea; border: 1px solid #f5bcbc; }
/* Tabla simple */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border: 1px solid #e5e5e5; padding: 8px; }
.table th { background: #f5f5f5; text-align: left; }
.fieldset-grid {
display: grid;
grid-template-columns: repeat(2, minmax(220px, 1fr));
gap: 12px 16px;
margin: 12px 0 18px;
border: 1px solid #e5e5e5;
padding: 12px 12px 6px;
border-radius: 8px;
background: #fafafa;
}
.fieldset-grid .full { grid-column: 1 / -1; }
/* Paso 3: grid limpio en 3 columnas con sidebar */
.space-grid {
display: grid;
grid-template-columns: 1.2fr 1.2fr 1fr; /* dos columnas de campos + sidebar */
gap: 16px;
align-items: start;
}
/* Asegura que inputs ocupen su celda completa */
.space-grid input,
.space-grid select,
.space-grid textarea {
width: 100%;
box-sizing: border-box;
}
/* Tarjetas dentro del grid ocupan 1 columna */
.space-grid > .card { grid-column: span 1; }
/* La tarjeta de parámetros de malla ocupa 2 columnas (opcional; queda mejor) */
#row-malla { grid-column: 1 / 3; }
/* Sidebar derecha fija y ordenada */
.inst-sidebar {
grid-column: 3 / span 1;
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 72px; /* se pega bajo el header del wizard */
grid-row: 1; /* <<--- NUEVO: que arranque en la primera fila */
}
/* Fieldset de instrumentación en dos columnas internas */
.fieldset-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
}
.fieldset-grid .full { grid-column: 1 / -1; }
/* Caja de overrides */
.overrides label {
display: block;
margin-bottom: 10px;
}
.space-grid small.help,
.space-grid .muted {
display: block;
margin-top: 4px;
line-height: 1.25;
}
/* El semáforo/mensajes ocupa todo el ancho bajo el grid */
#resultadosIluminacion {
grid-column: 1 / -1;
}
/* Accesibilidad visual de foco sin borde negro duro del navegador */
.space-grid input:focus,
.space-grid select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(59,130,246,.25);
border-color: rgba(59,130,246,.6);
}
/* Responsive: en pantallas angostas, pila todo */
@media (max-width: 1024px) {
.space-grid { grid-template-columns: 1fr; }
#row-malla,
.inst-sidebar,
#resultadosIluminacion { grid-column: 1 / -1; }
.inst-sidebar { position: static; }
.fieldset-grid { grid-template-columns: 1fr; }
}
/* ===== Puntos de medición (iluminación) ===== */
.tabla-wrap { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tabla.compact th, .tabla.compact td { padding: 6px 8px; }
.heatmap { display: block; width: 100%; max-width: 520px; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #f7f7f7; }
.kpi-row{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap:12px;
justify-items:center;
}
.kpi{
display:grid; gap:4px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 12px;
width:100%;
max-width:320px;
}
.kpi span { color: var(--muted); font-size: 12px; }
.kpi strong { font-size: 18px; }
.grid.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid.gap-16 { gap: 16px; }
.grid.gap-8 { gap: 8px; }
.mt-16 { margin-top: 16px; }
.mt-12 { margin-top: 12px; }
.mt-8 { margin-top: 8px; }
.ml-12 { margin-left: 12px; }
.ml-8 { margin-left: 8px; }
.w-80 { width: 80px; }
.hint { color: var(--muted); font-size: 12px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
/* === Animaciones utilitarias === */
@keyframes fade-in { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:none} }
@keyframes fade-up { from {opacity:0; transform:translateY(16px)} to {opacity:1; transform:none} }
@keyframes scale-in { from {opacity:0; transform:scale(.96)} to {opacity:1; transform:scale(1)} }
[data-anim] { opacity: 0; will-change: transform, opacity; }
[data-anim].is-visible { opacity: 1; }
[data-anim="fade-in"].is-visible { animation: fade-in .50s ease-out both; }
[data-anim="fade-up"].is-visible { animation: fade-up .60s ease-out both; }
[data-anim="scale-in"].is-visible { animation: scale-in .45s ease-out both; }
/* Micro-interacciones */
.card, .pill, .btn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pill input:checked + span { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
[data-anim].is-visible { animation: none !important; opacity: 1 !important; transform: none !important; }
.card, .pill, .btn { transition: none !important; }
}
/* === Animaciones utilitarias === */
@keyframes fade-in { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:none} }
@keyframes fade-up { from {opacity:0; transform:translateY(16px)} to {opacity:1; transform:none} }
@keyframes scale-in { from {opacity:0; transform:scale(.96)} to {opacity:1; transform:scale(1)} }
[data-anim] { opacity: 0; will-change: transform, opacity; }
[data-anim].is-visible { opacity: 1; }
[data-anim="fade-in"].is-visible { animation: fade-in .50s ease-out both; }
[data-anim="fade-up"].is-visible { animation: fade-up .60s ease-out both; }
[data-anim="scale-in"].is-visible { animation: scale-in .45s ease-out both; }
/* Micro-interacciones */
.card, .pill, .btn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px) scale(.99); }
/* Respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
[data-anim].is-visible { animation: none !important; opacity: 1 !important; transform: none !important; }
.card, .pill, .btn { transition: none !important; }
}
/* === Dialumex: asegurar visibilidad de fotos en impresión y pantalla === */
@media print {
img.dial-photo { display:block !important; }
figure { break-inside: avoid; page-break-inside: avoid; }
}
/* También en pantalla por si hay reglas más fuertes que las ocultan */
img.dial-photo { display:block !important; }
/* --- DIALUMEX: helpers UI (energético + fotos) --- */
.semaforo { display:flex; gap:.75rem; align-items:center; padding:.75rem 1rem; border-radius:12px; background:#f8fafc; border:1px solid #e5e7eb; }
.semaforo.ok { background:#ecfdf5; border-color:#a7f3d0; }
.semaforo.bad { background:#fef2f2; border-color:#fecaca; }
.semaforo .dot { width:14px; height:14px; border-radius:50%; background:#22c55e; }
.semaforo.bad .dot { background:#ef4444; }
.stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:.5rem 1rem; margin:.5rem 0 0; }
.stats li { list-style:none; display:flex; justify-content:space-between; gap:1rem; padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.readout { display:flex; justify-content:space-between; padding:.4rem .6rem; border:1px dashed #e5e7eb; border-radius:8px; background:#fff; }
.progress { width:100%; height:8px; background:#e5e7eb; border-radius:8px; overflow:hidden; margin:.5rem 0 1rem; }
.progress-bar { height:100%; background:#0ea5e9; transition:width .2s ease; }
.photo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:.75rem; margin-top:.5rem; }
.photo-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.5rem; }
.photo-card img.dial-photo { width:100%; height:120px; object-fit:cover; border-radius:8px; display:block; }
@media print {
img.dial-photo { display:block !important; }
figure { break-inside: avoid; page-break-inside: avoid; }
}
/* Splash: bloquear scroll mientras está activo */
body.no-scroll { overflow: hidden !important; }
/* PATCH 2: barras con raya para KPIs */
.meter {
position: relative; height: 6px; background:#e5e7eb; border-radius:999px; overflow:hidden;
}
.meter::after {
content:''; position:absolute; left:0; top:0; bottom:0; width:var(--meter-pct,0%);
background: linear-gradient(90deg, rgba(59,130,246,.25), rgba(59,130,246,.8));
transition: width .6s ease;
}
.meter.raya::before {
content:''; position:absolute; top:-4px; height:14px; width:2px; background:#1d4ed8;
left: var(--meter-pct,0%); transform: translateX(-1px);
transition: left .6s ease;
}
@media print {
img.dial-photo { display:block !important; max-width: 100%; height: auto; }
figure.photo-card { break-inside: avoid; page-break-inside: avoid; margin: 0 0 8px 0; }
}
/* Vista en pantalla básica por si hay reglas globales que oculten */
img.dial-photo { display:block !important; }
.photo-grid {
display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
gap:10px; margin-top:8px;
}
.photo-card { border:1px solid #e5e7eb; border-radius:8px; padding:6px; background:#fff; }
.photo-card img { width:100%; height:120px; object-fit:cover; border-radius:6px; }
.photo-card figcaption { font-size:12px; margin-top:4px; }
/* PATCH 2: barras con raya para KPIs */
.meter {
position: relative; height: 6px; background:#e5e7eb; border-radius:999px; overflow:hidden;
}
.meter::after {
content:''; position:absolute; left:0; top:0; bottom:0; width:var(--meter-pct,0%);
background: linear-gradient(90deg, rgba(59,130,246,.25), rgba(59,130,246,.8));
transition: width .6s ease;
}
.meter.raya::before {
content:''; position:absolute; top:-4px; height:14px; width:2px; background:#1d4ed8;
left: var(--meter-pct,0%); transform: translateX(-1px);
transition: left .6s ease;
}
@media print {
img.dial-photo { display:block !important; }
figure { break-inside: avoid; page-break-inside: avoid; }
}
img.dial-photo { display:block !important; }
/* ===== Resultados energéticos: barras ponderadas ===== */
.res-bars{
margin: 14px 0 6px;
padding: 12px 12px 6px;
border:1px solid var(--border);
border-radius: 12px;
background:#fff;
box-shadow: var(--shadow);
}
.res-bars h4{ margin:0 0 10px; }
.res-bars .bars-grid{
display:grid;
grid-template-columns: 1fr;
gap:10px;
}
.res-bars .bar-row{
display:grid;
grid-template-columns: 160px 1fr auto;
align-items:center;
gap:10px;
}
.res-bars .bar-row .lbl{ font-weight:600; white-space:nowrap; }
.res-bars .bar-row .val{ font-variant-numeric: tabular-nums; opacity:.85; }
.res-bars .bar{
position:relative;
height:10px;
background:#eef2ff;
border:1px solid #e2e8f0;
border-radius:999px;
overflow:hidden;
}
.res-bars .bar > span{
position:absolute; inset:0 100% 0 0; /* width se ajusta en línea */
background:linear-gradient(90deg, #2563eb, #60a5fa);
transition: inset .4s ease;
border-right:2px solid #1d4ed8; /* “marcador” */
}
@media (max-width: 560px){
.res-bars .bar-row{ grid-template-columns: 1fr; }
.res-bars .bar-row .lbl, .res-bars .bar-row .val{ order:-1 }
.res-bars .bar-row .val{ justify-self:end; }
}
/* --- Ajustes Resultados DIALUMEX --- */
#eResultados { padding-top: 4px; }
#enerPreviewBars { margin-top: 6px; }
/* Asegurar que el bloque de Iluminación (resultBox) ocupe todo el ancho y quede debajo */
#eResultados #resultBox {
width: 100%;
grid-column: 1 / -1; /* si el contenedor usa grid, abarca todas las columnas */
}
#eResultados #resultBox .card {
width: 100%;
}
/* Fuerza el módulo de iluminación a ocupar su propia fila debajo del energético */
#flagIluminacion {
display: block;
width: 100%;
clear: both; /* por si hay floats en tarjetas */
margin-top: 12px; /* separación pequeña */
}
/* Evita que el wizard energético y el de iluminación se acomoden en columnas */
.energy-wizard,
#wizard {
float: none;
width: 100%;
}
/* === Barras en Resultados === */
.e-bars { margin-top: .5rem; }
.e-bars .row { display:flex; align-items:center; gap:12px; margin:10px 0; }
.e-bars .label { width: 170px; font-size: .92rem; color: #2b2b2b; }
.e-bars .meter { flex:1; height: 10px; background:#e9edf3; border-radius: 999px; overflow:hidden; }
.e-bars .bar { height: 100%; background:#2f6cf6; width:0%; transition: width .5s; }
.e-bars .num { width: 160px; text-align:right; color:#5b6473; font-size:.9rem; white-space:nowrap; }
/* Bloques apilados y a 100% de ancho (rompen floats/grids si los hubiera) */
#eResumen,
#eResultados,
#flagIluminacion {
display: block !important;
width: 100% !important;
clear: both !important;
grid-column: 1 / -1 !important; /* si el contenedor usa CSS Grid */
flex: 0 0 100% !important; /* ⬅️ NUEVO: ocupan toda la fila en contenedores flex */
margin-top: 6px;
}
#eResumen { margin-bottom: 6px; } /* “pegado” visual */
/* Evita columnas en esos bloques, aunque el contenedor use multi-column */
#eResultados,
#flagIluminacion {
break-inside: avoid;
page-break-inside: avoid;
}
/* Título “Resultados energéticos” sin margen extra arriba */
#eResultados h4:first-child { margin-top: 0; }
/* ==== Hotfix visual base (pegar al final de styles.css) ==== */
/* Tipografía y ritmo vertical básico */
html { font-size: 16px; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Escala de espaciados */
:root{
--gap-0:0; --gap-1: .25rem; --gap-2:.5rem; --gap-3:.75rem; --gap-4:1rem;
--gap-5:1.25rem; --gap-6:1.5rem; --gap-8:2rem; --gap-10:2.5rem; --gap-12:3rem;
--radius-s: .5rem; --radius: .875rem; --radius-lg:1.25rem;
--shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.06);
--muted:#6b7280; --border:#e5e7eb; --bg-soft:#f9fafb;
}
/* Contenedor genérico (si no tienes uno) */
.container, .wrap {
max-width: 1200px; margin: 0 auto; padding-inline: var(--gap-4);
}
/* Títulos con margen consistente (evita bloques “pegados”) */
h1,h2,h3,h4{ line-height:1.25; }
h1{ margin: var(--gap-6) 0 var(--gap-4); }
h2{ margin: var(--gap-6) 0 var(--gap-4); }
h3{ margin: var(--gap-5) 0 var(--gap-3); }
h4{ margin: var(--gap-4) 0 var(--gap-2); color: #111827; }
/* Secciones con respiración uniforme */
.section{ padding-block: var(--gap-8); }
.section + .section{ padding-top: 0; }
/* Tarjetas estándar (para “Resultados”, resúmenes, etc.) */
.card{
background: #fff; border:1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-1); padding: var(--gap-5);
}
.card + .card{ margin-top: var(--gap-4); }
/* Listas de resultados compactas y alineadas */
.results-list{ display:grid; gap: var(--gap-3); }
.results-item{ display:flex; justify-content:space-between; gap:var(--gap-4); }
.results-item .label{ color: var(--muted); }
.results-item .value{ font-weight:600; }
/* Barras/lineas de carga ponderada (placeholder neutral) */
.bar{
height: .625rem; background: var(--bg-soft); border-radius:999px; overflow:hidden;
}
.bar > span{ display:block; height:100%; background:#60a5fa; }
/* Tablas más legibles */
.table{
width:100%; border-collapse: separate; border-spacing:0; overflow:hidden;
border:1px solid var(--border); border-radius: var(--radius-s);
}
.table th, .table td{ padding: .65rem .8rem; border-bottom:1px solid var(--border); }
.table thead th{ background:#f3f4f6; text-align:left; font-weight:600; }
.table tr:last-child td{ border-bottom:0; }
/* Imágenes responsivas y sin deformación */
img{ max-width:100%; height:auto; }
figure{ margin:0; }
img.dial-photo{ display:block !important; }
/* Utilidades rápidas */
.mt-0{ margin-top:0!important; } .mb-0{ margin-bottom:0!important; }
.mt-2{ margin-top:var(--gap-2)!important; } .mb-2{ margin-bottom:var(--gap-2)!important; }
.mt-4{ margin-top:var(--gap-4)!important; } .mb-4{ margin-bottom:var(--gap-4)!important; }
.grid{ display:grid; gap: var(--gap-4); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } }
/* Separador visual fino */
.hr{ height:1px; background: var(--border); margin: var(--gap-6) 0; }
/* Modo impresión básico (evita cortes raros y muestra fotos) */
@media print{
*{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
a[href]:after{ content:""; } /* no imprimir URLs */
header, nav, .topbar, .button, .btn, .no-print{ display:none !important; }
.card, figure{ break-inside: avoid; page-break-inside: avoid; }
img.dial-photo{ display:block !important; }
}
/* Anti-FOUC: cualquier elemento con hidden no se muestra nunca en pantalla */
[hidden] { display: none !important; }
/* Espacio controlado para las barras rápidas bajo el resumen */
.quickbars-slot { margin: 8px 0 12px; }
/* Evitar cortes raros en impresión y que las fotos siempre aparezcan */
@media print {
figure { break-inside: avoid; page-break-inside: avoid; }
img.dial-photo { display:block !important; }
}
/* Compacto en resultados energéticos */
#eResumen { margin-bottom: 6px !important; }
#eResultados { margin-top: 6px !important; display: block; clear: both; grid-column: 1 / -1; }
#eBreakdownTop, #eBreakdown { margin: 4px 0 !important; }
/* Quita huecos verticales innecesarios alrededor del resumen/resultados */
.energy-wizard .step-panel h4 + p#eResumen { margin-bottom: 6px !important; }
.energy-wizard .step-panel { contain: layout; } /* evita colapsos raros de margen */
/* Pegado entre resumen y resultados, y forzar ancho completo */
#eResumen + #eResultados { margin-top: 6px !important; }
#eResultados { grid-column: 1 / -1; width: 100%; display: block; clear: both; }
/* Fijar Iluminación hasta abajo y full width */
#flagIluminacion {
display: block !important;
grid-column: 1 / -1 !important;
clear: both !important;
width: 100% !important;
margin-top: 12px;
}
/* Evitar que se repitan las barras al final:
deja solo el primer bloque y oculta los siguientes */
#eResultados .e-bars ~ .e-bars,
#enerPreviewBars .e-bars ~ .e-bars,
#eResultados .res-bars ~ .res-bars,
#enerPreviewBars .res-bars ~ .res-bars {
display: none !important;
}
/* Evitar cortes / columnas raras si el padre usa multi-column o grid */
#eResultados,
#flagIluminacion{
break-inside: avoid;
page-break-inside: avoid;
}
/* Espaciados controlados para que se vea “pegadito” pero no encimado */
#eResumen{
margin-top: 8px !important;
margin-bottom: 6px !important;
}
#eResultados{
margin-top: 4px !important;
margin-bottom: 16px !important;
}
#flagIluminacion{
margin-top: 18px !important; /* separación clara debajo de Resultados energéticos */
}
/* Evitar cortes raros si hay multi-column o grid en ancestros */
#eResultados,
#flagIluminacion{
break-inside: avoid;
page-break-inside: avoid;
position: static !important;
}
/* Evidencia fotográfica del levantamiento: que siempre se vean las fotos */
img.dial-photo {
display: block !important;
}
/* Al imprimir, evitar que las fotos se corten entre páginas */
@media print {
img.dial-photo {
display: block !important;
}
figure {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* === Resultados del diagnóstico: orden y espaciado limpio === */
/* No tocamos el display de .diag-card, usamos el flujo normal del HTML */
/* Aseguramos que estos bloques sean de ancho completo y apilados */
.diag-card #eResumen,
.diag-card #eResultados,
.diag-card #flagIluminacion{
display:block;
width:100%;
max-width:100%;
clear:both;
float:none;
margin-left:0;
margin-right:0;
}
/* Resumen pegadito al texto de consumo anual */
.diag-card #eResumen{
margin-top:8px;
margin-bottom:4px;
}
/* “Resultados energéticos” inmediatamente después del resumen */
.diag-card #eResultados{
margin-top:0;
margin-bottom:8px; /* más corto para que se vea pegado */
}
/* Iluminación claramente debajo del bloque energético */
.diag-card #flagIluminacion{
margin-top:12px; /* separación pequeña, sin hueco enorme */
}
/* Evitar cortes raros en multi-column e impresión */
#eResultados,
#flagIluminacion{
break-inside: avoid;
page-break-inside: avoid;
position: static !important;
}
/* en tu CSS global (por ejemplo, diagnosticos.css) */
#flagIluminacion .step-panel {
display: none;
}
#flagIluminacion .step-panel.is-active {
display: block;
}
#selectorReportes table th,
#selectorReportes table td {
border: 1px solid #e5e7eb;
padding: 4px 6px;
}
#selectorReportes table th {
background: #f9fafb;
}
#selectorReportes .btn-sm {
font-size: 12px;
padding: 3px 8px;
}
/* ===== ADMIN: tabla de usuarios completa (sin recorte) ===== */
.page-admin .admin-users-card{
width: min(980px, 96vw); /* más ancho solo para el listado */
}
.page-admin .admin-create-card{
width: min(560px, 92vw); /* mantiene el tamaño original del formulario */
}
/* Opcional: asegura que la tabla no “apriete” columnas demasiado */
.page-admin .admin-users-card .table{
min-width: 860px;
}
@media (max-width: 900px){
.page-admin .admin-users-card .table{
min-width: 720px;
}
}
/* ===== SUPERADMIN: tabla completa ===== */
.page-superadmin .superadmin-users-card{
width: min(1100px, 96vw);
}
.page-superadmin .superadmin-users-card .table{
min-width: 980px;
}
@media (max-width: 1024px){
.page-superadmin .superadmin-users-card .table{
min-width: 820px;
}
}
.about-system{
max-width: 860px;
margin: 24px auto 40px;
padding: 0 clamp(20px, 4vw, 40px);
}
.about-system h2{
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
margin-bottom: 12px;
color: #0f2e1c;
}
.about-system p{
color: #475569;
line-height: 1.7;
margin-bottom: 12px;
}
/* ===== Home didáctico (microcopy + pasos) ===== */
.didactic-sub{ max-width: 62ch; }
.hero-steps{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:10px;
margin:14px 0 12px;
}
.hstep{
border:1px solid var(--border);
border-radius:14px;
padding:10px 12px;
background: rgba(16,185,129,.06);
}
.hstep strong{ display:block; font-weight:900; margin-bottom:4px; }
.hstep span{ color:var(--muted); font-size:14px; line-height:1.25; }
.microgloss{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:10px 0 6px;
}
.micro-pill{
display:inline-flex;
gap:6px;
align-items:center;
padding:7px 10px;
border-radius:999px;
border:1px dashed var(--border);
background:#fff;
color:var(--text);
font-size:13px;
}
.micro-pill strong{ font-weight:900; color: var(--brand); }
.badge-sub{ display:block; margin-top:2px; }
.badge-note{
display:block;
margin-top:4px;
color:var(--muted);
font-size:12.5px;
line-height:1.2;
}
/* ===== Bloque educativo: pasos y micro-animación ===== */
.edu-steps{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:10px;
margin:12px 0 10px;
}
.estep{
border:1px solid var(--border);
border-radius:14px;
padding:10px 12px;
background:#fff;
box-shadow: 0 10px 24px rgba(2,6,23,.06);
transform: translateY(6px);
opacity:.0;
}
.estep strong{ display:block; font-weight:900; margin-bottom:4px; }
.estep span{ color:var(--muted); font-size:13px; line-height:1.25; }
.edu-mini-note{
margin: 8px 0 0;
color: var(--muted);
}
/* Animación al “entrar” */
.edu-card.is-in .estep{
animation: eduPop .55s ease forwards;
}
.edu-card.is-in .estep:nth-child(2){ animation-delay: .08s; }
.edu-card.is-in .estep:nth-child(3){ animation-delay: .16s; }
@keyframes eduPop{
from{ transform: translateY(10px); opacity:0; }
to{ transform: translateY(0); opacity:1; }
}
/* Pequeña atención al botón de explicación */
.btn-attention{
animation: btnPulse 1.2s ease-in-out 2;
}
@keyframes btnPulse{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-2px); }
}
/* Responsive */
@media (max-width: 900px){
.hero-steps{ grid-template-columns:1fr; }
.edu-steps{ grid-template-columns:1fr; }
}
/* ===== Home didáctico ===== */
.didactic-sub{ max-width: 62ch; }
.hero-steps{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:10px;
margin:14px 0 12px;
}
.hstep{
border:1px solid var(--border);
border-radius:14px;
padding:10px 12px;
background: rgba(16,185,129,.06);
}
.hstep strong{ display:block; font-weight:900; margin-bottom:4px; }
.hstep span{ color:var(--muted); font-size:14px; line-height:1.25; }
.microgloss{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:10px 0 6px;
}
.micro-pill{
display:inline-flex;
gap:6px;
align-items:center;
padding:7px 10px;
border-radius:999px;
border:1px dashed var(--border);
background:#fff;
color:var(--text);
font-size:13px;
}
.micro-pill strong{ font-weight:900; color: var(--brand); }
.badge-sub{ display:block; margin-top:2px; }
.badge-note{
display:block;
margin-top:4px;
color:var(--muted);
font-size:12.5px;
line-height:1.2;
}
/* CTA didáctico */.cta-stack{
position: fixed;
right: 20px;
bottom: 20px;
z-index: 60;
display: flex; /* ✅ */
flex-direction: column; /* ✅ */
align-items: flex-end; /* ✅ */
gap: 10px; /* ✅ separación entre botón y notas */
/* lo que ya tenías (ocultar/mostrar) */
opacity: 0;
transform: translateY(12px) scale(.96);
pointer-events: none;
}
.cta-stack.is-visible{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.cta-hint{
margin:0;
max-width: 260px;
text-align:right;
font-size:12.5px;
color: var(--muted);
}
/* Notas del CTA (una sola burbuja con dos líneas) */
.cta-notes{
max-width: 320px;
text-align: right;
background: rgba(255,255,255,.92);
border: 1px solid var(--border);
padding: 10px 12px;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(2,6,23,.10);
order: 2; /* ✅ notas abajo */
}
#btnCtaStart{
order: 1; /* ✅ botón arriba */
}
.cta-notes p{ margin:0; }
.cta-notes p + p{
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.cta-auth{
font-size: 12px;
}
.cta-link{ color: var(--brand); font-weight: 800; text-decoration: underline; }
/* Tarjetas didácticas (About) */
.about-cards{
margin-top:16px;
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:12px;
}
.acard{
background:#fff;
border:1px solid var(--border);
border-radius:16px;
padding:12px 14px;
box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
.acard h3{ margin:0 0 8px; font-size:16px; }
.acard p{ margin: 0 0 6px; color: var(--muted); }
.acard ul{ margin: 0; padding-left: 18px; color: var(--muted); }
/* Mini FAQ */
.mini-faq{
margin-top:14px;
border:1px solid var(--border);
border-radius:16px;
background: rgba(255,255,255,.7);
padding:10px 12px;
}
.mini-faq details{
padding:10px 6px;
border-bottom:1px solid var(--border);
}
.mini-faq details:last-child{ border-bottom:none; }
.mini-faq summary{
cursor:pointer;
font-weight:900;
}
.mini-faq p{ margin:8px 0 0; color: var(--muted); }
/* Bloque educativo: pasos y animación */
.edu-steps{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:10px;
margin:12px 0 10px;
}
.estep{
border:1px solid var(--border);
border-radius:14px;
padding:10px 12px;
background:#fff;
box-shadow: 0 10px 24px rgba(2,6,23,.06);
transform: translateY(6px);
opacity:0;
}
.estep strong{ display:block; font-weight:900; margin-bottom:4px; }
.estep span{ color:var(--muted); font-size:13px; line-height:1.25; }
.edu-mini-note{
margin: 8px 0 0;
color: var(--muted);
}
/* Animación */
.edu-card.is-in .estep{
animation: eduPop .55s ease forwards;
}
.edu-card.is-in .estep:nth-child(2){ animation-delay: .08s; }
.edu-card.is-in .estep:nth-child(3){ animation-delay: .16s; }
@keyframes eduPop{
from{ transform: translateY(10px); opacity:0; }
to{ transform: translateY(0); opacity:1; }
}
/* Pulsito sutil */
.btn-attention{ animation: btnPulse 1.2s ease-in-out 2; }
@keyframes btnPulse{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-2px); }
}
/* Responsive */
@media (max-width: 900px){
.hero-steps{ grid-template-columns:1fr; }
.edu-steps{ grid-template-columns:1fr; }
.about-cards{ grid-template-columns:1fr; }
.cta-stack{ right:14px; bottom:14px; }
.cta-hint{ max-width: 220px; }
}
/* FIX: dentro del CTA flotante, el botón NO debe ser absoluto */
.cta-stack .cta-right{
position: static !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
left: auto !important;
}
.cta-float-btn{
position: static;
}
.contact-hints{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:12px;
margin-top:14px;
}
.contact-hints .hint{
background:#fff;
border:1px solid var(--border);
border-radius:14px;
box-shadow:var(--shadow);
padding:12px 14px;
}
.contact-hints .hint span{ color: var(--muted); font-size:14px; }
@media (max-width:980px){
.contact-hints{ grid-template-columns:1fr; }
}
/* Index: franja didáctica */
.hero-strip{
margin-top:12px;
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:10px;
padding:12px;
border:1px solid var(--border);
border-radius:16px;
background: rgba(255,255,255,.65);
box-shadow: var(--shadow);
}
.hero-strip .hs-item strong{ display:block; font-size:14px; }
.hero-strip .hs-item span{ color: var(--muted); font-size:14px; line-height:1.35; }
@media (max-width:980px){
.hero-strip{ grid-template-columns:1fr; }
}
/* Normatividad: unidades */
.norma-mini{
margin-top:12px;
padding:12px 14px;
border:1px solid var(--border);
border-radius:16px;
background:#fff;
box-shadow: var(--shadow);
}
.norma-mini .mini-grid{
margin-top:8px;
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:8px;
color: var(--muted);
font-size:14px;
}
@media (max-width:980px){
.norma-mini .mini-grid{ grid-template-columns:1fr; }
}
/* Ayuda: checklist */
.checklist{ padding-left:18px; }
.checklist li{ margin:6px 0; }
/* Contacto: razones */
.contact-reasons{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:12px 0 14px;
}
.contact-reasons .chip{
background: var(--chip);
border:1px solid var(--border);
border-radius:999px;
padding:8px 10px;
font-size:13px;
color: var(--text);
}
.examples{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:12px;
margin-top:12px;
}
.ex-card{
background:#fff;
border:1px solid var(--border);
border-radius:14px;
box-shadow: var(--shadow);
padding:12px 14px;
}
.ex-card span{ color:var(--muted); font-size:14px; line-height:1.35; }
@media (max-width:980px){ .examples{ grid-template-columns:1fr; } }
/* ===== Logos institucionales en Topbar ===== */
.topbar-logos{
display:flex;
align-items:center;
gap:14px;
margin-left: 10px; /* separa del nav */
}
.topbar-logo{
height: 28px;
width: auto;
object-fit: contain;
opacity: .95;
filter: drop-shadow(0 2px 6px rgba(2,6,23,.08));
}
/* En pantallas chicas se ocultan para no romper el menú */
@media (max-width: 900px){
.topbar-logos{ display:none; }
}
.brand-home{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:inherit;
}
.brand-logo-img{
height:32px;
width:auto;
display:block;
}
/* logo único centrado en el recuadro */
.logo-row--single{ justify-content:center; gap:0; }
.diag-logo-main{ height:70px; width:auto; max-width:260px; object-fit:contain; }
/* ============================================================
Diagnósticos (Energía) — Tabla de Cargas (evitar que se “moche”)
============================================================ */
.table-wrap{
width: 100%;
overflow-x: auto; /* scroll horizontal solo aquí */
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.table-wrap .tbl{
width: 100%;
min-width: 1100px; /* garantiza que quepan columnas */
border-collapse: collapse;
}
/* Anchos por columna para que el encabezado coincida con su contenido */
#tblEquipos th:nth-child(1), #tblEquipos td:nth-child(1){ min-width: 140px; }
#tblEquipos th:nth-child(2), #tblEquipos td:nth-child(2){ min-width: 170px; }
#tblEquipos th:nth-child(3), #tblEquipos td:nth-child(3){ min-width: 280px; } /* Marca + Modelo */
#tblEquipos th:nth-child(4), #tblEquipos td:nth-child(4){ min-width: 150px; }
#tblEquipos th:nth-child(5), #tblEquipos td:nth-child(5){ min-width: 140px; }
#tblEquipos th:nth-child(6), #tblEquipos td:nth-child(6){ min-width: 110px; }
#tblEquipos th:nth-child(7), #tblEquipos td:nth-child(7){ min-width: 110px; }
#tblEquipos th:nth-child(8), #tblEquipos td:nth-child(8){ min-width: 110px; }
#tblEquipos th:nth-child(9), #tblEquipos td:nth-child(9){ min-width: 110px; }
#tblEquipos th:nth-child(10), #tblEquipos td:nth-child(10){ min-width: 150px; }
#tblEquipos th:nth-child(11), #tblEquipos td:nth-child(11){ min-width: 210px; } /* Evidencia */
#tblEquipos th:nth-child(12), #tblEquipos td:nth-child(12){ min-width: 110px; }
.table-wrap .tbl th,
.table-wrap .tbl td{
white-space: nowrap; /* evita cortes raros en encabezados/celdas */
}
/* Evita que inputs dentro de la tabla provoquen “corte” visual */
.table-wrap .tbl input,
.table-wrap .tbl select{
max-width: 100%;
box-sizing: border-box;
}
/* Link visible para CFE (paso 3 energía) */
.cfe-link{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: 10px;
font-weight: 800;
color: #14532d;
text-decoration: underline;
text-underline-offset: 3px;
background: rgba(20, 83, 45, .08);
border: 1px solid rgba(20, 83, 45, .18);
}
.cfe-link:hover{
background: rgba(20, 83, 45, .14);
}
.cfe-link:focus-visible{
outline: 2px solid rgba(20, 83, 45, .35);
outline-offset: 2px;
}
.cfe-link::after{
content: "↗";
font-size: 12px;
opacity: .8;
}
/* ===== Energy: Resumen rápido ===== */
.energy-summary{
margin-top: 18px;
padding: 14px 14px 12px;
border: 1px solid rgba(20, 58, 90, .12);
border-radius: 16px;
background: rgba(255,255,255,.75);
backdrop-filter: blur(8px);
}
/* Cuando el resumen está dentro de un grid (como en el paso 3), debe ocupar todo el ancho */
.grid-3 > .energy-summary{
grid-column: 1 / -1;
}
.energy-summary__head h4{
margin: 0 0 2px;
font-size: 15px;
}
.energy-summary__head .muted{
margin: 0 0 10px;
font-size: 12px;
opacity: .75;
}
.energy-summary__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.energy-kpi{
padding: 10px;
border-radius: 14px;
background: rgba(245, 249, 255, .9);
border: 1px solid rgba(20, 58, 90, .10);
}
.kpi-label{ font-size: 12px; opacity: .75; }
.kpi-value{ font-size: 18px; font-weight: 800; margin-top: 2px; }
.kpi-unit{ font-size: 12px; font-weight: 700; opacity: .7; }
.kpi-sub{ font-size: 12px; opacity: .75; margin-top: 4px; }
.energy-advanced{
margin-top: 10px;
padding: 6px 10px 10px;
border-radius: 14px;
background: rgba(255,255,255,.7);
border: 1px dashed rgba(20, 58, 90, .18);
}
.energy-advanced summary{
cursor: pointer;
font-weight: 700;
font-size: 13px;
}
.energy-advanced__row{
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.energy-warn{
margin-top: 10px;
padding: 10px;
border-radius: 12px;
background: rgba(255, 220, 220, .55);
border: 1px solid rgba(180, 50, 50, .25);
font-size: 12px;
}
@media (max-width: 860px){
.energy-summary__grid{ grid-template-columns: 1fr; }
.energy-advanced__row{ grid-template-columns: 1fr; }
}
.mini-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
margin-top: .35rem;
margin-bottom: .35rem;
}
.form-error{
margin-top: .5rem;
padding: .6rem .75rem;
border-radius: .75rem;
border: 1px solid rgba(220, 38, 38, .35);
background: rgba(220, 38, 38, .06);
color: #991b1b;
font-weight: 600;
display:none;
}
.form-error.is-on{ display:block; }
.tbl-in{
width: 100%;
padding: 6px 10px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fff;
font: inherit;
}
.btn.btn-soft{
padding: 8px 12px;
border-radius: 12px;
background: #eef2ff;
border: 1px solid #e5e7eb;
}
.muted{ color:#6b7280; }
.pill{
display:inline-block;
padding:4px 10px;
border-radius:999px;
border:1px solid #e5e7eb;
background:#f8fafc;
}
/* =====================
Iluminación – Intro (Conectar)
===================== */
.lux-intro{ margin-top: 6px; }
.lux-intro-lines{ margin-top: 8px; display: grid; gap: 6px; }
.lux-intro-line{
opacity: 0;
transform: translateY(4px);
transition: opacity .25s ease, transform .25s ease;
font-size: 0.95rem;
}
.lux-intro-line.is-on{ opacity: 1; transform: translateY(0); }
/* Resalta el botón Detectar al final de la intro */
.dial-pulse{
animation: dialPulse 1.2s ease-in-out infinite;
}
/* =====================
Iluminación – Detectar (resultado ✓ / ✕)
===================== */
.detect-result{
display: inline-flex;
align-items: center;
gap: 10px;
margin-left: 10px;
vertical-align: middle;
}
.detect-badge{
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 18px;
box-shadow: 0 10px 24px rgba(0,0,0,.10);
transform: translateY(1px);
}
.detect-ok{
background: #1f9d55;
color: #fff;
animation: popIn .22s ease-out;
}
.detect-bad{
background: #e53935;
color: #fff;
animation: popIn .22s ease-out;
}
@keyframes popIn{
from{ transform: scale(.92); opacity: .6; }
to{ transform: scale(1); opacity: 1; }
}
@keyframes dialPulse{
0%,100%{ transform: translateZ(0) scale(1); }
50%{ transform: translateZ(0) scale(1.05); }
}
/* =====================
Iluminación – Calibración (mejoras didácticas)
===================== */
.lux-cal-note{ margin-top:10px; }
.lux-cal-steps li{ margin: 4px 0; line-height: 1.25; }
/* =====================
Iluminación – Espacio (guía didáctica)
===================== */
.lux-space-note{ margin-top:10px; }
.lux-space-steps li{ margin:4px 0; line-height:1.25; }
.evidence-preview{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:8px;
}
.evidence-preview img{
width:64px;
height:64px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
}
/* ============================================================
FOOTER GLOBAL (DIALUMEX)
============================================================ */
/* Mapa dentro del footer global (no rompe layout) */
/* ===== Footer: mapa (ubicación) ===== */
.footer-col--map{
display: grid;
gap: 10px;
/* IMPORTANT: NO forzamos span 2; se queda como una columna normal */
}
.footer-mapbox{
height: 220px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(2,6,23,.10);
box-shadow: 0 10px 22px rgba(2,6,23,.08);
background: #fff;
}
.footer-mapbox iframe{
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 900px){
.footer-mapbox{ height: 240px; }
}
.site-footer{
margin-top: 48px;
border-top: 1px solid var(--border);
background: linear-gradient(180deg, rgba(22,163,74,.06), rgba(22,163,74,.02));
color: var(--text);
}
.footer-inner{
max-width: 1200px;
margin: 0 auto;
padding: 24px 16px;
}
.footer-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(2,6,23,.08);
}
.footer-brand{
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
}
.footer-logo{
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(2,6,23,.10);
background: #fff;
padding: 6px;
}
.footer-brand-txt strong{
display: block;
font-size: 14px;
letter-spacing: .2px;
}
.footer-brand-txt span{
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.footer-logos{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.footer-logos img{
height: 34px;
width: auto;
object-fit: contain;
filter: saturate(1.05);
opacity: .95;
}
.footer-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 1.35fr);
gap: 18px;
padding-top: 18px;
}
.footer-col h4{
font-size: 13px;
margin: 0 0 10px 0;
letter-spacing: .2px;
}
.footer-col ul{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.footer-col a{
color: var(--muted);
text-decoration: none;
}
.footer-col a:hover{
color: var(--text);
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-note{
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.55;
}
.footer-bottom{
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(2,6,23,.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-size: 12px;
color: var(--muted);
}
.footer-mini{
color: var(--muted);
opacity: .9;
}
/* Responsive */
@media (max-width: 900px){
.footer-grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-top{
flex-direction: column;
align-items: flex-start;
}
.footer-logos{
justify-content: flex-start;
}
}
@media (max-width: 520px){
.footer-grid{
grid-template-columns: 1fr;
}
}
.cta-stack{ z-index: 9999 !important; }
#ctaSentinel{
height: 1px;
width: 1px;
}
.info-cta{
margin-top: 18px;
display: flex;
justify-content: flex-start;
}
.info-cta .btn{
padding: 10px 18px;
border-radius: 8px;
font-weight: 600;
}
/* ===== Botón Conoce más animado ===== */
.btn-conoce {
position: relative;
transition: all 0.3s ease;
animation: floatSoft 3s ease-in-out infinite;
}
/* Movimiento suave continuo */
@keyframes floatSoft {
0% { transform: translateY(0px); }
50% { transform: translateY(-3px); }
100% { transform: translateY(0px); }
}
/* Hover elegante */
.btn-conoce:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* Micro movimiento de la flecha */
.btn-conoce:hover::after {
transform: translateX(4px);
}
/* Efecto de brillo sutil */
.btn-conoce::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0) 100%
);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.btn-conoce:hover::before {
transform: translateX(100%);
}
/* ===== Conoce más Normatividad ===== */
.conoce-mas-wrapper{
position: relative;
margin-top: 18px;
}
.conoce-mas-menu{
position: absolute;
top: 48px;
left: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,.08);
padding: 10px;
display: none;
flex-direction: column;
gap: 8px;
min-width: 280px;
z-index: 50;
}
.conoce-mas-menu a{
text-decoration: none;
padding: 8px 12px;
border-radius: 8px;
color: var(--text);
font-size: 14px;
transition: background .2s ease;
}
.conoce-mas-menu a:hover{
background: rgba(0,0,0,.05);
}
/* ===============================
Gate: selector de flujo diagnóstico
================================ */
.diag-mode-gate{
margin: 10px 0 18px;
padding: 18px;
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
background: rgba(255,255,255,.75);
}
.diag-mode-gate .gate-title{
margin: 0 0 6px;
font-size: 20px;
}
.diag-mode-gate .gate-sub{
margin: 0 0 14px;
}
.diag-mode-gate .gate-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 860px){
.diag-mode-gate .gate-grid{ grid-template-columns: 1fr; }
}
.gate-card{
text-align: left;
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
padding: 18px 18px 16px;
background: #fff;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
.gate-card:hover{
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.gate-card h3{ margin: 0 0 8px; font-size: 18px; }
.gate-card p{ margin: 0 0 12px; line-height: 1.55; }
.gate-cta{
display: inline-block;
padding: 10px 12px;
border-radius: 10px;
font-weight: 700;
background: rgba(31,157,143,.12);
}
.gate-card--lux .gate-cta{
background: rgba(59,130,246,.12);
}
/* ====== Lógica de visibilidad por modo ======
gate -> solo se ve el selector
full -> todo normal
lux -> oculta energía y muestra iluminación
*/
body[data-diagflow="gate"] #diagRoot > *{
display: none !important;
}
/* en gate dejamos ver el logo y el selector */
body[data-diagflow="gate"] #diagRoot > .logo-row,
body[data-diagflow="gate"] #diagModeGate{
display: block !important;
}
/* modo solo iluminación: escondemos el wizard de energía */
body[data-diagflow="lux"] #energyWizard{
display: none !important;
}
/* en modo lux el selector ya no estorba */
body[data-diagflow="lux"] #diagModeGate{
display: none !important;
}
/* en modo full el selector se oculta */
body[data-diagflow="full"] #diagModeGate{
display: none !important;
}
.intro-cargas {
margin-bottom: 20px;
}
.intro-cargas h3 {
margin-bottom: 8px;
color: #1b5e20;
}
.cargas-ayuda {
display: flex;
gap: 20px;
margin-top: 10px;
flex-wrap: wrap;
}
.ayuda-item {
background: #f5f9f7;
border-left: 4px solid #2e7d32;
padding: 12px 15px;
border-radius: 6px;
flex: 1;
min-width: 260px;
transition: all 0.2s ease;
}
.ayuda-item:hover {
background: #e8f5e9;
transform: translateY(-2px);
}
/* ==========================================
LINK DESTACADO - IlumiSpace (Diagnóstico)
========================================== */
.lux-link {
color: #1e7f5c; /* verde más fuerte */
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: all 0.25s ease;
position: relative;
}
/* Flechita indicadora */
.lux-link::after {
content: " ↗";
font-size: 0.85em;
transition: transform 0.25s ease;
}
/* Hover */
.lux-link:hover {
color: #0f5c41;
text-decoration-thickness: 3px;
}
/* Pequeño movimiento elegante */
.lux-link:hover::after {
transform: translateX(3px);
}
/* Accesibilidad teclado */
.lux-link:focus {
outline: 2px solid #1e7f5c;
outline-offset: 3px;
border-radius: 4px;
}