Four-AI-4TRACK-SAS

39 views · 0 likes · Jun 30, 2026

This sketch is a web-based GPS tracking and AI chat interface called Four-IA 4Track SAS. It combines a conversational AI chat panel with a sidebar for history management, social media links, and theme switching, styled with modern UI elements and micro-interactions.

🔀 Remix This 📖 View Docs ⛶ Full Screen ← Back to Gallery

💬 Comments

Loading comments...

📋 Embed Code

Copy this code to embed this sketch on your website:

<iframe src="https://p5js.ai/embed/47f2a3ac-689a-4547-b0d0-a1e3a187c810" width="400" height="400" frameborder="0" allow="autoplay" title="Four-AI-4TRACK-SAS"></iframe>

Adjust width and height as needed. Preview embed →

💬 AI Chat History 3 messages

👤 You

mira el nombre de la imagenes dice donde van ayudame porque no sirve

🤖 AI

¡Claro que sí! Entiendo perfectamente. El problema es que el objeto `IMG` en tu script `mensajes.js` tiene todas las rutas de las imágenes vacías, y el avatar del bot también está vacío. Necesitamos rellenarlas con los nombres de los archivos que has subido.

He revisado los archivos que subiste y los nombres que usas en el objeto `IMG`. Los corregiré para que apunten a los archivos correctos. También actualizaré la ruta del avatar del bot.

Aquí tienes el `index.html` actualizado con las rutas de las imágenes corregidas:

```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Four-IA - 4Track GPS</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js" crossorigin="anonymous"></script>
<style>
body[data-theme="dark"] {
background: #000 !important;
}
body[data-theme="dark"] #sidebar,
body[data-theme="dark"] #collapsed-sidebar-rail {
background: #050505 !important;
}
body[data-theme="dark"] #main { background: #000 !important; }
body[data-theme="dark"] .history-panel { background: #080808 !important; }
body[data-theme="light"] .msg.user .bubble {
background: #2563eb !important;
color: #fff !important;
}
body[data-theme="light"] .msg.bot .bubble {
background: #f1f5f9 !important;
color: #1e293b !important;
}
.logout-btn-red {
background: rgba(220,38,38,0.18) !important;
color: #ef4444 !important;
border: 1px solid rgba(220,38,38,0.3) !important;
}
.logout-btn-red:hover {
background: rgba(220,38,38,0.35) !important;
color: #fca5a5 !important;
}
.social-link, .collapsed-rail-link {
position: relative;
overflow: visible !important;
display: flex;
align-items: center;
justify-content: center;
}
.social-youtube svg { color: #ff0000; }
.social-instagram svg { color: #e1306c; }
.social-facebook svg { color: #1877f2; }
.social-particles {
position: absolute;
inset: -10px;
pointer-events: none;
overflow: visible;
}
@keyframes yt-star-fly {
0% { opacity:0; transform: translate(0,0) scale(0) rotate(0deg); }
30% { opacity:1; }
100% { opacity:0; transform: translate(var(--tx),var(--ty)) scale(1.3) rotate(var(--tr)); }
}
.social-youtube:hover .yt-particles::before,
.social-youtube:hover .yt-particles::after {
content: '★';
position: absolute;
font-size: 10px;
color: #ffd700;
top: 50%; left: 50%;
animation: yt-star-fly 0.7s ease-out forwards;
}
.social-youtube:hover .yt-particles::before { --tx: -18px; --ty: -14px; --tr: -30deg; animation-delay: 0s; }
.social-youtube:hover .yt-particles::after { --tx: 16px; --ty: -16px; --tr: 40deg; animation-delay: 0.1s; }
.social-youtube:hover { animation: social-pop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.social-instagram:hover { animation: social-pop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.social-facebook:hover { animation: social-pop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes social-pop { 0% { transform:scale(1); } 50% { transform:scale(1.25); } 100% { transform:scale(1); } }
.particle-item {
position: absolute;
pointer-events: none;
font-size: 11px;
animation: particle-float 0.8s ease-out forwards;
z-index: 999;
}
@keyframes particle-float {
0% { opacity:1; transform:translate(0,0) scale(1); }
100% { opacity:0; transform:translate(var(--px),var(--py)) scale(0.5); }
}
.sidebar-history-launch:hover .sidebar-history-icon svg {
animation: book-open 0.5s ease forwards;
}
@keyframes book-open {
0% { transform: rotate(0deg) scale(1); }
30% { transform: rotate(-8deg) scale(1.1); }
60% { transform: rotate(6deg) scale(1.05); }
100% { transform: rotate(0deg) scale(1); }
}
.historial-rename {
background: none;
border: none;
cursor: pointer;
color: rgba(148,163,184,0.6);
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 4px;
margin-right: 2px;
transition: color 0.2s, background 0.2s;
flex-shrink: 0;
}
.historial-rename:hover { color: #60a5fa; background: rgba(96,165,250,0.1); }
.msg.user { position: relative; }
.msg-edit-wrap {
position: absolute;
top: 4px;
right: calc(100% + 6px);
opacity: 0;
transition: opacity 0.2s;
display: flex;
align-items: center;
}
.msg.user:hover .msg-edit-wrap { opacity: 1; }
.msg-edit-btn {
background: rgba(37,99,235,0.15);
border: 1px solid rgba(37,99,235,0.25);
border-radius: 8px;
color: #60a5fa;
cursor: pointer;
padding: 5px 7px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.15s;
white-space: nowrap;
}
.msg-edit-btn:hover { background: rgba(37,99,235,0.3); transform: scale(1.1); }
body[data-theme="light"] .msg-edit-btn { color: #2563eb; background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2); }
.msg-copy-phone {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 6px;
background: rgba(37,99,235,0.12);
border: 1px solid rgba(37,99,235,0.2);
border-radius: 8px;
color: #60a5fa;
cursor: pointer;
font-size: 12px;
font-family: 'Poppins', sans-serif;
padding: 5px 10px;
transition: background 0.2s, transform 0.15s;
}
.msg-copy-phone:hover { background: rgba(37,99,235,0.25); transform: scale(1.02); }
body[data-theme="light"] .msg-copy-phone { color: #1d4ed8; background: rgba(37,99,235,0.08); }

/* ═══════════════════════════════════════════════
MENSAJES — BOTONES DE ACCIÓN (copiar, regenerar)
═══════════════════════════════════════════════ */
.msg-action-row {
display: flex;
gap: 8px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.msg-action-btn {
background: rgba(96,165,250,0.1);
border: 1px solid rgba(96,165,250,0.2);
border-radius: 6px;
color: #60a5fa;
cursor: pointer;
padding: 6px 10px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.15s;
font-size: 12px;
}
.msg-action-btn svg { width: 14px; height: 14px; }
.msg-action-btn:hover { background: rgba(96,165,250,0.2); transform: scale(1.05); }
body[data-theme="light"] .msg-action-btn { color: #2563eb; background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2); }
body[data-theme="light"] .msg-action-btn:hover { background: rgba(37,99,235,0.15); }

/* ═══════════════════════════════════════════════
MODAL OVERLAY */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════
BASE DE DATOS — ICON BUTTONS
═══════════════════════════════════════════════ */
.btn-db-icon {
background: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
padding: 6px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-db-edit { color: #60a5fa; }
.btn-db-edit:hover { background: rgba(96,165,250,0.15); border-color: rgba(96,165,250,0.3); transform: scale(1.1); }
.btn-db-danger-icon { color: #f87171; }
.btn-db-danger-icon:hover { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.3); transform: scale(1.1); }

/* Nav buttons (prev/next en toolbar) */
.btn-db-icon-nav {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
cursor: pointer;
padding: 6px 9px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.7);
transition: background 0.2s, color 0.2s;
}
.btn-db-icon-nav:hover:not(:disabled) { background: rgba(37,99,235,0.2); color: #60a5fa; }
.btn-db-icon-nav:disabled { opacity: 0.3; cursor: not-allowed; }
body[data-theme="light"] .btn-db-icon-nav { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #475569; }

/* ─ Header de columna con iconos ─ */
.db-list-header span { display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════
PLANES EN SIDEBAR + MINI BARRA
═══════════════════════════════════════════════════════════════ */
.sidebar-plan-launch {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 0 0 18px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(96,165,250,0.2);
background: linear-gradient(180deg, rgba(8,16,34,0.92) 0%, rgba(10,10,14,0.95) 100%);
color: #f8fafc;
text-align: left;
cursor: pointer;
box-shadow: 0 16px 34px rgba(0,0,0,0.26);
transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.sidebar-plan-launch:hover {
transform: translateY(-2px);
border-color: rgba(96,165,250,0.46);
background: linear-gradient(180deg, rgba(12,28,64,0.96) 0%, rgba(10,10,14,0.98) 100%);
box-shadow: 0 20px 42px rgba(2,6,23,0.4);
}
.sidebar-plan-launch strong { display:block; font-family:'Poppins',sans-serif; font-size:14px; font-weight:700; }
.sidebar-plan-launch small { display:block; margin-top:3px; color:rgba(226,232,240,.72); font-size:11px; line-height:1.4; }
.sidebar-plan-icon {
width: 44px;
height: 44px;
border-radius: 14px;
flex-shrink: 0;
display:inline-flex;
align-items:center;
justify-content:center;
background: radial-gradient(circle at 30% 30%, rgba(96,165,250,0.24), rgba(29,78,216,0.18));
border: 1px solid rgba(96,165,250,0.28);
color:#93c5fd;
}
.sidebar-plan-icon svg { width:22px; height:22px; }
.sidebar-plan-launch:hover .sidebar-plan-icon svg { animation: shopBounce .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes shopBounce { 0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-3px) rotate(-4deg)} 70%{transform:translateY(1px) rotate(3deg)} }

.collapsed-rail-plans {
width: 32px;
height: 32px;
border-radius: 12px;
display:inline-flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(96,165,250,0.16);
background: rgba(255,255,255,0.04);
color:#dbeafe;
cursor:pointer;
transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.collapsed-rail-plans svg { width:16px; height:16px; }
.collapsed-rail-plans:hover {
transform: translateY(-1px);
background: rgba(37,99,235,0.18);
border-color: rgba(96,165,250,0.34);
box-shadow: 0 10px 18px rgba(37,99,235,0.18);
}

.plans-panel-overlay {
position: fixed;
inset: 0;
z-index: 1550;
display:none;
align-items:center;
justify-content:center;
padding: 28px;
background: rgba(0,0,0,.72);
backdrop-filter: blur(10px);
opacity:0;
pointer-events:none;
transition: opacity .22s ease;
}
.plans-panel-overlay.show { opacity:1; pointer-events:auto; }
.plans-panel {
width: min(1180px, 100%);
max-height: min(88vh, 920px);
overflow:auto;
border-radius: 28px;
border: 1px solid rgba(96,165,250,.22);
background: linear-gradient(180deg, rgba(7,7,8,.98), rgba(0,0,0,.98));
box-shadow: 0 36px 90px rgba(0,0,0,.55);
padding: 26px;
transform: translateY(18px) scale(.98);
transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.plans-panel-overlay.show .plans-panel { transform: translateY(0) scale(1); }
.plans-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.plans-panel-kicker { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:rgba(147,197,253,.82); font-weight:800; margin-bottom:8px; }
.plans-panel-header h2 { font-family:'Poppins',sans-serif; font-size:30px; line-height:1.05; color:#f8fafc; margin:0; }
.plans-panel-header p { color:rgba(226,232,240,.68); margin-top:8px; font-size:13px; }
.plans-panel-close {
width:42px; height:42px; border-radius:14px; border:1px solid rgba(96,165,250,.24);
background:rgba(12,20,36,.84); color:#dbeafe; cursor:pointer; font-size:24px; line-height:1;
display:inline-flex; align-items:center; justify-content:center;
transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s ease, color .18s ease;
}
.plans-panel-close:hover { transform:rotate(90deg); background:rgba(127,29,29,.7); color:#fecaca; }
.plans-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.pricing-card {
border-radius:24px; border:1px solid rgba(148,163,184,.18); background:rgba(12,12,14,.94);
padding:22px; color:#f8fafc; min-height: 440px;
animation: planCardEnter .42s cubic-bezier(.22,1,.36,1) both;
transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.pricing-card:nth-child(2) { animation-delay:.06s; }
.pricing-card:nth-child(3) { animation-delay:.12s; }
@keyframes planCardEnter { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 24px 50px rgba(0,0,0,.34); }
.plan-basic-card { border-color: rgba(226,232,240,.25); }
.plan-silver-card { border-color: rgba(96,165,250,.36); }
.plan-pro-card { border-color: rgba(245,158,11,.44); background:linear-gradient(180deg, rgba(24,20,10,.96), rgba(9,9,8,.96)); }
.pricing-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:#f8fafc; }
.pricing-icon svg { width:34px; height:34px; }
.pricing-card h3 { font-family:'Poppins',sans-serif; font-size:22px; margin:0 0 8px; }
.pricing-card p { color:rgba(226,232,240,.68); font-size:13px; min-height:38px; }
.price-block { margin-top:18px; }
.price-block span, .annual-block span { display:block; color:rgba(226,232,240,.62); font-size:12px; margin-bottom:4px; }
.price-block strong { display:block; font-size:25px; letter-spacing:-.03em; }
.annual-block { margin:16px 0 14px; padding:14px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.annual-block strong { display:block; font-size:23px; }
.annual-block small { color:rgba(226,232,240,.62); font-size:12px; }
.pricing-card ul { border-top:1px solid rgba(255,255,255,.09); padding-top:14px; margin:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.pricing-card li { color:rgba(226,232,240,.72); font-size:13px; line-height:1.4; padding-left:22px; position:relative; }
.pricing-card li::before { content:'✓'; position:absolute; left:0; color:#dbeafe; }

body[data-theme="light"] .sidebar-plan-launch,
body[data-theme="light"] .collapsed-rail-plans { background:rgba(243,244,246,.96); color:#0f172a; border-color:rgba(203,213,225,.9); }
body[data-theme="light"] .sidebar-plan-launch small { color:rgba(15,23,42,.6); }
body[data-theme="light"] .plans-panel-overlay { background:rgba(15,23,42,.26); }
body[data-theme="light"] .plans-panel { background:linear-gradient(180deg,#ffffff,#f7f7f5); border-color:rgba(15,23,42,.12); box-shadow:0 30px 80px rgba(15,23,42,.18); }
body[data-theme="light"] .plans-panel-header h2,
body[data-theme="light"] .pricing-card { color:#171717; }
body[data-theme="light"] .plans-panel-header p,
body[data-theme="light"] .pricing-card p,
body[data-theme="light"] .pricing-card li,
body[data-theme="light"] .price-block span,
body[data-theme="light"] .annual-block span,
body[data-theme="light"] .annual-block small { color:rgba(23,23,23,.66); }
body[data-theme="light"] .pricing-card { background:#fff; border-color:rgba(23,23,23,.12); box-shadow:0 14px 30px rgba(15,23,42,.08); }
body[data-theme="light"] .annual-block { background:#f2f2ef; border-color:rgba(23,23,23,.08); }
body[data-theme="light"] .pricing-card ul { border-top-color:rgba(23,23,23,.1); }

@media (max-width: 900px) { .plans-grid { grid-template-columns:1fr; } .plans-panel { padding:20px; } }

/* Chat dark mode: true black */
body[data-theme="dark"] #main,
body[data-theme="dark"] #chat,
body[data-theme="dark"] #selection-bar,
body[data-theme="dark"] #header { background:#000 !important; }
body[data-theme="dark"] .msg.bot .bubble { background:#080808 !important; border-color:rgba(255,255,255,.08) !important; }

</style>
<style id="fix-final-header-visto">

/* =========================================================
FIX FINAL HEADER VISTO - pequeno al lado de 4TRACK-SAS
========================================================= */
#header .header-left {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0 !important;
flex-wrap: nowrap !important;
}

#header .header-brand-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex: 0 0 auto !important;
}

#header .header-visto-link {
width: auto !important;
height: 34px !important;
min-width: 0 !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 9px 0 11px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
text-decoration: none !important;
color: #f8fafc !important;
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .02em !important;
background: rgba(15, 23, 42, 0.78) !important;
border: 1px solid rgba(96, 165, 250, 0.26) !important;
box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
flex: 0 0 auto !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
z-index: auto !important;
}

#header .header-visto-link:hover {
transform: translateY(-1px) !important;
background: rgba(37, 99, 235, 0.22) !important;
border-color: rgba(96, 165, 250, 0.46) !important;
box-shadow: 0 12px 24px rgba(37,99,235,.18) !important;
}

#header .header-visto-text,
#header .header-visto-link span {
display: inline-block !important;
color: inherit !important;
font-size: 13px !important;
line-height: 1 !important;
white-space: nowrap !important;
}

#header .header-visto-logo,
#header .header-visto-link img {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
object-fit: contain !important;
display: block !important;
border-radius: 50% !important;
flex: 0 0 20px !important;
position: static !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
filter: drop-shadow(0 0 7px rgba(96,165,250,.26)) !important;
}

body[data-theme="light"] #header .header-visto-link {
color: #0f172a !important;
background: rgba(255,255,255,.92) !important;
border-color: rgba(15,23,42,.12) !important;
box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
}

@media (max-width: 640px) {
#header .header-visto-link {
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 8px !important;
}
#header .header-visto-text,
#header .header-visto-link span {
font-size: 12px !important;
}
#header .header-visto-logo,
#header .header-visto-link img {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
flex-basis: 18px !important;
}
}
/* FIN FIX FINAL HEADER VISTO */
</style>
<style id="four-ia-inline-css">
:root {
--bg-dark: #020202;
--bg-main: #070707;
--bg-sidebar: linear-gradient(180deg, #060606 0%, #0b0b0b 100%);
--black-absolute: #020202;
--black-rich: #070707;
--black-soft: #0d0d0d;
--black-panel: rgba(12,12,12,0.96);
--black-panel-2: rgba(18,18,18,0.94);
--separator-black: rgba(38,38,38,0.92);
--accent-blue: #1d4ed8;
--accent-dark: #020617;
--accent-glow: #60a5fa;
--accent-cyan: #93c5fd;
--text-main: #ffffff;
--text-muted: rgba(255,255,255,0.72);
--border-color: rgba(255,255,255,0.14);
--premium-panel: rgba(15,23,42,0.70);
--premium-panel-strong: rgba(15,23,42,0.88);
--premium-border: rgba(96,165,250,0.28);
--premium-shadow: 0 22px 55px rgba(0,0,0,0.42);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-swift: cubic-bezier(0.22, 1, 0.36, 1);
--ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);
--sidebar-width: 268px;
--sidebar-speed: 180ms;
--main-speed: 180ms;
--dur-fast: 180ms;
--dur-base: 320ms;
--dur-slow: 520ms;
--dur-cinematic: 900ms;
/* ── Variables de tema usadas en historial integrado y otros ── */
--bg-primary: #080808;
--text-primary: #ffffff;
--btn-bg: rgba(20,20,20,0.92);
--btn-border: rgba(255,255,255,0.10);
--btn-color: #ffffff;
--btn-hover-bg: rgba(37,99,235,0.18);
--btn-hover-border: rgba(96,165,250,0.32);
--btn-radius: 14px;
}

/* ══ RESET DE TEMA ══ */
body[data-theme="light"] {
--bg-primary: #f4f4f5;
--text-primary: #111827;
--btn-bg: #f4f4f5;
--btn-border: rgba(0,0,0,0.10);
--btn-color: #111827;
--btn-hover-bg: #e4e4e7;
--btn-hover-border: rgba(0,0,0,0.18);
--separator-black: rgba(203,213,225,0.85);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
height: 100%;
overflow: hidden;
font-family: 'DM Sans', sans-serif;
background: var(--bg-dark);
color: #ffffff;
-webkit-font-smoothing: antialiased;
}

body {
display: block;
background: radial-gradient(circle at 15% 15%, rgba(37,99,235,0.1), transparent 30%),
radial-gradient(circle at 90% 20%, rgba(96,165,250,0.06), transparent 26%),
linear-gradient(180deg, #030303 0%, #080808 55%, #020202 100%);
}

body[data-theme="light"] {
color: #0f172a;
background:
radial-gradient(circle at 12% 18%, rgba(59,130,246,0.08), transparent 28%),
radial-gradient(circle at 88% 14%, rgba(125,211,252,0.1), transparent 24%),
linear-gradient(180deg, #f8f9fa 0%, #f1f5f9 55%, #eef2f7 100%);
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

/* ══ KEYFRAMES ══ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes botEnter { 0% { opacity: 0; transform: translate3d(0,14px,0) scale(0.985); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes userEnter { 0% { opacity: 0; transform: translate3d(10px,0,0) scale(0.985); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes gradientSweep { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes sheenSweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes haloPulse { 0%, 100% { transform: scale(0.92); opacity: .55; } 50% { transform: scale(1.15); opacity: .95; } }
@keyframes sendPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(59,130,246,0.35), 0 0 0 0 rgba(96,165,250,0.45); } 50% { box-shadow: 0 6px 18px rgba(59,130,246,0.5), 0 0 0 6px rgba(96,165,250,0); } }
@keyframes statusBlink { 0%, 100% { box-shadow: 0 0 6px #4ade80, 0 0 0 0 rgba(74,222,128,0.55); } 50% { box-shadow: 0 0 10px #4ade80, 0 0 0 5px rgba(74,222,128,0); } }
@keyframes typingWave { 0%, 60%, 100% { transform: translateY(0) scale(1); opacity: .55; } 30% { transform: translateY(-7px) scale(1.15); opacity: 1; } }
@keyframes progAnim { from { width: 0%; } to { width: 95%; } }
@keyframes ambientDrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-2%,-1%) scale(1.04); } 100% { transform: translate(0,0) scale(1); } }
@keyframes particleFloatA {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.38; filter: hue-rotate(0deg); }
50% { transform: translate3d(-18px, 16px, 0) scale(1.08); opacity: 0.72; filter: hue-rotate(22deg); }
100% { transform: translate3d(14px, -14px, 0) scale(0.96); opacity: 0.42; filter: hue-rotate(0deg); }
}
@keyframes particleFloatB {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.24; filter: hue-rotate(0deg); }
50% { transform: translate3d(22px, -20px, 0) scale(1.12); opacity: 0.55; filter: hue-rotate(-18deg); }
100% { transform: translate3d(-16px, 18px, 0) scale(0.92); opacity: 0.28; filter: hue-rotate(0deg); }
}

/* ══ LOGIN ══ */
#login-overlay {
position: fixed;
inset: 0;
isolation: isolate;
background:
radial-gradient(circle at 78% 42%, rgba(14,165,233,0.18), transparent 32%),
radial-gradient(circle at 18% 18%, rgba(37,99,235,0.16), transparent 28%),
linear-gradient(135deg, #020617 0%, #030712 46%, #000000 100%);
display: flex;
align-items: center;
justify-content: flex-start;
overflow-y: auto;
padding: clamp(22px, 6vw, 84px);
z-index: 1000;
animation: fadeIn var(--dur-slow) var(--ease-smooth);
}
#login-overlay::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(2,6,23,0.95) 0%, rgba(2,6,23,0.78) 43%, rgba(2,6,23,0.30) 65%, rgba(2,6,23,0.72) 100%),
radial-gradient(circle at 80% 50%, rgba(96,165,250,0.20), transparent 42%);
pointer-events: none;
z-index: 0;
}
#login-overlay::after {
content: '';
position: absolute;
top: 50%;
right: clamp(24px, 7vw, 110px);
width: min(46vw, 620px);
height: min(78vh, 760px);
transform: translateY(-50%);
background: radial-gradient(circle at 30% 30%, rgba(96,165,250,0.24), transparent 35%), linear-gradient(135deg, rgba(37,99,235,0.62), rgba(124,58,237,0.28));
border: 1px solid rgba(147,197,253,0.18);
border-radius: 32px;
pointer-events: none;
z-index: 1;
opacity: .98;
filter: drop-shadow(0 32px 70px rgba(0,0,0,0.44));
}
#login-overlay.hidden { opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-smooth); }

.login-card {
width: min(410px, 100%); max-width: 100%;
display: flex; flex-direction: column; gap: 14px;
z-index: 2; animation: slideUp var(--dur-cinematic) var(--ease-out-expo) both;
margin: 0;
align-self: center;
}
.login-card:not(.db-mode) { margin-left: clamp(0px, 2vw, 38px); }
.login-auth-area {
display: flex; flex-direction: column; gap: 10px;
padding: 20px 22px 22px;
border-radius: 28px;
background: linear-gradient(180deg, rgba(8,12,20,0.7) 0%, rgba(6,10,18,0.84) 100%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 30px 70px rgba(0,0,0,0.42);
backdrop-filter: blur(18px);
}
@media (max-width: 920px) {
#login-overlay { justify-content: center; padding: 22px; }
#login-overlay::before {
background:
linear-gradient(180deg, rgba(2,6,23,0.94) 0%, rgba(2,6,23,0.82) 100%),
radial-gradient(circle at 50% 46%, rgba(96,165,250,0.18), transparent 48%);
}
#login-overlay::after {
right: 50%;
width: min(90vw, 620px);
height: min(58vh, 560px);
transform: translate(50%, -50%);
background-position: center;
opacity: .16;
}
.login-card:not(.db-mode) { margin-left: 0; }
}
@media (max-width: 520px) {
#login-overlay::after { display: none; }
.login-card { width: 100%; }
.login-auth-area { padding: 20px; border-radius: 24px; }
}
@media (max-height: 600px) { .login-card { margin-top: 0; } }

.login-card:not(.db-mode) > * {
opacity: 0; transform: translateY(8px);
animation: slideUp var(--dur-slow) var(--ease-out-expo) forwards;
}
.login-card:not(.db-mode) > *:nth-child(1) { animation-delay: 350ms; }
.login-card:not(.db-mode) > *:nth-child(2) { animation-delay: 500ms; }
.login-card:not(.db-mode) > *:nth-child(3) { animation-delay: 620ms; }
.login-card:not(.db-mode) > *:nth-child(4) { animation-delay: 720ms; }

.login-card input {
width: 100%; padding: 13px 16px;
background: rgba(2,6,23,0.74); backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.22); border-radius: 16px;
color: #ffffff; font-family: 'DM Sans', sans-serif; font-size: 15px; outline: none;
box-shadow: 0 14px 30px rgba(0,0,0,0.24);
transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-spring);
}
.login-card input::placeholder { color: rgba(255,255,255,0.55); }
.login-card input:focus {
border-color: var(--accent-glow); background: rgba(7,13,26,0.82);
box-shadow: 0 0 0 3px rgba(59,130,246,0.22), 0 0 22px rgba(96,165,250,0.35);
transform: translateY(-1px);
}

.btn-login-4track {
position: relative; width: 100%; padding: 13px 16px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border: 1px solid rgba(147,197,253,0.28); border-radius: 16px;
color: #ffffff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
cursor: pointer; letter-spacing: .4px;
box-shadow: 0 14px 30px rgba(29,78,216,0.32); overflow: hidden;
transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth), filter var(--dur-base) var(--ease-smooth);
}
.btn-login-4track::after {
content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
transform: translateX(-150%); pointer-events: none;
}
.btn-login-4track:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(37,99,235,0.5); filter: brightness(1.06); }
.btn-login-4track:hover::after { animation: sheenSweep 900ms var(--ease-smooth); }
.btn-login-4track:active { transform: translateY(0) scale(0.99); }

.login-error { min-height: 20px; font-size: 12.5px; color: #fecaca; text-align: center; }
.login-success { color: #86efac; }
.db-feedback { min-height: 20px; font-size: 12.5px; text-align: center; color: #fecaca; }
.db-feedback.success { color: #86efac; }

.remember-option {
display: inline-flex; align-items: center; gap: 12px;
width: fit-content; margin-top: 0; color: #dbe7f5; font-size: 13.5px; cursor: pointer; user-select: none;
}
.remember-option input { position: absolute; opacity: 0; pointer-events: none; }
.remember-box {
width: 20px; height: 20px; border-radius: 7px;
background: rgba(15,23,42,0.84); border: 1px solid rgba(148,163,184,0.4);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.2);
transition: background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-spring);
}
.remember-box::after {
content: ''; width: 10px; height: 6px;
border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
transform: rotate(-45deg) scale(0.75); opacity: 0;
transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-smooth);
}
.remember-option:hover .remember-box { border-color: rgba(147,197,253,0.62); box-shadow: 0 0 0 3px rgba(59,130,246,0.12), 0 12px 24px rgba(0,0,0,0.22); transform: translateY(-1px); }
.remember-option input:checked + .remember-box { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: rgba(147,197,253,0.8); box-shadow: 0 0 0 3px rgba(59,130,246,0.16), 0 14px 26px rgba(29,78,216,0.34); }
.remember-option input:checked + .remember-box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.remember-copy { display: flex; flex-direction: column; gap: 2px; }
.remember-copy strong { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #f8fafc; }
.remember-copy span { color: rgba(226,232,240,0.72); font-size: 11.5px; line-height: 1.35; }

/* ══ DB PANEL — MODO NORMAL ══ */
.login-db-panel {
margin-top: 6px; padding: 14px;
background: rgba(7,13,26,0.72); border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px; backdrop-filter: blur(16px); box-shadow: 0 18px 32px rgba(0,0,0,0.22);
}
.login-db-panel h3 { font-family: 'Poppins', sans-serif; font-size: 15px; color: #93c5fd; margin-bottom: 6px; }
.login-db-panel p { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.db-lock-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }

/* ══ DB PANEL — MODO DASHBOARD ══ */
.login-card.db-mode {
position: fixed; inset: 16px; width: auto; max-width: none; margin: 0; padding: 20px 24px;
border-radius: 24px; background: rgba(7,13,26,0.96);
border: 1px solid rgba(96,165,250,0.18); backdrop-filter: blur(20px);
box-shadow: 0 28px 60px rgba(0,0,0,0.5);
display: flex; flex-direction: column; overflow: hidden;
animation: none; transform: none; z-index: 1001;
}
.login-card.db-mode > * { opacity: 1; transform: none; animation: none; }
.login-card.db-mode .login-auth-area { display: none; }
.login-card.db-mode .login-db-panel {
margin-top: 0; padding: 0; background: transparent; border: none;
border-radius: 0; backdrop-filter: none; box-shadow: none;
display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.login-card.db-mode .db-admin-tools.show {
display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.login-card.db-mode .db-lock-row { display: none; }
.login-card.db-mode .db-feedback { text-align: left; margin-bottom: 8px; }

.db-close-btn {
position: absolute; top: 16px; right: 20px; width: 36px; height: 36px;
border-radius: 10px; border: 1px solid rgba(96,165,250,0.3);
background: rgba(15,23,42,0.8); color: #93c5fd; cursor: pointer;
font-size: 20px; line-height: 1; display: none; align-items: center; justify-content: center;
transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), transform var(--dur-base) var(--ease-spring);
z-index: 10;
}
.login-card.db-mode .db-close-btn { display: flex; }
.db-close-btn:hover { background: rgba(239,68,68,0.18); color: #fca5a5; border-color: rgba(239,68,68,0.4); transform: rotate(90deg); }

.db-dashboard-grid {
display: grid; grid-template-columns: minmax(260px,340px) minmax(0,1fr);
gap: 14px; flex: 1; min-height: 0; margin-top: 10px; overflow: hidden;
}
.db-editor-column { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-right: 4px; }
.db-table-column { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.db-panel-card { padding: 14px; border-radius: 16px; background: rgba(15,23,42,0.68); border: 1px solid rgba(59,130,246,0.14); flex-shrink: 0; }
.db-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.db-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.db-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.db-file-input { display: none; }
.db-file-name { color: rgba(255,255,255,0.7); font-size: 12px; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; }
.db-toolbar input, .db-bulk-box textarea, .db-plan-select, .db-form-row input, .db-form-row select {
width: 100%; padding: 10px 14px;
background: rgba(2,6,23,0.72); border: 1px solid rgba(147,197,253,0.25);
border-radius: 12px; color: #ffffff; font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none;
transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.db-toolbar input::placeholder, .db-bulk-box textarea::placeholder, .db-form-row input::placeholder { color: rgba(255,255,255,0.45); }
.db-toolbar input:focus, .db-bulk-box textarea:focus, .db-plan-select:focus, .db-form-row input:focus, .db-form-row select:focus { border-color: rgba(96,165,250,0.5); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.db-plan-select { appearance: none; cursor: pointer; }
.db-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: rgba(255,255,255,0.75); font-size: 12px; }
.db-bulk-box { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(15,23,42,0.65); border: 1px solid rgba(59,130,246,0.14); }
.db-bulk-box textarea { min-height: 100px; max-height: 140px; resize: vertical; }
.db-hint { margin-top: 6px; color: rgba(255,255,255,0.55); font-size: 11px; line-height: 1.5; }
.db-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scroll-behavior: smooth; }
.db-list::-webkit-scrollbar { width: 6px; }
.db-list::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.25); border-radius: 3px; }
.db-list-header { display: grid; grid-template-columns: minmax(0,1.2fr) 118px 120px 96px 124px auto; gap: 10px; padding: 0 10px 6px; color: rgba(147,197,253,0.86); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; flex-shrink: 0; }
.db-list-item { display: grid; grid-template-columns: minmax(0,1.2fr) 118px 120px 96px 124px auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(15,23,42,0.78); border: 1px solid rgba(59,130,246,0.15); flex-shrink: 0; }
.db-user-meta { min-width: 0; }
.db-user-name { display: block; color: #e2e8f0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-user-role { display: block; margin-top: 1px; color: rgba(147,197,253,0.75); font-size: 11px; }
.db-user-password { color: rgba(255,255,255,0.7); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-user-plan, .db-user-role-cell, .db-user-limit { color: rgba(255,255,255,0.72); font-size: 12px; }
.db-user-role-cell { color: #bfdbfe; font-weight: 600; }
.db-empty { padding: 12px; border-radius: 12px; background: rgba(15,23,42,0.7); border: 1px dashed rgba(148,163,184,0.22); color: rgba(255,255,255,0.55); font-size: 12px; text-align: center; }
.db-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-shrink: 0; }
.db-page-info { color: rgba(255,255,255,0.65); font-size: 12px; }
.db-section-title { margin: 12px 0 8px; color: #93c5fd; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; }

/* ── Botones DB modernos ── */
.btn-db-secondary {
padding: 10px 16px; border-radius: var(--btn-radius); border: 1px solid rgba(96,165,250,0.28);
background: rgba(15,23,42,0.72); color: #e2e8f0;
font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer;
transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.btn-db-secondary:hover { transform: translateY(-1px); background: rgba(37,99,235,0.22); box-shadow: 0 6px 16px rgba(37,99,235,0.2); }
.btn-db-danger {
padding: 10px 16px; border-radius: var(--btn-radius); border: 1px solid rgba(248,113,113,0.28);
background: rgba(127,29,29,0.22); color: #fca5a5;
font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer;
transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-smooth);
}
.btn-db-danger:hover { transform: translateY(-1px); background: rgba(185,28,28,0.32); }
.db-list-actions { display: flex; gap: 6px; }
.db-admin-tools { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.db-admin-tools.show { display: block; }

/* ── Botones icono DB ── */
.btn-db-icon {
width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(96,165,250,0.2);
background: rgba(15,23,42,0.6); color: #93c5fd; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast);
}
.btn-db-icon:hover { background: rgba(37,99,235,0.22); border-color: rgba(96,165,250,0.38); transform: translateY(-1px); }
.btn-db-danger-icon {
width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(248,113,113,0.2);
background: rgba(127,29,29,0.22); color: #fca5a5; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring);
}
.btn-db-danger-icon:hover { background: rgba(185,28,28,0.32); transform: translateY(-1px); }

@media (max-width: 900px) { .db-dashboard-grid { grid-template-columns: 1fr; overflow-y: auto; } .db-table-column { min-height: 300px; } }
@media (max-width: 600px) { .login-card.db-mode { inset: 8px; padding: 14px; } .db-form-row, .db-list-item, .db-list-header, .db-toolbar { grid-template-columns: 1fr; } }

/* ══ SIDEBAR OVERLAY (mobile) ══ */
#sidebar-overlay {
display: none; position: fixed; inset: 0; z-index: 99;
background: rgba(0,0,0,0); backdrop-filter: blur(0px);
transition: background 180ms var(--ease-smooth), backdrop-filter 180ms var(--ease-smooth);
pointer-events: none;
}
#sidebar-overlay.visible { display: block; pointer-events: all; }
#sidebar-overlay.active { background: rgba(0,0,0,0.46); backdrop-filter: blur(1.5px); }

/* ══ SIDEBAR ══ */
#sidebar {
width: var(--sidebar-width); height: 100vh; height: 100dvh;
position: fixed; left: 0; top: 0; bottom: 0; overflow: hidden;
background: linear-gradient(180deg, rgba(7,7,7,0.99) 0%, rgba(13,13,13,0.99) 58%, rgba(4,4,4,1) 100%);
display: flex; flex-direction: column; padding: 14px 16px 24px;
border-right: 1px solid var(--separator-black); z-index: 100;
box-shadow: 6px 0 18px rgba(0,0,0,0.24), inset -1px 0 0 rgba(255,255,255,0.03);
transform: translate3d(0,0,0); transform-origin: left center;
backface-visibility: hidden; will-change: transform; contain: layout paint style;
transition: transform var(--sidebar-speed) cubic-bezier(0.2, 0.9, 0.2, 1);
}
#sidebar::before, #sidebar::after { content: none; }
#sidebar > * { position: relative; z-index: 1; backface-visibility: hidden; transform: translate3d(0,0,0); transition: opacity 120ms linear, transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1); }
#collapsed-sidebar-rail {
position: fixed; left: 0; top: 0; bottom: 0; z-index: 96;
width: 58px; padding: 16px 8px 12px;
display: flex; flex-direction: column; align-items: center; gap: 14px;
border-radius: 0 20px 20px 0;
background: linear-gradient(180deg, rgba(8,12,20,0.86) 0%, rgba(10,10,14,0.9) 100%);
border-right: 1px solid rgba(96,165,250,0.14);
box-shadow: 0 14px 30px rgba(0,0,0,0.18);
opacity: 0; pointer-events: none; transform: translateX(-14px);
transition: opacity 140ms linear, transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.collapsed-rail-logo {
width: 34px; height: 34px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06); border: 1px solid rgba(96,165,250,0.14);
box-shadow: 0 8px 18px rgba(2,6,23,0.16);
}
.collapsed-rail-logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.collapsed-rail-history,
.collapsed-rail-link {
width: 32px; height: 32px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(96,165,250,0.16);
background: rgba(255,255,255,0.04); color: #dbeafe;
transition: transform 160ms cubic-bezier(0.22,1,0.36,1), background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.collapsed-rail-history { cursor: pointer; }
.collapsed-rail-history svg { width: 16px; height: 16px; }
.collapsed-rail-link img { width: 15px; height: 15px; object-fit: contain; display: block; }
.collapsed-rail-logo:hover,
.collapsed-rail-history:hover,
.collapsed-rail-link:hover {
transform: translateY(-1px);
background: rgba(37,99,235,0.18);
border-color: rgba(96,165,250,0.34);
box-shadow: 0 10px 18px rgba(37,99,235,0.18);
}
.collapsed-rail-socials {
margin-top: auto;
display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.collapsed-rail-avatar {
width: 36px; height: 36px; margin-top: 14px; border-radius: 14px;
background: linear-gradient(135deg, #2563eb, #60a5fa);
color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 12px 24px rgba(37,99,235,0.28);
}

.sidebar-brand { text-align: center; margin-bottom: 12px; display: flex; justify-content: center; transform: translateY(-4px); }
.sidebar-brand-video-shell { position: relative; width: min(232px, 100%); aspect-ratio: 1 / 1.08; overflow: visible; background: transparent; }
.sidebar-brand-image { display: block; width: 100%; height: 100%; object-fit: contain; z-index: 1; filter: drop-shadow(0 18px 30px rgba(2,6,23,0.34)); }
.sidebar-history-launch {
display: flex; align-items: center; gap: 12px;
width: 100%; margin-bottom: 18px; padding: 14px 16px;
border-radius: 18px; border: 1px solid rgba(96,165,250,0.2);
background: linear-gradient(180deg, rgba(8,16,34,0.92) 0%, rgba(10,10,14,0.95) 100%);
color: #f8fafc; text-align: left; cursor: pointer;
box-shadow: 0 16px 34px rgba(0,0,0,0.26);
transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth);
}
.sidebar-history-launch:hover { transform: translateY(-2px); border-color: rgba(96,165,250,0.46); background: linear-gradient(180deg, rgba(12,28,64,0.96) 0%, rgba(10,10,14,0.98) 100%); box-shadow: 0 20px 42px rgba(2,6,23,0.4); }
.sidebar-history-launch strong { display: block; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; }
.sidebar-history-launch small { display: block; margin-top: 3px; color: rgba(226,232,240,0.72); font-size: 11px; line-height: 1.4; }
.sidebar-history-icon {
width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 30% 30%, rgba(96,165,250,0.24), rgba(29,78,216,0.18));
border: 1px solid rgba(96,165,250,0.28); color: #93c5fd;
}
.sidebar-history-icon svg { width: 22px; height: 22px; }
.sidebar-socials {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin-top: auto; padding-top: 16px; border-top: 1px solid var(--separator-black);
}
.social-link {
width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.social-link:hover { transform: translateY(-2px); background: rgba(37,99,235,0.14); border-color: rgba(96,165,250,0.32); box-shadow: 0 10px 20px rgba(0,0,0,0.28); }
.social-link img { width: 16px; height: 16px; object-fit: contain; display: block; }

.wiki-card, .image-card {
display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px;
background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(15,23,42,0.9));
border: 1px solid rgba(96,165,250,0.24); box-shadow: 0 16px 32px rgba(2,6,23,0.22);
}
.wiki-card strong { color: #f8fafc; font-size: 14px; }
.wiki-card p { margin: 0; color: rgba(226,232,240,0.82); font-size: 13px; line-height: 1.45; }
.wiki-card a { color: #93c5fd; font-weight: 600; text-decoration: none; }
.wiki-card a:hover { text-decoration: underline; }
.ai-config-hint { font-size: 12px; line-height: 1.45; color: rgba(226,232,240,0.72); margin-top: 6px; }
.ai-config-hint strong { color: #93c5fd; }

/* ── Botones modernos — base oscura ── */
.btn-new-chat {
width: 100%; padding: 11px 16px;
border: 1px solid rgba(255,255,255,0.10); border-radius: var(--btn-radius);
background: #1a1a1a; color: #e2e8f0; cursor: pointer;
font-size: 14px; font-family: 'DM Sans', sans-serif; font-weight: 500;
will-change: transform; display: inline-flex; align-items: center; justify-content: center;
transition: background 180ms var(--ease-smooth), border-color 180ms var(--ease-smooth), transform 200ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms var(--ease-smooth), color 180ms;
}
.btn-new-chat:hover { background: #242424; border-color: rgba(255,255,255,0.16); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.24); color: #ffffff; }
.btn-new-chat:active { transform: scale(0.97); }

.btn-delete-chat {
width: 100%; padding: 11px 16px;
border: 1px solid rgba(248,113,113,0.28); border-radius: var(--btn-radius);
background: rgba(30,10,10,0.82); color: #fca5a5; cursor: pointer;
font-size: 14px; font-family: 'DM Sans', sans-serif; font-weight: 500;
display: flex; align-items: center; justify-content: center; gap: 8px;
transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-spring), opacity var(--dur-base);
}
.btn-delete-chat:hover:not(:disabled) { background: rgba(185,28,28,0.28); border-color: rgba(248,113,113,0.44); transform: translateY(-1px); }
.btn-delete-chat:disabled { opacity: .45; cursor: not-allowed; }
.btn-delete-chat svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Botón cerrar historial ── */
.btn-close-history {
width: 38px; height: 38px; border-radius: 10px;
border: 1px solid rgba(255,255,255,0.10);
background: #1a1a1a; color: #9ca3af; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 500;
transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base);
}
.btn-close-history:hover { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.3); transform: rotate(90deg); }

.historial-empty { font-size: 12.5px; color: rgba(255,255,255,0.55); padding: 18px; font-style: italic; text-align: center; }
.historial-item {
position: relative; padding: 16px 80px 16px 18px; border-radius: 16px; cursor: pointer;
font-size: 13px; color: #e2e8f0; margin-bottom: 3px; border: 1px solid transparent;
display: flex; flex-direction: column; gap: 2px; overflow: hidden; will-change: transform;
transition: background 200ms var(--ease-smooth), border-color 200ms var(--ease-smooth), transform 240ms cubic-bezier(0.22,1,0.36,1);
}
.historial-item::before {
content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px;
background: linear-gradient(180deg, var(--accent-glow), var(--accent-blue));
border-radius: 0 3px 3px 0; transform: scaleY(0); transform-origin: center;
transition: transform 220ms cubic-bezier(0.22,1,0.36,1);
}
.historial-item:hover { background: rgba(22,22,22,0.96); border-color: rgba(96,165,250,0.2); transform: translateX(3px); }
.historial-item:hover::before { transform: scaleY(1); }
.historial-item.active { background: rgba(22,32,52,0.84); border-color: rgba(147,197,253,0.3); transform: translateX(3px); }
.historial-item.active::before { transform: scaleY(1); }
.historial-item .h-date { font-size: 11px; color: rgba(255,255,255,0.44); }
.historial-item .h-preview { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }

/* ── Botones historial inline ── */
.historial-delete {
position: absolute; top: 50%; right: 10px; transform: translateY(-50%) scale(0.88);
width: 32px; height: 32px; border-radius: 9px;
border: 1px solid rgba(248,113,113,0.20);
background: rgba(30,10,10,0.72); color: #fca5a5; cursor: pointer; opacity: 0; pointer-events: none;
display: inline-flex; align-items: center; justify-content: center;
transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-smooth);
}
.historial-delete svg { width: 14px; height: 14px; }
.historial-rename {
position: absolute; top: 50%; right: 46px; transform: translateY(-50%) scale(0.88);
width: 32px; height: 32px; border-radius: 9px;
border: 1px solid rgba(96,165,250,0.16);
background: none; color: rgba(148,163,184,0.55); cursor: pointer; opacity: 0; pointer-events: none;
display: inline-flex; align-items: center; justify-content: center;
margin: 0;
transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-smooth), color var(--dur-base);
}
.historial-item:hover .historial-delete,
.historial-item:focus-within .historial-delete,
.historial-item.active .historial-delete { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.historial-item:hover .historial-rename,
.historial-item:focus-within .historial-rename,
.historial-item.active .historial-rename { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.historial-delete:hover { background: rgba(127,29,29,0.88); border-color: rgba(248,113,113,0.38); }
.historial-rename:hover { color: #60a5fa; background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.3); }

.history-panel-overlay {
position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center;
padding: 28px; background: rgba(2,6,23,0.72); backdrop-filter: blur(10px);
}
.history-panel-overlay.show { display: flex; }
.history-panel {
position: relative;
width: min(940px, 100%); max-height: min(84vh, 920px); display: flex; flex-direction: column; overflow: hidden;
border-radius: 28px; border: 1px solid rgba(96,165,250,0.22);
background:
radial-gradient(circle at top right, rgba(59,130,246,0.16), transparent 24%),
linear-gradient(180deg, rgba(13,13,13,0.98) 0%, rgba(6,6,6,0.98) 100%);
box-shadow: 0 36px 90px rgba(0,0,0,0.5);
}
.history-panel-header {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 24px 26px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.history-panel-title-wrap { display: flex; align-items: center; gap: 16px; min-width: 0; }
.history-panel-title-wrap h2 { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: #f8fafc; }
.history-panel-title-wrap p { margin-top: 4px; color: rgba(226,232,240,0.72); font-size: 13px; }
.history-panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.history-panel-actions .btn-new-chat,
.history-panel-actions .btn-delete-chat {
width: auto; min-width: 0; padding: 10px 16px; margin: 0;
}
.history-panel-close {
width: 40px; height: 40px; border-radius: 12px;
border: 1px solid rgba(255,255,255,0.10);
background: #1a1a1a; color: #9ca3af; cursor: pointer; font-size: 20px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-base) var(--ease-smooth), color var(--dur-base), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base);
}
.history-panel-close:hover { transform: rotate(90deg); background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.28); }
.history-panel-search { padding: 18px 26px 10px; }
.history-panel-search input {
width: 100%; padding: 14px 18px; border-radius: 16px;
border: 1px solid rgba(255,255,255,0.10); background: rgba(22,22,22,0.94);
color: #e2e8f0; font-family: 'DM Sans', sans-serif; font-size: 15px; outline: none;
transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.history-panel-search input:focus { border-color: rgba(96,165,250,0.5); box-shadow: 0 0 0 3px rgba(59,130,246,0.14); }
.history-panel-list {
padding: 8px 20px 24px; overflow-y: auto; min-height: 0; flex: 1;
}
.history-panel-list::-webkit-scrollbar { width: 8px; }
.history-panel-list::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.24); border-radius: 999px; }

.user-card {
margin-top: 16px; padding: 12px;
background: linear-gradient(135deg, rgba(14,14,14,0.96), rgba(23,23,23,0.94));
border: 1px solid var(--separator-black); border-radius: 14px;
display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.user-avatar {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, #2563eb, #60a5fa);
display: flex; align-items: center; justify-content: center;
color: #ffffff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;
flex-shrink: 0; box-shadow: 0 0 24px rgba(96,165,250,0.36);
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; color: #f1f5f9; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-status{ font-size: 11px; color: #4ade80; display: flex; align-items: center; gap: 5px; }
.user-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: statusBlink 2s var(--ease-smooth) infinite; }
.user-role { margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(14,165,233,0.10); border: 1px solid rgba(125,211,252,0.20); color: #bfdbfe; font-size: 10.5px; }
.user-plan { margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(37,99,235,0.12); border: 1px solid rgba(96,165,250,0.22); color: #dbeafe; font-size: 10.5px; }
.user-quota { margin-top: 6px; display: block; color: rgba(255,255,255,0.6); font-size: 10.5px; line-height: 1.4; }
.logout-btn { background: transparent; border: none; color: rgba(255,255,255,0.45); cursor: pointer; padding: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-spring); }
.logout-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); transform: translateX(2px); }

/* ══ MAIN ══ */
#main {
margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); min-width: 0;
display: flex; flex-direction: column; height: 100vh; position: relative; overflow: hidden;
background: linear-gradient(180deg, #050505 0%, #0b0b0b 54%, #020202 100%);
transform: translate3d(0,0,0); backface-visibility: hidden; will-change: margin-left;
transition: margin-left var(--main-speed) cubic-bezier(0.2, 0.9, 0.2, 1);
}
#main::before,
#main::after { content: none; }
#header, #chat, #selection-bar, #welcome-center { position: relative; z-index: 2; }

/* ══ HEADER ══ */
#header {
padding: 18px 24px; border-bottom: 1px solid var(--separator-black);
display: flex; justify-content: space-between; align-items: center;
background: rgba(9,9,9,0.94); backdrop-filter: blur(8px);
animation: slideUp var(--dur-slow) var(--ease-out-expo) both;
}
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ── Botones header modernos ── */
.theme-toggle {
width: 42px; height: 42px;
border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
background: #161616; color: #9ca3af;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms ease;
}
.theme-toggle:hover { background: #242424; border-color: rgba(255,255,255,0.18); color: #e2e8f0; transform: translateY(-1px) rotate(-6deg); box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.theme-toggle-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle-icon svg { width: 18px; height: 18px; }

.sidebar-toggle {
width: 42px; height: 42px;
border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
background: #161616; color: #9ca3af;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 420ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms ease;
}
.sidebar-toggle:hover { background: #242424; border-color: rgba(255,255,255,0.18); color: #e2e8f0; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.sidebar-toggle svg { width: 18px; height: 18px; transition: transform 520ms cubic-bezier(0.22,1,0.36,1), opacity 240ms var(--ease-smooth); }

.header-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base) var(--ease-smooth); }
.header-brand-link:hover { transform: translateY(-1px); filter: brightness(1.04); }
.header-brand-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(96,165,250,0.3)); }
.title { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.3px; }
.title-accent {
background: linear-gradient(90deg, #ffffff 0%, #93c5fd 28%, #60a5fa 55%, #dbeafe 100%);
background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(96,165,250,0.48)); animation: gradientSweep 5s linear infinite;
}
.view-badge { padding: 6px 14px; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); border-radius: 20px; color: #fbbf24; font-size: 12px; display: none; }
.view-badge.show { display: inline-block; animation: slideUp var(--dur-base) var(--ease-out-expo) both; }

/* ══ MODO CLARO — SIDEBAR ══ */
body[data-theme="light"] #sidebar {
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 58%, #f3f4f6 100%);
border-right-color: rgba(0,0,0,0.08);
box-shadow: 4px 0 16px rgba(0,0,0,0.06), inset -1px 0 0 rgba(255,255,255,0.9);
}
body[data-theme="light"] #collapsed-sidebar-rail {
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
border-right-color: rgba(0,0,0,0.08);
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
body[data-theme="light"] .collapsed-rail-logo,
body[data-theme="light"] .collapsed-rail-history,
body[data-theme="light"] .collapsed-rail-link {
background: #f4f4f5;
color: #374151;
border-color: rgba(0,0,0,0.09);
}
body[data-theme="light"] .collapsed-rail-logo:hover,
body[data-theme="light"] .collapsed-rail-history:hover,
body[data-theme="light"] .collapsed-rail-link:hover {
background: #e4e4e7;
border-color: rgba(0,0,0,0.14);
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
body[data-theme="light"] #main {
background: linear-gradient(180deg, #f8f9fa 0%, #f1f5f9 54%, #eef2f7 100%);
}
body[data-theme="light"] #header {
background: rgba(255,255,255,0.92);
border-bottom-color: rgba(0,0,0,0.08);
backdrop-filter: blur(10px);
}
body[data-theme="light"] .title { color: #111827; }
body[data-theme="light"] .title-accent {
background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 45%, #2563eb 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: none;
}
body[data-theme="light"] .view-badge {
background: rgba(250,204,21,0.14);
border-color: rgba(234,179,8,0.3);
color: #92400e;
}

/* ── Botones header en modo claro ── */
body[data-theme="light"] .theme-toggle,
body[data-theme="light"] .sidebar-toggle {
background: #f4f4f5;
color: #4b5563;
border-color: rgba(0,0,0,0.09);
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
body[data-theme="light"] .theme-toggle:hover,
body[data-theme="light"] .sidebar-toggle:hover {
background: #e4e4e7;
border-color: rgba(0,0,0,0.14);
color: #111827;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
body[data-theme="light"] .header-brand-link:hover { filter: none; }
body[data-theme="light"] #chat {
background: linear-gradient(180deg, #f8f9fa 0%, #f1f5f9 100%);
}
body[data-theme="light"] #selection-bar {
background: rgba(255,255,255,0.96);
border-top: 1px solid rgba(0,0,0,0.07);
}
body[data-theme="light"] #welcome-center h1,
body[data-theme="light"] #welcome-center p,
body[data-theme="light"] .user-name,
body[data-theme="light"] .historial-item,
body[data-theme="light"] .history-panel-title-wrap h2,
body[data-theme="light"] .history-panel-title-wrap p {
color: #111827;
}
body[data-theme="light"] #welcome-center p,
body[data-theme="light"] .user-quota,
body[data-theme="light"] .historial-item .h-date,
body[data-theme="light"] .history-panel-title-wrap p,
body[data-theme="light"] .sidebar-history-launch small {
color: rgba(17,24,39,0.58);
}

/* ── Sidebar elements modo claro ── */
body[data-theme="light"] .sidebar-history-launch {
background: #f4f4f5;
border-color: rgba(0,0,0,0.09);
color: #111827;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
body[data-theme="light"] .sidebar-history-launch:hover {
background: #e4e4e7;
border-color: rgba(0,0,0,0.14);
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
body[data-theme="light"] .sidebar-history-launch strong,
body[data-theme="light"] .sidebar-history-launch small {
color: #374151;
}
body[data-theme="light"] .sidebar-history-launch small {
color: rgba(55,65,81,0.72);
}
body[data-theme="light"] .sidebar-history-icon {
background: rgba(37,99,235,0.08);
border-color: rgba(37,99,235,0.18);
color: #2563eb;
}

/* ── User card modo claro ── */
body[data-theme="light"] .user-card {
background: #f4f4f5;
border-color: rgba(0,0,0,0.09);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
body[data-theme="light"] .user-role,
body[data-theme="light"] .user-plan {
background: rgba(37,99,235,0.08);
border-color: rgba(37,99,235,0.18);
color: #1d4ed8;
}
body[data-theme="light"] .logout-btn { color: rgba(17,24,39,0.45); }
body[data-theme="light"] .logout-btn:hover { color: #dc2626; background: rgba(220,38,38,0.08); }

/* ── Burbujas chat modo claro ── */
body[data-theme="light"] .msg.bot .bubble {
background: #ffffff;
border-color: rgba(0,0,0,0.07);
color: #111827;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body[data-theme="light"] .msg.user .bubble {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: #ffffff;
border-color: rgba(37,99,235,0.4);
}
body[data-theme="light"] .msg.bot .bubble b,
body[data-theme="light"] .msg.bot .bubble strong { color: #111827; }
body[data-theme="light"] .msg.bot .bubble:hover {
background: #f9fafb;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
border-color: rgba(0,0,0,0.10);
}
body[data-theme="light"] .msg.user .bubble:hover {
box-shadow: 0 6px 16px rgba(37,99,235,0.35);
}
body[data-theme="light"] .bubble a { color: #2563eb; }
body[data-theme="light"] .bubble a:hover { color: #111827; border-bottom-color: #111827; }

/* ── Option buttons modo claro ── */
body[data-theme="light"] .option-btn {
background: #f4f4f5;
color: #374151;
border-color: rgba(0,0,0,0.09);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
body[data-theme="light"] .option-btn:hover {
background: #2563eb;
color: #ffffff;
border-color: #2563eb;
box-shadow: 0 6px 16px rgba(37,99,235,0.3);
}

/* ── Botones nuevos modo claro ── */
body[data-theme="light"] .btn-new-chat {
background: #f4f4f5;
color: #374151;
border-color: rgba(0,0,0,0.09);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
body[data-theme="light"] .btn-new-chat:hover {
background: #e4e4e7;
color: #111827;
border-color: rgba(0,0,0,0.14);
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
body[data-theme="light"] .btn-close-history,
body[data-theme="light"] .history-panel-close {
background: #f4f4f5;
color: #6b7280;
border-color: rgba(0,0,0,0.09);
}
body[data-theme="light"] .btn-close-history:hover,
body[data-theme="light"] .history-panel-close:hover {
background: rgba(220,38,38,0.08);
color: #dc2626;
border-color: rgba(220,38,38,0.2);
}

/* ── Historial modo claro ── */
body[data-theme="light"] .history-panel {
background: #ffffff;
border-color: rgba(0,0,0,0.09);
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
body[data-theme="light"] .history-panel-header {
border-bottom-color: rgba(0,0,0,0.07);
}
body[data-theme="light"] .history-panel-search input {
background: #f4f4f5;
color: #111827;
border-color: rgba(0,0,0,0.09);
}
body[data-theme="light"] .history-panel-search input:focus {
background: #ffffff;
border-color: rgba(37,99,235,0.4);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
body[data-theme="light"] .history-panel-search input::placeholder,
body[data-theme="light"] .free-chat-row input::placeholder,
body[data-theme="light"] .input-row input::placeholder { color: rgba(55,65,81,0.5); }
body[data-theme="light"] .historial-item { color: #374151; border-color: transparent; }
body[data-theme="light"] .historial-item .h-preview { color: #111827; }
body[data-theme="light"] .historial-item:hover {
background: #f4f4f5;
border-color: rgba(0,0,0,0.09);
color: #111827;
}
body[data-theme="light"] .historial-item.active {
background: rgba(37,99,235,0.08);
border-color: rgba(37,99,235,0.2);
color: #111827;
}
body[data-theme="light"] .historial-empty { color: rgba(55,65,81,0.6); }
body[data-theme="light"] .historial-delete {
background: rgba(254,242,242,0.96);
border-color: rgba(220,38,38,0.2);
color: #dc2626;
}
body[data-theme="light"] .historial-rename {
background: rgba(239,246,255,0.96);
border-color: rgba(37,99,235,0.2);
color: #2563eb;
}

/* ── Badges y plans modo claro ── */
body[data-theme="light"] .message-badge.plan-basico,
body[data-theme="light"] .message-badge.plan-silver,
body[data-theme="light"] .message-badge.plan-pro,
body[data-theme="light"] .message-badge.info-badge,
body[data-theme="light"] .tutorial-step-label {
background: #f4f4f5;
color: #374151;
border-color: rgba(0,0,0,0.10);
}
body[data-theme="light"] .plan-card {
background: #f9fafb;
border-color: rgba(0,0,0,0.08);
}
body[data-theme="light"] .plan-card ul { color: #374151; }
body[data-theme="light"] .sidebar-socials { border-top-color: rgba(0,0,0,0.08); }
body[data-theme="light"] .social-link {
background: #f4f4f5;
border-color: rgba(0,0,0,0.09);
}
body[data-theme="light"] .social-link:hover {
background: #e4e4e7;
border-color: rgba(0,0,0,0.14);
}

/* ── Inputs modo claro ── */
body[data-theme="light"] .free-chat-row input,
body[data-theme="light"] #user-input {
background: #f4f4f5;
color: #111827;
border-color: rgba(0,0,0,0.09);
}
body[data-theme="light"] .free-chat-row input:focus,
body[data-theme="light"] #user-input:focus {
background: #ffffff;
border-color: rgba(37,99,235,0.4);
box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* ── Botones compartir modo claro ── */
body[data-theme="light"] .btn-download-img,
body[data-theme="light"] .btn-share-img {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
border: 1.5px solid rgba(37,99,235,0.5);
color: #ffffff;
box-shadow: 0 4px 12px rgba(29,78,216,0.28);
}
body[data-theme="light"] .btn-download-img:hover,
body[data-theme="light"] .btn-share-img:hover {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 8px 18px rgba(59,130,246,0.42);
}
body[data-theme="light"] .btn-download-img svg,
body[data-theme="light"] .btn-share-img svg,
body[data-theme="light"] .image-share-row svg {
fill: #ffffff !important;
stroke: #ffffff !important;
}

/* ══ WELCOME ══ */
#welcome-center {
position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%);
text-align: center; pointer-events: none; width: 100%; padding: 0 20px; z-index: 5;
transition: opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth), filter var(--dur-slow) var(--ease-smooth);
}
#welcome-center.hidden { opacity: 0; transform: translate(-50%, -70%) scale(0.98); filter: blur(6px); }
#welcome-center h1, #welcome-center p { opacity: 0; transform: translateY(16px); animation: slideUp var(--dur-cinematic) var(--ease-out-expo) forwards; }
#welcome-center h1 { animation-delay: 150ms; font-family: 'Poppins', sans-serif; font-size: 48px; font-weight: 700; color: #f1f5f9; margin-bottom: 12px; letter-spacing: -.5px; }
#welcome-center p { animation-delay: 380ms; font-size: 16px; color: rgba(255,255,255,0.65); }
#welcome-center .welcome-name {
background: linear-gradient(90deg, #ffffff 0%, #93c5fd 28%, #60a5fa 55%, #dbeafe 100%);
background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 18px rgba(96,165,250,0.4)); animation: gradientSweep 4s linear infinite;
}

/* ══ CHAT ══ */
#chat {
flex: 1; overflow-y: auto; padding: 30px 20px;
display: flex; flex-direction: column; gap: 20px;
background: linear-gradient(180deg, rgba(7,7,7,0.84) 0%, rgba(3,3,3,0.92) 100%);
scroll-behavior: smooth;
}
#chat::-webkit-scrollbar { width: 8px; }
#chat::-webkit-scrollbar-track { background: transparent; }
#chat::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.2); border-radius: 4px; }
#chat::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.35); }

.msg { display: flex; gap: 12px; max-width: 85%; }
.msg.bot { align-self: flex-start; animation: botEnter 520ms var(--ease-out-expo) both; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; animation: userEnter 300ms var(--ease-swift) both; }
.message-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.message-badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.message-badge.plan-basico { background: rgba(120,120,120,0.14); border: 1px solid rgba(148,163,184,0.22); color: #e2e8f0; }
.message-badge.plan-silver { background: rgba(125,125,125,0.14); border: 1px solid rgba(203,213,225,0.22); color: #f8fafc; }
.message-badge.plan-pro { background: rgba(37,99,235,0.16); border: 1px solid rgba(96,165,250,0.28); color: #bfdbfe; }
.message-badge.info-badge { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); }

.plan-comparison { display: grid; gap: 12px; margin-top: 14px; }
.plan-card { padding: 14px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.plan-card h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: 'Poppins', sans-serif; font-size: 14px; }
.plan-card ul { padding-left: 18px; color: rgba(255,255,255,0.78); }
.plan-card li + li { margin-top: 5px; }

.bot-avatar {
position: relative; width: 56px; height: 56px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; align-self: flex-start; overflow: visible;
}
.bot-avatar::before {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
background: radial-gradient(circle, rgba(96,165,250,0.35) 0%, rgba(59,130,246,0.15) 45%, transparent 75%);
z-index: 0; animation: haloPulse 3s var(--ease-smooth) infinite; pointer-events: none;
}
.bot-avatar video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(0 0 10px rgba(96,165,250,0.6)); pointer-events: none; border-radius: 50%; }

.bubble {
padding: 14px 18px; border-radius: 18px; font-size: 14.5px; line-height: 1.6;
word-wrap: break-word; overflow-wrap: break-word;
transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth);
}
.msg.user .bubble { background: linear-gradient(135deg, #060606 0%, #111827 60%, #1d4ed8 100%); color: #ffffff; border: 1px solid rgba(147,197,253,0.22); border-bottom-right-radius: 4px; box-shadow: 0 4px 15px rgba(37,99,235,0.3); }
.msg.user .bubble:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37,99,235,0.4); }
.msg.bot .bubble { background: rgba(13,13,13,0.96); backdrop-filter: blur(10px); border: 1px solid rgba(59,130,246,0.14); color: #ffffff; border-bottom-left-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.35); }
.msg.bot .bubble:hover { transform: translateY(-1px); border-color: rgba(96,165,250,0.28); box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.bubble a { color: #bfdbfe; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-base), border-color var(--dur-base); }
.bubble a:hover { color: #ffffff; border-bottom-color: #ffffff; }

img.emoji { width: 1.25em; height: 1.25em; vertical-align: -.25em; display: inline; }

.img-wrapper { display: flex; flex-direction: column; gap: 0; margin-top: 10px; animation: slideUp var(--dur-slow) var(--ease-out-expo) 120ms both; position: relative; }
.img-response { width: auto; max-width: 180px; border-radius: 10px; border: 1px solid rgba(59,130,246,0.4); display: block; cursor: zoom-in; transition: max-width var(--dur-fast) var(--ease-smooth), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth); }
.img-response:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 30px rgba(59,130,246,0.35); }

.tutorial-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
.tutorial-gallery .img-wrapper { margin-top: 0; padding: 10px; border-radius: 16px; background: rgba(2,6,23,0.38); border: 1px solid rgba(96,165,250,0.22); }
.tutorial-gallery .img-response { width: min(760px,100%); max-width: 760px; border-radius: 14px; box-shadow: 0 16px 38px rgba(0,0,0,0.35); }
.msg.bot.tutorial-message { max-width: 96%; }
.tutorial-gallery-title { margin-top: 12px; margin-bottom: 6px; font-family: 'Poppins', sans-serif; font-weight: 700; color: #dbeafe; }
.tutorial-step-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(37,99,235,0.22); border: 1px solid rgba(147,197,253,0.28); color: #ffffff; font-size: 12px; font-weight: 700; }
.img-error-card { padding: 16px; border-radius: 14px; border: 1px dashed rgba(248,113,113,0.45); background: rgba(127,29,29,0.18); color: #fecaca; font-size: 13px; text-align: center; }

.btn-download-img { background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%); border: 1px solid rgba(147,197,253,0.35); color: #ffffff; padding: 8px; border-radius: 16px; box-shadow: 0 4px 12px rgba(29,78,216,0.35); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base), filter var(--dur-base); }
.btn-download-img:hover { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59,130,246,0.5); filter: brightness(1.1); }
.btn-download-img svg { width: 18px; height: 18px; }
.image-share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn-share-img {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; min-height: 40px; gap: 6px; padding: 8px; border-radius: 16px;
border: 1px solid rgba(147,197,253,0.35); background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%); color: #f8fafc;
font-size: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(29,78,216,0.35);
transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), filter var(--dur-base);
}
.btn-share-img svg { width: 18px; height: 18px; display: block; fill: currentColor; stroke: currentColor; }
.btn-share-img:hover{ transform: translateY(-2px); background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); border-color: rgba(147,197,253,0.6); box-shadow: 0 8px 20px rgba(59,130,246,0.5); filter: brightness(1.1); }

/* ══ TYPING ══ */
.typing-squares { display: flex; gap: 8px; align-items: center; padding: 8px 4px; }
.typing-squares .sq { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-glow), var(--accent-blue)); box-shadow: 0 0 8px rgba(96,165,250,0.6); animation: typingWave 1.2s var(--ease-smooth) infinite; }
.typing-squares .sq:nth-child(1) { animation-delay: 0ms; }
.typing-squares .sq:nth-child(2) { animation-delay: 180ms; }
.typing-squares .sq:nth-child(3) { animation-delay: 360ms; }

/* ══ SELECTION BAR ══ */
#selection-bar {
padding: 16px 22px; background: rgba(8,8,8,0.96); backdrop-filter: blur(12px);
border-top: 1px solid var(--separator-black);
display: flex; flex-direction: column; align-items: center; gap: 12px;
animation: slideUp var(--dur-slow) var(--ease-out-expo) 100ms both;
}
#options-container { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.option-btn {
position: relative; padding: 9px 16px;
background: #1a1a1a; border: 1px solid rgba(255,255,255,0.10);
border-radius: 24px; color: #d1d5db; cursor: pointer;
font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; overflow: hidden;
transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.option-btn:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,0.3); }
.option-btn:disabled { opacity: .4; cursor: not-allowed; }

.free-chat-row { display: flex; width: 100%; max-width: 660px; gap: 9px; align-items: center; }
.free-chat-row input {
flex: 1; padding: 12px 20px; background: #141414;
border: 1px solid rgba(255,255,255,0.08); border-radius: 30px; color: #e2e8f0;
font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none;
transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.free-chat-row input::placeholder { color: rgba(255,255,255,0.45); }
.free-chat-row input:focus { border-color: rgba(96,165,250,0.5); box-shadow: 0 0 0 3px rgba(59,130,246,0.14); }

.input-row { display: flex; width: 100%; max-width: 560px; gap: 9px; align-items: center; animation: slideUp var(--dur-base) var(--ease-out-expo); }
.input-row.hidden-input { display: none; }
.input-row input {
flex: 1; padding: 12px 18px; background: #141414;
border: 1px solid rgba(255,255,255,0.08); border-radius: 30px; color: #e2e8f0;
font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none;
transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input-row input::placeholder { color: rgba(255,255,255,0.45); }
.input-row input:focus { border-color: rgba(96,165,250,0.5); box-shadow: 0 0 0 3px rgba(59,130,246,0.14); }

/* ══ SIDEBAR COLLAPSED (desktop) ══ */
body.sidebar-collapsed #sidebar { transform: translate3d(calc(-100% - 14px),0,0); box-shadow: none; border-right-color: transparent; pointer-events: none; }
body.sidebar-collapsed #sidebar > * { opacity: 0; transform: translate3d(-6px,0,0); pointer-events: none; }
body.sidebar-collapsed #collapsed-sidebar-rail { opacity: 1; pointer-events: auto; transform: translateX(0); }
body.sidebar-collapsed #main { margin-left: 58px; width: calc(100% - 58px); }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg) scale(1.04); }
body.sidebar-animating #sidebar, body.sidebar-animating #main { pointer-events: none; }

/* ══ MOBILE DRAWER (≤ 720px) ══ */
@media (max-width: 720px) {
body { height: 100dvh; overflow: hidden; }
#collapsed-sidebar-rail { display: none; }
#sidebar {
position: fixed; left: 0; top: 0; bottom: 0; height: 100%; height: 100dvh; z-index: 200;
transform: translate3d(-104%,0,0); width: min(280px,85vw); min-width: unset; flex-basis: auto;
padding: 20px 14px;
padding-top: max(20px, env(safe-area-inset-top));
padding-bottom: max(20px, env(safe-area-inset-bottom));
box-shadow: none;
transition: transform 170ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 140ms linear;
}
#sidebar.drawer-open { transform: translate3d(0,0,0); box-shadow: 6px 0 20px rgba(0,0,0,0.34); }
#sidebar > * { opacity: 1 !important; }
body.sidebar-collapsed #sidebar {
width: min(280px,85vw); min-width: unset;
padding: 20px 14px;
padding-top: max(20px, env(safe-area-inset-top));
padding-bottom: max(20px, env(safe-area-inset-bottom));
transform: translate3d(-104%,0,0); box-shadow: none; border-right-color: var(--separator-black); pointer-events: auto;
}
body.sidebar-collapsed #sidebar > * { opacity: 1 !important; transform: none; pointer-events: auto; }
body.sidebar-collapsed #sidebar.drawer-open { transform: translate3d(0,0,0); box-shadow: 6px 0 20px rgba(0,0,0,0.34); }
#main, body.sidebar-collapsed #main { margin-left: 0; width: 100%; }
.sidebar-brand-video-shell { width: min(164px, 100%); }
.sidebar-history-launch { padding: 12px 14px; }
.historial-item { padding: 14px 52px 14px 18px; margin-bottom: 4px; }
.btn-new-chat, .btn-delete-chat { padding: 14px 12px; font-size: 15px; }
#header { padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); min-height: 54px; }
.title { font-size: 20px; }
.header-brand-logo { width: 22px; height: 22px; }
.sidebar-toggle svg { width: 20px; height: 20px; }
#selection-bar { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.msg { max-width: 90%; }
#welcome-center h1 { font-size: 32px; }
#options-container { gap: 7px; }
.option-btn { font-size: 12.5px; padding: 8px 13px; }
.history-panel-overlay { padding: 12px; align-items: flex-end; }
.history-panel { width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; }
.history-panel-header { padding: 18px 18px 14px; align-items: flex-start; flex-direction: column; }
.history-panel-title-wrap h2 { font-size: 26px; }
.history-panel-title-wrap p { font-size: 12px; }
.history-panel-actions { width: 100%; }
.history-panel-search { padding: 14px 18px 8px; }
.history-panel-list { padding: 8px 14px 18px; }
}

/* ── Botón enviar ── */
.btn-send {
position: relative; width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 48%, #1e3a8a 100%);
color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
border: 1px solid rgba(147,197,253,0.28); animation: sendPulse 3s var(--ease-smooth) infinite;
transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base), filter var(--dur-base);
}
.btn-send::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-150%); pointer-events: none; }
.btn-send:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(59,130,246,0.5); filter: brightness(1.08); animation: none; }
.btn-send:hover::after { animation: sheenSweep 700ms var(--ease-smooth); }
.btn-send:hover svg { transform: translateX(2px) rotate(-8deg); }
.btn-send:active { transform: translateY(0) scale(0.95); }
.btn-send:disabled { opacity: .5; cursor: not-allowed; transform: none; animation: none; }

body[data-theme="light"] .btn-send {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
box-shadow: 0 4px 14px rgba(37,99,235,0.35);
}

.btn-cancel { width: 36px; height: 36px; border: 1px solid rgba(239,68,68,0.28); border-radius: 10px; background: transparent; color: #f87171; cursor: pointer; font-size: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-base), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base); }
.btn-cancel:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.44); transform: rotate(90deg); }

body[data-theme="light"] .btn-cancel { border-color: rgba(220,38,38,0.2); color: #dc2626; }
body[data-theme="light"] .btn-cancel:hover { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.3); }

.img-progress-bar { position: relative; width: 100%; max-width: 300px; height: 6px; background: rgba(59,130,246,0.18); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.img-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-glow) 50%, var(--accent-cyan) 100%); animation: progAnim 300s linear forwards; box-shadow: 0 0 12px rgba(96,165,250,0.6); }
.img-progress-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: sheenSweep 1.6s var(--ease-smooth) infinite; }

.suggestion-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.suggestion-chip {
padding: 6px 12px; background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.22);
border-radius: 16px; color: #93c5fd; font-size: 12px; cursor: pointer; font-family: 'DM Sans', sans-serif;
transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-spring);
animation: slideUp 400ms var(--ease-out-expo) both;
}
.suggestion-chip:hover { background: rgba(37,99,235,0.28); color: white; transform: translateY(-2px); }
body[data-theme="light"] .suggestion-chip { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.2); color: #2563eb; }
body[data-theme="light"] .suggestion-chip:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; }

/* ══ FLUIDEZ GENERAL ══ */
#chat, .history-panel-list, .db-list, .db-editor-column { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.msg, .bubble, .option-btn, .historial-item, .btn-new-chat, .btn-delete-chat, .btn-send, .sidebar-toggle { backface-visibility: hidden; transform: translateZ(0); }
.bubble, .option-btn, .historial-item, .btn-new-chat, .btn-delete-chat { transition-timing-function: var(--ease-fluid); }
.bubble:hover, .option-btn:hover, .historial-item:hover, .btn-new-chat:hover, .btn-delete-chat:hover:not(:disabled) { will-change: transform; }

/* ══ LIGHTBOX ══ */
.image-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(2,6,23,0.88); backdrop-filter: blur(14px); }
.image-lightbox.show { display: flex; }
.image-lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 18px; border: 1px solid rgba(147,197,253,0.3); box-shadow: 0 30px 80px rgba(0,0,0,0.65); }
.image-lightbox button { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: #1a1a1a; color: #e2e8f0; cursor: pointer; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-base), transform var(--dur-base) var(--ease-spring); }
.image-lightbox button:hover { background: rgba(239,68,68,0.14); color: #fca5a5; transform: rotate(90deg); }

/* ══ EDICIÓN DE MENSAJES ══ */
.msg.user { position: relative; }
.msg-edit-wrap {
position: absolute; top: 4px; right: calc(100% + 6px);
opacity: 0; transition: opacity 0.2s;
display: flex; align-items: center;
}
.msg.user:hover .msg-edit-wrap { opacity: 1; }
.msg-edit-btn {
background: #1a1a1a;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px; color: #9ca3af;
cursor: pointer; padding: 5px 8px;
font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.msg-edit-btn:hover { background: #242424; color: #e2e8f0; border-color: rgba(255,255,255,0.18); }
body[data-theme="light"] .msg-edit-btn { background: #f4f4f5; border-color: rgba(0,0,0,0.09); color: #6b7280; }
body[data-theme="light"] .msg-edit-btn:hover { background: #e4e4e7; color: #111827; }

/* ==== Four IA unificado: login integrado ==== */
#login-overlay.hidden { display: none !important; }
.login-brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:2px;color:#fff;font-family:'Poppins',sans-serif;transform:translateY(-2px)}.login-brand-lockup .login-brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);font-weight:800;letter-spacing:.08em;color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.28)}.login-brand-lockup span{display:block;font-size:12px;color:#93c5fd;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.login-brand-lockup h1{font-size:28px;line-height:1;margin:2px 0 0;color:#f8fafc}.login-subtitle{color:rgba(226,232,240,.72);font-size:13px;line-height:1.35;margin:0 0 2px}.login-illustration{margin:0 0 14px;padding:14px;border-radius:20px;background:linear-gradient(135deg,rgba(37,99,235,0.24),rgba(124,58,237,0.18));border:1px solid rgba(147,197,253,0.18);box-shadow:0 16px 40px rgba(2,6,23,0.25)}.login-illustration svg{display:block;width:100%;height:auto}.four-ia-login-image{display:block}.login-card{margin-top:0!important}.login-card.db-mode{z-index:10001!important}
@media (min-width: 860px){#login-overlay{justify-content:flex-start!important;padding-left:min(7vw,88px)!important;background-color:#020617!important;background-image:linear-gradient(90deg,rgba(2,6,23,.8)0%,rgba(2,6,23,.6)40%,rgba(2,6,23,.24)100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1100'%3E%3Crect width='1600' height='1100' fill='%23020617'/%3E%3Ccircle cx='1280' cy='220' r='260' fill='%232563eb' fill-opacity='0.28'/%3E%3Ccircle cx='340' cy='940' r='320' fill='%237c3aed' fill-opacity='0.2'/%3E%3Cpath d='M280 740h1040' stroke='%2393c5fd' stroke-opacity='0.16' stroke-width='2'/%3E%3Cpath d='M330 740l120-220 120 120 170-280 180 200 130-140 180 220' fill='none' stroke='%2360a5fa' stroke-opacity='0.36' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1060' y='260' width='220' height='120' rx='20' fill='%230f172a' fill-opacity='0.78'/%3E%3Crect x='1095' y='290' width='150' height='16' rx='8' fill='%2393c5fd' fill-opacity='0.75'/%3E%3Crect x='1095' y='318' width='110' height='12' rx='6' fill='%23bfdbfe' fill-opacity='0.66'/%3E%3C/svg%3E")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}.login-card{width:min(430px,42vw)!important}}
@media (max-width: 859px){#login-overlay{background-image:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.78)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1200'%3E%3Crect width='800' height='1200' fill='%23020617'/%3E%3Ccircle cx='600' cy='250' r='180' fill='%232563eb' fill-opacity='0.22'/%3E%3Ccircle cx='220' cy='960' r='220' fill='%237c3aed' fill-opacity='0.16'/%3E%3Cpath d='M140 780h520' stroke='%2393c5fd' stroke-opacity='0.16' stroke-width='2'/%3E%3Cpath d='M180 780l90-170 90 110 120-200 120 140 90-110 100 180' fill='none' stroke='%2360a5fa' stroke-opacity='0.34' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-size:cover!important;background-position:center!important}.login-card{width:min(420px,100%)!important}}

</style>

<style id="fix-login-single-image-and-google-config">
/* FIX: login.png como imagen de fondo natural, con un overlay suave */
#login-overlay {
background-color: #020617;
background-image:
linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.48) 40%, rgba(2,6,23,.18) 100%), url("login.png");
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
#login-overlay::after { display: none !important; }
#login-overlay::before {
display: none !important;
}
.config-google-icon {
width: 21px;
height: 21px;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 8px rgba(96,165,250,.35));
}
</style>
</head>
<body>


<div id="login-overlay">
<main class="login-card" aria-label="Acceso Four IA">
<section class="login-auth-area">
<div class="login-illustration" aria-hidden="true">
<svg viewBox="0 0 320 180" role="img" aria-label="Ilustración 4TRACK">
<rect x="28" y="36" width="264" height="108" rx="24" fill="rgba(2,6,23,0.58)" stroke="rgba(147,197,253,0.3)" stroke-width="2"/>
<rect x="52" y="58" width="108" height="64" rx="16" fill="rgba(37,99,235,0.35)"/>
<rect x="176" y="58" width="92" height="64" rx="16" fill="rgba(124,58,237,0.28)"/>
<circle cx="84" cy="90" r="12" fill="#e0f2fe"/>
<circle cx="220" cy="90" r="12" fill="#e0f2fe"/>
<path d="M52 112h108" stroke="#93c5fd" stroke-width="4" stroke-linecap="round"/>
<path d="M176 112h92" stroke="#bfdbfe" stroke-width="4" stroke-linecap="round"/>
<path d="M100 34l22 24" stroke="#60a5fa" stroke-width="6" stroke-linecap="round"/>
<path d="M220 34l-16 24" stroke="#a78bfa" stroke-width="6" stroke-linecap="round"/>
</svg>
</div>

<div class="login-brand-lockup">
<span class="login-brand-mark" aria-hidden="true">4T</span>
<div>
<span>Four IA</span>
<h1>Iniciar sesión</h1>
</div>
</div>

<p class="login-subtitle">Ingresa con tu usuario 4TRACK para entrar al asistente.</p>

<input type="text" id="login-name" placeholder="Usuario" maxlength="50" autocomplete="username" />
<input type="password" id="login-password" placeholder="Contraseña" maxlength="80" autocomplete="current-password" />

<label class="remember-option" for="remember-login">
<input type="checkbox" id="remember-login" />
<span class="remember-box" aria-hidden="true"></span>
<span class="remember-copy">
<strong>Recordar acceso</strong>
<span>Guarda este usuario en este navegador.</span>
</span>
</label>

<button type="button" class="btn-login-4track" id="btn-login">Entrar a Four IA</button>
<div class="login-error" id="login-error" role="status" aria-live="polite"></div>
</section>

<section class="login-db-panel">
<button type="button" class="db-close-btn" id="btn-db-close" title="Cerrar panel">×</button>
<h3>Base de datos 4TRACK</h3>
<p>Acceso interno para administrar usuarios, roles, planes y placas.</p>

<div class="db-lock-row">
<input type="password" id="db-admin-password" placeholder="Contraseña admin" autocomplete="current-password" />
<button type="button" class="btn-db-secondary" id="btn-db-unlock">Desbloquear</button>
</div>
<div class="db-feedback" id="db-feedback" role="status" aria-live="polite"></div>

<div class="db-admin-tools" id="db-admin-tools">
<div class="db-dashboard-grid">
<div class="db-editor-column">
<div class="db-panel-card">
<h3>Crear o editar usuario</h3>
<div class="db-form-row">
<input type="text" id="db-user-id" placeholder="Usuario / placa" autocomplete="off" />
<input type="text" id="db-user-password" placeholder="Contraseña" autocomplete="off" />
</div>
<div class="db-form-row" style="margin-top:10px;">
<select id="db-user-plan" class="db-plan-select">
<option value="BASICO">Plan Básico</option>
<option value="SILVER">Plan Silver</option>
<option value="PRO">Plan Pro</option>
</select>
<select id="db-user-role" class="db-plan-select">
<option value="CLIENTE">Cliente general</option>
<option value="FACTURACION">Facturación</option>
<option value="MONITOREO">Monitoreo</option>
<option value="SOPORTE_TECNICO">Soporte técnico</option>
<option value="DISENO_GRAFICO">Diseño gráfico</option>
<option value="PRUEBAS">Pruebas</option>
<option value="ADMIN">Administrador</option>
</select>
</div>
<div class="db-form-row" style="margin-top:10px;">
<input type="text" id="db-user-plate" placeholder="Placa" autocomplete="off" />
<input type="text" id="db-user-client" placeholder="Nombre cliente" autocomplete="off" />
</div>
<div class="db-form-row" style="margin-top:10px;">
<input type="text" id="db-user-vehicle" placeholder="Tipo de vehículo" autocomplete="off" />
</div>
<div class="db-actions" style="margin-top:12px;">
<button type="button" class="btn-db-secondary" id="btn-db-save">Guardar</button>
<button type="button" class="btn-db-danger" id="btn-db-clear">Limpiar</button>
</div>
</div>

<div class="db-bulk-box">
<h3>Importación masiva</h3>
<textarea id="db-bulk-input" placeholder="usuario,contraseña,plan,rol,placa,cliente,tipo_vehiculo"></textarea>
<div class="db-file-row">
<label class="btn-db-secondary" for="db-file-input">Elegir archivo</label>
<input type="file" class="db-file-input" id="db-file-input" accept=".csv,.xlsx,.xls" />
<span class="db-file-name" id="db-file-name">Sin archivo seleccionado</span>
</div>
<div class="db-actions" style="margin-top:10px;">
<button type="button" class="btn-db-secondary" id="btn-db-import">Importar</button>
<button type="button" class="btn-db-secondary" id="btn-db-export">Exportar CSV</button>
</div>
<div class="db-hint">Formato: usuario, contraseña, plan, rol, placa, cliente y tipo de vehículo.</div>
</div>
</div>

<div class="db-table-column">
<div class="db-panel-card">
<div class="db-toolbar">
<input type="text" id="db-search" placeholder="Buscar usuario, placa, cliente o rol..." autocomplete="off" />
<button type="button" class="btn-db-icon-nav" id="btn-db-prev" title="Anterior">‹</button>
<button type="button" class="btn-db-icon-nav" id="btn-db-next" title="Siguiente">›</button>
</div>
<div class="db-summary">
<span id="db-count">0 usuarios</span>
<span id="db-page-info-top">1 / 1</span>
</div>
<div class="db-list-header">
<span>Usuario</span><span>Clave</span><span>Rol</span><span>Plan</span><span>Límite</span><span>Acciones</span>
</div>
<div class="db-list" id="db-user-list"></div>
<div class="db-pagination">
<span class="db-page-info" id="db-page-info-bottom">Pág. 1 de 1</span>
</div>
</div>

<div class="db-panel-card" style="margin-top:12px;">
<div class="db-summary">
<span>GPS real</span>
<button type="button" class="btn-db-secondary" id="btn-sync-gps-real">Sincronizar GPS</button>
</div>
<div class="db-hint" id="db-gps-sync-status">Presiona sincronizar para leer placas reales.</div>
<div id="db-metrics-grid" class="db-metrics-grid"></div>
<div id="db-gps-preview"></div>
<div id="db-logs-list"></div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>


<div id="sidebar-overlay" aria-hidden="true"></div>


<aside id="sidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-video-shell" aria-label="Animación 4TRACK">
<div class="sidebar-brand-placeholder">4T</div>
</div>
</div>
<button class="sidebar-history-launch" id="btn-open-history-panel" type="button" title="Abrir historial de chats">
<span class="sidebar-history-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
<path d="M8 7h8"/>
<path d="M8 11h8"/>
</svg>
</span>
<span>
<strong>Biblioteca de chats</strong>
<small>Abre el historial en una ventana flotante</small>
</span>
</button>

<button class="sidebar-plan-launch" id="btn-open-plans-panel" type="button" title="Ver planes 4TRACK y Four IA">
<span class="sidebar-plan-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.2-5h15.6L21 9"/><path d="M4 9h16v11a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20V9z"/><path d="M8 13h8"/><path d="M9 17h6"/><path d="M7 9v2a2 2 0 0 0 4 0V9"/><path d="M13 9v2a2 2 0 0 0 4 0V9"/></svg></span>
<span>
<strong>Planes</strong>
<small>Básico, Silver y Pro</small>
</span>
</button>
<button class="sidebar-plan-launch" id="btn-open-db-admin" type="button" title="Abrir base de datos" style="display:none; border-color: rgba(74,222,128,0.24);">
<span class="sidebar-plan-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2"/><path d="M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/><path d="M8 11h8"/><path d="M8 15h5"/></svg></span>
<span>
<strong>Base de datos</strong>
<small>Gestión interna admin</small>
</span>
</button>
<div class="sidebar-socials">

<a class="social-link social-youtube" href="https://www.youtube.com/@4TRACKSAS" target="_blank" rel="noopener" title="YouTube 4TRACK SAS">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1C4.5 20.5 12 20.5 12 20.5s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.75 15.5V8.5l6.5 3.5-6.5 3.5z"/></svg>
<span class="social-particles yt-particles"></span>
</a>

<a class="social-link social-instagram" href="https://www.instagram.com/4tracksas/" target="_blank" rel="noopener" title="Instagram 4TRACK SAS">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
<span class="social-particles ig-particles"></span>
</a>

<a class="social-link social-facebook" href="https://www.facebook.com/4tracksas/" target="_blank" rel="noopener" title="Facebook 4TRACK SAS">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
<span class="social-particles fb-particles"></span>
</a>
</div>
<div class="user-card">
<div class="user-avatar" id="user-avatar">?</div>
<div class="user-info">
<span class="user-name" id="user-name-display">Usuario</span>
<span class="user-status">En línea</span>
<span class="user-role" id="user-role-display">Cliente general</span>
<span class="user-plan" id="user-plan-display">Plan Básico</span>
<span class="user-quota" id="user-quota-display">10 mensajes disponibles esta semana</span>
</div>
<button class="logout-btn logout-btn-red" id="btn-logout" title="Cerrar sesión">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2"/>
<path d="M21 12H9"/><path d="m15 8 4 4-4 4"/>
</svg>
</button>
</div>
</aside>

<aside id="collapsed-sidebar-rail" aria-hidden="true">
<a class="collapsed-rail-logo" href="https://gps.4track.com.co/login" target="_blank" rel="noopener" aria-label="Ir al GPS 4TRACK">
<span class="collapsed-rail-logo-mark" aria-hidden="true">4T</span>
</a>
<button class="collapsed-rail-history" id="btn-collapsed-history" type="button" title="Abrir historial de chats" aria-label="Abrir historial de chats">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
<path d="M8 7h8"/>
<path d="M8 11h8"/>
</svg>
</button>

<button class="collapsed-rail-plans" id="btn-collapsed-plans" type="button" title="Ver planes" aria-label="Ver planes 4TRACK y Four IA"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.2-5h15.6L21 9"/><path d="M4 9h16v11a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20V9z"/><path d="M8 13h8"/><path d="M9 17h6"/><path d="M7 9v2a2 2 0 0 0 4 0V9"/><path d="M13 9v2a2 2 0 0 0 4 0V9"/></svg></button>
<div class="collapsed-rail-socials">
<a class="collapsed-rail-link social-youtube" href="https://www.youtube.com/@4TRACKSAS" target="_blank" rel="noopener" title="YouTube 4TRACK SAS">
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1C4.5 20.5 12 20.5 12 20.5s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1C24 15.9 24 12 24 12s0-3.9-.5-5.8zM9.75 15.5V8.5l6.5 3.5-6.5 3.5z"/></svg>
<span class="social-particles yt-particles"></span>
</a>
<a class="collapsed-rail-link social-instagram" href="https://www.instagram.com/4tracksas/" target="_blank" rel="noopener" title="Instagram 4TRACK SAS">
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
<span class="social-particles ig-particles"></span>
</a>
<a class="collapsed-rail-link social-facebook" href="https://www.facebook.com/4tracksas/" target="_blank" rel="noopener" title="Facebook 4TRACK SAS">
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
<span class="social-particles fb-particles"></span>
</a>
</div>
<div class="collapsed-rail-avatar" id="collapsed-user-avatar" aria-label="Perfil del usuario">?</div>
</aside>


<main id="main">
<header id="header">
<div class="header-left">
<button class="sidebar-toggle" id="btn-sidebar-toggle" type="button" title="Ocultar barra lateral" aria-label="Ocultar barra lateral" aria-expanded="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6"/>
</svg>
</button>

<a class="header-brand-link" href="https://gps.4track.com.co/login" target="_blank" rel="noopener" aria-label="Ir al GPS 4TRACK">
<h1 class="title">4TRACK-SAS</h1>
<span class="header-brand-badge" aria-hidden="true">4T</span>
</a>

<a class="header-visto-link" href="https://vistogps.com/login" target="_blank" rel="noopener" aria-label="Ir a Visto GPS">
<span class="header-visto-text">Visto</span>
</a>
</div>
<div class="header-right">
<span class="view-badge" id="view-badge">Viendo historial (solo lectura)</span>
<button class="theme-toggle" id="btn-ai-config" type="button" title="Configurar IA" aria-label="Configurar IA">
<img class="config-google-icon" src="https://www.google.com/s2/favicons?domain=google.com&sz=64" alt="Configuración" />
</button>
<button class="theme-toggle" id="btn-theme-toggle" type="button" title="Activar modo claro" aria-label="Activar modo claro">
<span class="theme-toggle-icon" id="theme-toggle-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4.2"/>
<path d="M12 2.5v2.2"/><path d="M12 19.3v2.2"/><path d="M4.9 4.9l1.6 1.6"/><path d="M17.5 17.5l1.6 1.6"/><path d="M2.5 12h2.2"/><path d="M19.3 12h2.2"/><path d="M4.9 19.1l1.6-1.6"/><path d="M17.5 6.5l1.6-1.6"/>
</svg>
</span>
</button>
</div>
</header>
<div id="welcome-center">
<h1>Hola, <span class="welcome-name" id="welcome-name">Usuario</span></h1>
<p id="welcome-copy">¿En qué puedo ayudarte con tu sistema 4Track hoy?</p>
</div>
<div id="chat"></div>
<div id="selection-bar">
<div id="options-container"></div>
<div id="input-row" class="input-row hidden-input">
<input type="text" id="user-input" placeholder="Ingresa tu ID" maxlength="50" autocomplete="off" />
<button id="btn-send" class="btn-send" title="Enviar">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
</svg>
</button>
<button id="btn-cancel-input" class="btn-cancel" title="Cancelar">✕</button>
</div>
<div class="free-chat-row">
<input type="text" id="free-input" placeholder="Pregúntame lo que sea o pide una imagen..." maxlength="200" autocomplete="off" />
<button id="btn-free-send" class="btn-send" title="Enviar">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
</svg>
</button>
</div>
</div>
</main>


<div class="plans-panel-overlay" id="plans-panel-overlay" aria-hidden="true" style="display:none;">
<section class="plans-panel" id="plans-panel" aria-labelledby="plans-panel-title">
<div class="plans-panel-header">
<div>
<span class="plans-panel-kicker">Planes 4TRACK + Four IA</span>
<h2 id="plans-panel-title">Características de cada plan</h2>
<p>Control GPS corporativo y límites de uso de Four IA.</p>
</div>
<button class="plans-panel-close" id="btn-close-plans-panel" type="button" title="Cerrar planes" aria-label="Cerrar planes">×</button>
</div>
<div class="plans-grid">
<article class="pricing-card plan-basic-card">
<div class="pricing-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3 6 6 .9-4.5 4.3 1.1 6.1L12 16.4 6.4 19.3l1.1-6.1L3 8.9 9 8l3-6z"/></svg></div>
<h3>Básico</h3>
<p>Control inicial de vehículo</p>
<div class="price-block"><span>Mes</span><strong>$27.990</strong></div>
<div class="annual-block"><span>Anual</span><strong>$279.900</strong><small>2 meses gratis</small></div>
<ul>
<li>Monitoreo GPS en tiempo real.</li>
<li>Cobertura esencial para control básico.</li>
<li>Ideal para seguridad inicial de tu vehículo.</li>
<li>Four IA: 10 mensajes por semana.</li>
<li>Consultas esenciales de soporte, facturación y monitoreo.</li>
</ul>
</article>
<article class="pricing-card plan-silver-card">
<div class="pricing-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 4.8 5.3.8-3.8 3.7.9 5.2L12 14l-4.8 2.5.9-5.2-3.8-3.7 5.3-.8L12 2z"/><path d="M19 15l2 2 1-4"/></svg></div>
<h3>Silver</h3>
<p>Mayor cobertura y funciones</p>
<div class="price-block"><span>Mes</span><strong>$39.990</strong></div>
<div class="annual-block"><span>Anual</span><strong>$399.900</strong><small>2 meses gratis</small></div>
<ul>
<li>Mayor cobertura de monitoreo.</li>
<li>Funciones avanzadas de seguimiento.</li>
<li>Más control y tranquilidad en cada recorrido.</li>
<li>Four IA: 20 mensajes por semana.</li>
<li>Más herramientas de ayuda que el plan Básico.</li>
</ul>
</article>
<article class="pricing-card plan-pro-card">
<div class="pricing-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 16l4-10 4 10"/><path d="M7 12h4"/><path d="M16 6h3a3 3 0 0 1 0 6h-3z"/><path d="M16 12h3l3 4"/></svg></div>
<h3>Pro</h3>
<p>Cobertura total y herramientas activas</p>
<div class="price-block"><span>Mes</span><strong>$51.990</strong></div>
<div class="annual-block"><span>Anual</span><strong>$519.900</strong><small>2 meses gratis</small></div>
<ul>
<li>Cobertura total incluida.</li>
<li>Todas las herramientas activas.</li>
<li>Máxima protección y control 24/7 con 4Track GPS.</li>
<li>Four IA: mensajes ilimitados.</li>
<li>Atención prioritaria y respuestas más completas.</li>
</ul>
</article>
</div>
</section>
</div>


<div class="history-panel-overlay" id="history-panel-overlay" aria-hidden="true" style="display:none;">
<section class="history-panel" id="history-panel" aria-labelledby="history-panel-title">
<div class="history-panel-header">
<div class="history-panel-title-wrap">
<div>
<h2 id="history-panel-title">Chats</h2>
<p>Explora, abre o elimina conversaciones con el estilo de Four IA.</p>
</div>
</div>
<div class="history-panel-actions">
<button class="btn-new-chat" id="btn-new-chat" type="button">＋ Nuevo Chat</button>
<button class="history-panel-close" id="btn-close-history-panel" type="button" title="Cerrar historial">×</button>
</div>
</div>
<div class="history-panel-search">
<input type="text" id="history-search" placeholder="Buscar chats..." autocomplete="off" />
</div>
<div class="history-panel-list" id="historial-list">
<div class="historial-empty">Aún no hay chats guardados.</div>
</div>
</section>
</div>


<div id="api-admin-panel" class="api-admin-overlay" aria-hidden="true" style="display:none;">
<div class="api-admin-card">
<div class="api-admin-header">
<h2>⚙️ Configuración de APIs</h2>
<p>Solo visible para el administrador principal. Las API keys se guardan localmente en este navegador.</p>
<button type="button" id="btn-close-api-panel" class="api-close-btn" title="Cerrar">×</button>
</div>


<div class="api-section">
<div class="api-section-title">
<span class="api-badge zammad-badge">Zammad</span>
Soporte y tickets
</div>
<p class="api-section-desc">Con esta API key, el chat podrá consultar tickets, clientes, artículos y toda la base de Zammad. El usuario puede escribir lo que quiera y Four IA responderá usando los datos reales.</p>
<div class="api-field-row">
<input type="text" id="api-zammad-url" placeholder="https://helpdesk.4track.com.co/" autocomplete="off" />
</div>
<div class="api-field-row">
<input type="password" id="api-zammad-key" placeholder="API Key de Zammad (Token de acceso)" autocomplete="off" />
<button type="button" class="btn-api-test" id="btn-test-zammad">Probar</button>
</div>
<div class="api-feedback" id="api-zammad-feedback"></div>
<div class="api-switch-row">
<label class="api-switch">
<input type="checkbox" id="api-zammad-enabled" />
<span class="api-switch-track"></span>
</label>
<span>Activar integración Zammad</span>
</div>
</div>


<div class="api-section">
<div class="api-section-title">
<span class="api-badge factura-badge">FacturaScripts</span>
Facturación y clientes
</div>
<p class="api-section-desc">J4ZjcBbEzMeHirXTcp2xgjkjo</p>
<div class="api-field-row">
<input type="text" id="api-factura-url" placeholder="https://pos.4track.com.co/" autocomplete="off" />
</div>
<div class="api-field-row">
<input type="password" id="api-factura-key" placeholder="J4ZjcBbEzMeHirXTcp2xgjkjo" autocomplete="off" />
<button type="button" class="btn-api-test" id="btn-test-factura">Probar</button>
</div>
<div class="api-feedback" id="api-factura-feedback"></div>
<div class="api-switch-row">
<label class="api-switch">
<input type="checkbox" id="api-factura-enabled" />
<span class="api-switch-track"></span>
</label>
<span>Activar integración FacturaScripts</span>
</div>
</div>

<div class="api-admin-footer">
<button type="button" class="btn-api-save" id="btn-save-apis">💾 Guardar configuración</button>
<div class="api-feedback" id="api-save-feedback"></div>
</div>
</div>
</div>
<div class="image-lightbox" id="image-lightbox" aria-hidden="true">
<button type="button" id="btn-close-lightbox" title="Cerrar">×</button>
<img id="lightbox-img" alt="Vista ampliada" />
</div>



<script id="database-js-inline">
/* ═══════════════════════════════════════════════════════════════
database.js — Four IA / 4TRACK
Base de datos de usuarios, roles, planes y cuotas de mensajes.
Importar ANTES de mensajes.js y del script principal.
═══════════════════════════════════════════════════════════════ */

/* ─── CONSTANTES GLOBALES ─── */
const ADMIN_USERNAME = '4TRACK-ADMIN';
const STORAGE_USER = 'four_ia_user';
const STORAGE_CURRENT = 'four_ia_current_chat';
const STORAGE_HISTORY = 'four_ia_history';
const STORAGE_DB = 'four_ia_user_database';
const STORAGE_REMEMBERED_LOGIN = 'four_ia_remembered_login';
const STORAGE_SIDEBAR_COLLAPSED= 'four_ia_sidebar_collapsed';
const GPS_CAPTURE_INTERVAL_MS = 10000;
const SUSPENSION_DAYS = 7;
const DB_PAGE_SIZE = 5;

/* ─── CONFIGURACIÓN DE PLANES ─── */
const PLAN_CONFIG = {
BASICO: {
key: 'BASICO',
label: 'Básico',
weeklyLimit: 10,
rank: 0,
badgeClass: 'plan-basico',
summary: 'Menos opciones y 10 mensajes por semana.'
},
SILVER: {
key: 'SILVER',
label: 'Silver',
weeklyLimit: 20,
rank: 1,
badgeClass: 'plan-silver',
summary: 'Más funciones y 20 mensajes por semana.'
},
PRO: {
key: 'PRO',
label: 'Pro',
weeklyLimit: Infinity,
rank: 2,
badgeClass: 'plan-pro',
summary: 'La experiencia más completa y mensajes ilimitados.'
}
};
const PLAN_ORDER = ['BASICO', 'SILVER', 'PRO'];

/* ─── CONFIGURACIÓN DE ROLES ─── */
const ROLE_CONFIG = {
CLIENTE: {
key: 'CLIENTE',
label: 'Cliente general',
staff: false,
admin: false,
welcome: '¿En qué puedo ayudarte con tu sistema 4Track hoy?',
quotaText: 'Mensajes según el plan asignado.'
},
FACTURACION: {
key: 'FACTURACION',
label: 'Facturación',
staff: true,
admin: true,
welcome: 'Modo Facturación activo. Puedes revisar pagos, cartera, reactivaciones y mensajes de cobro.',
quotaText: 'Empleado admin de Facturación: mensajes ilimitados.'
},
MONITOREO: {
key: 'MONITOREO',
label: 'Monitoreo',
staff: true,
admin: true,
welcome: 'Modo Monitoreo activo. Puedes apoyar alertas, eventos, seguimiento 24/7 y casos críticos.',
quotaText: 'Empleado admin de Monitoreo: mensajes ilimitados.'
},
SOPORTE_TECNICO: {
key: 'SOPORTE_TECNICO',
label: 'Soporte técnico',
staff: true,
admin: true,
welcome: 'Modo Soporte Técnico activo. Puedes diagnosticar GPS offline, señal, plataforma y guías de solución.',
quotaText: 'Empleado admin de Soporte Técnico: mensajes ilimitados.'
},
DISENO_GRAFICO: {
key: 'DISENO_GRAFICO',
label: 'Diseño gráfico',
staff: true,
admin: true,
welcome: 'Modo Diseño Gráfico activo. Puedes crear copys, ideas visuales, campañas e imágenes para 4TRACK.',
quotaText: 'Empleado admin de Diseño Gráfico: mensajes ilimitados.'
},
PRUEBAS: {
key: 'PRUEBAS',
label: 'Pruebas',
staff: true,
admin: true,
welcome: 'Modo Pruebas activo. Puedes validar respuestas, flujos, roles y comportamiento de la IA.',
quotaText: 'Empleado admin de Pruebas: mensajes ilimitados.'
},
ADMIN: {
key: 'ADMIN',
label: 'Administrador',
staff: true,
admin: true,
welcome: 'Modo Administrador activo. Tienes acceso completo a roles, usuarios, pruebas y configuración.',
quotaText: 'Administrador principal: mensajes ilimitados.'
}
};

/**
* Usuarios internos por defecto.
* Edita username y password para cada empleado real.
* Todos tienen rol admin y mensajes ilimitados.
*/
const DEFAULT_ROLE_USERS = [
{ role: 'FACTURACION', username: 'USUARIO_FACTURACION', password: 'CONTRASENA_FACTURACION', plan: 'PRO' },
{ role: 'MONITOREO', username: 'USUARIO_MONITOREO', password: 'CONTRASENA_MONITOREO', plan: 'PRO' },
{ role: 'SOPORTE_TECNICO',username: 'USUARIO_SOPORTE', password: 'CONTRASENA_SOPORTE', plan: 'PRO' },
{ role: 'DISENO_GRAFICO', username: 'USUARIO_DISENO', password: 'CONTRASENA_DISENO', plan: 'PRO' },
{ role: 'PRUEBAS', username: 'USUARIO_PRUEBAS', password: 'CONTRASENA_PRUEBAS', plan: 'PRO' }
];

/* ═══════════════════════════════════════════════════════════════
HELPERS — normalización
═══════════════════════════════════════════════════════════════ */

function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, c =>
({ '&':'&','<':'<','>':'>','"':'"',"'":''' }[c])
);
}

function normalizeUserId(v) {
return String(v || '').trim().toUpperCase();
}

function normalizePlanKey(value) {
const key = String(value || '').trim().toUpperCase();
return PLAN_CONFIG[key] ? key : 'BASICO';
}

function normalizeRoleKey(value) {
const raw = String(value || '').trim().toUpperCase()
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
.replace(/[\s-]+/g, '_');
const aliases = {
FACTURACION: 'FACTURACION',
MONITOREO: 'MONITOREO',
SOPORTE: 'SOPORTE_TECNICO',
SOPORTE_TECNICO:'SOPORTE_TECNICO',
TECNICO: 'SOPORTE_TECNICO',
DISENO: 'DISENO_GRAFICO',
DISENO_GRAFICO: 'DISENO_GRAFICO',
DISEÑO: 'DISENO_GRAFICO',
PRUEBA: 'PRUEBAS',
PRUEBAS: 'PRUEBAS',
ADMIN: 'ADMIN',
ADMINISTRADOR: 'ADMIN',
CLIENTE: 'CLIENTE',
CLIENTE_GENERAL:'CLIENTE'
};
return ROLE_CONFIG[aliases[raw] || raw] ? (aliases[raw] || raw) : 'CLIENTE';
}

function getWeekMs() {
return SUSPENSION_DAYS * 24 * 60 * 60 * 1000;
}

/* ═══════════════════════════════════════════════════════════════
GETTERS DE PLAN
═══════════════════════════════════════════════════════════════ */

function getPlanData(value) { return PLAN_CONFIG[normalizePlanKey(value)]; }
function getPlanRank(value) { return getPlanData(value).rank; }
function hasPlanAccess(userPlan, requiredPlan = 'BASICO') {
return getPlanRank(userPlan) >= getPlanRank(requiredPlan);
}
function getCurrentPlanKey() { return normalizePlanKey(getCurrentDatabaseUser()?.plan || 'BASICO'); }
function isCurrentPlanPro() { return getCurrentPlanKey() === 'PRO'; }
function formatPlanLimit(planKey) {
const plan = getPlanData(planKey);
return Number.isFinite(plan.weeklyLimit) ? `${plan.weeklyLimit} mensajes/semana` : 'Mensajes infinitos';
}

/* ═══════════════════════════════════════════════════════════════
GETTERS DE ROL
═══════════════════════════════════════════════════════════════ */

function getRoleData(value) { return ROLE_CONFIG[normalizeRoleKey(value)]; }
function getRoleLabel(value) { return getRoleData(value).label; }
function getCurrentRoleKey() { return normalizeRoleKey(getCurrentDatabaseUser()?.role || 'CLIENTE'); }
function isAdminRole(role) { return Boolean(getRoleData(role)?.admin); }
function isStaffRole(role) { return Boolean(getRoleData(role)?.staff); }
function isCurrentStaffAdmin() { return isAdminRole(getCurrentRoleKey()); }
function getRoleWelcomeText(role) { return getRoleData(role)?.welcome || ROLE_CONFIG.CLIENTE.welcome; }
function getRoleQuotaText(role) { return getRoleData(role)?.quotaText || ROLE_CONFIG.CLIENTE.quotaText; }

/* ═══════════════════════════════════════════════════════════════
FORMATO UTILITARIO
═══════════════════════════════════════════════════════════════ */

function formatCountdown(ms) {
const totalSeconds = Math.max(0, Math.floor(ms / 1000));
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
return `${days}d ${String(hours).padStart(2,'0')}h ${String(minutes).padStart(2,'0')}m ${String(seconds).padStart(2,'0')}s`;
}

function normalizePlate(value) {
return String(value || '').trim().toUpperCase().replace(/\s+/g, ' ');
}

function normalizeClientName(value, fallback = '') {
const v = String(value || '').trim();
return v || String(fallback || '').trim() || 'Cliente 4TRACK';
}

function normalizeVehicleType(value) {
const raw = String(value || '').trim();
return raw || 'Vehículo';
}

function makeGpsPlaceholder(user, captureNumber = 1) {
const plate = normalizePlate(user?.plate || user?.username || 'SIN PLACA');
const client = normalizeClientName(user?.clientName, user?.username);
const plan = getPlanData(user?.plan || 'BASICO').label;
const type = normalizeVehicleType(user?.vehicleType);
const when = new Date().toLocaleString('es-CO');
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="720" height="405" viewBox="0 0 720 405">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#07111f"/><stop offset="1" stop-color="#020617"/></linearGradient>
<radialGradient id="r" cx="50%" cy="42%" r="70%"><stop stop-color="#1d4ed8" stop-opacity=".65"/><stop offset="1" stop-color="#020617" stop-opacity="0"/></radialGradient>
</defs>
<rect width="720" height="405" rx="28" fill="url(#g)"/>
<rect width="720" height="405" rx="28" fill="url(#r)"/>
<path d="M0 294 C120 232 202 314 336 248 C459 188 538 243 720 174" fill="none" stroke="#60a5fa" stroke-opacity=".28" stroke-width="7"/>
<path d="M0 332 C142 276 210 360 370 292 C512 232 590 278 720 230" fill="none" stroke="#93c5fd" stroke-opacity=".18" stroke-width="4"/>
<circle cx="360" cy="216" r="46" fill="#2563eb" opacity=".92"/>
<circle cx="360" cy="216" r="76" fill="none" stroke="#60a5fa" stroke-opacity=".28" stroke-width="4"/>
<path d="M360 171c-25 0-45 20-45 45 0 34 45 76 45 76s45-42 45-76c0-25-20-45-45-45z" fill="#ef4444"/>
<circle cx="360" cy="215" r="15" fill="#fff"/>
<text x="34" y="52" fill="#93c5fd" font-family="Arial, sans-serif" font-size="22" font-weight="700">GPS 4TRACK · captura ${captureNumber}</text>
<text x="34" y="92" fill="#ffffff" font-family="Arial, sans-serif" font-size="34" font-weight="800">${escapeHtml(plate)}</text>
<text x="34" y="132" fill="#dbeafe" font-family="Arial, sans-serif" font-size="22">${escapeHtml(client)}</text>
<text x="34" y="366" fill="#cbd5e1" font-family="Arial, sans-serif" font-size="18">Plan: ${escapeHtml(plan)} · Tipo: ${escapeHtml(type)} · ${escapeHtml(when)}</text>
</svg>`;
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

