/* ============================================================================ normandia-base.css · Sistema de diseño Normandia · v1.0 ---------------------------------------------------------------------------- NO CONTIENE COLORES DE PROYECTO. Todo el color vive en el archivo de tema (tema-*.css), que debe cargarse ANTES que este archivo. Contrato con el tema — variables que este archivo espera recibir: --brand, --brand-2 marca y sistema --acento, --acento-2 tiempo y urgencia --ia, --ia-2, --ia-ink asistente de IA --acento-ink texto legible sobre relleno de acento --bg, --bg-2, --card, --card-2, --superficie --linea, --linea-2 --tx, --tx-2, --tx-3 --ok, --warn, --bad --glass, --glass-b ============================================================================ */ /* ---------- 1 · escalas fijas (iguales en todos los proyectos) ---------- */ :root{ --f-display:"League Spartan", Inter, system-ui, sans-serif; --f-texto:Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --f-dato:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --r:18px; --r-sm:13px; --r-lg:26px; --pill:999px; --e:cubic-bezier(.16,.84,.44,1); --t-rapido:.18s; --t-base:.28s; --t-lento:.42s; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px; --fila:52px; --fila-densa:42px; --sh:0 18px 40px -22px rgba(0,0,0,.28); --sh-lg:0 40px 80px -30px rgba(0,0,0,.34); --ico-ac:var(--ia); } [data-theme="dark"]{ --sh:0 18px 40px -22px rgba(0,0,0,.75); --sh-lg:0 40px 80px -30px rgba(0,0,0,.85); } /* ---------- 2 · base ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--f-texto);font-size:14px;line-height:1.55;background:var(--bg);color:var(--tx); -webkit-font-smoothing:antialiased;transition:background var(--t-lento) var(--e),color var(--t-lento) var(--e)} h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.15} h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--ia);outline-offset:2px;border-radius:6px} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--linea);border-radius:9px} .mono{font-family:var(--f-dato);font-variant-numeric:tabular-nums} .oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* atmósfera: aura + retícula. Se desactiva con .sin-aura en */ body:not(.sin-aura)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(58% 46% at 12% -6%, color-mix(in srgb,var(--brand) 26%,transparent), transparent 68%), radial-gradient(48% 46% at 100% 2%, color-mix(in srgb,var(--ia) 16%,transparent), transparent 64%)} body:not(.sin-aura)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3; background-image:radial-gradient(circle at 1px 1px, var(--linea) 1px, transparent 0);background-size:34px 34px} /* ---------- 3 · armazón ---------- */ .app{max-width:1340px;margin:0 auto;border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden; background:color-mix(in srgb,var(--bg-2) 88%,transparent);box-shadow:var(--sh-lg);backdrop-filter:blur(14px); display:grid;grid-template-columns:246px minmax(0,1fr)} .lateral{background:linear-gradient(180deg,var(--superficie),var(--card));border-right:1px solid var(--linea); padding:22px 14px;display:flex;flex-direction:column;gap:5px} .marca{display:flex;align-items:center;gap:12px;padding:0 8px 18px;margin-bottom:12px;border-bottom:1px solid var(--linea)} .marca .glifo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 10px 22px -8px color-mix(in srgb,var(--brand) 65%,transparent)} .marca b{font-family:var(--f-display);font-size:1.1rem;font-weight:800;display:block} .marca small{font-size:.66rem;color:var(--tx-3);font-weight:600;letter-spacing:.1em} .nav-i{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;border-radius:var(--r-sm); color:var(--tx-2);font-weight:500;font-size:.86rem;border-left:3px solid transparent;transition:var(--t-base) var(--e)} .nav-i:hover{background:var(--glass);color:var(--tx)} .nav-i.activo{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--tx); border-left-color:var(--brand);font-weight:600} .nav-i .conteo{margin-left:auto;font-family:var(--f-dato);font-size:.66rem;padding:2px 7px;border-radius:var(--pill); background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)} .nav-espacio{flex:1} .contenedor{display:flex;flex-direction:column;min-height:640px} .cabecera{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--linea); background:color-mix(in srgb,var(--superficie) 60%,transparent);backdrop-filter:blur(12px)} main{padding:22px 24px 28px;flex:1} .vista{display:flex;flex-direction:column;gap:18px} /* ---------- 4 · barra de comando y controles de cabecera ---------- */ .comando{margin-left:auto;display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;min-width:290px; border-radius:var(--pill);font-size:.82rem;color:var(--tx-3);background:var(--glass); border:1px solid color-mix(in srgb,var(--ia) 40%,transparent);transition:var(--t-base) var(--e)} .comando:hover{border-color:var(--ia);color:var(--tx-2);transform:translateY(-1px)} .comando[aria-disabled="true"]{border-color:var(--linea)} .comando kbd{margin-left:auto;font-family:var(--f-dato);font-size:.62rem;padding:2px 7px;border:1px solid var(--linea-2);border-radius:6px} .btn-cab{width:40px;height:40px;border-radius:var(--pill);border:1px solid var(--linea);background:var(--glass); display:grid;place-items:center;color:var(--tx-2);transition:var(--t-base) var(--e);position:relative;flex:none} .btn-cab:hover{border-color:var(--brand);color:var(--tx);transform:translateY(-2px)} .btn-cab .globo{position:absolute;top:-3px;right:-3px;font-family:var(--f-dato);font-size:.6rem;font-weight:700; padding:1px 5px;border-radius:var(--pill);color:var(--acento-ink);background:linear-gradient(135deg,var(--acento),var(--acento-2))} .usuario{display:flex;align-items:center;gap:10px} .usuario .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700; font-size:.78rem;color:var(--acento-ink);background:linear-gradient(135deg,var(--acento),var(--acento-2))} /* ---------- 5 · franja temporal (firma del sistema) ---------- */ .franja{padding:14px 24px 8px;border-bottom:1px solid var(--linea); background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 7%,transparent),transparent)} .franja-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .regresiva{margin-left:auto;display:flex;align-items:baseline;gap:7px} .regresiva .n{font-family:var(--f-dato);font-size:1.6rem;font-weight:500;letter-spacing:-.02em; background:linear-gradient(135deg,var(--acento),var(--acento-2));-webkit-background-clip:text;background-clip:text;color:transparent} .regresiva.tranquilo .n{background:linear-gradient(135deg,var(--tx-2),var(--tx));-webkit-background-clip:text;background-clip:text} .regresiva .u{font-size:.64rem;color:var(--tx-3);font-weight:700;letter-spacing:.1em;text-transform:uppercase} svg.traza{display:block;width:100%;height:40px} svg.traza .fondo{stroke:var(--linea);stroke-width:1.2;fill:none} svg.traza .pulso{stroke:url(#gTraza);stroke-width:2;fill:none;stroke-linecap:round; stroke-dasharray:1600;stroke-dashoffset:1600;animation:trazar 2.3s .15s var(--e) forwards} @keyframes trazar{to{stroke-dashoffset:0}} .hitos{display:flex;justify-content:space-between;margin-top:-4px} .hito{display:flex;flex-direction:column;gap:2px;font-size:.66rem;color:var(--tx-3);font-weight:500} .hito .punto{width:7px;height:7px;border-radius:50%;background:var(--linea);border:1px solid var(--tx-3)} .hito.cumplido .punto{background:var(--ia);border-color:var(--ia)} .hito.proximo .punto{background:var(--acento);border-color:var(--acento); box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 22%,transparent)} .hito.proximo span{color:var(--acento)} .hito .fecha{font-family:var(--f-dato);font-size:.62rem} .hitos .hito:last-child{align-items:flex-end} /* ---------- 6 · tarjetas y métricas ---------- */ .tarjeta{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--linea); border-radius:var(--r);padding:22px;box-shadow:var(--sh);transition:var(--t-lento) var(--e)} .tarjeta:hover{border-color:var(--linea-2);box-shadow:var(--sh-lg)} .tarjeta-h{display:flex;align-items:center;gap:11px;margin-bottom:16px} .tarjeta-h .cuenta{margin-left:auto;font-family:var(--f-dato);font-size:.68rem;color:var(--tx-3)} .metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px} .metrica{position:relative;overflow:hidden;padding:20px;border-radius:var(--r);border:1px solid var(--linea); background:linear-gradient(180deg,var(--card),var(--card-2));box-shadow:var(--sh);transition:var(--t-lento) var(--e)} .metrica::before{content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--m1,var(--brand)),var(--m2,var(--brand-2)))} .metrica:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--linea-2)} .metrica .valor{font-family:var(--f-dato);font-size:2.1rem;font-weight:500;letter-spacing:-.03em; background:linear-gradient(135deg,var(--m1,var(--brand)),var(--m2,var(--brand-2))); -webkit-background-clip:text;background-clip:text;color:transparent} .metrica.principal .valor{font-size:2.9rem} .metrica .etiqueta{color:var(--tx-2);font-size:.82rem;font-weight:500;margin-top:2px} .metrica .delta{font-size:.72rem;font-weight:600;margin-top:7px;display:inline-flex;align-items:center;gap:5px} .metrica .delta.sube{color:var(--bad)} .metrica .delta.baja{color:var(--ok)} .burbuja{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none; background:color-mix(in srgb,var(--m1,var(--brand)) 16%,transparent);color:var(--m2,var(--brand-2)); border:1px solid color-mix(in srgb,var(--m1,var(--brand)) 26%,transparent)} .burbuja.sm{width:34px;height:34px;border-radius:10px} /* ---------- 7 · botones y badges ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px;border-radius:var(--pill); font-weight:700;font-size:.82rem;border:1px solid transparent;transition:var(--t-base) var(--e)} .btn-marca{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff; box-shadow:0 12px 26px -12px color-mix(in srgb,var(--brand) 70%,transparent)} .btn-marca:hover{transform:translateY(-3px)} .btn-urgente{background:linear-gradient(135deg,var(--acento),var(--acento-2));color:var(--acento-ink)} .btn-urgente:hover{transform:translateY(-3px)} .btn-ia{background:linear-gradient(135deg,var(--ia),var(--ia-2));color:var(--ia-ink)} .btn-ia:hover{transform:translateY(-3px)} .btn-suave{background:var(--glass);border-color:var(--linea);color:var(--tx)} .btn-suave:hover{border-color:var(--brand);transform:translateY(-3px)} .btn.sm{padding:7px 14px;font-size:.75rem} .btn[disabled]{opacity:.5;pointer-events:none} .acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px} .badge{display:inline-block;font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:var(--pill);white-space:nowrap} .badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 17%,transparent)} .badge.aviso{color:var(--warn);background:color-mix(in srgb,var(--warn) 19%,transparent)} .badge.grave{color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,transparent)} .badge.ia{color:var(--ia-2);background:color-mix(in srgb,var(--ia) 17%,transparent)} .badge.marca{color:var(--brand-2);background:color-mix(in srgb,var(--brand) 18%,transparent)} .badge.neutro{color:var(--tx-3);background:var(--glass);border:1px solid var(--glass-b)} /* ---------- 8 · filas, tablas, progreso ---------- */ .filas{display:flex;flex-direction:column} .fila{display:flex;align-items:center;gap:13px;min-height:var(--fila);padding:0 12px;border-radius:var(--r-sm); border-bottom:1px solid var(--linea);transition:var(--t-base) var(--e);cursor:pointer} .fila:last-child{border-bottom:none} .fila:hover{background:var(--glass);transform:translateX(4px);border-bottom-color:transparent} .fila .txt{flex:1;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fila .sub{display:block;font-size:.72rem;color:var(--tx-3)} .fila .flecha{color:var(--tx-3);opacity:0;transition:var(--t-rapido) var(--e)} .fila:hover .flecha{opacity:1;transform:translateX(3px)} .densa .fila{min-height:var(--fila-densa)} .tabla-marco{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--linea)} table{width:100%;border-collapse:collapse} thead{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 88%,#000),color-mix(in srgb,var(--brand-2) 60%,#000))} th{text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.92);padding:13px 14px} td{padding:13px 14px;border-bottom:1px solid var(--linea);font-size:.82rem} tbody tr{transition:var(--t-base) var(--e);cursor:pointer} tbody tr:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)} tbody tr:last-child td{border-bottom:none} .barra{height:9px;border-radius:var(--pill);background:var(--linea);overflow:hidden} .barra>i{display:block;height:100%;border-radius:var(--pill); background:linear-gradient(90deg,var(--brand),var(--brand-2));animation:llenar 1.3s var(--e) backwards} .barra.ia>i{background:linear-gradient(90deg,var(--ia),var(--ia-2))} .barra.urgente>i{background:linear-gradient(90deg,var(--acento),var(--acento-2))} @keyframes llenar{from{width:0!important}} .barra-fila{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:6px} .anillo{position:relative;width:150px;height:150px;flex:none} .anillo svg{transform:rotate(-90deg);width:100%;height:100%} .anillo .pista{fill:none;stroke:var(--linea);stroke-width:10} .anillo .arco{fill:none;stroke:url(#gAnillo);stroke-width:10;stroke-linecap:round;animation:anillo 1.6s var(--e) backwards} @keyframes anillo{from{stroke-dashoffset:340}} .anillo .centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center} .anillo .centro b{font-family:var(--f-dato);font-size:1.9rem;font-weight:500;letter-spacing:-.03em; background:linear-gradient(135deg,var(--brand),var(--ia));-webkit-background-clip:text;background-clip:text;color:transparent} .anillo .centro span{display:block;font-size:.6rem;color:var(--tx-3);font-weight:700;letter-spacing:.11em;text-transform:uppercase} /* ---------- 9 · máquina de estados y pestañas ---------- */ .pasos{display:flex;align-items:center;overflow-x:auto;padding:4px 0 8px} .paso{display:flex;align-items:center;flex:none} .paso .punto{width:28px;height:28px;border-radius:50%;border:2px solid var(--linea);display:grid;place-items:center; font-size:.68rem;font-weight:700;color:var(--tx-3);background:var(--superficie);transition:var(--t-lento) var(--e)} .paso.cumplido .punto{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff} .paso.actual .punto{border-color:var(--acento);color:var(--acento); box-shadow:0 0 0 5px color-mix(in srgb,var(--acento) 20%,transparent);animation:latir 2.2s infinite} @keyframes latir{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--acento) 6%,transparent)}} .paso .rotulo{font-size:.74rem;color:var(--tx-3);margin:0 10px 0 8px;white-space:nowrap;font-weight:500} .paso.cumplido .rotulo{color:var(--tx-2)} .paso.actual .rotulo{color:var(--tx);font-weight:700} .paso .linea{width:30px;height:2px;background:var(--linea);margin-right:10px;border-radius:2px} .paso.cumplido .linea{background:linear-gradient(90deg,var(--brand),var(--brand-2))} .pestanas{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px} .pestanas button{font-size:.82rem;font-weight:600;padding:9px 16px;border-radius:var(--pill);color:var(--tx-3); white-space:nowrap;border:1px solid transparent;transition:var(--t-base) var(--e)} .pestanas button:hover{color:var(--tx-2);background:var(--glass)} .pestanas button.activa{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))} .pestanas .pin{margin-left:7px;font-family:var(--f-dato);font-size:.6rem;padding:1px 6px;border-radius:var(--pill); background:color-mix(in srgb,var(--bad) 26%,transparent);color:#fff} /* ---------- 10 · bloques de IA ---------- */ .resumen-ia{position:relative;overflow:hidden;border-radius:var(--r);padding:22px; border:1px solid color-mix(in srgb,var(--ia) 36%,transparent); background:linear-gradient(135deg,color-mix(in srgb,var(--ia) 13%,transparent),color-mix(in srgb,var(--brand) 8%,transparent))} .resumen-ia::after{content:"";position:absolute;top:-40%;right:-8%;width:260px;height:260px;border-radius:50%; pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--ia) 22%,transparent),transparent 68%)} .resumen-ia.caido{border-color:var(--linea);background:var(--card)} .resumen-ia p{font-size:.96rem;line-height:1.65;max-width:82ch;position:relative;z-index:1} .resumen-ia.caido p{color:var(--tx-2)} .glifo-ia{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none; font-family:var(--f-display);font-size:1rem;font-weight:800;color:var(--ia-ink); background:linear-gradient(135deg,var(--ia),var(--ia-2)); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ia) 70%,transparent)} .resumen-ia.caido .glifo-ia{background:var(--linea);color:var(--tx-3);box-shadow:none} .glifo-ia.sm{width:28px;height:28px;border-radius:9px;font-size:.8rem} .pastillas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative;z-index:1} .pastilla{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--pill);font-size:.76rem; font-weight:600;background:var(--glass);color:var(--ia-2);transition:var(--t-base) var(--e); border:1px solid color-mix(in srgb,var(--ia) 34%,transparent)} .pastilla:hover{background:linear-gradient(135deg,var(--ia),var(--ia-2));color:var(--ia-ink);transform:translateY(-2px)} .accion-ia{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-size:.78rem;font-weight:600; padding:11px 14px;border:1px solid var(--linea);border-radius:var(--r-sm);color:var(--tx-2);background:var(--glass); transition:var(--t-base) var(--e)} .accion-ia:hover{border-color:var(--ia);color:var(--ia-2);transform:translateX(4px); background:color-mix(in srgb,var(--ia) 10%,transparent)} .accion-ia em{font-style:normal;margin-left:auto;font-size:.66rem;color:var(--tx-3);font-weight:500} /* certeza: vocabulario cerrado, nunca porcentaje suelto */ .certeza{font-family:var(--f-dato);font-size:.68rem;padding:3px 9px;border-radius:var(--pill)} .certeza.exacta{background:color-mix(in srgb,var(--ok) 17%,transparent);color:var(--ok)} .certeza.parecido{background:color-mix(in srgb,var(--warn) 19%,transparent);color:var(--warn)} .certeza.tu-decides{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)} /* ---------- 11 · riesgo, vacíos, esqueleto ---------- */ .riesgo{border-color:color-mix(in srgb,var(--bad) 55%,transparent)} .riesgo .tarjeta-h h3{color:var(--bad)} .bloqueante{border-left:3px solid var(--bad);padding:9px 0 9px 13px;margin-bottom:10px;font-size:.82rem; color:var(--tx-2);line-height:1.5;cursor:pointer;transition:var(--t-base) var(--e)} .bloqueante:hover{color:var(--tx);border-left-width:5px;padding-left:11px} .vacio{display:flex;flex-direction:column;align-items:center;gap:11px;padding:26px 18px;text-align:center} .vacio .icono{width:52px;height:52px;border-radius:50%;display:grid;place-items:center; color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent); border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)} .vacio.atencion .icono{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent); border-color:color-mix(in srgb,var(--warn) 28%,transparent)} .vacio h3{font-size:.94rem} .vacio p{font-size:.82rem;color:var(--tx-2);max-width:44ch} .nota{font-size:.72rem;color:var(--tx-3)} .silencio{border:1px dashed var(--linea-2);border-radius:var(--r);padding:18px;color:var(--tx-3);font-size:.8rem} .esqueleto{border-radius:var(--r);background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%); background-size:200% 100%;animation:brillo 1.2s infinite} @keyframes brillo{to{background-position:-200% 0}} /* ---------- 12 · copiloto, paleta, modal, avisos ---------- */ .velo{position:fixed;inset:0;background:rgba(5,8,20,.6);backdrop-filter:blur(5px);opacity:0;pointer-events:none; transition:var(--t-lento) var(--e);z-index:40} .velo.abierto{opacity:1;pointer-events:auto} .cajon{position:fixed;top:0;right:0;bottom:0;width:min(452px,95vw);z-index:50;display:flex;flex-direction:column; background:linear-gradient(180deg,var(--superficie),var(--bg-2));border-left:1px solid var(--linea); box-shadow:var(--sh-lg);transform:translateX(103%);transition:transform var(--t-lento) var(--e)} .cajon.abierto{transform:none} .cajon-h{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--linea); background:linear-gradient(135deg,color-mix(in srgb,var(--ia) 12%,transparent),transparent)} .cajon-h .enlinea{font-size:.66rem;color:var(--ia-2);display:flex;align-items:center;gap:6px;font-weight:600} .cajon-h .enlinea i{width:7px;height:7px;border-radius:50%;background:var(--ia);animation:destello 2.2s infinite} @keyframes destello{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ia) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} .cajon-cuerpo{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px} .msj{max-width:93%;font-size:.86rem;line-height:1.65;animation:entrar .4s var(--e)} @keyframes entrar{from{opacity:0;transform:translateY(12px)}} .msj.propio{align-self:flex-end;padding:12px 16px;border-radius:18px 18px 5px 18px;color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2))} .msj.asistente{align-self:flex-start;display:flex;gap:11px} .msj.asistente .globo{padding:13px 16px;border-radius:18px 18px 18px 5px; background:color-mix(in srgb,var(--ia) 11%,transparent); border:1px solid color-mix(in srgb,var(--ia) 30%,transparent)} .fuentes{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .fuentes span{font-size:.66rem;font-weight:600;padding:4px 10px;border-radius:var(--pill);cursor:pointer; border:1px solid var(--glass-b);background:var(--glass);color:var(--tx-3);transition:var(--t-rapido) var(--e)} .fuentes span:hover{border-color:var(--ia);color:var(--ia-2)} .escribiendo{display:flex;gap:5px;padding:14px 16px} .escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--ia);animation:puntear 1.3s infinite} .escribiendo i:nth-child(2){animation-delay:.16s} .escribiendo i:nth-child(3){animation-delay:.32s} @keyframes puntear{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .cajon-pie{border-top:1px solid var(--linea);padding:14px 18px 16px} .sugerencias{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} .sugerencias button{font-size:.7rem;font-weight:600;padding:6px 12px;border:1px solid var(--linea); border-radius:var(--pill);color:var(--tx-2);transition:var(--t-base) var(--e)} .sugerencias button:hover{border-color:var(--ia);color:var(--ia-2);transform:translateY(-2px)} .campo{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--linea); border-radius:16px;padding:10px 14px;transition:var(--t-base) var(--e)} .campo:focus-within{border-color:var(--ia);box-shadow:0 0 0 4px color-mix(in srgb,var(--ia) 14%,transparent)} .campo input{flex:1;background:none;border:none;outline:none;font-size:.86rem} .campo input::placeholder{color:var(--tx-3)} .enviar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--ia-ink); background:linear-gradient(135deg,var(--ia),var(--ia-2));transition:var(--t-base) var(--e)} .enviar:hover{transform:scale(1.08) rotate(-6deg)} .paleta{position:fixed;top:13vh;left:50%;transform:translateX(-50%) scale(.96);width:min(600px,93vw);z-index:60; background:linear-gradient(180deg,var(--superficie),var(--card));border:1px solid var(--linea-2);border-radius:22px; box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:var(--t-base) var(--e);overflow:hidden} .paleta.abierta{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)} .paleta-campo{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--linea)} .paleta-campo input{flex:1;background:none;border:none;outline:none;font-size:1rem} .paleta-lista{max-height:330px;overflow-y:auto;padding:9px} .paleta-lista .grupo{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--tx-3);padding:10px 12px 5px} .paleta-lista button{width:100%;display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:var(--r-sm); font-size:.86rem;color:var(--tx-2);transition:var(--t-rapido) var(--e);text-align:left} .paleta-lista button:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--tx);transform:translateX(3px)} .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-47%) scale(.96);width:min(470px,94vw);z-index:60; background:linear-gradient(180deg,var(--superficie),var(--card));border:1px solid var(--linea-2);border-radius:22px; box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:var(--t-lento) var(--e);overflow:hidden} .modal.abierto{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .modal-h{padding:20px 22px 14px} .modal-b{padding:0 22px 18px;display:flex;flex-direction:column;gap:14px} .modal-p{padding:16px 22px;border-top:1px solid var(--linea);display:flex;gap:10px} .opciones{display:flex;flex-wrap:wrap;gap:8px} .opciones button{font-size:.76rem;font-weight:600;padding:8px 14px;border:1px solid var(--linea); border-radius:var(--pill);color:var(--tx-2);transition:var(--t-base) var(--e)} .opciones button.activa{border-color:var(--brand);color:var(--brand-2);background:color-mix(in srgb,var(--brand) 14%,transparent)} .avisos{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:70;display:flex; flex-direction:column;gap:9px;align-items:center} .aviso{display:flex;align-items:center;gap:12px;padding:13px 20px;border-radius:var(--pill);font-size:.82rem; font-weight:600;background:linear-gradient(135deg,var(--superficie),var(--card));box-shadow:var(--sh-lg); border:1px solid color-mix(in srgb,var(--ia) 40%,transparent);animation:subir .38s var(--e)} @keyframes subir{from{opacity:0;transform:translateY(18px) scale(.94)}} .aviso.saliendo{animation:bajar .32s forwards} @keyframes bajar{to{opacity:0;transform:translateY(12px)}} .aviso .marca-ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--ia-ink); background:linear-gradient(135deg,var(--ia),var(--ia-2))} /* ---------- 13 · utilidades ---------- */ .reparto{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start} .columna{display:flex;flex-direction:column;gap:16px} .rejilla-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px} .linea-tiempo{position:relative;padding-left:6px} .linea-tiempo::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px; background:linear-gradient(var(--linea),transparent)} .evento{position:relative;padding:0 0 20px 46px} .evento .nodo{position:absolute;left:8px;top:2px;width:26px;height:26px;border-radius:50%;background:var(--superficie); border:2px solid var(--linea);display:grid;place-items:center;z-index:1} .evento.automatico .nodo{border-color:transparent;color:var(--ia-ink); background:linear-gradient(135deg,var(--ia),var(--ia-2))} .ico{width:20px;height:20px;flex:none} .ico-lg{width:26px;height:26px} .aparece{opacity:0;transform:translateY(20px);animation:aparecer .65s var(--e) forwards} @keyframes aparecer{to{opacity:1;transform:none}} .aparece:nth-child(1){animation-delay:.03s}.aparece:nth-child(2){animation-delay:.09s} .aparece:nth-child(3){animation-delay:.15s}.aparece:nth-child(4){animation-delay:.21s} .aparece:nth-child(5){animation-delay:.27s}.aparece:nth-child(6){animation-delay:.33s} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--brand-2)} .eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--brand)} /* ---------- 14 · adaptable ---------- */ @media (max-width:1100px){ .app{grid-template-columns:1fr} .lateral{flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px} .marca{border:none;padding:0 10px 0 0;margin:0} .nav-i{width:auto} .nav-espacio{display:none} .reparto{grid-template-columns:1fr} } @media (max-width:720px){ body{padding:10px} .comando{min-width:0} .comando span:not(.ico),.comando kbd{display:none} main{padding:16px} .hitos .hito:nth-child(2),.hitos .hito:nth-child(3){display:none} .metrica.principal .valor{font-size:2.2rem} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;transition-duration:.001s!important} .aparece{opacity:1;transform:none} svg.traza .pulso{stroke-dashoffset:0} } @media print{ body::before,body::after,.lateral,.comando,.btn-cab,.cajon,.velo,.avisos{display:none!important} .app{border:none;box-shadow:none;grid-template-columns:1fr} .tarjeta,.metrica{box-shadow:none;border:1px solid #ccc} }