/* ══════════════════════════════════════════════════════════════════ Optimal Markets — paleta corporativa (extraída de optimalmarkets.cl) nav teal #0097a7 · acento #00838f · textos marino #161c2d · Roboto ══════════════════════════════════════════════════════════════════ */ :root { --om-marino: #161c2d; --om-marino-suave: #232b42; --om-cian: #00838f; --om-cian-claro: #0097a7; --om-fondo: #f5f5f5; --om-superficie: #ffffff; /* tarjetas, inputs */ --om-hover: #fafbfc; /* hover de filas, paneles internos */ --om-texto: #161c2d; --om-texto-suave: #5f6673; --om-borde: #e0e0e0; --om-grilla: #ececec; /* grillas de gráficos */ --om-enlace: #00838f; --om-chip-bg: #e0f2f4; --om-chip-texto: #00838f; --om-chip-gris-bg: #eceff1; --om-exito: #2e7d32; --om-error: #c62828; --om-alerta: #ef6c00; } /* Modo oscuro: superficies marino, mismos acentos teal de marca. Se activa con data-theme en (localStorage, ver base.html). */ :root[data-theme="dark"] { --om-fondo: #10141f; --om-superficie: #1f2740; --om-hover: #263050; --om-texto: #e8ecf4; --om-texto-suave: #a0a9bd; --om-borde: #333e5e; --om-grilla: #2d3757; --om-enlace: #26c6da; --om-chip-bg: rgba(0, 172, 193, .16); --om-chip-texto: #4dd0e1; --om-chip-gris-bg: #2a3352; --om-exito: #66bb6a; --om-error: #ef5350; --om-alerta: #ffa726; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Roboto", -apple-system, "Segoe UI", sans-serif; background: var(--om-fondo); color: var(--om-texto); font-size: 15px; } a { color: var(--om-enlace); text-decoration: none; } a:hover { opacity: .85; } h1 { font-weight: 500; font-size: 1.6rem; margin-bottom: 1rem; } h2 { font-weight: 400; font-size: 1.25rem; margin: 1.2rem 0 .8rem; } /* ── Layout con sidebar ─────────────────────────────────────────── */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 230px; flex-shrink: 0; background: var(--om-cian-claro); color: #fff; display: flex; flex-direction: column; /* Inmóvil al hacer scroll: siempre se ve completo (logo → cerrar sesión) */ position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { padding: 1.4rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); } .brand-logo { max-width: 100%; height: auto; } .brand-texto { font-size: 1.15rem; font-weight: 500; letter-spacing: .3px; } .sidebar-nav { flex: 1; padding: 1rem 0; } .nav-item { display: block; padding: .7rem 1.2rem; color: rgba(255,255,255,.85); font-weight: 400; } .nav-item:hover { background: var(--om-cian); color: #fff; } .nav-item.active { background: var(--om-cian); color: #fff; border-left: 3px solid #fff; padding-left: calc(1.2rem - 3px); } .sidebar-footer { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.08); } .nav-boton { background: none; border: none; width: 100%; text-align: left; font-family: inherit; font-size: inherit; cursor: pointer; } /* Elementos visibles solo en un tema (ej: variante del logo en login) */ .solo-oscuro { display: none; } :root[data-theme="dark"] .solo-claro { display: none; } :root[data-theme="dark"] .solo-oscuro { display: inline; } .btn-tema-flotante { position: fixed; top: 1rem; right: 1rem; z-index: 20; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 20px; padding: .4rem .9rem; font-family: inherit; font-size: .85rem; cursor: pointer; } .btn-tema-flotante:hover { background: rgba(255,255,255,.22); } .usuario-info { padding: 0 1.2rem .6rem; display: flex; flex-direction: column; } .usuario-nombre { font-weight: 500; font-size: .95rem; } .usuario-email { font-size: .8rem; color: rgba(255,255,255,.5); } .contenido { flex: 1; padding: 2rem 2.5rem; max-width: 1300px; margin: 0 auto; /* centrado en el espacio a la derecha del sidebar */ width: 100%; } /* ── Login ──────────────────────────────────────────────────────── */ .login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--om-cian-claro) 0%, var(--om-cian) 55%, var(--om-marino) 170%); } .login-card { background: var(--om-superficie); padding: 2.5rem 2.8rem; border-radius: 10px; width: 100%; max-width: 400px; box-shadow: 0 12px 40px rgba(0,0,0,.35); text-align: center; } .login-logo { max-width: 220px; margin-bottom: .6rem; } .login-titulo { color: var(--om-marino); font-weight: 500; } .login-subtitulo { color: var(--om-texto-suave); font-size: .9rem; margin: .4rem 0 1.6rem; } .login-card form { text-align: left; } .login-card label { display: block; font-size: .85rem; font-weight: 500; color: var(--om-texto-suave); margin: .9rem 0 .3rem; } .login-card input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--om-borde); border-radius: 6px; font-size: .95rem; background: var(--om-superficie); color: var(--om-texto); } .login-card input:focus { outline: 2px solid var(--om-cian-claro); border-color: transparent; } /* ── Botones ────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: .55rem 1.2rem; border: none; border-radius: 6px; font-size: .9rem; font-weight: 500; font-family: inherit; cursor: pointer; } .btn-primario { background: var(--om-cian); color: #fff; } .btn-primario:hover { background: var(--om-cian-claro); color: #fff; } .btn-secundario { background: var(--om-superficie); color: var(--om-enlace); border: 1px solid var(--om-cian); } .btn-secundario:hover { background: var(--om-chip-bg); } .btn-peligro { background: var(--om-superficie); color: var(--om-error); border: 1px solid var(--om-error); } .btn-peligro:hover { background: var(--om-hover); } .btn-block { width: 100%; margin-top: 1.4rem; } .btn-chico { padding: .3rem .7rem; font-size: .8rem; } /* ── Tarjetas y tablas ──────────────────────────────────────────── */ .card { background: var(--om-superficie); border-radius: 8px; padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; box-shadow: 0 1px 4px rgba(22,28,45,.08); } table { width: 100%; border-collapse: collapse; } th { text-align: left; font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--om-texto-suave); padding: .6rem .8rem; border-bottom: 2px solid var(--om-borde); } td { padding: .6rem .8rem; border-bottom: 1px solid var(--om-borde); } tr:hover td { background: var(--om-hover); } .chip { display: inline-block; background: var(--om-chip-bg); color: var(--om-chip-texto); border-radius: 20px; padding: .15rem .6rem; font-size: .75rem; font-weight: 500; margin: 0 .2rem .2rem 0; } .chip-gris { background: var(--om-chip-gris-bg); color: var(--om-texto-suave); } .badge-ok { color: var(--om-exito); font-weight: 500; } .badge-off { color: var(--om-texto-suave); } /* ── Flash messages ─────────────────────────────────────────────── */ .flash-container { position: fixed; top: 1rem; right: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: .5rem; max-width: 420px; } .flash { padding: .8rem 1.1rem; border-radius: 6px; background: var(--om-marino); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: .9rem; } .flash-success { background: var(--om-exito); } .flash-error { background: var(--om-error); } .flash-warning { background: var(--om-alerta); } /* ── Formularios admin ──────────────────────────────────────────── */ .form-grupo { margin-bottom: 1rem; } .form-grupo label { display: block; font-size: .85rem; font-weight: 500; color: var(--om-texto-suave); margin-bottom: .3rem; } .form-grupo input[type="text"], .form-grupo input[type="email"], .form-grupo input[type="password"], .form-grupo select { width: 100%; max-width: 420px; padding: .55rem .8rem; border: 1px solid var(--om-borde); border-radius: 6px; font-size: .95rem; font-family: inherit; background: var(--om-superficie); color: var(--om-texto); } .form-grupo input:focus, .form-grupo select:focus { outline: 2px solid var(--om-cian-claro); border-color: transparent; } .form-check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; } .form-check input { accent-color: var(--om-cian); width: 16px; height: 16px; } /* ── Selector de valores (barras/centrales) ─────────────────────── */ .tipo-bloque { border: 1px solid var(--om-borde); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; } .tipo-bloque.deshabilitado { opacity: .55; } .tipo-encabezado { display: flex; align-items: center; gap: .6rem; } .tipo-encabezado h3 { font-weight: 500; font-size: 1.05rem; } .tipo-encabezado .nota { font-size: .8rem; color: var(--om-texto-suave); } .valores-panel { margin-top: .8rem; } .valores-busqueda { width: 100%; max-width: 320px; padding: .45rem .7rem; margin-bottom: .5rem; border: 1px solid var(--om-borde); border-radius: 6px; font-family: inherit; background: var(--om-superficie); color: var(--om-texto); } .valores-lista { max-height: 260px; overflow-y: auto; border: 1px solid var(--om-borde); border-radius: 6px; padding: .5rem .8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .1rem .8rem; background: var(--om-hover); } .valores-acciones { margin: .5rem 0 0; display: flex; gap: 1rem; align-items: center; font-size: .85rem; } .contador-seleccion { color: var(--om-texto-suave); } /* ── Filtros del dashboard ──────────────────────────────────────── */ .filtros-fila { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filtro label { display: block; font-size: .78rem; font-weight: 500; color: var(--om-texto-suave); margin-bottom: .25rem; } .filtro select { padding: .45rem .7rem; border: 1px solid var(--om-borde); border-radius: 6px; font-family: inherit; font-size: .9rem; background: var(--om-superficie); color: var(--om-texto); } .filtro-boton { margin-left: auto; } .dropdown { position: relative; } .dropdown summary { list-style: none; cursor: pointer; padding: .45rem .8rem; border: 1px solid var(--om-borde); border-radius: 6px; background: var(--om-superficie); font-size: .9rem; user-select: none; } .dropdown summary::-webkit-details-marker { display: none; } .dropdown summary::after { content: " ▾"; color: var(--om-texto-suave); } .dropdown-panel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 280px; overflow-y: auto; background: var(--om-superficie); border: 1px solid var(--om-borde); border-radius: 8px; padding: .6rem .9rem; box-shadow: 0 8px 24px rgba(22,28,45,.25); } /* ── KPIs por barra ─────────────────────────────────────────────── */ .kpi-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; } .kpi { background: var(--om-superficie); border-radius: 8px; padding: .9rem 1.1rem; box-shadow: 0 1px 4px rgba(22,28,45,.08); } .kpi-titulo { font-size: .82rem; font-weight: 500; color: var(--om-texto-suave); display: flex; align-items: center; gap: .45rem; } .punto-serie { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .kpi-valor { font-size: 1.45rem; font-weight: 500; margin-top: .25rem; } .kpi-unidad { font-size: .72rem; font-weight: 400; color: var(--om-texto-suave); } .kpi-sub { font-size: .78rem; color: var(--om-texto-suave); margin-top: .15rem; font-variant-numeric: tabular-nums; } /* ── Gráficos ───────────────────────────────────────────────────── */ .chart-wrap { position: relative; height: 340px; } #cmgTabla td { font-variant-numeric: tabular-nums; } /* ── Dashboard tabs ─────────────────────────────────────────────── */ .tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--om-borde); margin-bottom: 1.4rem; } .tab { padding: .6rem 1.2rem; cursor: pointer; color: var(--om-texto-suave); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -2px; } .tab.active { color: var(--om-cian); border-bottom-color: var(--om-cian); } .tab-panel { display: none; } .tab-panel.active { display: block; } .encabezado-pagina { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; } .estado-generando { display: inline-flex; align-items: center; gap: .5rem; color: var(--om-alerta); font-weight: 500; font-size: .9rem; } .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--om-alerta); border-top-color: transparent; animation: girar 1s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ── Tablas con scroll horizontal (móvil/tablet) ────────────────── */ .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla-scroll table { min-width: 560px; } /* ── Topbar móvil + overlay ─────────────────────────────────────── */ .mobile-topbar { display: none; /* visible solo bajo el breakpoint */ position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--om-cian-claro); align-items: center; gap: .6rem; padding: 0 .8rem; z-index: 150; box-shadow: 0 2px 8px rgba(22,28,45,.25); } .hamburger { background: none; border: none; cursor: pointer; color: #fff; padding: .3rem; line-height: 0; border-radius: 6px; } .hamburger:hover { background: var(--om-cian); } .topbar-logo { height: 30px; width: auto; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 199; } .sidebar-overlay.visible { display: block; } /* ── Responsive ─────────────────────────────────────────────────── */ /* Tablet vertical y celular: sidebar off-canvas + topbar con hamburguesa. El sidebar debe ser position:fixed (nunca relative): si ocupa espacio en el flujo genera overflow horizontal y los elementos fixed "se mueven" con el scroll en móvil (ver ProgramaEjemplo/Descubrimientos.md). */ @media (max-width: 900px) { .mobile-topbar { display: flex; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; transform: translateX(-250px); transition: transform .25s; z-index: 200; overflow-y: auto; } .sidebar.open { transform: translateX(0); } .contenido { padding: 1.2rem; padding-top: calc(52px + 1.2rem); /* no quedar bajo el topbar */ max-width: 100%; } .encabezado-pagina { flex-direction: column; align-items: flex-start; gap: .8rem; } .flash-container { left: 1rem; right: 1rem; max-width: none; top: calc(52px + .6rem); } .card { padding: 1.1rem 1.2rem; } .form-grupo input[type="text"], .form-grupo input[type="email"], .form-grupo input[type="password"], .form-grupo select { max-width: 100%; } .valores-busqueda { max-width: 100%; } .valores-lista { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab { white-space: nowrap; } .login-card { margin: 1rem; padding: 2rem 1.6rem; } } /* Celulares chicos */ @media (max-width: 420px) { .contenido { padding: .8rem; padding-top: calc(52px + .8rem); } .filtros-fila { gap: .6rem; } .filtro { width: calc(50% - .3rem); } .filtro select, .dropdown summary { width: 100%; } .filtro-boton { width: 100%; margin-left: 0; } .chart-wrap { height: 260px; } .valores-lista { grid-template-columns: 1fr; max-height: 220px; } .valores-acciones { flex-wrap: wrap; gap: .6rem; } .btn { padding: .55rem 1rem; } .tipo-bloque { padding: .8rem .9rem; } .tipo-encabezado { flex-wrap: wrap; } }