/* ═══════════════════════════════════════════════════════════════
STORAGE — localStorage wrappers
═══════════════════════════════════════════════════════════════ */

const getUser = () => localStorage.getItem(STORAGE_USER);
const setUser = n => localStorage.setItem(STORAGE_USER, n);
const clearUser = () => localStorage.removeItem(STORAGE_USER);

const getSidebarCollapsed = () => localStorage.getItem(STORAGE_SIDEBAR_COLLAPSED) === '1';
const setSidebarCollapsed = value => localStorage.setItem(STORAGE_SIDEBAR_COLLAPSED, value ? '1' : '0');

const getRememberedLogin = () => {
try {
const saved = JSON.parse(localStorage.getItem(STORAGE_REMEMBERED_LOGIN));
return saved && typeof saved === 'object' ? saved : null;
} catch { return null; }
};
const setRememberedLogin = (username, password) =>
localStorage.setItem(STORAGE_REMEMBERED_LOGIN, JSON.stringify({
username: String(username || '').trim(),
password: String(password || '')
}));
const clearRememberedLogin = () => localStorage.removeItem(STORAGE_REMEMBERED_LOGIN);

const getCurrent = () => { try { return JSON.parse(localStorage.getItem(STORAGE_CURRENT)) || []; } catch { return []; } };
const setCurrent = c => localStorage.setItem(STORAGE_CURRENT, JSON.stringify(c));
const clearCurrent= () => localStorage.removeItem(STORAGE_CURRENT);

