/* ═══════════════════════════════════════════════════════════════════════════ STYLE.CSS · Sistema de diseño de IAINDEX.APP — by Buzzora Media --------------------------------------------------------------------------- Hoja de estilos real y consolidada, unión EXACTA de todos los mockups aprobados (panel, login, home, tareas, admin, alertas, sitios, discover, indexación, quickwins, analista, cuenta). Sin duplicados. Las páginas PHP (index.php, panel.php, sitios.php, etc.) linkean este archivo y deben verse idénticas a los mockups. NO inventar componentes ni cambiar colores/medidas: se replica el sistema tal cual. ÍNDICE 1. Fonts (Google Fonts, @import) 2. Reset 3. Tokens (:root) 4. Base (html, body, grano, grilla, haze, scrollbar) 5. Sidebar 6. Main + Topbar 7. Contenido (.dash) + Cabecera editorial (hero) 8. KPIs 9. Section-title + Card-block 10. Foco / Alertas (foco-*, filtros, chips, acciones) 11. Tags y barras de color 12. Tabla La Red (tabla-red, td-*, semáforo, idx-bar) 13. Barra de herramientas (Sitios) 14. Grid inferior + Actividad 15. Analista (widget panel) 16. Home (splash) 17. Login 18. Cuenta (datos, aviso, form) 19. Kanban (Tareas) 20. Admin (conexiones, campos, umbrales, switch) 21. Indexación (push, cuota, avisos) 22. Discover (SERP · Top Stories) 23. Quick wins (query, pos, capa SERP) 24. Analista (chat completo) 25. Animaciones (pulse, fadeUp, fillBar) ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1 · FONTS ═══ */ /* Se cargan por @import para que el CSS sea autosuficiente. (Los mockups también las traen por en el ; con cualquiera alcanza.) */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oxanium:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); /* ═══ 2 · RESET ═══ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ═══ 3 · TOKENS (:root) ═══ */ :root { --em: #1DB87A; --em-l: #3FD99A; --em-dim: rgba(29,184,122,0.10); --em-b: rgba(29,184,122,0.20); --black: #060809; --sidebar: #080C0A; --panel: #0C100E; --card: #0F1410; --card2: #141A12; --white: #EEF2F0; --wd: rgba(238,242,240,0.45); --wf: rgba(238,242,240,0.07); --wff: rgba(238,242,240,0.035); --red: #E84040; --red-dim: rgba(232,64,64,0.10); --amber: #E8A030; --amber-dim: rgba(232,160,48,0.10); --blue: #4090E8; --blue-dim: rgba(64,144,232,0.10); --sidebar-w: 200px; } /* ═══ 4 · BASE ═══ */ html, body { height: 100%; overflow: hidden; } body { background: var(--black); color: var(--white); font-family: 'Oxanium', sans-serif; font-weight: 300; display: flex; } /* GRANO (ruido fractal sobre todo el layout) */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } /* GRILLA DE FONDO (home / login) */ .grid-bg { position: fixed; inset: 0; background-image: linear-gradient(rgba(29,184,122,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(29,184,122,0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; } /* HAZE ESMERALDA (detrás del logo gigante, home) */ .haze { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 720px; height: 720px; background: radial-gradient(circle, rgba(29,184,122,0.06) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--wf); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--em-b); } /* ═══ 5 · SIDEBAR ═══ */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--sidebar); border-right: 1px solid var(--wf); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } .sb-logo { padding: 20px 18px 16px; border-bottom: 1px solid var(--wf); } .sb-logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: var(--white); line-height: 1; display: flex; align-items: center; gap: 8px; } .sb-logo-text span { color: var(--em); } .sb-dot { width: 6px; height: 6px; background: var(--em); border-radius: 50%; animation: pulse 2.5s ease infinite; } .sb-logo-sub { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 3px; color: var(--wd); text-transform: uppercase; margin-top: 6px; } .sb-nav { padding: 12px 0; flex: 1; } .sb-section-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 3px; color: rgba(238,242,240,0.2); text-transform: uppercase; padding: 10px 18px 6px; } .sb-item { display: flex; align-items: center; gap: 11px; padding: 9px 18px; cursor: pointer; transition: background 0.15s; font-size: 13px; color: var(--wd); border-left: 2px solid transparent; } .sb-item:hover { background: var(--wff); color: var(--white); } .sb-item.active { background: var(--em-dim); border-left-color: var(--em); color: var(--white); } .sb-icon { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; } .sb-badge { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 9px; padding: 2px 6px; border-radius: 2px; } .badge-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(232,64,64,0.2); } .badge-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(232,160,48,0.2); } .badge-em { background: var(--em-dim); color: var(--em); border: 1px solid var(--em-b); } .sb-sep { height: 1px; background: var(--wf); margin: 6px 0; } /* ESTADO DEL SISTEMA (footer sidebar) */ .sb-bottom { padding: 14px 18px; border-top: 1px solid var(--wf); } .sb-status-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: rgba(29,184,122,0.45); text-transform: uppercase; margin-bottom: 8px; } .sb-status-row { display: flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); margin-bottom: 5px; } .sb-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .sb-status-dot.ok { background: var(--em); animation: pulse 2.5s ease infinite; } .sb-user { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wf); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(238,242,240,0.3); display: flex; justify-content: space-between; align-items: center; } .sb-user a { color: var(--wd); text-decoration: none; } .sb-user a:hover { color: var(--em); } .sb-user.active { color: var(--em); } .sb-user.active a { color: var(--wd); } /* ═══ 6 · MAIN + TOPBAR ═══ */ .main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 54px; min-height: 54px; border-bottom: 1px solid var(--wf); background: var(--panel); flex-shrink: 0; } .topbar-left { display: flex; align-items: baseline; gap: 14px; } .topbar-title { font-size: 15px; font-weight: 600; color: var(--white); } .topbar-sub { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 1px; } .topbar-right { display: flex; align-items: center; gap: 14px; } .topbar-date { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 1px; } .topbar-btn { background: transparent; border: 1px solid var(--em-b); border-radius: 3px; padding: 7px 14px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--em); cursor: pointer; text-transform: uppercase; transition: background 0.15s; } .topbar-btn:hover { background: rgba(29,184,122,0.06); } /* ═══ 7 · CONTENIDO (.dash) + CABECERA EDITORIAL (HERO) ═══ */ /* .dash: padding-bottom y gap varían entre pantallas; se usa el más común (panel). Tareas usa padding-bottom 40px / gap 22px — si hace falta afinar por página, se ajusta en la vista puntual. */ .dash { flex: 1; overflow-y: auto; padding: 26px 28px 60px; display: flex; flex-direction: column; gap: 26px; } .hero-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 4px; color: rgba(29,184,122,0.5); text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--em); opacity: 0.4; } .hero-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 6vw, 72px); line-height: 0.92; letter-spacing: 1px; color: var(--white); } .hero-title span { color: var(--red); } /* Fila hero con botón a la derecha (Tareas) */ .hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .hero-add { background: var(--em); border: none; border-radius: 3px; padding: 11px 20px; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; color: var(--black); cursor: pointer; transition: background 0.15s; white-space: nowrap; } .hero-add:hover { background: var(--em-l); } /* ═══ 8 · KPIs ═══ */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .kpi { background: var(--panel); border: 1px solid var(--wf); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; transition: background 0.15s; } .kpi:hover { background: var(--card); } .kpi-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; } .kpi-val { font-family: 'Bebas Neue', sans-serif; font-size: 46px; line-height: 1; color: var(--white); } .kpi-val.sm { font-size: 30px; } .kpi-sub { font-size: 11px; color: var(--wd); } .kpi-trend { font-family: 'DM Mono', monospace; font-size: 10px; margin-top: 2px; letter-spacing: 0.5px; } .trend-down { color: var(--red); } .trend-up { color: var(--em); } .trend-flat { color: var(--wd); } /* MINI BARRA CUOTA DENTRO DE UN KPI (indexación) */ .kpi-quota-bar { width: 100%; height: 4px; background: var(--wf); position: relative; overflow: hidden; margin-top: 8px; border-radius: 2px; } .kpi-quota-fill { height: 100%; position: absolute; left: 0; top: 0; background: var(--em); } /* ═══ 9 · SECTION-TITLE + CARD-BLOCK ═══ */ .section-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 3px; color: var(--em); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; justify-content: space-between; } .section-title a { font-size: 9px; color: var(--wd); letter-spacing: 1px; cursor: pointer; text-decoration: none; } .section-title a:hover { color: var(--em); } .card-block { background: var(--panel); border: 1px solid var(--wf); padding: 20px 24px; } .card-block.card-em { border-color: var(--em-b); background-image: linear-gradient(135deg, rgba(29,184,122,0.06) 0%, transparent 55%); } /* ═══ 10 · FOCO DE HOY / ALERTAS ═══ */ .foco-list { display: flex; flex-direction: column; gap: 2px; } .foco-item { display: grid; grid-template-columns: 4px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--wf); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .foco-item:hover { background: var(--card2); border-color: rgba(238,242,240,0.12); } .foco-bar { width: 4px; height: 100%; min-height: 38px; border-radius: 2px; } .foco-body { } .foco-tag { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 7px; display: inline-block; margin-bottom: 6px; } .foco-title { font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.35; margin-bottom: 3px; } .foco-detail { font-size: 11px; color: var(--wd); line-height: 1.5; } .foco-detail b { color: var(--white); font-weight: 500; } .foco-cta { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--wd); white-space: nowrap; } /* FILTROS POR TIPO (alertas) */ .filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .filtro-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; margin-right: 4px; } /* Chip base (alertas). En Sitios / Indexación se reutiliza con matices; ver §13 y §21. */ .chip { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; padding: 7px 13px; border: 1px solid var(--wf); border-radius: 3px; color: var(--wd); background: transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 7px; } .chip:hover { border-color: var(--em-b); color: var(--white); } .chip.active { background: var(--em-dim); border-color: var(--em-b); color: var(--em); } .chip-count { font-size: 9px; opacity: 0.7; } .chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot-red { background: var(--red); } .dot-amber { background: var(--amber); } .dot-em { background: var(--em); } /* ACCIONES POR ALERTA (dos botones a la derecha) */ .foco-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .btn-analizar { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--wd); white-space: nowrap; cursor: pointer; transition: color 0.15s; } .foco-item:hover .btn-analizar { color: var(--white); } .btn-tareas { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; padding: 5px 10px; border: 1px solid var(--em-b); border-radius: 3px; color: var(--em); background: transparent; cursor: pointer; white-space: nowrap; text-transform: uppercase; transition: background 0.15s, border-color 0.15s; } .btn-tareas:hover { background: rgba(29,184,122,0.08); border-color: var(--em); } /* ═══ 11 · TAGS Y BARRAS DE COLOR ═══ */ .tag-red { color: var(--red); border: 1px solid rgba(232,64,64,0.3); background: var(--red-dim); } .tag-amber { color: var(--amber); border: 1px solid rgba(232,160,48,0.3); background: var(--amber-dim); } .tag-em { color: var(--em); border: 1px solid var(--em-b); background: var(--em-dim); } .bar-red { background: var(--red); } .bar-amber { background: var(--amber); } .bar-em { background: var(--em); } /* ═══ 12 · TABLA LA RED ═══ */ .tabla-red { width: 100%; border-collapse: collapse; } .tabla-red thead th { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; text-align: left; padding: 0 14px 12px; border-bottom: 1px solid var(--wf); font-weight: 400; } .tabla-red thead th.sortable { cursor: pointer; } .tabla-red thead th.sortable:hover { color: var(--em); } .tabla-red thead th.active-sort { color: var(--em); } .tabla-red th.num, .tabla-red td.num { text-align: right; } .tabla-red th.ctr, .tabla-red td.ctr { text-align: center; } .tabla-red tbody tr { border-bottom: 1px solid var(--wff); transition: background 0.12s; cursor: pointer; } .tabla-red tbody tr:hover { background: var(--wff); } .tabla-red td { padding: 13px 14px; font-size: 13px; } .td-sitio { display: flex; flex-direction: column; gap: 2px; } .td-sitio-name { font-weight: 600; color: var(--white); } .td-sitio-dom { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--wd); letter-spacing: 0.5px; } .td-num { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--white); line-height: 1; } .td-tend { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.5px; } .td-disc { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; } .td-idx-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .td-idx-bar { width: 42px; height: 3px; background: var(--wf); position: relative; overflow: hidden; } .td-idx-fill { height: 100%; position: absolute; left: 0; top: 0; } .td-idx-val { font-family: 'Bebas Neue', sans-serif; font-size: 18px; width: 26px; text-align: right; } .td-sync { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 0.5px; } /* SEMÁFORO */ .semaforo { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .sem-rojo { background: var(--red); box-shadow: 0 0 8px rgba(232,64,64,0.5); } .sem-ambar { background: var(--amber); box-shadow: 0 0 8px rgba(232,160,48,0.5); } .sem-verde { background: var(--em); box-shadow: 0 0 8px rgba(29,184,122,0.5); } /* Wrapper con scroll horizontal para tablas anchas (Sitios) */ .tabla-wrap { overflow-x: auto; } .tabla-wrap .tabla-red { min-width: 880px; } /* ═══ 13 · BARRA DE HERRAMIENTAS (SITIOS) ═══ */ .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .toolbar-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 340px; background: var(--card); border: 1px solid var(--wf); border-radius: 4px; padding: 0 12px; transition: border-color 0.15s; } .toolbar-search:focus-within { border-color: var(--em-b); } .toolbar-search span { font-size: 12px; color: var(--wd); } .toolbar-search input { flex: 1; background: transparent; border: none; outline: none; padding: 10px 0; font-family: 'Oxanium', sans-serif; font-size: 13px; color: var(--white); } .toolbar-search input::placeholder { color: rgba(238,242,240,0.3); } .toolbar-sort-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; } .toolbar-spacer { flex: 1; } /* Variante de .chip usada como botón de orden (Sitios): uppercase, fondo card. No pisa la base de §10; sólo la matiza cuando vive dentro de .toolbar. */ .toolbar .chip { padding: 8px 14px; text-transform: uppercase; background: var(--card); border: 1px solid var(--wf); color: var(--wd); transition: all 0.15s; } .toolbar .chip:hover { color: var(--white); border-color: rgba(238,242,240,0.14); } .toolbar .chip.active { background: var(--em-dim); border-color: var(--em-b); color: var(--em); } /* ═══ 14 · GRID INFERIOR + ACTIVIDAD ═══ */ .bottom-grid { display: grid; grid-template-columns: 1fr 380px; gap: 2px; } .act-list { display: flex; flex-direction: column; } .act-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--wf); } .act-item:last-child { border-bottom: none; } .act-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .act-text { font-size: 12px; color: var(--wd); line-height: 1.5; } .act-text b { color: var(--white); font-weight: 500; } .act-time { font-family: 'DM Mono', monospace; font-size: 9px; color: rgba(238,242,240,0.25); letter-spacing: 1px; margin-top: 3px; } /* ═══ 15 · ANALISTA (WIDGET PANEL) ═══ */ .analista { background: var(--panel); border: 1px solid var(--em-b); background-image: linear-gradient(135deg, rgba(29,184,122,0.06) 0%, transparent 55%); padding: 20px 22px; display: flex; flex-direction: column; } .analista-msg { background: var(--card); border: 1px solid var(--wf); border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; } .analista-msg-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: rgba(29,184,122,0.5); text-transform: uppercase; margin-bottom: 8px; } .analista-msg-text { font-size: 13px; color: var(--white); line-height: 1.6; } .analista-msg-text b { color: var(--em); } .analista-input { display: flex; border: 1px solid var(--em-b); border-radius: 4px; background: rgba(29,184,122,0.03); margin-top: auto; } .analista-input input { flex: 1; background: transparent; border: none; outline: none; padding: 12px 14px; font-family: 'Oxanium', sans-serif; font-size: 13px; color: var(--white); } .analista-input input::placeholder { color: rgba(238,242,240,0.3); } .analista-input button { background: var(--em); border: none; padding: 0 18px; font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 2px; color: var(--black); cursor: pointer; } /* ═══ 16 · HOME (SPLASH) ═══ */ /* Nota: en home el body está centrado. Como acá body es flex (layout con sidebar), la página home debe envolver su contenido en .home (que ya se centra por sí solo). */ .home { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; margin: auto; animation: fadeUp 1.1s cubic-bezier(0.16,1,0.3,1); } /* EYEBROW SUPERIOR */ .eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 4px; color: rgba(29,184,122,0.5); text-transform: uppercase; margin-bottom: 34px; display: flex; align-items: center; gap: 12px; } .eyebrow-line { display: block; width: 28px; height: 1px; background: var(--em); opacity: 0.4; } .eyebrow-dot { width: 6px; height: 6px; background: var(--em); border-radius: 50%; animation: pulse 2.5s ease infinite; } /* LOGO GIGANTE */ .logo { font-family: 'Bebas Neue', sans-serif; font-size: clamp(80px, 16vw, 190px); line-height: 0.86; letter-spacing: 4px; color: var(--white); } .logo span { color: var(--em); } .tagline { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 8px; color: var(--wd); text-transform: uppercase; margin-top: 22px; } .tagline b { color: rgba(238,242,240,0.7); font-weight: 500; } /* ENTRAR DISCRETO */ .enter { margin-top: 64px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 3px; color: var(--wd); text-transform: uppercase; text-decoration: none; border: 1px solid var(--wf); padding: 12px 26px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 10px; } .enter:hover { border-color: var(--em-b); color: var(--em); background: rgba(29,184,122,0.03); } .enter .arrow { transition: transform 0.2s; } .enter:hover .arrow { transform: translateX(4px); } /* PIE HOME */ .home-foot { position: fixed; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(238,242,240,0.2); z-index: 1; } /* ═══ 17 · LOGIN ═══ */ /* Como body es flex, el login se envuelve en .login-wrap que se centra con margin:auto. */ .login-wrap { position: relative; z-index: 1; width: 100%; max-width: 400px; margin: auto; animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1); } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo-text { font-family: 'Bebas Neue', sans-serif; font-size: 44px; letter-spacing: 3px; color: var(--white); line-height: 1; } .login-logo-text span { color: var(--em); } .login-logo-sub { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 5px; color: var(--wd); text-transform: uppercase; margin-top: 8px; } .login-card { background: var(--card); border: 1px solid var(--wf); border-radius: 8px; padding: 34px 32px 30px; } .login-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 4px; color: rgba(29,184,122,0.5); text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; } .login-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--em); opacity: 0.4; } .login-btn { width: 100%; background: var(--em); border: none; border-radius: 4px; padding: 14px; margin-top: 8px; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 3px; color: var(--black); cursor: pointer; transition: background 0.15s; } .login-btn:hover { background: var(--em-l); } /* ERROR (oculto por defecto; agregar .show) */ .login-error { display: none; background: var(--red-dim); border: 1px solid rgba(232,64,64,0.25); border-radius: 4px; padding: 10px 14px; margin-bottom: 18px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--red); } .login-error.show { display: block; } .login-note { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(238,242,240,0.28); text-align: center; margin-top: 20px; line-height: 1.7; } .login-foot { text-align: center; margin-top: 26px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: rgba(238,242,240,0.2); } /* ═══ 18 · CAMPOS DE FORMULARIO (login / admin / cuenta) ═══ */ .field { margin-bottom: 16px; } .field-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; margin-bottom: 8px; display: block; } .field-input, .field-select, .field-textarea { width: 100%; background: rgba(29,184,122,0.03); border: 1px solid var(--wf); border-radius: 4px; padding: 13px 15px; font-family: 'Oxanium', sans-serif; font-size: 14px; color: var(--white); outline: none; transition: border-color 0.15s, background 0.15s; } .field-input::placeholder, .field-textarea::placeholder { color: rgba(238,242,240,0.25); } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--em-b); background: rgba(29,184,122,0.05); } /* Opciones del dropdown en tema oscuro: si no, el navegador las pinta blancas y no se leen. */ .field-input option, .field-select option, select option { background-color: var(--panel); color: var(--white); } /* Chips de selección (ventana de tiempo, métrica): usados en sitio/discover/news. */ .chip-sel { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--wd); text-decoration: none; padding: 4px 9px; border: 1px solid var(--wf); border-radius: 3px; white-space: nowrap; } .chip-sel:hover { border-color: var(--em-b); color: var(--white); } .chip-sel.on { color: var(--em); border-color: var(--em-b); background: var(--em-dim); } .field-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231DB87A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 36px; } .field-textarea { resize: vertical; min-height: 220px; line-height: 1.7; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--white); } .field-max { max-width: 300px; } /* Nota de requisito bajo un campo (cuenta) */ .field-req { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(238,242,240,0.35); margin-top: 7px; line-height: 1.6; display: flex; align-items: center; gap: 7px; } .field-req::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--em); opacity: 0.5; flex-shrink: 0; } /* ═══ 19 · CUENTA (DATOS / AVISO / FORM) ═══ */ .cuenta-wrap { max-width: 620px; display: flex; flex-direction: column; gap: 26px; } /* AVISO ÁMBAR (bloque) */ .aviso { display: flex; align-items: flex-start; gap: 12px; background: var(--amber-dim); border: 1px solid rgba(232,160,48,0.25); border-radius: 6px; padding: 14px 16px; } .aviso-icon { font-size: 13px; color: var(--amber); line-height: 1.5; flex-shrink: 0; } .aviso-body { font-size: 12px; color: var(--white); line-height: 1.55; } .aviso-body b { color: var(--amber); font-weight: 500; } .aviso-body span { display: block; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--wd); text-transform: uppercase; margin-bottom: 4px; } /* DATOS (solo lectura) */ .datos-grid { display: flex; flex-direction: column; gap: 2px; } .datos-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--wff); } .datos-row:last-child { border-bottom: none; } .datos-key { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; } .datos-val { font-size: 13px; color: var(--white); font-weight: 500; display: flex; align-items: center; gap: 8px; } .rol-tag { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; background: var(--em-dim); color: var(--em); border: 1px solid var(--em-b); } .form-sep { height: 1px; background: var(--wf); margin: 6px 0 20px; } .save-btn { width: 100%; background: var(--em); border: none; border-radius: 4px; padding: 14px; margin-top: 8px; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 3px; color: var(--black); cursor: pointer; transition: background 0.15s; } .save-btn:hover { background: var(--em-l); } .form-hash-note { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(238,242,240,0.28); text-align: center; margin-top: 16px; line-height: 1.7; } /* ═══ 20 · KANBAN (TAREAS) ═══ */ .board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; } .col { min-width: 300px; max-width: 300px; display: flex; flex-direction: column; gap: 0; flex-shrink: 0; } .col-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--wf); background: var(--panel); margin-bottom: 2px; } .col-title { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--wd); display: flex; align-items: center; gap: 8px; } .col-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .col-count { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); } .col-body { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: calc(100vh - 320px); padding-bottom: 8px; } /* TARJETA */ .task { background: var(--card); border: 1px solid var(--wf); padding: 14px 16px; cursor: pointer; transition: background 0.15s, border-color 0.15s; position: relative; } .task:hover { background: var(--card2); border-color: rgba(238,242,240,0.12); } .task-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .task-tag { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 7px; flex-shrink: 0; } .tt-alta { color: var(--red); border: 1px solid rgba(232,64,64,0.3); background: var(--red-dim); } .tt-media { color: var(--amber); border: 1px solid rgba(232,160,48,0.3); background: var(--amber-dim); } .tt-baja { color: var(--wd); border: 1px solid var(--wf); background: var(--wff); } .tt-hecho { color: var(--em); border: 1px solid var(--em-b); background: var(--em-dim); } .task-priority { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--wd); flex-shrink: 0; } .task-title { font-size: 12px; font-weight: 600; color: var(--white); line-height: 1.4; margin-bottom: 8px; } .task-title.done { text-decoration: line-through; color: var(--wd); font-weight: 500; } .task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .task-dom { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--wd); letter-spacing: 0.5px; padding: 2px 6px; border: 1px solid var(--wf); background: var(--wff); } .task-alerta { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px; color: var(--red); padding: 2px 6px; border: 1px solid rgba(232,64,64,0.25); background: var(--red-dim); } .task-date { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--wd); margin-left: auto; flex-shrink: 0; } .task-impact-bar { height: 2px; background: var(--wf); margin-top: 10px; overflow: hidden; } .tib-fill { height: 100%; } /* ═══ 21 · ADMIN (CONEXIONES / UMBRALES / SWITCH) ═══ */ /* Nota DM Mono chiquita */ .admin-note { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; color: rgba(238,242,240,0.3); line-height: 1.6; margin-top: 14px; } /* CONEXIONES */ .conn-list { display: flex; flex-direction: column; gap: 2px; } .conn-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--wf); transition: background 0.15s; } .conn-row:hover { background: var(--card2); } .conn-info { display: flex; flex-direction: column; gap: 3px; } .conn-name { font-size: 13px; font-weight: 600; color: var(--white); } .conn-desc { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 0.5px; } .conn-chip { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; padding: 4px 10px; border-radius: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .chip-ok { background: var(--em-dim); color: var(--em); border: 1px solid var(--em-b); } .chip-off { background: var(--red-dim); color: var(--red); border: 1px solid rgba(232,64,64,0.2); } .btn-outline { background: transparent; border: 1px solid var(--wf); border-radius: 3px; padding: 6px 12px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--wd); cursor: pointer; text-transform: uppercase; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .btn-outline:hover { border-color: var(--em-b); color: var(--em); } /* Botón esmeralda genérico (admin / sitios) */ .btn-em { background: var(--em); border: none; border-radius: 4px; padding: 12px 26px; margin-top: 4px; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; color: var(--black); cursor: pointer; transition: background 0.15s; } .btn-em:hover { background: var(--em-l); } /* UMBRALES */ .umb-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; } .umb-row { display: grid; grid-template-columns: 1fr 130px; gap: 16px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--wf); } .umb-info { display: flex; flex-direction: column; gap: 3px; } .umb-name { font-size: 13px; color: var(--white); font-weight: 500; } .umb-hint { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--wd); letter-spacing: 0.5px; } .umb-input { width: 100%; background: rgba(29,184,122,0.03); border: 1px solid var(--wf); border-radius: 4px; padding: 10px 12px; font-family: 'DM Mono', monospace; font-size: 14px; color: var(--white); outline: none; text-align: right; transition: border-color 0.15s, background 0.15s; } .umb-input:focus { border-color: var(--em-b); background: rgba(29,184,122,0.05); } /* SWITCH TOGGLE (capa SERP opcional) */ .serp-list { display: flex; flex-direction: column; gap: 2px; } .serp-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--wf); } .serp-info { display: flex; flex-direction: column; gap: 5px; } .serp-name { font-size: 13px; font-weight: 600; color: var(--white); } .serp-desc { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 0.3px; line-height: 1.6; } .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--wf); border: 1px solid var(--wf); border-radius: 24px; transition: background 0.2s, border-color 0.2s; } .switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--wd); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .switch input:checked + .switch-track { background: var(--em-dim); border-color: var(--em-b); } .switch input:checked + .switch-track .switch-knob { background: var(--em); transform: translateX(20px); box-shadow: 0 0 8px rgba(29,184,122,0.5); } /* ═══ 22 · INDEXACIÓN (PUSH / CUOTA / AVISOS) ═══ */ .push-note { font-size: 12px; color: var(--wd); line-height: 1.55; margin-bottom: 18px; padding-left: 12px; border-left: 2px solid var(--em-b); } .push-note b { color: var(--white); font-weight: 500; } .push-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 16px; flex-wrap: wrap; } .push-quota { display: flex; flex-direction: column; gap: 6px; min-width: 200px; } .push-quota-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; color: var(--wd); text-transform: uppercase; } .push-quota-label b { color: var(--white); } .push-quota-bar { width: 220px; max-width: 100%; height: 5px; background: var(--wf); position: relative; overflow: hidden; border-radius: 2px; } .push-quota-fill { height: 100%; position: absolute; left: 0; top: 0; background: var(--em); } .push-btn { background: var(--em); border: none; border-radius: 3px; padding: 11px 20px; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; color: var(--black); cursor: pointer; transition: background 0.15s; white-space: nowrap; } .push-btn:hover { background: var(--em-l); } .push-btn small { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px; opacity: 0.7; margin-left: 6px; text-transform: none; } .push-list { display: flex; flex-direction: column; gap: 2px; } .push-item { display: grid; grid-template-columns: 4px 1fr auto auto; gap: 16px; align-items: center; padding: 13px 16px; background: var(--card); border: 1px solid var(--wf); transition: background 0.15s, border-color 0.15s; cursor: pointer; } .push-item:hover { background: var(--card2); border-color: rgba(238,242,240,0.12); } .push-bar { width: 4px; height: 100%; min-height: 34px; border-radius: 2px; } .push-body { min-width: 0; } .push-url { font-size: 13px; color: var(--white); font-weight: 500; line-height: 1.35; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .push-meta { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 0.5px; } .push-meta b { color: rgba(238,242,240,0.7); font-weight: 500; } .push-disc { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 0.5px; white-space: nowrap; } /* Chips de estado de push (variante compacta de .chip; conviven por especificidad) */ .chip-pend { color: var(--amber); border: 1px solid rgba(232,160,48,0.3); background: var(--amber-dim); } .chip-env { color: var(--em); border: 1px solid var(--em-b); background: var(--em-dim); } .chip-err { color: var(--red); border: 1px solid rgba(232,64,64,0.3); background: var(--red-dim); } /* En Indexación estos chips son etiquetas (no botones): sin cursor pointer ni hover. Se aplican sobre .chip con tamaño reducido cuando funcionan como estado. */ .push-item .chip { font-size: 9px; padding: 4px 9px; border-radius: 2px; text-transform: uppercase; cursor: default; } .push-item .chip:hover { border-color: inherit; color: inherit; } /* AVISO ÁMBAR (línea, cuota Google) */ .aviso-cuota { display: flex; align-items: center; gap: 10px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(232,160,48,0.25); border-radius: 3px; padding: 10px 14px; } .aviso-cuota .aviso-ico { font-size: 12px; flex-shrink: 0; } .aviso-cuota b { color: var(--white); font-weight: 500; } /* ═══ 23 · DISCOVER (SERP · TOP STORIES · capa futura) ═══ */ .serp-card { background: var(--panel); border: 1px solid var(--em-b); background-image: linear-gradient(135deg, rgba(29,184,122,0.05) 0%, transparent 60%); padding: 22px 24px; position: relative; } .serp-soon { position: absolute; top: 20px; right: 24px; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: var(--em); text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--em-b); border-radius: 2px; background: var(--em-dim); } .serp-note { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px; color: rgba(238,242,240,0.3); line-height: 1.6; margin-top: 4px; margin-bottom: 20px; max-width: 620px; } .serp-note b { color: rgba(29,184,122,0.6); font-weight: 500; } .serp-queries { display: flex; gap: 2px; margin-bottom: 20px; flex-wrap: wrap; } .serp-query { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.5px; padding: 7px 14px; border: 1px solid var(--wf); color: var(--wd); background: var(--card); cursor: pointer; transition: all 0.15s; } .serp-query:hover { border-color: var(--em-b); color: var(--white); } .serp-query.active { border-color: var(--em-b); color: var(--em); background: var(--em-dim); } .serp-query .q-hash { color: rgba(29,184,122,0.4); margin-right: 6px; } .serp-carousel { display: flex; flex-direction: column; gap: 2px; opacity: 0.9; } .serp-carousel-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: var(--wd); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } /* Fila del carrusel (grid distinto al de admin; convive por contexto .serp-carousel) */ .serp-carousel .serp-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; background: var(--card); border: 1px solid var(--wf); transition: background 0.15s; } .serp-carousel .serp-row:hover { background: var(--card2); } .serp-carousel .serp-row.mine { border-color: var(--em-b); background: var(--em-dim); } .serp-pos { font-family: 'Bebas Neue', sans-serif; font-size: 24px; line-height: 1; color: var(--wd); text-align: center; } .serp-row.mine .serp-pos { color: var(--em); } .serp-comp { display: flex; flex-direction: column; gap: 2px; } .serp-comp-name { font-size: 13px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; } .serp-comp-you { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 1px; color: var(--em); border: 1px solid var(--em-b); padding: 1px 5px; border-radius: 2px; background: var(--em-dim); } .serp-comp-headline { font-size: 11px; color: var(--wd); line-height: 1.4; } .serp-share { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--wd); letter-spacing: 0.5px; text-align: right; white-space: nowrap; } .serp-share b { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--white); font-weight: 400; } .serp-row.mine .serp-share b { color: var(--em); } .serp-age { font-family: 'DM Mono', monospace; font-size: 9px; color: rgba(238,242,240,0.3); letter-spacing: 0.5px; white-space: nowrap; text-align: right; } /* ═══ 24 · QUICK WINS (QUERY / POS / CAPA SERP) ═══ */ .td-query { font-weight: 600; color: var(--white); font-size: 13px; } .td-pos { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--amber); line-height: 1; } .td-page { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--wd); letter-spacing: 0.3px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Columna capa SERP (próximamente, azulada) */ .tabla-red th.serp-col, .tabla-red td.serp-col { background: rgba(64,144,232,0.03); border-left: 1px dashed rgba(64,144,232,0.18); border-right: 1px dashed rgba(64,144,232,0.18); } .serp-flag { font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: 1px; color: rgba(64,144,232,0.55); text-transform: uppercase; display: block; margin-top: 3px; } .td-vol { font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(238,242,240,0.28); letter-spacing: 0.5px; } /* Botón a tareas (quick wins) */ .btn-tarea { background: transparent; border: 1px solid var(--em-b); border-radius: 3px; padding: 5px 10px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px; color: var(--em); cursor: pointer; white-space: nowrap; transition: background 0.15s; } .btn-tarea:hover { background: rgba(29,184,122,0.08); } /* Aviso capa opcional (azulado) */ .aviso-serp { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.5px; color: rgba(64,144,232,0.6); margin-top: 16px; padding: 10px 12px; border: 1px dashed rgba(64,144,232,0.2); background: rgba(64,144,232,0.03); display: flex; align-items: center; gap: 8px; line-height: 1.5; } .aviso-serp::before { content: '◆'; color: var(--blue); font-size: 10px; } /* ═══ 25 · ANALISTA (CHAT COMPLETO) ═══ */ .chat-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* Cabecera chica + widget de costos */ .chat-head { padding: 22px 28px 16px; border-bottom: 1px solid var(--wf); flex-shrink: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .chat-head-line { font-size: 14px; color: var(--wd); line-height: 1.5; max-width: 640px; } .chat-head-line b { color: var(--white); font-weight: 500; } .costo-widget { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.5px; color: var(--wd); border: 1px solid var(--wf); background: var(--card); padding: 8px 12px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; } .costo-widget .costo-label { color: rgba(29,184,122,0.5); text-transform: uppercase; letter-spacing: 2px; font-size: 8px; } .costo-widget b { color: var(--em); font-weight: 500; } /* Zona de conversación scrolleable */ .chat-scroll { flex: 1; overflow-y: auto; padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 26px; } .chat-inner { max-width: 860px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; } /* Fila de mensaje */ .msg { display: flex; flex-direction: column; gap: 8px; max-width: 78%; } .msg.user { align-self: flex-end; align-items: flex-end; } .msg.bot { align-self: flex-start; align-items: flex-start; } .msg-label { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; color: rgba(29,184,122,0.5); text-transform: uppercase; } .msg-label.user-label { color: var(--wd); } /* Burbuja usuario — sobria */ .bubble-user { background: var(--card2); border: 1px solid var(--wf); border-radius: 8px 8px 2px 8px; padding: 12px 16px; font-size: 14px; color: var(--white); line-height: 1.5; } /* Burbuja analista */ .bubble-bot { background: var(--panel); border: 1px solid var(--em-b); border-radius: 8px 8px 8px 2px; background-image: linear-gradient(135deg, rgba(29,184,122,0.05) 0%, transparent 55%); padding: 16px 20px; font-size: 14px; color: var(--white); line-height: 1.65; } .bubble-bot p { margin-bottom: 12px; } .bubble-bot p:last-child { margin-bottom: 0; } .bubble-bot b { color: var(--em); font-weight: 500; } .bubble-bot .neg { color: var(--red); font-weight: 500; } /* Sub-label de bloque (diagnóstico / recomendación / próximo paso) */ .diag-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--wd); display: block; margin-bottom: 4px; } .diag-label.rec { color: var(--em); } .next-step { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wf); display: flex; align-items: center; gap: 10px; } .next-step-tag { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--em); border: 1px solid var(--em-b); background: var(--em-dim); padding: 3px 8px; border-radius: 2px; flex-shrink: 0; } .next-step-text { font-size: 13px; color: var(--white); line-height: 1.45; } /* Bloque tool use */ .tooluse { border: 1px dashed var(--em-b); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; background: rgba(29,184,122,0.02); } .tooluse-head { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--wd); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .tooluse-head .tu-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--em); } .tooluse-chips { display: flex; flex-wrap: wrap; gap: 8px; } .tu-chip { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.3px; color: var(--wd); background: var(--card); border: 1px solid var(--wf); border-radius: 3px; padding: 5px 9px; display: flex; align-items: center; gap: 7px; } .tu-chip .tu-fn { color: var(--white); } .tu-chip .tu-check { color: var(--em); font-size: 11px; font-weight: 500; margin-left: 2px; } /* Input del chat (analista full) — reusa .analista-input con tamaños mayores */ .chat-input-wrap { padding: 16px 28px 22px; border-top: 1px solid var(--wf); background: var(--panel); flex-shrink: 0; } .chat-input-inner { max-width: 860px; margin: 0 auto; } .chat-input-wrap .analista-input { border-radius: 6px; margin-top: 0; transition: border-color 0.15s; } .chat-input-wrap .analista-input:focus-within { border-color: var(--em); } .chat-input-wrap .analista-input input { padding: 16px 18px; font-size: 15px; } .chat-input-wrap .analista-input button { padding: 0 26px; font-size: 18px; letter-spacing: 3px; display: flex; align-items: center; gap: 8px; transition: background 0.15s; } .chat-input-wrap .analista-input button:hover { background: var(--em-l); } .input-hint { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(238,242,240,0.25); margin-top: 8px; display: flex; justify-content: space-between; } /* ═══════════════════════════════════════════════════════════════════════════ 26 · ANIMACIONES ═══════════════════════════════════════════════════════════════════════════ */ @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* fillBar: para animar el llenado de barras (idx, cuota, impacto). Se usa poniendo la clase .fill-anim sobre el fill y su ancho final en --fill. */ @keyframes fillBar { from { width: 0; } to { width: var(--fill, 100%); } } .fill-anim { animation: fillBar 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }