/* Tema CLARO. Se activa con data-tema="claro" en ; el oscuro sigue siendo el default, que es lo que la app viene haciendo. Solo se redefinen los tokens: los componentes se estilan a través de ellos y no adentro del bloque. */ :root[data-tema="claro"] { --primary-color: #6d28d9; --primary-hover: #5b21b6; --secondary-color: #0891b2; --bg-color: #f6f4fb; --surface-color: rgba(255, 255, 255, 0.88); /* Versión OPACA de la superficie. La translúcida no sirve para lo que se dibuja fuera del flujo —la lista de un . Sin esto el navegador la pinta con SU default —fondo claro— y en tema oscuro el texto blanco queda sobre blanco: el combo se abre y no se lee nada. No existía ninguna regla para `option` en todo el proyecto, así que pasaba en TODOS los selects, no en uno. */ select option { background: var(--surface-solid); color: var(--text-primary); } .form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; border-radius: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; border: none; gap: 0.5rem; } .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; width: 100%; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(139, 92, 246, 0.5); } /* Acción SECUNDARIA: la que lleva a otra pantalla en vez de hacer algo. El degradado violeta es LA acción de la pantalla; gastarlo también en un "ver todas" tiene dos costos: el botón termina gritando más que el contenido que la persona vino a leer, y dos cosas muy distintas —navegar y disparar un escaneo— pasan a verse igual de importantes. */ .btn-suave { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); } .btn-suave:hover { color: var(--text-primary); border-color: var(--primary-color); background: var(--surface-color); } .auth-footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; color: var(--text-secondary); } .auth-footer a { color: var(--primary-color); text-decoration: none; font-weight: 500; } .auth-footer a:hover { text-decoration: underline; } /* Dashboard Layout */ .app-container { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: 280px; background: var(--surface-color); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; backdrop-filter: blur(10px); } .sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 1rem; } .sidebar-header img { height: 32px; } .sidebar-menu { padding: 1.5rem 1rem; flex: 1; overflow-y: auto; } .menu-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 0.75rem; /* Mismo padding que el ítem: el rótulo tiene que arrancar en la columna del icono, no medio carácter a la izquierda. */ padding-left: 1rem; font-weight: 600; } .menu-item { display: flex; align-items: center; /* La separación entre icono y texto va como `gap` del flex y NO como margen del icono: lucide REEMPLAZA el por un , así que cualquier regla sobre `.menu-item i` queda muerta apenas se dibujan los iconos. El `gap` no depende de qué elemento sea el hijo. */ gap: 1.15rem; padding: 0.7rem 1rem; color: var(--text-primary); text-decoration: none; border-radius: 8px; margin-bottom: 0.15rem; transition: all 0.2s; font-weight: 500; /* Más chica que el cuerpo: es navegación, no contenido. */ font-size: 0.87rem; white-space: nowrap; } /* El recorte va en el texto y NO en el ítem: con `overflow:hidden` en el ítem, el tooltip —que es un ::after ubicado fuera de la caja— quedaba cortado. */ .menu-item span { overflow: hidden; text-overflow: ellipsis; } /* Se nombra el además del porque lucide sustituye uno por el otro: el solo existe hasta que corre `createIcons()`. */ .menu-item i, .menu-item svg { /* Ancho fijo: así los textos arrancan todos en la misma columna aunque los iconos midan distinto, y al plegar el menú quedan centrados sin recalcular nada. */ width: 20px; min-width: 20px; height: 20px; color: var(--text-secondary); } /* ------------------------------------------------------- menú plegable */ /* En una pantalla de 13" el menú se come 280px que sirven para la tabla. */ .sidebar { transition: width .2s ease; } .sidebar-toggle-menu { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; padding: .45rem .75rem; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; } .sidebar-toggle-menu:hover { color: var(--text-primary); border-color: var(--primary-color); } .sidebar-toggle-menu .chev { transition: transform .2s ease; } body.menu-plegado .sidebar { width: 76px; } body.menu-plegado .sidebar-header span, body.menu-plegado .menu-category, body.menu-plegado .menu-item span, body.menu-plegado .sidebar-toggle-menu .txt { display: none; } body.menu-plegado .menu-item { justify-content: center; padding: 0.6rem 0; gap: 0; } body.menu-plegado .sidebar-toggle-menu { justify-content: center; padding: .45rem 0; } body.menu-plegado .sidebar-toggle-menu .chev { transform: rotate(180deg); } body.menu-plegado .sidebar-header { justify-content: center; padding: 1.5rem 0.5rem; } /* ------------------------------------------------------ botón de tema */ .tema-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s ease, border-color .15s; } .tema-toggle:hover { transform: scale(1.08); border-color: var(--primary-color); } .menu-item:hover, .menu-item.active { background: rgba(139, 92, 246, 0.1); color: var(--primary-color); } .menu-item:hover i, .menu-item.active i, .menu-item:hover svg, .menu-item.active svg { color: var(--primary-color); } .main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; } .topbar { height: 72px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(10px); } .dashboard-grid { padding: 2rem; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; } .glass-panel { background: var(--surface-color); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; /* Si el título y la acción no entran juntos, la acción BAJA a la línea de abajo. Antes se apretaba todo en la misma fila y el que cedía era el título, que salía partido en dos ("Lo más movido de / hoy"). */ gap: 1rem; flex-wrap: wrap; } /* Un botón en el encabezado de un panel es la acción DE ESE PANEL: nunca una barra de lado a lado. `.btn-primary` trae `width:100%` porque nació en el formulario de login —ahí está bien, es el único botón de la pantalla— y desde ahí se comía toda la app. Había SEIS lugares parcheándolo a mano con `width:auto`, uno de ellos con un comentario explicando el porqué: es la señal de que el arreglo iba acá y no en cada llamador. */ .panel-header .btn { width: auto; flex-shrink: 0; } .panel-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); } /* Arbitrage Table */ .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .data-table th { color: var(--text-secondary); font-weight: 500; font-size: 0.875rem; } .data-table tr:hover { background: rgba(255, 255, 255, 0.02); } .badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; } .badge-success { background: rgba(16, 185, 129, 0.1); color: var(--success); } .badge-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .badge-primary { background: rgba(139, 92, 246, 0.1); color: var(--primary-color); } /* Typography Colors */ .text-success { color: var(--success); } .text-danger { color: var(--danger); } /* AI Sentiment Gauge Simulator */ .sentiment-gauge { display: flex; align-items: center; justify-content: center; height: 150px; position: relative; } .gauge-circle { width: 120px; height: 120px; border-radius: 50%; border: 8px solid var(--border-color); border-top-color: var(--primary-color); border-right-color: var(--secondary-color); transform: rotate(45deg); } .gauge-value { position: absolute; text-align: center; } .gauge-value span { display: block; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); } .gauge-value small { color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; } /* ======================================================================= LAYOUT, RESPONSIVE Y TEMA — revisión 2026-07-30 ======================================================================= El contenido nacía pegado a la barra lateral: `.dashboard-grid` tenía su padding pero las secciones agregadas después (alertas, socio, facturación) no, así que arrancaban contra el borde del menú. El padding pasa al contenedor común y deja de depender de que cada sección se acuerde. Y no había NINGUNA media query: en un teléfono la barra de 280px se comía media pantalla y las grillas de 12 columnas se desbordaban. */ .view-section { /* 28px arriba quedaba apretado contra la barra de 72px. Medido: las ocho secciones estaban iguales, así que el aire se sube parejo y no por sección. */ padding: 2.5rem 2rem 3rem; } /* La barra queda FIJA arriba del área que scrollea. Antes se iba para arriba al bajar, y en las pantallas cortas —Sentimiento— no, lo que hacía parecer que unas tenían más aire que otras. Con esto el título, el estado del mercado y el botón de tema están siempre a mano. */ .topbar { position: sticky; top: 0; z-index: 30; /* `.main-content` es un flex en columna y la barra es uno de sus ítems: por defecto los ítems SE ENCOGEN cuando el contenido de al lado crece. En el Dashboard, que es la pantalla más larga, se veía achatada. */ flex-shrink: 0; } /* La grilla ya no repite el padding: lo pone el contenedor. */ .dashboard-grid { padding: 0; } /* Un ancho máximo para que en un monitor grande las líneas de texto no crucen toda la pantalla, pero sin encoger las tablas. */ .view-section > .glass-panel, .dashboard-grid { max-width: 1600px; } /* --------------------------------------------------- tooltips del menú */ /* Con el menú plegado quedan solo iconos: sin esto hay que adivinar cuál es cuál. Se dibuja en CSS y no con el `title` del navegador porque ese tarda un segundo largo en aparecer, que es justo lo que no sirve acá. */ body.menu-plegado .menu-item { position: relative; } body.menu-plegado .menu-item::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--bg-color); color: var(--text-primary); border: 1px solid var(--border-color); padding: .35rem .7rem; border-radius: 8px; font-size: .8rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 60; box-shadow: 0 8px 20px rgba(0, 0, 0, .28); } body.menu-plegado .menu-item:hover::after { opacity: 1; } /* Sin esto el tooltip se corta contra el borde de la barra. */ body.menu-plegado .sidebar, body.menu-plegado .sidebar-menu, body.menu-plegado .menu-item { overflow: visible; } /* El tooltip salía DEBAJO de los paneles: `backdrop-filter` crea un contexto de apilamiento propio en cada `.glass-panel`, y como el contenido va después de la barra en el DOM, se pintaba encima. Subir la barra entera resuelve el problema de raíz — un z-index más alto en el tooltip no alcanzaba, porque la comparación es entre los contextos padre, no entre los elementos. */ .sidebar { position: relative; z-index: 40; } /* `.app-container` se deja con su `overflow:hidden`: existe para que no scrollee la página entera, y el tooltip cae a ~86px del borde izquierdo, bien adentro de su caja. El que sí recortaba es `.sidebar-menu`, por su `overflow-y:auto` —cuando un eje no es `visible`, el otro tampoco lo es de hecho—. */ /* ------------------------------------------------------------ responsive */ /* Notebook chica: el menú arranca plegado por CSS y se gana ancho para las tablas, que es lo que se mira. */ @media (max-width: 1100px) { .view-section { padding: 1.5rem 1.5rem 2rem; } .dashboard-grid { gap: 1.15rem; } } /* Tablet: la grilla de 12 columnas pasa a 6, así los paneles de "span 3" quedan de a dos por fila en vez de espachurrados. */ @media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(6, 1fr); } .dashboard-grid > [style*="span 7"], .dashboard-grid > [style*="span 5"], .dashboard-grid > [style*="span 12"] { grid-column: span 6 !important; } } /* Teléfono: la barra lateral se convierte en un cajón que entra desde la izquierda. Se abre con el botón que ya existía en la topbar. */ @media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: 264px; transform: translateX(-100%); transition: transform .22s ease; } body.menu-abierto .sidebar { transform: translateX(0); } /* El plegado no aplica en teléfono: acá el menú se muestra entero o no se muestra. Dejarlo plegado daría una barra de iconos flotando. */ body.menu-plegado .sidebar { width: 264px; } body.menu-plegado .sidebar-header span, body.menu-plegado .menu-category, body.menu-plegado .menu-item span { display: inline; } body.menu-plegado .menu-item { justify-content: flex-start; padding: .7rem 1rem; gap: 1.15rem; } body.menu-plegado .menu-item::after { display: none; } .sidebar-toggle-menu { display: none; } /* El velo: tocar afuera cierra el cajón. */ body.menu-abierto::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 99; } .main-content { width: 100%; } .topbar { height: auto; padding: .85rem 1rem; flex-wrap: wrap; gap: .6rem; } .view-section { padding: 1.1rem 1rem 2rem; } .dashboard-grid { grid-template-columns: 1fr; } .dashboard-grid > * { grid-column: span 1 !important; } .glass-panel { padding: 1.1rem; } /* Las tablas anchas scrollean solas en vez de reventar el ancho. */ .cds-table { min-width: 520px; } } @media (max-width: 480px) { .topbar h2 { font-size: 1.05rem; } .view-section { padding: 1rem .85rem 2rem; } } /* --------------------------------------------------- ajustes del tema claro */ /* Los paneles usan `backdrop-filter` sobre un fondo casi blanco: sin sombra ni borde propio se pierden contra la página. Y el degradado del body estaba pensado para el oscuro. */ :root[data-tema="claro"] body { background-image: radial-gradient(900px 500px at 12% -8%, rgba(109, 40, 217, .10), transparent 62%), radial-gradient(800px 460px at 92% 104%, rgba(8, 145, 178, .08), transparent 60%); background-attachment: fixed; } :root[data-tema="claro"] .glass-panel { box-shadow: 0 10px 26px -18px rgba(36, 26, 61, .40); } :root[data-tema="claro"] .sidebar, :root[data-tema="claro"] .topbar { background: rgba(255, 255, 255, .92); } /* En claro, el activo del menú necesita más peso: sobre blanco, un violeta al 10% no se distingue del fondo. */ :root[data-tema="claro"] .menu-item:hover, :root[data-tema="claro"] .menu-item.active { background: rgba(109, 40, 217, .10); } :root[data-tema="claro"] .cds-table th { color: #5b5470; opacity: 1; } :root[data-tema="claro"] .cds-table td { border-bottom-color: rgba(36, 26, 61, .10); } :root[data-tema="claro"] .cds-tab { color: #5b5470; } :root[data-tema="claro"] .cds-tab.active { color: #6d28d9; border-bottom-color: #6d28d9; } :root[data-tema="claro"] .cds-table code { color: #6d28d9; } /* Los campos heredaban fondo oscuro y texto oscuro: ilegibles en claro. */ :root[data-tema="claro"] .form-control { background: #ffffff; border-color: rgba(36, 26, 61, .18); color: var(--text-primary); } :root[data-tema="claro"] .form-control::placeholder { color: rgba(36, 26, 61, .40); }