:root { --sidebar-bg: #16215c; --sidebar-bg-active: #232f78; --sidebar-text: #c7cbe8; --sidebar-text-active: #ffffff; --sidebar-heading: #7b82b5; --brand-blue: #2952e3; --brand-blue-dark: #1e3fc4; --bg-app: #f4f5fa; --border: #e5e7f0; --text-dark: #1f2440; --text-muted: #7d81a0; --green: #1fa574; --orange: #f0952b; --red: #e6483f; --teal: #14a3ad; --purple: #7461e8; --cyan: #2ba7d8; } * { box-sizing: border-box; } /* "clip" en vez de "hidden": recorta el desborde horizontal sin volver a su propio contenedor con scroll (eso es lo que pasa si se usa "hidden" en un solo eje — el navegador convierte el otro eje en "auto" automáticamente), que es justo lo que rompía el menú lateral "sticky" (se desplazaba junto con la página en vez de quedarse fijo arriba). */ html { overflow-x: clip; overflow-y: visible; } body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; background: var(--bg-app); color: var(--text-dark); font-size: 14px; /* Red de seguridad: si algo se desborda de todos modos, que se recorte en vez de empujar toda la página y obligar a usar la barra de abajo para moverse a los lados. "clip" (no "hidden") por la misma razón que en arriba — con "hidden" en un solo eje, el menú lateral "sticky" deja de quedarse fijo al hacer scroll. */ overflow-x: clip; overflow-y: visible; max-width: 100vw; } a { text-decoration: none; color: inherit; } .app-layout { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: 260px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width 0.15s ease; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); } .sidebar-toggle { margin-left: auto; background: rgba(255,255,255,0.08); border: none; color: #fff; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px; flex-shrink: 0; } .sidebar-toggle:hover { background: rgba(255,255,255,0.18); } /* ---------- Sidebar colapsado ---------- */ .sidebar.collapsed { width: 72px; } .sidebar.collapsed .sidebar-brand { flex-direction: column; gap: 8px; padding: 14px 8px; } .sidebar.collapsed .brand-text { display: none; } .sidebar.collapsed .sidebar-toggle { margin-left: 0; } .sidebar.collapsed .sidebar-link { justify-content: center; padding: 10px 6px; } .sidebar.collapsed .sidebar-link .label { display: none; } .sidebar.collapsed .sidebar-link .icon { font-size: 18px; } /* Título de cada sección: en modo colapsado se convierte en un ícono-tile centrado (con tooltip nativo vía title=""), en vez de texto rotado o cortado. */ .sidebar-section-title { display: flex; align-items: center; gap: 8px; padding: 14px 10px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sidebar-heading); } .sidebar-section-title .icon { display: none; font-size: 16px; } /* En modo colapsado cada sección se vuelve una "tile" con su propio espacio, separada de las demás, para que el mouse tenga un blanco claro dónde entrar sin rozar la de al lado. */ .sidebar.collapsed .sidebar-group { margin-bottom: 10px; } .sidebar.collapsed .sidebar-section-title { justify-content: center; padding: 12px 4px; margin: 0 6px; border-radius: 10px; cursor: pointer; } .sidebar.collapsed .sidebar-section-title:hover { background: rgba(255,255,255,0.08); } .sidebar.collapsed .sidebar-section-title .text { display: none; } .sidebar.collapsed .sidebar-section-title .icon { display: inline-block; font-size: 20px; } .sidebar-group { position: relative; } .sidebar.collapsed .sidebar-links-list { display: none; } /* En modo colapsado, al pasar el mouse sobre una sección, JS le agrega esta clase a su sidebar-links-list y la posiciona con position:fixed (calculado con getBoundingClientRect). Al ser "fixed" no depende del overflow del contenedor padre, así que no aparece ninguna barra de scroll horizontal ni se recorta contra el borde del menú. NOTA: el selector se escribe con el mismo prefijo ".sidebar.collapsed" que la regla de arriba (display:none) para que tenga AL MENOS la misma especificidad — si no, esa regla más específica gana siempre y el flyout nunca llega a mostrarse, aunque la clase sí se le agregue por JS (bug real que tenía esto). */ .sidebar.collapsed .sidebar-links-list.flyout-open { display: block; position: fixed; width: 220px; background: var(--sidebar-bg); box-shadow: 6px 6px 24px rgba(0,0,0,0.3); border-radius: 10px; padding: 10px; z-index: 200; } .sidebar.collapsed .sidebar-links-list.flyout-open .sidebar-link { justify-content: flex-start; } .sidebar.collapsed .sidebar-links-list.flyout-open .sidebar-link .label { display: inline; } .sidebar.collapsed .sidebar-footer { flex-direction: column; gap: 6px; padding: 12px 6px; } .sidebar.collapsed .sidebar-footer-text { display: none; } .sidebar.collapsed .sidebar-footer .logout-btn { margin-left: 0; } .sidebar-brand .logo-badge { width: 38px; height: 38px; background: var(--brand-blue); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; flex-shrink: 0; } .sidebar-brand .brand-text .brand-title { font-weight: 700; color: #fff; font-size: 17px; line-height: 1.1; } .sidebar-brand .brand-text .brand-sub { font-size: 11px; color: var(--sidebar-heading); } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 10px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 14px; color: var(--sidebar-text); } .sidebar-link .icon { width: 18px; text-align: center; opacity: 0.9; } .sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar-link.active { background: var(--sidebar-bg-active); color: var(--sidebar-text-active); font-weight: 600; } .sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); } .sidebar-footer .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .sidebar-footer .user-name { color: #fff; font-size: 13px; font-weight: 600; } .sidebar-footer .user-role { color: var(--sidebar-heading); font-size: 11px; } .sidebar-footer .logout-btn { margin-left: auto; color: var(--sidebar-heading); font-size: 16px; } .sidebar-footer .logout-btn:hover { color: #fff; } /* ---------- Main content ---------- */ .main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: #fff; border-bottom: 1px solid var(--border); } .topbar h1 { font-size: 20px; margin: 0; display: flex; align-items: center; gap: 10px; } .topbar .topbar-date { color: var(--text-muted); font-size: 13px; margin-right: 14px; } .page-body { padding: 24px 28px; flex: 1; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text-dark); font-size: 13.5px; font-weight: 600; cursor: pointer; } .btn:hover { background: #f8f9fc; } .btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; } .btn-primary:hover { background: var(--brand-blue-dark); } .btn-danger { background: var(--red); border-color: var(--red); color: #fff; } .btn-sm { padding: 5px 10px; font-size: 12.5px; } /* ---------- Cards / KPIs ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; } .kpi-card { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--brand-blue); border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; } .kpi-card .kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #eef1ff; } .kpi-card .kpi-value { font-size: 20px; font-weight: 700; } .kpi-card .kpi-label { color: var(--text-muted); font-size: 12.5px; } .card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px; /* Sin esto, una tarjeta dentro de un grid de dos columnas no se encoge cuando su contenido (una tabla ancha, por ejemplo) es más grande que su espacio asignado — eso empujaba TODA la página a hacerse más ancha que la pantalla y aparecía una barra para moverse a los lados al reabrir la pestaña con una ventana más chica. */ min-width: 0; max-width: 100%; overflow-x: auto; } /* ---------- Kanban (Negocios) ---------- */ .kanban-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; } .kanban-col { min-width: 260px; max-width: 260px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .kanban-col-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 10px; padding: 4px 4px 8px; border-bottom: 3px solid var(--col-color, var(--brand-blue)); } .kanban-col-header .count { background: var(--col-color, var(--brand-blue)); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 12px; } .kanban-col.etapa-diagnostico { --col-color: var(--cyan); } .kanban-col.etapa-propuesta { --col-color: var(--purple); } .kanban-col.etapa-anticipo { --col-color: var(--orange); } .kanban-col.etapa-atender { --col-color: var(--teal); } .kanban-col.etapa-ganado { --col-color: var(--green); } .kanban-col.etapa-perdido { --col-color: var(--red); } .kanban-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 18px 6px; } .kanban-card { display: block; background: #f9fafc; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; } .kanban-card:hover { border-color: var(--brand-blue); } .kanban-card .kc-title { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; } .kanban-card .kc-sub { font-size: 12px; color: var(--text-muted); } .kanban-card .kc-total { font-size: 13px; font-weight: 700; color: var(--brand-blue); margin-top: 4px; } /* ---------- Tables ---------- */ table.data-table { width: 100%; border-collapse: collapse; } table.data-table th, table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13.5px; } table.data-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } table.data-table tbody tr:hover { background: #f9fafc; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; } .badge-diagnostico { background: #e3f4fb; color: var(--cyan); } .badge-propuesta { background: #ece8fd; color: var(--purple); } .badge-anticipo { background: #fdf1e0; color: var(--orange); } .badge-atender { background: #e0f6f6; color: var(--teal); } .badge-ganado { background: #e2f6ee; color: var(--green); } .badge-perdido { background: #fbe6e5; color: var(--red); } /* Select con la misma pinta que un badge, para cambiar la etapa directo en la tabla */ .badge-select { border: none; border-radius: 999px; padding: 4px 26px 4px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 13.5px; font-family: inherit; background: #fff; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand-blue); } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); } .empty-state .icon { font-size: 34px; margin-bottom: 10px; } .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar-bg); } .login-box { background: #fff; border-radius: 14px; padding: 36px 34px; width: 360px; } .login-box h1 { text-align: center; font-size: 20px; margin-bottom: 4px; } .login-box .sub { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 22px; } .login-error { background: #fbe6e5; color: var(--red); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; } .text-muted { color: var(--text-muted); } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ================================================================================ RESPONSIVE — para que se pueda usar bien desde el teléfono o una tablet, que es donde más se va a usar. Reglas generales que aplican a todas las páginas, sin tener que tocar el HTML de cada una: - Cualquier `style="display:grid; grid-template-columns: ...fr ...fr ..."` en línea (usado en Dashboard, Finanzas, ficha de negocio, etc.) se vuelve una sola columna. - El menú lateral se colapsa por default en pantallas chicas, y si se expande a propósito, flota ENCIMA del contenido en vez de apachurrarlo. - Las tarjetas (.card) ya traen su propio scroll horizontal (ver arriba) para las tablas anchas, así que no hace falta que se desborde toda la página. ================================================================================ */ @media (max-width: 900px) { [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 300; width: 72px; } .sidebar:not(.collapsed) { width: 240px; box-shadow: 8px 0 24px rgba(0,0,0,0.25); } .main-content { margin-left: 72px; } .kpi-grid { grid-template-columns: 1fr 1fr; } .page-body { padding: 16px; } .topbar { padding: 14px 16px; flex-wrap: wrap; gap: 8px; } } @media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr !important; } table.data-table { font-size: 12px; } /* En teléfono el menú lateral deja de ser una columna angosta que se queda todo el tiempo ocupando parte de la pantalla (eso se ve bien en tablet, pero en teléfono es demasiado espacio) — se convierte en una barra superior chica (logo + botón ☰) y el contenido usa el ancho completo. Al tocar el botón se abre un panel de pantalla completa con todas las opciones (como el menú expandido de computadora); al elegir una opción (navega a otra página) o al volver a tocar el botón (ahora ✕), se cierra. */ .sidebar, .sidebar.collapsed { position: fixed; left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 56px; flex-direction: row; z-index: 300; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.15); } /* La clase "collapsed" en teléfono solo se usa (ver JS) para que al cerrar el panel no le queden aplicados los estilos de "menú expandido" — aquí se anulan las reglas de ".sidebar.collapsed ..." pensadas para el modo "solo íconos" de escritorio/tablet, que si no se dejaran así se colarían y romperían la barra superior chica. */ .sidebar-brand, .sidebar.collapsed .sidebar-brand { padding: 8px 14px; border-bottom: none; flex: 1; flex-direction: row; gap: 10px; } .sidebar.collapsed .brand-text { display: block; } .sidebar-toggle, .sidebar.collapsed .sidebar-toggle { display: flex; align-items: center; justify-content: center; margin-left: 0; } .sidebar-nav, .sidebar-footer { display: none; } /* Panel abierto: ocupa toda la pantalla y se comporta como el menú expandido normal (marca arriba, opciones en medio con scroll propio, usuario/salir abajo). Se quita la clase "collapsed" al abrir (ver JS) para que no le apliquen los estilos de "solo íconos" del modo colapsado de escritorio/tablet. */ .sidebar.mobile-open { width: 100%; height: 100vh; flex-direction: column; overflow-y: auto; box-shadow: none; } .sidebar.mobile-open .sidebar-brand { flex: none; padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); } .sidebar.mobile-open .sidebar-nav, .sidebar.mobile-open .sidebar-footer { display: flex; } .sidebar.mobile-open .sidebar-nav { flex-direction: column; } /* Los "flyouts" del menú colapsado (hover/tap para desplegar una sección) no aplican aquí — en el panel abierto siempre se ve la lista completa de una vez, como en computadora con el menú expandido. */ .sidebar.mobile-open .sidebar-links-list { display: block !important; position: static !important; box-shadow: none !important; padding: 0 !important; } .sidebar.mobile-open .sidebar-link { justify-content: flex-start !important; padding: 9px 12px !important; } .sidebar.mobile-open .sidebar-link .label { display: inline !important; } .sidebar.mobile-open .sidebar-section-title .text { display: inline !important; } .sidebar.mobile-open .sidebar-section-title .icon { display: none !important; } .sidebar.mobile-open .sidebar-footer-text { display: block !important; } body.mobile-nav-open { overflow: hidden; } .main-content { margin-left: 0; margin-top: 56px; } } /* ---------- Modal genérico (vista previa de archivos, detalle del día del calendario) --- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 22, 40, 0.55); z-index: 1000; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.abierto { display: flex; } .modal-box { background: #fff; border-radius: 12px; max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 20px 22px; position: relative; box-shadow: 0 20px 60px rgba(10, 12, 30, 0.35); } .modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; } .modal-close:hover { background: #f2f3f8; color: var(--text-dark); } .archivo-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px; width: 130px; cursor: pointer; text-align: center; background: #fbfbfe; } .archivo-card:hover { border-color: var(--brand-blue); background: #f4f6ff; } .archivo-card img { width: 100%; height: 90px; object-fit: cover; border-radius: 5px; margin-bottom: 6px; } .archivo-card .archivo-icono { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #eef0f7; border-radius: 5px; margin-bottom: 6px; } .archivo-card .archivo-nombre { font-size: 11px; color: var(--text-muted); word-break: break-word; }