:root { --bg: #0b1017; --bg-soft: #121a24; --card: #141c27; --muted: #8aa3bd; --text: #e7eef7; --brand: #5aa7ff; --ok: #4ade80; --warn: #f59e0b; --bad: #ef4444; --border: #223042; --radius: 14px; } /* Light mode overrides for Modal Inputs */ .theme-light .app-modal .input, .theme-light .app-modal select.input, .theme-light .app-modal textarea.input { background: #ffffff; color: #0f1720; border-color: #e5e7eb; /* var(--border) in light mode */ } .theme-light .app-modal .input::placeholder { color: #64748b; } /* Reset calendar icon inversion in Light Mode */ .theme-light input[type="date"].input::-webkit-calendar-picker-indicator { filter: none; } /* Tema claro (toggle por clase .theme-light en ) */ .theme-light { --bg: #f6f7fb; --bg-soft: #ffffff; --card: #ffffff; --muted: #516170; --text: #0f1720; --brand: #5aa7ff; --ok: #16a34a; --warn: #d97706; --bad: #dc2626; --border: #e5e7eb; } * { box-sizing: border-box } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif } a { color: inherit; text-decoration: none } /* Layout base */ .app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh } aside { background: var(--bg-soft); border-right: 1px solid var(--border); padding: 18px } .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px } .brand-badge { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #7fd6ff); display: grid; place-items: center; font-weight: 800; color: #05203a } /* Buscador */ .search { position: relative; margin: 10px 0 18px } .search input { width: 100%; padding: 10px 12px 10px 34px; border-radius: 10px; border: 1px solid var(--border); background: #0e1520; color: var(--text) } .theme-light .search input { background: #ffffff; color: var(--text) } .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .7 } /* Navegación */ nav { display: flex; flex-direction: column; gap: 6px } .nav-section { margin-top: 16px; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .06em } .nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent } .nav a.active, .nav a:hover { background: var(--card); border-color: var(--border) } /* Encabezado */ header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 42; gap: 10px; flex-wrap: wrap; } header>.row { min-width: 0; flex: 1 1 auto } header .right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap } #menuToggle { display: none } /* Botones */ .btn { padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer } .btn.primary { background: linear-gradient(135deg, var(--brand), #7fd6ff); color: #05203a; border: none; font-weight: 700 } .btn.ghost { background: transparent } /* Contenido */ main { padding: 20px } .grid { display: grid; gap: 14px } .grid.cols-2 { grid-template-columns: 1fr 1fr } .grid.cols-3 { grid-template-columns: repeat(3, 1fr) } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px } .title { font-weight: 700; font-size: 18px; margin: 0 0 8px } .muted { color: var(--muted) } /* Tabla (ancho normal) */ .table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px } .table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left } .table th { color: #b3c3d7; font-size: 12px; text-transform: uppercase; letter-spacing: .04em } .theme-light .table th { color: #475569 } /* Tabla responsiva sin scroll (móvil = “cards”) */ @media (max-width: 960px) { .table.stack thead { display: none } .table.stack tbody tr { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin: 10px 0; overflow: hidden; } .table.stack tbody td { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: normal; } .table.stack tbody tr td:last-child { border-bottom: none } .table.stack tbody td::before { content: attr(data-label); color: var(--muted); font-size: 12px; } .table.stack tbody td.actions { grid-template-columns: 130px 1fr } .table.stack tbody td.actions>div { display: flex; flex-wrap: wrap; gap: 8px } } /* Wrapper/scroll solo desktop si hace falta */ @media (min-width: 961px) { .table-responsive { width: 100%; overflow: auto; overscroll-behavior-x: contain; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(90deg, transparent 0, transparent 8px, var(--card) 8px, var(--card) calc(100% - 8px), transparent calc(100% - 8px), transparent 100%) } .table-responsive::-webkit-scrollbar { height: 8px } .table-responsive::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 8px } .table th, .table td { white-space: nowrap } } /* Inputs / utilidades */ .input { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: #0e1520; color: var(--text) } .theme-light .input { background: #ffffff; color: var(--text) } .row { display: flex; gap: 10px; align-items: center } .row.wrap { flex-wrap: wrap } .field { display: flex; flex-direction: column; gap: 6px; color: var(--text) } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: #0e1520; color: var(--muted); font-size: 12px } .theme-light .pill { background: #ffffff } .status { padding: 3px 8px; border-radius: 999px; font-size: 12px } .status.ok { background: rgba(74, 222, 128, .15); color: #8cf0af; border: 1px solid rgba(74, 222, 128, .3) } .status.bad { background: rgba(239, 68, 68, .15); color: #ff9e9e; border: 1px solid rgba(239, 68, 68, .3) } .status.warn { background: rgba(245, 158, 11, .15); color: #ffd18a; border: 1px solid rgba(245, 158, 11, .3) } /* Toolbar */ .toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap } .toolbar .row { flex: 1 1 260px } .toolbar .row:last-child { flex: 0 0 auto; justify-content: flex-end } /* ===== Modal (maqueta, renombrado para no chocar con Bootstrap) ===== */ .app-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: none; /* se mostrará como flex al abrir */ align-items: center; justify-content: center; z-index: 90; } .app-modal { width: min(860px, 92vw); background: var(--bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35) } .app-modal header { background: transparent; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 14px 20px } .app-modal .content { padding: 14px 20px 20px } .wizard-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px } .step { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; opacity: .7 } .step.active { opacity: 1; background: var(--card) } /* ------------------------------ Sidebar responsivo (off-canvas) ------------------------------ */ .nav-backdrop { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40; } aside { z-index: 41; } header { z-index: 42; } .app-modal-backdrop { z-index: 90; } @media (max-width: 960px) { .app { grid-template-columns: 1fr; } aside { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border-right: 1px solid var(--border); } .menu-open aside { transform: translateX(0); } .menu-open .nav-backdrop { opacity: .5; pointer-events: auto; } /* Header en dos líneas */ header { flex-direction: column; align-items: stretch } header .right { justify-content: space-between } #menuToggle { display: inline-flex } /* Toolbar móvil */ .toolbar .row { flex: 1 1 100% } .toolbar .row:last-child { flex: 1 1 100%; justify-content: stretch } .toolbar .row:last-child .btn { width: 100% } } @media (min-width: 961px) { .nav-backdrop { display: none; } } /* ===== Fix: el menú debe ir por encima del header en móvil ===== */ :root { --z-header: 20; /* encabezado */ --z-backdrop: 70; /* cortina del menú */ --z-menu: 80; /* sidebar/off-canvas */ --z-modal: 90; /* modal de la maqueta */ } /* capas por defecto (sobrescriben lo anterior) */ header { z-index: var(--z-header); } .nav-backdrop { z-index: var(--z-backdrop); } aside { z-index: var(--z-menu); } .app-modal-backdrop { z-index: var(--z-modal); } /* en móvil mantenemos el menú por encima del header */ @media (max-width: 960px) { header { z-index: var(--z-header); } /* 20 */ .nav-backdrop { z-index: var(--z-backdrop); } /* 70 */ aside { z-index: var(--z-menu); } /* 80 */ } /* ===== Scroll del menú (sidebar) ===== */ /* En escritorio: sidebar fijo y scrolleable si hay muchas opciones */ @media (min-width: 961px) { aside { position: sticky; /* siempre visible al hacer scroll del contenido */ top: 0; height: 100vh; /* alto completo de la ventana */ overflow-y: auto; /* permite scroll dentro del menú */ -webkit-overflow-scrolling: touch; /* scroll suave en iOS */ overscroll-behavior: contain; /* evita “arrastrar” el fondo */ } } /* En móvil: sidebar off-canvas, también scrolleable */ @media (max-width: 960px) { body.menu-open { overflow: hidden; } /* bloquea scroll del fondo cuando el menú está abierto */ aside { height: 100vh; /* asegura alto completo del viewport */ overflow-y: auto; /* permite scroll dentro del menú */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; /* mejora gestos verticales en móviles */ } } /* ===== Modal: alto máx + scroll interno + safe-area ===== */ .app-modal { display: flex; flex-direction: column; width: min(860px, 96vw); max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* el 24px da un pequeño margen arriba/abajo */ } .app-modal .content { overflow: auto; /* el contenido del modal scrollea */ -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom)); } /* Bloquea scroll del fondo cuando hay modal */ body.app-modal-open { overflow: hidden; } /* ===== Grids: colapsar a 1 columna en móvil ===== */ @media (max-width: 960px) { .grid.cols-2 { grid-template-columns: 1fr; } .grid.cols-3 { grid-template-columns: 1fr; } .app-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 14px; } } /* ===== Fix modo nocturno: formularios con mejor contraste ===== */ /* Indica al navegador el esquema de color (afecta UI de controles nativos) */ html { color-scheme: dark; } html.theme-light { color-scheme: light; } /* Inputs base (oscuro) */ .input, select.input, textarea.input { background: #0f1720; /* un pelín más claro que --bg para contraste */ color: var(--text); border: 1px solid var(--border); } /* Placeholders con contraste legible */ .input::placeholder, select.input::placeholder, textarea.input::placeholder { color: rgba(231, 238, 247, .65); /* var(--text) con ~65% */ } .theme-light .input::placeholder, .theme-light select.input::placeholder, .theme-light textarea.input::placeholder { color: #64748b; /* mejor en claro */ } /* Foco accesible (sin cambiar la paleta) */ .input:focus, select.input:focus, textarea.input:focus { outline: 2px solid rgba(90, 167, 255, .55); /* var(--brand) */ outline-offset: 0; border-color: rgba(90, 167, 255, .65); box-shadow: 0 0 0 3px rgba(90, 167, 255, .15); } /* Icono del datepicker en navegadores WebKit en modo oscuro */ input[type="date"].input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.2); } /* Asegura los mismos estilos dentro del modal de la app */ .app-modal .input, .app-modal select.input, .app-modal textarea.input { background: #0f1720; color: var(--text); border: 1px solid var(--border); } .app-modal .input::placeholder { color: rgba(231, 238, 247, .65); } /* Labels y títulos en el modal con buena lectura */ .app-modal label { color: var(--text); } .app-modal .title { color: var(--text); } /* Modal: alto máx + scroll interno + safe-area (por si no lo pegaste antes) */ .app-modal { display: flex; flex-direction: column; width: min(860px, 96vw); max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .app-modal .content { overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom)); } /* Grids del modal en móvil: 1 columna */ @media (max-width:960px) { .grid.cols-2 { grid-template-columns: 1fr; } .grid.cols-3 { grid-template-columns: 1fr; } .app-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 14px; } } /* ===== Fix: encabezado de tabla en modo oscuro/ligero ===== */ .table thead tr, .table thead th { background: #0f1720; /* oscuro: ligeramente más claro que --bg */ } .theme-light .table thead tr, .theme-light .table thead th { background: #f3f4f6; /* claro: gris suave */ } /* Bordes y contraste consistentes */ .table th, .table td { border-bottom-color: var(--border); } /* Rounding del encabezado (cuando la tabla va dentro de .table-responsive) */ .table thead th:first-child { border-top-left-radius: 10px; } .table thead th:last-child { border-top-right-radius: 10px; } /* Hover de filas (sutil, sin cambiar paleta) */ @media (hover:hover) { .table tbody tr:hover td { background: rgba(255, 255, 255, .03); } } .theme-light .table tbody tr:hover td { background: rgba(0, 0, 0, .03); } /* ==== Noche uniforme: cards, tablas y modales con mismo fondo ==== */ :root { /* ya tienes vars; solo reforzamos usos en noche */ /* sin cambios de paleta */ } .theme-light { /* sin cambios */ } /* Cards / contenedores */ .card { background: var(--bg-soft); } /* Encabezados de tabla y celdas (evita blanco por defecto del user agent) */ .table thead tr, .table thead th { background: var(--bg-soft); color: var(--text); } .table tbody td { background: var(--card); /* un tono más claro dentro del card */ color: var(--text); } /* Alternado sutil y hover (noche) */ .table tbody tr:nth-child(odd) td { background: #16202c; } .table tbody tr:nth-child(even) td { background: var(--card); } @media (hover:hover) { .table tbody tr:hover td { background: rgba(255, 255, 255, .05); } } .theme-light .table tbody tr:nth-child(odd) td { background: #ffffff; } .theme-light .table tbody tr:nth-child(even) td { background: #fafafa; } .theme-light .table tbody tr:hover td { background: rgba(0, 0, 0, .03); } /* ==== Modal uniforme en noche (mismo fondo y textos legibles) ==== */ .app-modal { background: var(--bg-soft); /* antes: var(--bg); ahora armoniza con cards */ color: var(--text); } .app-modal header { color: var(--text); } .app-modal .title { color: var(--text); } /* Labels/leyendas del modal (eran muy tenues) */ .app-modal .muted { color: rgba(231, 238, 247, .85); } /* noche */ .theme-light .app-modal .muted { color: #516170; } /* claro */ /* Inputs dentro de modal (fondo/placeholder/contraste) */ .app-modal .input, .app-modal select.input, .app-modal textarea.input { background: #0f1720; color: var(--text); border: 1px solid var(--border); } .app-modal .input::placeholder { color: rgba(231, 238, 247, .72); } .theme-light .app-modal .input, .theme-light .app-modal select.input, .theme-light .app-modal textarea.input { background: #ffffff; color: #0f1720; border-color: #e5e7eb; } .theme-light .app-modal .input::placeholder, .theme-light .app-modal select.input::placeholder, .theme-light .app-modal textarea.input::placeholder { color: #64748b; } /* Botón de acción en modal debe resaltar igual en noche */ .app-modal .btn.primary { background: linear-gradient(135deg, var(--brand), #7fd6ff); color: #05203a; } /* Mantén el alto máximo y scroll del contenido del modal */ .app-modal { display: flex; flex-direction: column; width: min(860px, 96vw); max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .app-modal .content { overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom)); } /* Grids a 1 columna en móviles para que nada se corte */ @media (max-width:960px) { .grid.cols-2 { grid-template-columns: 1fr; } .grid.cols-3 { grid-template-columns: 1fr; } } /* ===== Fix: títulos visibles en modo noche (y claro) ===== */ .card .title, .card h1, .card h2, .card h3 { color: var(--text); /* usa el color del tema activo */ } /* (opcional) títulos dentro de modales */ .app-modal header strong { color: var(--text); } /* =========================== Fix modo nocturno en modales =========================== */ /* Contenedor del modal (nuestro “app-modal”) */ .app-modal { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); } /* Encabezado del modal */ .app-modal>header { background: var(--bg-soft); border-bottom: 1px solid var(--border); color: var(--text); } /* Texto por defecto dentro del contenido del modal */ .app-modal .content, .app-modal .content p, .app-modal .content div, .app-modal .content span, .app-modal .content li, .app-modal .content dt, .app-modal .content dd { color: var(--text); } /* Etiquetas/ayudas: que usen el “muted” del tema oscuro */ .app-modal .text-muted, .app-modal .muted, .app-modal .content small, .app-modal .content label { color: var(--muted) !important; opacity: 1 !important; /* por si Bootstrap baja la opacidad */ } /* Tarjetas, listas o “chips” dentro del modal */ .app-modal .card, .app-modal .list-group-item, .app-modal .pill { background: var(--card); color: var(--text); border: 1px solid var(--border); } /* Inputs mostrados en modales */ .app-modal .form-control, .app-modal .input { background: #0e1520; /* mismo fondo que usamos en oscuro */ color: var(--text); border: 1px solid var(--border); } /* Enlaces dentro del modal */ .app-modal a { color: var(--brand); } /* Botón “Cerrar” de la franja inferior (si lo tienes) */ .app-modal .btn { color: var(--text); } .app-modal .btn.ghost { color: var(--muted); } /* ===== Cursos: tabla más compacta, sin perder legibilidad ===== */ /* layout fijo: permite elipsis/recortes limpios */ .table.table-fixed { table-layout: fixed; } .table.table-fixed th, .table.table-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Compacta filas y botones dentro de la tabla */ .table.compact th, .table.compact td { padding: 8px 10px; font-size: 13px; } .table.compact .btn { padding: 6px 8px; font-size: 12px; border-radius: 8px; } /* Las “pills” de categorías ocupaban mucho */ .table td .pill { padding: 4px 8px; font-size: 11px; gap: 6px; } .table td[data-label="Categorías"], .table td.cat-cell { white-space: normal; } .table td[data-label="Categorías"]>.pill, .table td.cat-cell>.pill { margin: 2px 4px 2px 0; } /* Anchos sugeridos por columna (ajustables) */ #crsTable.table-fixed th:nth-child(1), #crsTable.table-fixed td:nth-child(1) { width: 70px; } /* ID */ #crsTable.table-fixed th:nth-child(2), #crsTable.table-fixed td:nth-child(2) { width: 34%; } /* Nombre */ #crsTable.table-fixed th:nth-child(3), #crsTable.table-fixed td:nth-child(3) { width: 120px; } /* Precio */ #crsTable.table-fixed th:nth-child(4), #crsTable.table-fixed td:nth-child(4) { width: 110px; } /* Impuesto */ #crsTable.table-fixed th:nth-child(5), #crsTable.table-fixed td:nth-child(5) { width: 28%; } /* Categorías */ #crsTable.table-fixed th:nth-child(6), #crsTable.table-fixed td:nth-child(6) { width: 110px; } /* Estatus */ #crsTable.table-fixed th:nth-child(7), #crsTable.table-fixed td:nth-child(7) { width: 260px; } /* Acciones */ /* Acciones: que no “rompan” la fila */ #crsTable .actions>div { display: flex; flex-wrap: wrap; gap: 6px; } /* Oculta columnas menos críticas en anchos intermedios */ @media (max-width: 1280px) { #crsTable thead th:nth-child(4), /* Impuesto */ #crsTable tbody td:nth-child(4) { display: none; } #crsTable.table-fixed th:nth-child(5), #crsTable.table-fixed td:nth-child(5) { width: 32%; } /* Reacomodo */ } @media (max-width: 1100px) { #crsTable thead th:nth-child(3), /* Precio */ #crsTable tbody td:nth-child(3) { display: none; } #crsTable.table-fixed th:nth-child(2), #crsTable.table-fixed td:nth-child(2) { width: 48%; } /* Más espacio a nombre */ } /* ===== “Stack” (cards) antes: a 960px; aquí lo activamos a 1200px también ===== */ @media (max-width: 1200px) { .table.stack-lg thead { display: none; } .table.stack-lg tbody tr { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin: 10px 0; overflow: hidden; } .table.stack-lg tbody td { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: normal; } .table.stack-lg tbody tr td:last-child { border-bottom: none; } .table.stack-lg tbody td::before { content: attr(data-label); color: var(--muted); font-size: 12px; } .table.stack-lg tbody td.actions>div { gap: 8px; } } /* Wrapper: asegúrate del scroll horizontal amable en desktop estrecho */ .table-responsive { width: 100%; overflow: auto; overscroll-behavior-x: contain; } .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 8px; } /* ===== Modal Back Button - Prominent styling ===== */ .modal-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-right: 12px; background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #ffffff; border: none; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } .modal-back-btn:hover { background: linear-gradient(135deg, #2563eb, #3b82f6); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } .modal-back-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25); }