/* ============================================================ GSJ — Sistema de diseño compartido Los módulos del portal heredan de aquí. No estilos inline. Todo vive bajo el prefijo .gsj- a propósito: así este archivo se puede enlazar sin alterar una sola pantalla existente. La migración de las pantallas actuales es cambio de clases, no rediseño. Reglas de la casa: · tarjetas radio 14px, borde 0.5px · controles radio 10px · números siempre monoespaciada · estados píldoras radio 20px / 11px / tinte pálido · tabla 9px de padding vertical (densa a propósito) · sin sombras, sin degradados · pesos 400 y 500, nada más ============================================================ */ :root{ /* Barra lateral */ --gsj-sidebar-bg: #EFF1E9; --gsj-sidebar-border: #E3E1D6; --gsj-sidebar-title: #4A5D38; --gsj-sidebar-text: #6E7A5C; --gsj-sidebar-text-muted: #98A188; --gsj-nav-active-bg: #F6EBD5; --gsj-nav-active-text: #7D6524; /* Superficies */ --gsj-page-bg: #FBFAF5; --gsj-card-bg: #FFFFFF; --gsj-card-border: #EDEBE0; --gsj-divider: #F0EEE4; /* Texto */ --gsj-heading: #4A5D38; --gsj-text: #57564C; --gsj-text-secondary: #6B6A5E; --gsj-text-muted: #93917F; /* Estados */ --gsj-ok-bg: #F0F3E9; --gsj-ok-text: #5E7048; --gsj-warn-bg: #FCF6E9; --gsj-warn-text: #95793A; --gsj-alert-bg: #F8EEE9; --gsj-alert-text: #9A5638; /* Tipografía. No venía en los tokens: se conserva la familia que ya usaba la app y se agrega la pila monoespaciada. */ --gsj-font: Calibri, Arial, sans-serif; --gsj-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Medidas derivadas de las reglas, para no repetir literales */ --gsj-radio-tarjeta: 14px; --gsj-radio-control: 10px; --gsj-radio-pildora: 20px; --gsj-fila-y: 9px; --gsj-sidebar-ancho: 216px; } /* ---------- Base ---------- Se aplica al contenedor raíz del portal, no a , para que enlazar esta hoja no cambie nada de lo que ya está en vivo. */ /* La página que hospeda el portal no necesita estilo propio. */ body:has(> .gsj-app){margin:0} .gsj-app{ min-height:100vh; margin:0; background:var(--gsj-page-bg); color:var(--gsj-text); font-family:var(--gsj-font); font-size:15px; font-weight:400; line-height:1.45; } .gsj-app *{box-sizing:border-box} /* El navegador pone 700 en strong/b/th por defecto; aquí el tope es 500. */ .gsj-app strong, .gsj-app b{font-weight:500} /* ---------- Números ---------- Regla dura: todo número va en monoespaciada. Se aplica por utilidad y automáticamente donde siempre hay cifras. */ .gsj-num, .gsj-folio, .gsj-total, .gsj-metric__valor, .gsj-table td.gsj-num, .gsj-table th.gsj-num, .gsj-input[type="number"]{ font-family:var(--gsj-font-mono); font-variant-numeric:tabular-nums; } .gsj-num--der, .gsj-table td.gsj-num, .gsj-table th.gsj-num{text-align:right} /* ---------- Shell: barra lateral + contenido ---------- */ .gsj-shell{display:flex;align-items:stretch;min-height:100vh} .gsj-sidebar{ flex:0 0 var(--gsj-sidebar-ancho); width:var(--gsj-sidebar-ancho); background:var(--gsj-sidebar-bg); border-right:0.5px solid var(--gsj-sidebar-border); padding:18px 0; display:flex; flex-direction:column; gap:22px; } .gsj-sidebar__marca{ padding:0 18px; color:var(--gsj-sidebar-title); font-size:16px; font-weight:500; letter-spacing:.01em; } /* Grupo de navegación: OPERACIÓN, ADMINISTRACIÓN, … */ .gsj-navgrupo{display:flex;flex-direction:column;gap:1px} .gsj-navgrupo__titulo{ padding:0 18px 6px; color:var(--gsj-sidebar-text-muted); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.07em; } .gsj-nav-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 8px; padding:7px 10px; border:none; border-radius:var(--gsj-radio-control); background:transparent; color:var(--gsj-sidebar-text); font-family:inherit; font-size:14px; font-weight:400; text-align:left; text-decoration:none; cursor:pointer; } .gsj-nav-item:hover{background:rgba(255,255,255,.55)} .gsj-nav-item.is-active, .gsj-nav-item[aria-current="page"]{ background:var(--gsj-nav-active-bg); color:var(--gsj-nav-active-text); font-weight:500; } /* Módulos aún no construidos: visibles, sin clic. */ .gsj-nav-item.is-disabled, .gsj-nav-item:disabled{ color:var(--gsj-sidebar-text-muted); cursor:default; pointer-events:none; } /* Marca discreta para el enlace que sale del portal (Tesorería). */ .gsj-nav-item__externo{ color:var(--gsj-sidebar-text-muted); font-size:11px; font-family:var(--gsj-font-mono); } .gsj-sidebar__pie{ margin-top:auto; padding:0 18px; color:var(--gsj-sidebar-text-muted); font-size:12px; display:flex; flex-direction:column; gap:6px; } /* El ancho lo traía el bloque de estilo viejo del index (main{max-width:1000px}). Vive aquí desde que ese bloque se borró, y subió a 1280 porque la matriz de destinos y el historial son tablas anchas: mil se les quedaban cortos. El margen auto centra el contenido en el espacio que deja la barra lateral. */ .gsj-main{flex:1 1 auto;min-width:0;max-width:1280px;margin:0 auto;padding:22px 26px} .gsj-main__titulo{ margin:0 0 16px; color:var(--gsj-heading); font-size:19px; font-weight:500; } /* En pantalla angosta la barra pasa a ser una tira superior. */ @media (max-width:760px){ .gsj-shell{flex-direction:column} .gsj-sidebar{ flex-basis:auto;width:100%; border-right:none; border-bottom:0.5px solid var(--gsj-sidebar-border); padding:12px 0;gap:14px; } .gsj-main{padding:16px 14px} } /* ---------- Tarjetas de métricas ---------- */ .gsj-metricas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin-bottom:18px; } .gsj-metric{ background:var(--gsj-card-bg); border:0.5px solid var(--gsj-card-border); border-radius:var(--gsj-radio-tarjeta); padding:12px 14px; } .gsj-metric__etiqueta{ display:block; color:var(--gsj-text-muted); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; } .gsj-metric__valor{ display:block; color:var(--gsj-heading); font-size:24px; font-weight:500; line-height:1.15; } .gsj-metric__nota{ display:block; margin-top:3px; color:var(--gsj-text-muted); font-size:12px; } /* Métrica que exige atención — p. ej. merma > 5%. */ .gsj-metric--warn{background:var(--gsj-warn-bg);border-color:var(--gsj-warn-bg)} .gsj-metric--warn .gsj-metric__valor, .gsj-metric--warn .gsj-metric__etiqueta, .gsj-metric--warn .gsj-metric__nota{color:var(--gsj-warn-text)} .gsj-metric--alert{background:var(--gsj-alert-bg);border-color:var(--gsj-alert-bg)} .gsj-metric--alert .gsj-metric__valor, .gsj-metric--alert .gsj-metric__etiqueta, .gsj-metric--alert .gsj-metric__nota{color:var(--gsj-alert-text)} /* ---------- Tarjeta ---------- */ .gsj-card{ background:var(--gsj-card-bg); border:0.5px solid var(--gsj-card-border); border-radius:var(--gsj-radio-tarjeta); padding:16px 18px; margin-bottom:14px; } .gsj-card__titulo{ margin:0 0 12px; color:var(--gsj-heading); font-size:16px; font-weight:500; } .gsj-card__subtitulo{ margin:0 0 10px; color:var(--gsj-heading); font-size:14px; font-weight:500; } .gsj-card__sep{ height:0; margin:14px 0; border:none; border-top:0.5px solid var(--gsj-divider); } /* Caja anidada dentro de una tarjeta (el equivalente de .finca-box). */ .gsj-caja{ border:0.5px solid var(--gsj-card-border); border-radius:var(--gsj-radio-control); padding:12px 14px; margin-bottom:10px; } .gsj-caja__head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } /* ---------- Rejillas y filas ---------- */ .gsj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .gsj-grid--angosta{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px} .gsj-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .gsj-row--fin{justify-content:flex-end} /* ---------- Controles ---------- */ .gsj-label{ display:block; margin-bottom:4px; color:var(--gsj-text-secondary); font-size:12px; font-weight:400; } .gsj-input, .gsj-select, .gsj-textarea{ width:100%; padding:7px 10px; border:0.5px solid var(--gsj-card-border); border-radius:var(--gsj-radio-control); background:var(--gsj-card-bg); color:var(--gsj-text); font-family:inherit; font-size:14px; font-weight:400; } .gsj-textarea{min-height:72px;resize:vertical} .gsj-input:focus, .gsj-select:focus, .gsj-textarea:focus{ outline:1.5px solid var(--gsj-nav-active-text); outline-offset:-1px; } .gsj-input:disabled, .gsj-select:disabled, .gsj-textarea:disabled{color:var(--gsj-text-muted);cursor:not-allowed} .gsj-input::placeholder, .gsj-textarea::placeholder{color:var(--gsj-text-muted)} .gsj-btn{ padding:8px 16px; border:0.5px solid transparent; border-radius:var(--gsj-radio-control); background:var(--gsj-heading); color:#fff; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; } .gsj-btn:hover{background:var(--gsj-sidebar-title)} .gsj-btn--sec{ background:var(--gsj-card-bg); border-color:var(--gsj-card-border); color:var(--gsj-text); font-weight:400; } .gsj-btn--sec:hover{background:var(--gsj-divider)} /* Acciones que deshacen o corrigen: cancelar, corregir, reasignar. */ .gsj-btn--riesgo{ background:var(--gsj-alert-bg); border-color:var(--gsj-alert-bg); color:var(--gsj-alert-text); font-weight:500; } .gsj-btn--riesgo:hover{background:#F3E2DA} .gsj-btn:disabled{color:var(--gsj-text-muted);background:var(--gsj-divider);border-color:var(--gsj-divider);cursor:not-allowed} .gsj-btn:focus-visible{outline:1.5px solid var(--gsj-nav-active-text);outline-offset:1px} /* ---------- Tabla ---------- 9px de padding vertical: densa a propósito, la operación tiene muchos renglones. */ .gsj-table{width:100%;border-collapse:collapse;font-size:14px} .gsj-table th, .gsj-table td{ padding:var(--gsj-fila-y) 10px; text-align:left; border-bottom:0.5px solid var(--gsj-divider); vertical-align:top; } .gsj-table th{ color:var(--gsj-text-muted); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .gsj-table tbody tr:last-child td{border-bottom:none} .gsj-table tbody tr:hover td{background:var(--gsj-page-bg)} /* Envoltura obligatoria: las tablas anchas hacen scroll solas, la página nunca se desplaza en horizontal. */ .gsj-table-wrap{width:100%;overflow-x:auto} /* ---------- Píldoras de estado ---------- */ .gsj-pill{ display:inline-block; padding:2px 10px; border-radius:var(--gsj-radio-pildora); font-size:11px; font-weight:500; line-height:1.6; white-space:nowrap; background:var(--gsj-divider); color:var(--gsj-text-secondary); } .gsj-pill--ok{background:var(--gsj-ok-bg);color:var(--gsj-ok-text)} .gsj-pill--warn{background:var(--gsj-warn-bg);color:var(--gsj-warn-text)} .gsj-pill--alert{background:var(--gsj-alert-bg);color:var(--gsj-alert-text)} /* ---------- Avisos ---------- */ .gsj-msg{ padding:10px 14px; border-radius:var(--gsj-radio-control); margin-bottom:14px; font-size:14px; font-weight:400; } .gsj-msg--ok{background:var(--gsj-ok-bg);color:var(--gsj-ok-text)} .gsj-msg--warn{background:var(--gsj-warn-bg);color:var(--gsj-warn-text)} .gsj-msg--err{background:var(--gsj-alert-bg);color:var(--gsj-alert-text)} /* ---------- Resumen (folio + total) ---------- */ .gsj-resumen{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; padding:12px 14px; border-radius:var(--gsj-radio-control); background:var(--gsj-page-bg); } .gsj-folio{font-size:15px;color:var(--gsj-text-secondary)} .gsj-total{font-size:22px;font-weight:500;color:var(--gsj-heading)} /* ---------- Texto auxiliar ---------- */ .gsj-mini{font-size:12px;color:var(--gsj-text-secondary)} .gsj-muted{color:var(--gsj-text-muted)} .gsj-vacio{padding:12px 0;color:var(--gsj-text-muted);font-size:14px} .gsj-neg{color:var(--gsj-alert-text);font-weight:500} .gsj-cero{color:var(--gsj-text-muted)}