/* ════════════════════════════════════════════════════════════ TerminalGate — tema-futuro.css Tema "futuro": la misma app, clara, moderna y precisa. Una capa sobre los estilos de siempre (tailwind.css + style.css): no cambia ninguna pantalla, solo su piel. Blanco limpio, líneas finas, sombras con profundidad real, la marca (azul y naranja) como luz, letra Geist con títulos en Unbounded, y movimiento corto y con intención. Todo cuelga de html[data-tema="futuro"]. Con data-tema="clasico" la app se ve exactamente como antes. Lo pone el script del de index.html a partir de localStorage.tg_tema. ════════════════════════════════════════════════════════════ */ @font-face{font-family:"TG Display";src:url(fonts/unbounded-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"TG Display";src:url(fonts/unbounded-latin-600-normal.woff2) format("woff2");font-weight:600 800;font-display:swap} @font-face{font-family:"TG Sans";src:url(fonts/geist-sans-latin-400-normal.woff2) format("woff2");font-weight:300 400;font-display:swap} @font-face{font-family:"TG Sans";src:url(fonts/geist-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"TG Sans";src:url(fonts/geist-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap} @font-face{font-family:"TG Sans";src:url(fonts/geist-sans-latin-700-normal.woff2) format("woff2");font-weight:700 900;font-display:swap} @font-face{font-family:"TG Mono";src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"TG Mono";src:url(fonts/geist-mono-latin-500-normal.woff2) format("woff2");font-weight:500 700;font-display:swap} html[data-tema="futuro"]{ --tf-bg:#F4F6F9; --tf-panel:#FFFFFF; --tf-hundido:#F8FAFC; --tf-line:rgb(15 23 42 / .07); --tf-line-2:rgb(15 23 42 / .11); --tf-line-3:rgb(15 23 42 / .18); --tf-ink:#0B1220; --tf-ink-2:#334155; --tf-muted:#64748B; --tf-brand:#1E9BD0; --tf-accent:#FF6D2A; --tf-ease:cubic-bezier(.16,1,.3,1); --tf-sombra:0 1px 2px rgb(15 23 42 / .04), 0 10px 28px -14px rgb(15 23 42 / .12); --tf-sombra-alta:0 2px 4px rgb(15 23 42 / .04), 0 24px 56px -22px rgb(15 23 42 / .22); } /* ── Base ──────────────────────────────────────────────────── */ html[data-tema="futuro"] body{ background: radial-gradient(1100px 560px at 100% -8%, rgb(66 176 213 / .11), transparent 62%), radial-gradient(900px 520px at -6% 108%, rgb(255 109 42 / .06), transparent 60%), var(--tf-bg); background-attachment:fixed; color:var(--tf-ink); font-family:"TG Sans",Inter,system-ui,sans-serif; letter-spacing:-.006em; } html[data-tema="futuro"] ::selection{background:rgb(255 109 42 / .22);color:var(--tf-ink)} html[data-tema="futuro"] ::-webkit-scrollbar-thumb{background:rgb(15 23 42 / .14);border-radius:9px} html[data-tema="futuro"] ::-webkit-scrollbar-thumb:hover{background:rgb(15 23 42 / .26)} html[data-tema="futuro"] :focus-visible{outline:2px solid var(--tf-brand);outline-offset:2px} html[data-tema="futuro"] .font-mono,html[data-tema="futuro"] code,html[data-tema="futuro"] kbd{font-family:"TG Mono",ui-monospace,monospace;letter-spacing:-.01em} html[data-tema="futuro"] td{font-variant-numeric:tabular-nums} /* Títulos: la letra ancha del tema, solo en los títulos de verdad */ html[data-tema="futuro"] #pageTitle, html[data-tema="futuro"] #mainContent h1, html[data-tema="futuro"] #mainContent h2, html[data-tema="futuro"] #modalContent h2, html[data-tema="futuro"] #modalContent h3.text-lg, html[data-tema="futuro"] #modalContent h3.text-xl, html[data-tema="futuro"] #loginScreen h1, html[data-tema="futuro"] #sidebar h2{ font-family:"TG Display","TG Sans",sans-serif;font-weight:500;letter-spacing:-.025em; } html[data-tema="futuro"] #mainContent h3{font-weight:600;letter-spacing:-.012em} html[data-tema="futuro"] #pageTitle{font-size:1.06rem;color:var(--tf-ink)} /* Iconos: trazo fino y parejo */ html[data-tema="futuro"] svg.lucide{stroke-width:1.6} /* Bordes: líneas finas en lugar de grises marcados */ html[data-tema="futuro"] :is(.border-slate-100,.border-slate-200,.border-slate-300){border-color:var(--tf-line-2)} html[data-tema="futuro"] :is(.divide-slate-100,.divide-slate-200)>:not([hidden])~:not([hidden]){border-color:var(--tf-line)} /* ── Barra lateral: azul marino a azul petróleo, la marca de la app ── El mismo color de la pantalla de entrada (slate-900 → brand-900), con luz de marca arriba, una línea de luz en el borde y el ítem activo encendido en naranja. */ html[data-tema="futuro"] #sidebar{ background: radial-gradient(420px 260px at 110% -4%, rgb(66 176 213 / .22), transparent 70%), radial-gradient(360px 300px at -20% 106%, rgb(255 109 42 / .10), transparent 70%), linear-gradient(172deg,#0F172A 0%,#0C2536 48%,#0A3647 78%,#0D2233 100%); border-right:0; box-shadow:inset -1px 0 0 rgb(255 255 255 / .06), 6px 0 30px -18px rgb(10 30 50 / .45); } /* al pie de la barra, en miniatura: una tira baja con planta, fábrica, garita con su pluma, contenedores y grúa (img/tema-futuro-barra.svg), apoyada justo encima del bloque del usuario. Es baja a propósito para no meterse detrás de las opciones del menú. */ html[data-tema="futuro"] #sidebar::before{ content:"";position:absolute;inset:auto 0 112px 0;height:88px;pointer-events:none; background:url("img/tema-futuro-barra.svg") center bottom / 100% auto no-repeat; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%); opacity:.85; } @media (min-width:1024px){html[data-tema="futuro"] #sidebar{position:relative}} html[data-tema="futuro"] #sidebar > :not(.absolute):not(.fixed){position:relative;z-index:1} html[data-tema="futuro"] #sidebar :is(.border-slate-800,.border-slate-700){border-color:rgb(255 255 255 / .07)} html[data-tema="futuro"] #sidebar .shadow-md{box-shadow:0 0 0 1px rgb(255 255 255 / .12), 0 8px 20px -10px rgb(0 0 0 / .5)} html[data-tema="futuro"] .nav-item{color:#A4B3C4;border-radius:10px;position:relative; transition:background-color .25s var(--tf-ease),color .25s var(--tf-ease),transform .25s var(--tf-ease)} html[data-tema="futuro"] .nav-item:hover{background:rgb(255 255 255 / .06);color:#FFFFFF} html[data-tema="futuro"] .nav-item:hover svg{transform:translateX(1px)} html[data-tema="futuro"] .nav-item svg{transition:transform .25s var(--tf-ease),color .25s} html[data-tema="futuro"] .nav-item.active{ background:linear-gradient(90deg,rgb(255 109 42 / .22),rgb(255 109 42 / .06) 65%,rgb(255 255 255 / .02)); color:#FFFFFF;border-left:0;padding-left:.875rem;font-weight:600; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07); } html[data-tema="futuro"] .nav-item.active::before{ content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0; background:var(--tf-accent);animation:tfBarra .45s var(--tf-ease) both; } html[data-tema="futuro"] .nav-item.active svg{color:#FF8A4F;stroke-width:2} @keyframes tfBarra{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* ── Cabecera translúcida ──────────────────────────────────── */ html[data-tema="futuro"] header.sticky{ background:rgb(255 255 255 / .74); -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%); border-bottom-color:var(--tf-line-2); } /* ── Paneles: blanco, línea fina y sombra con profundidad ──── */ html[data-tema="futuro"] #mainContent :is(.bg-white.rounded-xl,.bg-white.rounded-2xl){border-color:var(--tf-line-2);box-shadow:var(--tf-sombra)} html[data-tema="futuro"] .shadow-sm,html[data-tema="futuro"] .shadow{--tw-shadow:0 1px 2px rgb(15 23 42 / .05)} html[data-tema="futuro"] .shadow-md{--tw-shadow:0 1px 2px rgb(15 23 42 / .04), 0 10px 24px -14px rgb(15 23 42 / .16)} html[data-tema="futuro"] :is(.shadow-lg,.shadow-xl,.shadow-2xl){--tw-shadow:0 2px 4px rgb(15 23 42 / .04), 0 28px 60px -26px rgb(15 23 42 / .28)} html[data-tema="futuro"] .stat-card{transition:transform .4s var(--tf-ease),box-shadow .4s var(--tf-ease),border-color .4s} html[data-tema="futuro"] .stat-card:hover{transform:translateY(-3px);box-shadow:var(--tf-sombra-alta);border-color:var(--tf-line-3)} html[data-tema="futuro"] :is(.rounded-xl,.rounded-2xl).cursor-pointer{transition:border-color .3s var(--tf-ease),box-shadow .3s var(--tf-ease),transform .3s var(--tf-ease)} html[data-tema="futuro"] :is(.rounded-xl,.rounded-2xl).cursor-pointer:hover{border-color:var(--tf-line-3);box-shadow:var(--tf-sombra-alta)} html[data-tema="futuro"] :is(.table-row,tbody tr){transition:background-color .2s ease} html[data-tema="futuro"] thead :is(th){letter-spacing:.04em} /* Banners de cada página (degradado de color con texto blanco): pasan a ser un panel blanco con la luz de su color entrando por las esquinas y una línea de color arriba. El texto pasa a tinta. */ html[data-tema="futuro"] :is(div,section,header)[class*="bg-gradient-to-"][class*="text-white"]{ background-color:var(--tf-panel); background-image: radial-gradient(520px 220px at 0% 0%, color-mix(in srgb, var(--tw-gradient-from, #FF6D2A) 16%, transparent), transparent 72%), radial-gradient(560px 240px at 100% 100%, color-mix(in srgb, var(--tw-gradient-to, #42B0D5) 13%, transparent), transparent 72%); color:var(--tf-ink); border:1px solid var(--tf-line-2); box-shadow:var(--tf-sombra); position:relative;overflow:hidden; } html[data-tema="futuro"] :is(div,section,header)[class*="bg-gradient-to-"][class*="text-white"]::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none; background:linear-gradient(90deg, var(--tw-gradient-from, #FF6D2A), var(--tw-gradient-to, #42B0D5)); } /* un destello que recorre la línea de color una vez, al entrar */ html[data-tema="futuro"] :is(div,section,header)[class*="bg-gradient-to-"][class*="text-white"]::after{ content:"";position:absolute;left:0;top:0;height:2px;width:30%;pointer-events:none; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .95),transparent); transform:translateX(-100%);animation:tfBarrido 1.5s var(--tf-ease) .2s both; } @keyframes tfBarrido{to{transform:translateX(420%)}} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] :is(.text-white):not([class*=" bg-"]):not([class^="bg-"]){color:var(--tf-ink)} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] :is(.text-white\/90,.text-white\/80){color:var(--tf-ink-2)} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] :is(.text-white\/70,.text-white\/60,.text-white\/50){color:var(--tf-muted)} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] :is(.bg-white\/10,.bg-white\/15,.bg-white\/20,.bg-white\/25){background-color:rgb(15 23 42 / .045)} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] :is(.border-white\/10,.border-white\/20,.border-white\/30){border-color:var(--tf-line-2)} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] > * svg.lucide{color:var(--tw-gradient-from, var(--tf-accent))} html[data-tema="futuro"] [class*="bg-gradient-to-"][class*="text-white"] .bg-white{box-shadow:0 0 0 1px var(--tf-line-2), 0 2px 6px -2px rgb(15 23 42 / .12)} /* ── Campos ────────────────────────────────────────────────── */ html[data-tema="futuro"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){ border-color:var(--tf-line-3); transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; } html[data-tema="futuro"] :is(input,select,textarea):hover{border-color:rgb(15 23 42 / .28)} html[data-tema="futuro"] :is(input,select,textarea):focus{border-color:var(--tf-brand) !important;box-shadow:0 0 0 4px rgb(30 155 208 / .14) !important;outline:none} html[data-tema="futuro"] input[type=checkbox],html[data-tema="futuro"] input[type=radio]{accent-color:var(--tf-accent)} /* ── Botones: respuesta al tacto y brillo en los sólidos ───── */ html[data-tema="futuro"] :is(button,a.inline-flex){transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease,transform .18s var(--tf-ease),box-shadow .25s ease} html[data-tema="futuro"] button:not(:disabled):active{transform:scale(.97)} html[data-tema="futuro"] button:is(.bg-accent-500,.bg-accent-600,.bg-brand-500,.bg-brand-600,.bg-emerald-600,.bg-emerald-500,.bg-red-600,.bg-red-500,.bg-purple-600,.bg-amber-500,.bg-amber-600){ box-shadow:0 1px 0 rgb(255 255 255 / .28) inset, 0 8px 20px -10px var(--tf-sombra-color, rgb(15 23 42 / .45)); } html[data-tema="futuro"] button.bg-accent-500,html[data-tema="futuro"] button.bg-accent-600{--tf-sombra-color:rgb(255 109 42 / .7)} html[data-tema="futuro"] button:is(.bg-brand-500,.bg-brand-600){--tf-sombra-color:rgb(30 155 208 / .7)} html[data-tema="futuro"] button:is(.bg-emerald-600,.bg-emerald-500){--tf-sombra-color:rgb(5 150 105 / .6)} html[data-tema="futuro"] button:not(:disabled):is(.bg-accent-500,.bg-brand-500,.bg-brand-600,.bg-emerald-600):hover{transform:translateY(-1px)} /* ── Modal ───────────────────────────────────────────────── */ html[data-tema="futuro"] #modalOverlay{background:rgb(15 23 42 / .28);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)} html[data-tema="futuro"] #modalContent{box-shadow:0 0 0 1px var(--tf-line-2), 0 40px 90px -30px rgb(15 23 42 / .45)} @keyframes tfModal{from{opacity:0;transform:translateY(14px) scale(.975);filter:blur(8px)}to{opacity:1;transform:none;filter:none}} html[data-tema="futuro"] .modal-enter{animation:tfModal .5s var(--tf-ease) both} /* ── Movimiento: una entrada de página, suave y rápida ─────── */ @keyframes tfEntrada{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} html[data-tema="futuro"] .fade-in{animation:tfEntrada .6s var(--tf-ease) both} @keyframes tfToast{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}} html[data-tema="futuro"] .toast-enter{animation:tfToast .45s var(--tf-ease) both} @keyframes tfLatido{0%{box-shadow:0 0 0 0 rgb(255 109 42 / .45)}70%,100%{box-shadow:0 0 0 7px rgb(255 109 42 / 0)}} html[data-tema="futuro"] #notifBadge{animation:tfLatido 2.4s ease-out infinite} @media (prefers-reduced-motion: reduce){ html[data-tema="futuro"] *,html[data-tema="futuro"] *::before,html[data-tema="futuro"] *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* ── Pantalla de entrada: la oscura de siempre (azul marino y petróleo) con el horizonte de la industria en líneas de luz: planta y fábrica, garita con su cámara y su radar, cerca perimetral, patio de contenedores, grúas y buque (img/tema-futuro-industria.svg). ── */ html[data-tema="futuro"] #loginScreen{ background: radial-gradient(520px 400px at 50% 44%, rgb(10 26 40 / .80), transparent 72%), radial-gradient(900px 520px at 50% -6%, rgb(66 176 213 / .20), transparent 65%), url("img/tema-futuro-industria.svg") center bottom / cover no-repeat, linear-gradient(135deg,#0F172A 0%,#0A3647 50%,#0F172A 100%) !important; } /* Las cajas van casi opacas: con el dibujo de la industria detrás, una caja transparente deja pasar las líneas por encima de lo que se escribe. El formulario de registro no trae caja propia (se pinta suelto dentro de #registerPanel), así que aquí se le da la misma que al login. */ html[data-tema="futuro"] #loginScreen .bg-white\/5.rounded-2xl, html[data-tema="futuro"] #registerPanel{ background:rgb(9 22 35 / .90);border:1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%); box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 40px 80px -40px rgb(0 0 0 / .8); } html[data-tema="futuro"] #registerPanel{border-radius:1rem;padding:1.75rem} /* En el teléfono, el selector de idioma cae sobre el borde de la caja. */ @media (max-width:480px){html[data-tema="futuro"] #registerPanel{padding:1.25rem;margin-top:1.5rem}} html[data-tema="futuro"] #loginScreen input.bg-white\/5, html[data-tema="futuro"] #registerPanel button.bg-white\/5{ background:rgb(3 12 22 / .85);border-color:rgb(255 255 255 / .16); } html[data-tema="futuro"] #loginScreen input.bg-white\/5:focus{background:rgb(3 12 22 / .95);border-color:rgb(66 176 213 / .55)} html[data-tema="futuro"] #registerPanel button.bg-white\/5:hover{background:rgb(20 38 56 / .95)} html[data-tema="futuro"] #registerPanel label{color:#B7C4D3} html[data-tema="futuro"] #loginScreen p.text-slate-400{letter-spacing:.01em}