const getHistory = () => { try { return JSON.parse(localStorage.getItem(STORAGE_HISTORY)) || []; } catch { return []; } };
const setHistory = h => localStorage.setItem(STORAGE_HISTORY, JSON.stringify(h));

const getDatabase = () => {
try {
const raw = JSON.parse(localStorage.getItem(STORAGE_DB));
const users = raw && Array.isArray(raw.users)
? raw.users.map(ensureDatabaseUserShape)
: [];
return { users };
} catch { return { users: [] }; }
};
const setDatabase = db => localStorage.setItem(STORAGE_DB, JSON.stringify(db));

/* ═══════════════════════════════════════════════════════════════
MODELO DE USUARIO — normalización y ventana de uso
═══════════════════════════════════════════════════════════════ */

function ensureDatabaseUserShape(user) {
const nowIso = new Date().toISOString();
const usernameKey= normalizeUserId(user?.username);
const roleKey = usernameKey === ADMIN_USERNAME ? 'ADMIN' : normalizeRoleKey(user?.role || 'CLIENTE');
const planKey = isAdminRole(roleKey) ? 'PRO' : normalizePlanKey(user?.plan || 'BASICO');
const usage = user && typeof user.usage === 'object' && user.usage ? user.usage : {};
const normalized = {
username : usernameKey,
password : String(user?.password || ''),
plan : planKey,
role : roleKey,
clientName: normalizeClientName(user?.clientName, usernameKey),
plate : normalizePlate(user?.plate || usernameKey),
vehicleType: normalizeVehicleType(user?.vehicleType),
gpsSnapshot: String(user?.gpsSnapshot || ''),
gpsLastSyncAt: user?.gpsLastSyncAt || null,
usage : {
windowStartedAt : usage.windowStartedAt || nowIso,
count : Number.isFinite(usage.count) ? usage.count : 0,
suspendedUntil : usage.suspendedUntil || null
},
createdAt : user?.createdAt || nowIso,
updatedAt : user?.updatedAt || nowIso
};
return refreshUsageWindow(normalized);
}

