/* PRESUNEXO v2 — design system. Tema claro premium (estilo Delphin/ERP moderno) por defecto; tema oscuro con [data-theme="dark"] en . La impresión siempre sale en claro. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root { /* Superficie */ --fondo: #edf0f6; --fondo-2: #ffffff; --fondo-3: #f4f6fb; --panel: #ffffff; --panel-borde: #dfe5ef; --panel-hover: #f1f5fb; /* Texto */ --texto: #182338; --texto-2: #51607a; --texto-3: #8593ab; /* Marca */ --acento: #1d5bd8; --acento-suave: rgba(29, 91, 216, .09); --acento-fuerte: #1348b8; --acento-texto: #1d5bd8; /* Sidebar (oscuro en ambos temas, sello de identidad) */ --sb-fondo: linear-gradient(180deg, #101b33 0%, #0d1730 100%); --sb-borde: #1c2a4a; --sb-texto: #93a3c4; --sb-texto-fuerte: #e8eef9; --sb-activo: rgba(80, 133, 255, .16); --sb-activo-borde: rgba(80, 133, 255, .38); /* Semáforo */ --ok: #0d9463; --ok-suave: rgba(13, 148, 99, .10); --peligro: #d6455d; --peligro-suave: rgba(214, 69, 93, .10); --alerta: #c07b10; --alerta-suave: rgba(192, 123, 16, .12); /* Tipos de recurso */ --c-mo: #2563eb; --c-mat: #0d9463; --c-eq: #d97706; --c-sc: #9333ea; /* Otros */ --sombra: 0 1px 2px rgba(23, 32, 61, .05), 0 6px 24px rgba(23, 32, 61, .07); --sombra-flotante: 0 12px 40px rgba(13, 23, 48, .22); --radio: 12px; --fuente: 'Inter', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; --ancho-sidebar: 246px; --alto-topbar: 60px; } [data-theme="dark"] { --fondo: #0d1117; --fondo-2: #151c26; --fondo-3: #1a2330; --panel: #151c26; --panel-borde: #26303d; --panel-hover: #1d2733; --texto: #e6ebf2; --texto-2: #9aa7b8; --texto-3: #64748b; --acento: #3b82f6; --acento-suave: rgba(59, 130, 246, .14); --acento-fuerte: #60a5fa; --acento-texto: #60a5fa; --sb-fondo: linear-gradient(180deg, #10161f 0%, #0c1119 100%); --sb-borde: #202b3a; --sb-texto: #8b99af; --sb-texto-fuerte: #e8eef9; --sb-activo: rgba(96, 165, 250, .13); --sb-activo-borde: rgba(96, 165, 250, .32); --ok: #34d399; --ok-suave: rgba(52, 211, 153, .12); --peligro: #f87171; --peligro-suave: rgba(248, 113, 113, .12); --alerta: #fbbf24; --alerta-suave: rgba(251, 191, 36, .13); --c-mo: #60a5fa; --c-mat: #34d399; --c-eq: #fbbf24; --c-sc: #c084fc; --sombra: 0 10px 30px rgba(0, 0, 0, .45); --sombra-flotante: 0 16px 48px rgba(0, 0, 0, .6); } * { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; font-family: var(--fuente); font-size: 13.5px; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow: hidden; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(120, 135, 160, .35); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 135, 160, .55); background-clip: content-box; } /* ===== Layout ============================================================ */ #app { display: grid; grid-template-columns: var(--ancho-sidebar) 1fr; grid-template-rows: var(--alto-topbar) 1fr; height: 100vh; } #sidebar { grid-row: 1 / 3; background: var(--sb-fondo); border-right: 1px solid var(--sb-borde); display: flex; flex-direction: column; overflow-y: auto; } #sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; } #topbar { display: flex; align-items: center; gap: 10px; padding: 0 20px; background: var(--fondo-2); border-bottom: 1px solid var(--panel-borde); box-shadow: 0 1px 3px rgba(20,30,55,.04); z-index: 5; } #vista { overflow: auto; padding: 24px 28px 70px; scroll-behavior: smooth; } /* --- Marca --- */ .logo { display: flex; align-items: center; gap: 11px; padding: 17px 18px 15px; border-bottom: 1px solid var(--sb-borde); } .logo-marca { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, #2e6bff, #7c3aed); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: -.5px; box-shadow: 0 5px 16px rgba(46, 107, 255, .45); } .logo-nombre { font-weight: 800; font-size: 15px; letter-spacing: .05em; color: var(--sb-texto-fuerte); } .logo-nombre b { color: #6ea1ff; } .logo-sub { font-size: 9.5px; color: var(--sb-texto); letter-spacing: .14em; text-transform: uppercase; margin-top: 1px; } /* --- Navegación --- */ .nav { padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 1px; flex: 1; } .nav-seccion { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--sb-texto); opacity: .8; padding: 15px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px; color: var(--sb-texto); text-decoration: none; font-weight: 500; font-size: 13px; border: 1px solid transparent; cursor: pointer; transition: background .12s, color .12s; } .nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--sb-texto-fuerte); } .nav-item.activo { background: var(--sb-activo); color: #9dc0ff; border-color: var(--sb-activo-borde); font-weight: 600; } .nav-item .ico { display: grid; place-items: center; opacity: .9; } .sidebar-pie { padding: 13px 16px; border-top: 1px solid var(--sb-borde); font-size: 10.5px; color: var(--sb-texto); line-height: 1.55; } /* ===== Topbar ============================================================ */ .selector-proyecto { display: flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 10px; background: var(--fondo-3); border: 1px solid var(--panel-borde); cursor: pointer; max-width: 430px; transition: border-color .12s, box-shadow .12s; } .selector-proyecto:hover { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .selector-proyecto .nombre { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buscador-global { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px; background: var(--fondo-3); border: 1px solid var(--panel-borde); color: var(--texto-3); cursor: pointer; font-size: 12.5px; min-width: 200px; transition: border-color .12s; } .buscador-global:hover { border-color: var(--acento); color: var(--texto-2); } .buscador-global kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; padding: 2px 6px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 5px; color: var(--texto-3); } .topbar-total { margin-left: auto; text-align: right; } .topbar-total .etiqueta { font-size: 10px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .1em; } .topbar-total .monto { font-family: var(--mono); font-weight: 700; font-size: 16.5px; color: var(--ok); } .topbar-acciones { display: flex; gap: 4px; } /* ===== Botones =========================================================== */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 9px; border: 1px solid var(--panel-borde); background: var(--panel); color: var(--texto); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .13s; box-shadow: 0 1px 2px rgba(20, 30, 55, .05); } .btn:hover { border-color: var(--acento); color: var(--acento-texto); background: var(--acento-suave); } .btn:disabled { opacity: .45; cursor: default; pointer-events: none; } .btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 3px 10px rgba(29, 91, 216, .3); } .btn-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: #fff; } .btn-peligro { background: var(--peligro-suave); border-color: transparent; color: var(--peligro); } .btn-peligro:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; } .btn-sec { background: transparent; box-shadow: none; } .btn-mini { padding: 4px 10px; font-size: 12px; border-radius: 7px; } .btn-icono { display: inline-grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--texto-2); cursor: pointer; transition: all .12s; } .btn-icono:hover { background: var(--acento-suave); color: var(--acento-texto); } .btn-icono:disabled { opacity: .35; cursor: default; } /* Segmentos (pestañas de reporte, filtros) */ .segmentos { display: inline-flex; background: var(--fondo-3); border: 1px solid var(--panel-borde); border-radius: 10px; padding: 3px; gap: 2px; } .segmento { padding: 6px 14px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-2); transition: all .12s; } .segmento:hover { color: var(--texto); } .segmento.activo { background: var(--panel); color: var(--acento-texto); box-shadow: 0 1px 4px rgba(20, 30, 55, .12); } [data-theme="dark"] .segmento.activo { background: var(--panel-hover); } /* ===== Inputs ============================================================ */ input, select, textarea { font-family: inherit; font-size: 13px; color: var(--texto); background: var(--fondo-2); border: 1px solid var(--panel-borde); border-radius: 8px; padding: 8px 11px; outline: none; transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } input[type="number"] { font-family: var(--mono); } select { cursor: pointer; } option { background: var(--fondo-2); color: var(--texto); } .campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; } .campo-etiqueta { font-size: 12px; font-weight: 600; color: var(--texto-2); } .campo-ayuda { font-size: 11.5px; color: var(--texto-3); } .celda-input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 7px; font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--texto); } .celda-input.izq { text-align: left; font-family: var(--fuente); } .celda-input:hover { border-color: var(--panel-borde); background: var(--fondo-3); } .celda-input:focus { border-color: var(--acento); background: var(--fondo-2); box-shadow: 0 0 0 3px var(--acento-suave); } /* ===== Tarjetas / KPI ==================================================== */ .grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 16px 18px; position: relative; overflow: hidden; box-shadow: var(--sombra); } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: var(--acento); } .kpi.verde::before { background: var(--ok); } .kpi.ambar::before { background: var(--alerta); } .kpi.violeta::before { background: var(--c-sc); } .kpi.rojo::before { background: var(--peligro); } .kpi-etiqueta { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 7px; font-weight: 600; } .kpi-valor { font-family: var(--mono); font-size: 21px; font-weight: 700; letter-spacing: -.02em; } .kpi-sub { font-size: 11.5px; color: var(--texto-2); margin-top: 5px; } .panel { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra); } .panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .panel-cab h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; } .panel-cab .sub { font-size: 12px; color: var(--texto-3); margin-top: 2px; } .cabecera-vista { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .cabecera-vista h1 { font-size: 21px; font-weight: 800; letter-spacing: -.025em; } .cabecera-vista .sub { color: var(--texto-2); font-size: 13px; margin-top: 4px; } .cabecera-vista .acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ===== Tablas ============================================================ */ .envoltorio-tabla { overflow-x: auto; border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra); } table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; } .tabla th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); padding: 11px 12px; border-bottom: 1px solid var(--panel-borde); background: var(--fondo-3); position: sticky; top: 0; z-index: 2; white-space: nowrap; } .tabla td { padding: 7.5px 12px; border-bottom: 1px solid var(--panel-borde); vertical-align: middle; } .tabla tbody tr { transition: background .1s; } .tabla tbody tr:hover { background: var(--panel-hover); } .tabla tbody tr:last-child td { border-bottom: none; } .tabla .num { text-align: right; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; } .tabla th.num { text-align: right; } .tabla .cod { font-family: var(--mono); font-size: 12px; color: var(--texto-2); white-space: nowrap; } .tabla tr.fila-total td { font-weight: 700; background: var(--fondo-3); border-top: 2px solid var(--panel-borde); } /* Árbol del presupuesto */ tr.fila-titulo td { background: var(--acento-suave); font-weight: 700; } tr.fila-titulo .descripcion { color: var(--acento-texto); text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; } tr.fila-titulo.nivel-1 td { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); } tr.fila-partida .descripcion { color: var(--texto); } .sangria { display: inline-block; } .btn-expandir { display: inline-grid; place-items: center; width: 20px; height: 20px; border: none; background: none; color: var(--texto-3); cursor: pointer; border-radius: 4px; vertical-align: middle; margin-right: 2px; } .btn-expandir:hover { background: var(--panel-hover); color: var(--texto); } .btn-expandir svg { transition: transform .15s; } .btn-expandir.abierto svg { transform: rotate(90deg); } tr.seleccionada td { background: var(--acento-suave) !important; box-shadow: inset 3px 0 0 var(--acento); } /* Badges */ .badge { display: inline-flex; align-items: center; padding: 2.5px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; } .badge-MO { background: rgba(37, 99, 235, .11); color: var(--c-mo); } .badge-MAT { background: rgba(13, 148, 99, .11); color: var(--c-mat); } .badge-EQ { background: rgba(217, 119, 6, .11); color: var(--c-eq); } .badge-SC { background: rgba(147, 51, 234, .11); color: var(--c-sc); } .badge-iu { background: var(--fondo-3); color: var(--texto-2); font-family: var(--mono); } /* ===== Barras ============================================================ */ .barra { height: 8px; border-radius: 6px; background: var(--fondo-3); overflow: hidden; border: 1px solid var(--panel-borde); } .barra > span { display: block; height: 100%; border-radius: 6px; background: var(--acento); } .barra-apilada { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--fondo-3); border: 1px solid var(--panel-borde); } .barra-apilada > span { height: 100%; } .leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 11px; font-size: 12px; color: var(--texto-2); } .leyenda .punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; } /* ===== Gantt ============================================================= */ .gantt-envoltorio { overflow-x: auto; border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); box-shadow: var(--sombra); } .gantt-svg { display: block; } .gantt-barra { rx: 4; } .gantt-etiqueta { font-size: 11px; fill: var(--texto-2); font-family: var(--fuente); } .gantt-linea { stroke: var(--panel-borde); stroke-width: 1; } .gantt-hoy { stroke: var(--peligro); stroke-width: 1.5; stroke-dasharray: 4 3; } /* ===== Modal ============================================================= */ .modal-overlay { position: fixed; inset: 0; background: rgba(13, 22, 44, .45); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 300; animation: aparecer .14s ease; } [data-theme="dark"] .modal-overlay { background: rgba(4, 7, 12, .68); } .modal-caja { width: min(94vw, 540px); max-height: 88vh; display: flex; flex-direction: column; background: var(--fondo-2); border: 1px solid var(--panel-borde); border-radius: 16px; box-shadow: var(--sombra-flotante); animation: subir .16s ease; } .modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px 12px; } .modal-cab h3 { font-size: 15px; font-weight: 700; } .modal-cuerpo { padding: 6px 22px 16px; overflow-y: auto; } .modal-pie { display: flex; justify-content: flex-end; gap: 9px; padding: 13px 22px 18px; border-top: 1px solid var(--panel-borde); } .texto-confirmacion { color: var(--texto-2); line-height: 1.55; padding: 4px 0 8px; } @keyframes aparecer { from { opacity: 0; } } @keyframes subir { from { opacity: 0; transform: translateY(10px) scale(.985); } } /* ===== Toast ============================================================= */ .zona-toast { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 9px; z-index: 400; } .toast { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 11px; background: var(--fondo-2); border: 1px solid var(--panel-borde); box-shadow: var(--sombra-flotante); font-size: 13px; font-weight: 500; opacity: 0; transform: translateX(16px); transition: all .25s ease; } .toast.visible { opacity: 1; transform: none; } .toast-ok { border-left: 3px solid var(--ok); } .toast-ok .ico { color: var(--ok); } .toast-error { border-left: 3px solid var(--peligro); } .toast-error .ico { color: var(--peligro); } .toast-info { border-left: 3px solid var(--acento); } .toast-info .ico { color: var(--acento); } /* ===== Menú contextual =================================================== */ .menu-ctx { position: fixed; z-index: 350; min-width: 215px; padding: 5px; background: var(--fondo-2); border: 1px solid var(--panel-borde); border-radius: 12px; box-shadow: var(--sombra-flotante); animation: aparecer .1s ease; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 11px; border: none; background: none; color: var(--texto); font-family: inherit; font-size: 13px; text-align: left; border-radius: 8px; cursor: pointer; } .menu-item:hover { background: var(--panel-hover); } .menu-item.peligro { color: var(--peligro); } .menu-item .ico { color: var(--texto-3); } .menu-item.peligro .ico { color: var(--peligro); } .menu-sep { height: 1px; background: var(--panel-borde); margin: 5px 8px; } /* ===== Paleta de búsqueda global (Ctrl+K) ================================ */ .paleta-overlay { position: fixed; inset: 0; background: rgba(13, 22, 44, .42); backdrop-filter: blur(3px); display: flex; justify-content: center; padding-top: 11vh; z-index: 320; animation: aparecer .12s ease; } .paleta { width: min(94vw, 640px); max-height: 66vh; display: flex; flex-direction: column; background: var(--fondo-2); border: 1px solid var(--panel-borde); border-radius: 16px; box-shadow: var(--sombra-flotante); animation: subir .15s ease; overflow: hidden; } .paleta-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--panel-borde); } .paleta-input input { flex: 1; border: none; background: none; font-size: 15px; padding: 0; box-shadow: none; } .paleta-lista { overflow-y: auto; padding: 8px; } .paleta-grupo { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); padding: 10px 12px 4px; font-weight: 700; } .paleta-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; } .paleta-item:hover, .paleta-item.activo { background: var(--acento-suave); } .paleta-item .detalle { margin-left: auto; color: var(--texto-3); font-size: 11.5px; font-family: var(--mono); } /* ===== Utilidades ======================================================== */ .mono { font-family: var(--mono); } .texto-2 { color: var(--texto-2); } .texto-3 { color: var(--texto-3); } .ok { color: var(--ok); } .peligro { color: var(--peligro); } .alerta { color: var(--alerta); } .fila { display: flex; align-items: center; gap: 10px; } .fila-esp { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .col { display: flex; flex-direction: column; gap: 4px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .grid-2-min { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; } .vacio { padding: 48px 20px; text-align: center; color: var(--texto-3); font-size: 13.5px; line-height: 1.6; } .vacio .ico { display: block; margin: 0 auto 10px; opacity: .5; } .pill { font-size: 11px; padding: 2.5px 9px; border-radius: 20px; background: var(--fondo-3); color: var(--texto-2); border: 1px solid var(--panel-borde); } .pill-auto { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; font-weight: 600; } .nota { padding: 11px 14px; border-radius: 10px; background: var(--acento-suave); color: var(--texto-2); font-size: 12.5px; line-height: 1.55; border: 1px solid transparent; margin-bottom: 14px; } .nota-alerta { background: var(--alerta-suave); } .nota b { color: var(--texto); } /* ===== Impresión ========================================================= */ @media print { :root, [data-theme="dark"] { --fondo: #fff; --fondo-2: #fff; --fondo-3: #f1f5f9; --panel: #fff; --panel-borde: #cbd5e1; --panel-hover: #fff; --texto: #111827; --texto-2: #475569; --texto-3: #64748b; --acento-suave: #eff6ff; --acento-texto: #1d4ed8; --sombra: none; } body { background: #fff; color: #111; overflow: visible; font-size: 11.5px; } #sidebar, #topbar, .cabecera-vista .acciones, .no-imprimir, .zona-toast { display: none !important; } #app { display: block; height: auto; } #vista { overflow: visible; padding: 0; } .panel, .envoltorio-tabla, .kpi, .gantt-envoltorio { box-shadow: none; } .tabla th { position: static; } .kpi-valor, .topbar-total .monto { color: #111; } a { color: inherit; text-decoration: none; } }