function refreshUsageWindow(user) {
const normalized = { ...user, usage: { ...(user.usage || {}) } };
const plan = getPlanData(normalized.plan);
const now = Date.now();
const startedAt = normalized.usage.windowStartedAt
? new Date(normalized.usage.windowStartedAt).getTime() : now;
const suspendedUntil = normalized.usage.suspendedUntil
? new Date(normalized.usage.suspendedUntil

👤 You

# PROMPT MAESTRO — REFACTORIZACIÓN COMPLETA DE FOUR-IA

## Objetivo

Realiza una actualización completa del proyecto Four-IA manteniendo toda la funcionalidad existente que sea útil.

NO crear un proyecto desde cero.

Modificar únicamente donde sea necesario.

Todo debe integrarse sobre el código actual respetando la arquitectura existente.

Antes de modificar cualquier archivo analiza completamente HTML, CSS, JavaScript y la base de datos para evitar romper funciones.

Eliminar únicamente código muerto, funciones repetidas o sistemas obsoletos.

---

# Diseño General

Transformar la aplicación para que tenga una apariencia similar a las mejores IA actuales.

Inspiración:

* ChatGPT
* Claude
* Grok
* Perplexity
* DeepSeek

Pero con identidad propia.

El diseño debe verse moderno, premium, limpio y extremadamente fluido.

Todo debe estar completamente responsive.

---

# Tema

Eliminar completamente:

* Tema claro
* Botón cambiar tema
* Variables CSS del tema claro
* Código JavaScript relacionado
* CSS sin utilizar

La aplicación será exclusivamente:

Modo Negro Premium.

Colores:

Fondo principal

#000000

Paneles

#070707

Tarjetas

#101010

Hover

#161616

Bordes

#232323

Texto

#FFFFFF

Texto secundario

#A1A1AA

Azul principal

#2563EB

Azul secundario

#3B82F6

No debe existir ningún fondo blanco.

---

# Sidebar

Modificar completamente la barra lateral.

En la parte superior colocar:

sidebar-robot.png

Debe verse como el logo principal.

Cuando la barra lateral se contraiga automáticamente reemplazar esa imagen por:

logo.png

La transición debe ser animada.

No debe parpadear.

Agregar efectos suaves.

---

# Login

Modificar completamente la pantalla de inicio.

En el lado derecho colocar:

login.png

Debe ocupar aproximadamente el 45% del espacio.

La imagen debe adaptarse automáticamente.

Agregar una animación de entrada.

---

# Botón Visto

Reemplazar el icono actual.

Usar:

visto.png

Debe conservar el tamaño pequeño.

---

# Base de Datos

Reestructurar completamente.

Eliminar tablas innecesarias.

Eliminar columnas duplicadas.

Optimizar índices.

Normalizar la estructura.

Solo existirán dos roles:

Administrador

Cliente

Eliminar cualquier otro rol.

Agregar:

Fecha de creación

Último acceso

Modelo seleccionado

Créditos

Mensajes enviados

Estado

---

# Sistema de Modelos

Eliminar completamente cualquier referencia a:

Ollama

Eliminar:

Frontend

Backend

Configuración

Funciones

Código muerto

Dependencias

No debe quedar ninguna línea relacionada.

---

Crear un selector de modelos moderno junto al cuadro donde el usuario escribe.

Debe tener tarjetas elegantes.

Los modelos serán:

---

RumBix

Modelo rápido.

No utiliza internet.

Responde únicamente usando su conocimiento interno.

Ideal para preguntas normales.

Créditos:

20

Cada mensaje consume:

1 crédito

Debe responder muy rápido.

---

AeroNaut

No utiliza Gemini.

No utiliza API Keys.

Debe buscar información pública directamente desde Google mediante búsqueda pública o scraping permitido.

Las respuestas serán más resumidas.

Créditos:

25

Cada mensaje consume:

0.5 créditos.

Debe indicar la fuente encontrada.

---

4-Gixur 1

Modelo Premium.

Créditos infinitos.

Combina:

Google

Wikipedia

Información interna

Debe responder utilizando múltiples fuentes.

Siempre entregar:

Respuesta resumida

Información detallada

Fuentes consultadas

Comparación entre fuentes

Ventajas

Desventajas

Debe ser el modelo más inteligente.

---

# Sistema de Créditos

Crear un sistema profesional.

Cada usuario almacenará:

Créditos

Modelo activo

Historial de consumo

Fecha del último consumo

Mensajes enviados

Cuando un usuario no tenga créditos:

Bloquear envío.

Mostrar advertencia elegante.

Ofrecer cambiar de modelo.

Mostrar una barra visual indicando créditos restantes.

---

# Chat

Mejorar completamente.

Agregar:

Editar mensajes

Eliminar mensajes

Copiar respuesta

Regenerar respuesta

Detener generación

Markdown

Tablas

Bloques de código

Resaltado de sintaxis

Contador de palabras

Contador de caracteres

Tiempo de respuesta

Hora de cada mensaje

Animaciones suaves

Carga progresiva

Scroll inteligente

Respuesta en streaming

Indicador "Pensando..."

---

# Historial

Mejorar completamente.

Agregar:

Buscar conversaciones

Renombrar

Eliminar

Anclar

Duplicar

Exportar

Importar

Ordenar

Agrupar por fecha

---

# Iconos

Eliminar todos los iconos actuales.

Unificar el diseño.

Todos deben pertenecer a una misma librería.

Preferiblemente:

Lucide

o

Heroicons

Todos:

Minimalistas

Modernos

Consistentes

Animados mediante CSS.

---

# Rendimiento

Optimizar completamente.

Eliminar:

Funciones duplicadas

Variables sin usar

CSS muerto

JavaScript muerto

HTML repetido

Imports innecesarios

Optimizar:

DOM

Eventos

Animaciones

Consultas

Renderizado

Memoria

---

# Arquitectura

Separar correctamente:

Componentes

Funciones

Utilidades

Configuración

Constantes

Base de datos

Servicios

Evitar funciones gigantes.

Documentar funciones importantes.

---

# Experiencia de Usuario

Agregar:

Toast modernos

Animaciones fluidas

Microinteracciones

Efectos hover

Transiciones suaves

Indicadores de carga

Estados vacíos

Estados de error

Mensajes elegantes

Atajos de teclado

Accesibilidad

Lazy Loading

Autoguardado

---

# Compatibilidad

Debe funcionar correctamente en:

Chrome

Edge

Firefox

Opera

Safari

Computador

Tablet

Móvil

---

# Restricciones

NO eliminar funcionalidades útiles.

NO romper la lógica existente.

NO modificar nombres de imágenes proporcionadas.

NO cambiar la estructura principal si no es necesario.

Analizar primero cada archivo antes de modificarlo.

Mantener compatibilidad con el código existente.

Eliminar únicamente código muerto o reemplazado.

---

# Resultado esperado

El resultado debe ser una versión completamente renovada de Four-IA con apariencia profesional, rendimiento optimizado, código limpio, arquitectura modular, sistema de créditos, modelos inteligentes, base de datos optimizada, interfaz moderna y una experiencia de usuario comparable a las mejores plataformas de inteligencia artificial actuales, manteniendo compatibilidad con el proyecto existente y evitando romper funcionalidades.

🎬 Video Preview