/* ══════════════════════════════════════════════════════════════════ GestorERP — Aspecto SAP Fiori (tema Morning Horizon) v170 Hoja compartida por todas las pantallas del sistema y sus apps. Va SIEMPRE última en el para poder corregir lo anterior. Tipografía: Public Sans (pedido del usuario), con la "72" de SAP de respaldo. ══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); :root{ /* ── Paleta oficial Horizon (Morning) ── */ --sap-brand:#0070F2; /* marca */ --sap-azul:#0064D9; /* acción / énfasis */ --sap-azul-osc:#0058C4; /* acción hover */ --sap-azul-claro:#E5F0FA; /* selección */ --sap-azul-tenue:#EDF6FF; --sap-verde:#256F3A; --sap-verde-claro:#EBF9F0; --sap-naranja:#E76500; --sap-naranja-claro:#FEF3E7; --sap-rojo:#AA0808; --sap-rojo-claro:#FFEAEA; --sap-neutro:#788FA6; --sap-tinta:#1D2D3E; --sap-gris:#556B82; --sap-linea:#D9D9D9; --sap-linea2:#E5E5E5; --sap-fondo:#F5F6F7; --sap-fondo2:#EDEFF0; --sap-hover:#F2F3F4; /* hover de filas y listas (gris, como SAP) */ --sap-campo-borde:#89919A; /* borde de campos Fiori */ /* Se reescriben los colores que ya usaba el sistema */ --bg:#F5F6F7; --bg2:#EDEFF0; --surface:#FFFFFF; --surface2:#FAFAFA; --surface3:#F5F6F7; --border:#E5E5E5; --border2:#D9D9D9; --text:#1D2D3E; --text2:#33465B; --muted:#556B82; --sidebar-bg:#FFFFFF; --sidebar-text:#1D2D3E; --sidebar-muted:#556B82; --sidebar-hover:#F2F3F4; --sidebar-active:var(--sap-azul-claro); --topbar-bg:#FFFFFF; --ok:#256F3A; --warn:#E76500; --danger:#AA0808; --shadow:0 0 4px rgba(34,54,80,.12); --shadow2:0 4px 12px rgba(34,54,80,.16); --card-hover:#FFFFFF; } /* ── Tipografía ── */ html{ font-size:16px; } body, body *:not(code):not(pre):not(kbd):not(samp):not(.mono):not(.code){ font-family:'Public Sans','72','72full','Segoe UI',Arial,Helvetica,sans-serif !important; letter-spacing:0 !important; } code,pre,kbd,samp,.mono,.code{ font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace !important; } body{ background:var(--bg); color:var(--text); font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased; } /* Números alineados en columna (importes, cantidades) */ .tbl, .kpi-val, .stockbig, input[type="number"]{ font-variant-numeric:tabular-nums; } /* Foco visible estilo SAP (recuadro punteado oscuro) */ :focus-visible{ outline:1px dotted #0A2A54 !important; outline-offset:1px !important; } /* ══ BARRA SUPERIOR (Shell Bar) ══ */ .topbar{ background:#FFFFFF !important; border-bottom:1px solid var(--sap-linea) !important; height:48px !important; box-shadow:none !important; backdrop-filter:none !important; } .breadcrumb{ font-size:1rem !important; color:var(--sap-tinta) !important; font-weight:600 !important; } body.sap-app .topbar .btn{ border:none !important; background:transparent !important; color:var(--sap-azul) !important; } body.sap-app .topbar .btn:hover{ background:var(--sap-hover) !important; } /* ══ MENÚ LATERAL (Side Navigation) ══ */ .sidebar{ background:#FFFFFF !important; border-right:1px solid var(--sap-linea) !important; box-shadow:none !important; } .nav-item{ border-radius:0 !important; padding:10px 16px !important; min-height:40px; border-left:4px solid transparent !important; color:var(--sap-tinta) !important; } .nav-item:hover{ background:var(--sap-hover) !important; } .nav-item.active{ background:var(--sap-azul-claro) !important; border-left-color:var(--sap-azul) !important; } .nav-item.active .nav-label{ color:var(--sap-azul) !important; font-weight:700 !important; } .nav-label{ font-size:.94rem !important; font-weight:500 !important; color:var(--sap-tinta); white-space:normal !important; line-height:1.25 !important; } .nav-icon{ font-size:1.05rem !important; opacity:.9; } .nav-group-label{ font-size:.72rem !important; color:var(--sap-gris) !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; } .user-card{ border-radius:6px !important; } .user-role,.cs-role{ white-space:normal !important; line-height:1.25 !important; } /* ══ ENCABEZADO DE PANTALLA (Dynamic Page Header) ══ */ body.sap-app .page-header{ background:#FFFFFF; border:1px solid var(--sap-linea2); border-radius:10px; padding:14px 18px; margin-bottom:16px; box-shadow:var(--shadow); } .page-title{ font-size:1.375rem !important; font-weight:700 !important; color:var(--sap-tinta); line-height:1.25; } .page-sub{ font-size:.9rem !important; color:var(--sap-gris) !important; font-weight:400 !important; margin-top:2px; } /* ══ TARJETAS (Cards / Tiles) ══ */ .card,.kpi{ background:#FFFFFF; border:1px solid var(--sap-linea2) !important; border-radius:10px; box-shadow:var(--shadow) !important; transition:box-shadow .15s; } .card:hover,.kpi:hover{ box-shadow:0 2px 8px rgba(34,54,80,.16) !important; transform:none !important; } .card-header{ border-bottom:1px solid var(--sap-linea2) !important; padding:13px 18px !important; background:#FFFFFF !important; } .card-title,.crm-sub{ font-size:1rem !important; font-weight:700 !important; color:var(--sap-tinta) !important; } .kpi{ padding:16px 18px; } .kpi-label{ font-size:.8rem !important; color:var(--sap-gris) !important; font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important; } .kpi-val{ font-size:1.6rem !important; font-weight:700 !important; color:var(--sap-tinta) !important; line-height:1.2; } /* ══ BOTONES (estilo Fiori) ══ */ body.sap-app .btn, body.sap-app button.btn{ font-size:.9rem !important; font-weight:600 !important; border-radius:8px !important; padding:8px 15px !important; min-height:36px; border:1px solid var(--sap-azul) !important; background:#FFFFFF !important; color:var(--sap-azul) !important; cursor:pointer; box-shadow:none !important; transition:background .12s, border-color .12s; } body.sap-app .btn:hover, body.sap-app button.btn:hover{ background:var(--sap-azul-claro) !important; transform:none !important; } body.sap-app .btn:active{ background:#D3E7F8 !important; } body.sap-app .btn-primary, body.sap-app button.btn-primary{ background:var(--sap-azul) !important; border-color:var(--sap-azul) !important; color:#FFFFFF !important; } body.sap-app .btn-primary:hover, body.sap-app button.btn-primary:hover{ background:var(--sap-azul-osc) !important; border-color:var(--sap-azul-osc) !important; } body.sap-app .btn-sm, body.sap-app button.btn-sm{ font-size:.85rem !important; padding:6px 12px !important; min-height:30px; } body.sap-app .btn-danger{ background:var(--sap-rojo) !important; border-color:var(--sap-rojo) !important; color:#fff !important; } body.sap-app .btn-success{ background:var(--sap-verde) !important; border-color:var(--sap-verde) !important; color:#fff !important; } /* ══ SOLAPAS estilo Icon Tab Bar (botones con id …Tab_…) ══ */ body.sap-app button[id*="Tab_"]{ background:transparent !important; border:none !important; border-radius:0 !important; border-bottom:3px solid transparent !important; color:var(--sap-gris) !important; font-weight:600 !important; padding:9px 14px !important; min-height:38px; } body.sap-app button[id*="Tab_"]:hover{ background:var(--sap-hover) !important; color:var(--sap-tinta) !important; } body.sap-app button[id*="Tab_"].btn-primary{ background:transparent !important; color:var(--sap-azul) !important; border-bottom:3px solid var(--sap-azul) !important; font-weight:700 !important; } /* ══ CAMPOS ══ */ input,select,textarea{ font-size:.95rem !important; color:var(--text); background:#FFFFFF !important; border:1px solid var(--sap-campo-borde) !important; border-radius:4px !important; padding:8px 11px !important; box-shadow:none !important; } input:hover,select:hover,textarea:hover{ border-color:var(--sap-tinta) !important; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--sap-azul) !important; border-width:2px !important; padding:7px 10px !important; box-shadow:none !important; } input:disabled,select:disabled,textarea:disabled{ background:var(--sap-fondo) !important; color:var(--sap-gris) !important; } .crm-field label,.f-label{ font-size:.82rem !important; color:var(--sap-gris) !important; font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important; } /* ══ TABLAS (Responsive Table) ══ */ .tbl{ font-size:.94rem !important; border-collapse:collapse; width:100%; background:#FFFFFF; } .tbl th{ background:#FFFFFF !important; color:var(--sap-gris) !important; font-size:.82rem !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; padding:11px 14px !important; border-bottom:1px solid var(--sap-linea) !important; white-space:nowrap; } .tbl td{ padding:11px 14px !important; border-bottom:1px solid var(--sap-linea2) !important; color:var(--text); font-weight:400; } .tbl tbody tr:hover{ background:var(--sap-hover) !important; } .tbl tbody tr.sel,.tbl tbody tr.selected{ background:var(--sap-azul-claro) !important; } .tbl tfoot td{ background:var(--sap-fondo) !important; font-weight:700 !important; border-top:1px solid var(--sap-linea) !important; } /* ══ ESTADOS (Object Status) ══ */ .badge{ font-size:.82rem !important; font-weight:600 !important; border-radius:6px !important; padding:3px 10px !important; border:1px solid transparent; white-space:nowrap; } .b-green,.badge.b-green{ background:var(--sap-verde-claro) !important; color:var(--sap-verde) !important; border-color:#C3E5D0 !important; } .b-orange,.badge.b-orange,.b-gold,.badge.b-gold{ background:var(--sap-naranja-claro) !important; color:#A94F00 !important; border-color:#FBD1AF !important; } .b-red,.badge.b-red{ background:var(--sap-rojo-claro) !important; color:var(--sap-rojo) !important; border-color:#F5B7B7 !important; } .b-blue,.badge.b-blue,.b-teal,.badge.b-teal{ background:var(--sap-azul-claro) !important; color:var(--sap-azul) !important; border-color:#BCD9F2 !important; } .b-muted,.badge.b-muted{ background:var(--sap-fondo) !important; color:var(--sap-gris) !important; border-color:var(--sap-linea) !important; } /* ══ VENTANAS (Dialog) ══ */ .crm-modal-box{ border-radius:10px; border:1px solid var(--sap-linea); box-shadow:var(--shadow2); overflow:hidden; } .crm-mh{ background:#FFFFFF !important; font-size:1.05rem !important; font-weight:700 !important; color:var(--sap-tinta) !important; border-bottom:1px solid var(--sap-linea) !important; padding:13px 18px !important; } .crm-mf{ background:#FFFFFF !important; border-top:1px solid var(--sap-linea) !important; padding:12px 18px !important; } /* Enlaces */ body.sap-app a{ color:var(--sap-azul); text-decoration:none; } body.sap-app a:hover{ text-decoration:underline; } /* Barras de desplazamiento finas */ body.sap-app *::-webkit-scrollbar{ width:10px; height:10px; } body.sap-app *::-webkit-scrollbar-thumb{ background:#C7CFD8; border-radius:6px; border:2px solid #FFFFFF; } body.sap-app *::-webkit-scrollbar-thumb:hover{ background:#A9B4C0; } body.sap-app *::-webkit-scrollbar-track{ background:transparent; } /* ══ MODO CELULAR ══ */ .mobnav{ background:#FFFFFF !important; border-top:1px solid var(--sap-linea) !important; } .mobnav .mn .ml{ font-size:.72rem !important; font-weight:600 !important; } .mobnav .mn.on{ color:var(--sap-azul) !important; background:var(--sap-azul-claro) !important; } .mobfab{ background:var(--sap-azul) !important; box-shadow:0 6px 18px rgba(0,100,217,.35) !important; font-size:1rem !important; } @media(max-width:900px){ table.tbl.mobcard td{ font-size:.94rem !important; } table.tbl.mobcard td:before{ font-size:.82rem !important; color:var(--sap-gris) !important; } table.tbl.mobcard td.mob-head{ font-size:1.06rem !important; } .kpi-val{ font-size:1.3rem !important; white-space:normal !important; } .kpi{ padding:12px 13px; } .mobfab{ bottom:96px !important; padding:12px 17px !important; font-size:.95rem !important; } .main{ padding-bottom:96px !important; } body.sap-app .page-header{ padding:12px 14px; } } /* ══ Apps chicas (relevamiento, agendas, tienda…): forma SAP, color de marca propio ══ */ .btn,button{ font-size:.92rem; border-radius:8px; } /* ══ Ingreso al sistema ══ */ .btn-login{ background:var(--sap-azul) !important; border-radius:8px !important; font-weight:700 !important; } .btn-login:hover{ background:var(--sap-azul-osc) !important; filter:none !important; transform:none !important; box-shadow:0 4px 14px rgba(0,100,217,.3) !important; } .logo-title,#loginTitle{ background:none !important; -webkit-text-fill-color:var(--sap-tinta) !important; color:var(--sap-tinta) !important; } /* ══ Detalles de marca en clave SAP ══ */ /* Marca del panel lateral: tinta SAP, tamaño de producto (no cartel) */ body.sap-app .sidebar-logo > div:first-child{ font-size:1.15rem !important; color:var(--sap-tinta) !important; font-weight:700 !important; letter-spacing:0 !important; } body.sap-app .logo-sub{ font-size:.7rem !important; color:var(--sap-gris) !important; letter-spacing:.06em !important; text-transform:uppercase; } /* Selector de empresa: lista neutra con punto de color (como una lista de Fiori) */ body.sap-app .company-switcher{ border-bottom:1px solid var(--sap-linea2); padding-bottom:8px; } body.sap-app .cs-option{ background:#FFFFFF !important; border:none !important; border-left:4px solid transparent !important; border-radius:0 !important; padding:9px 14px !important; box-shadow:none !important; } body.sap-app .cs-option:hover{ background:var(--sap-hover) !important; } body.sap-app .cs-option.active{ background:var(--sap-azul-claro) !important; border-left-color:var(--sap-azul) !important; } body.sap-app .cs-name{ color:var(--sap-tinta) !important; font-weight:600 !important; font-size:.94rem !important; } body.sap-app .cs-option.active .cs-name{ color:var(--sap-azul) !important; font-weight:700 !important; } body.sap-app .cs-role{ color:var(--sap-gris) !important; font-size:.78rem !important; } body.sap-app .cs-dot{ box-shadow:none !important; } /* Barra superior: fecha en texto plano, empresa como chip neutro, campana discreta */ body.sap-app .topbar-date{ background:transparent !important; border:none !important; color:var(--sap-gris) !important; font-size:.85rem !important; padding:0 !important; } body.sap-app .company-badge{ background:#FFFFFF !important; border:1px solid var(--sap-linea) !important; color:var(--sap-tinta) !important; border-radius:6px !important; font-weight:600 !important; font-size:.85rem !important; padding:5px 11px !important; box-shadow:none !important; } body.sap-app .notif-btn{ background:transparent !important; border:none !important; box-shadow:none !important; } body.sap-app .notif-btn:hover{ background:var(--sap-hover) !important; border-radius:6px; } body.sap-app .collapse-btn{ background:transparent !important; border:none !important; color:var(--sap-tinta) !important; } body.sap-app .collapse-btn:hover{ background:var(--sap-hover) !important; } /* Ficha de usuario del pie del menú */ body.sap-app .user-card{ border-top:1px solid var(--sap-linea2); } body.sap-app .user-name{ font-weight:600 !important; color:var(--sap-tinta) !important; } body.sap-app .user-role{ color:var(--sap-gris) !important; font-size:.76rem !important; } /* ══ Avisos en línea (Message Strip de Fiori) ══ */ body.sap-app .crm-alert{ background:var(--sap-azul-tenue) !important; border:1px solid #BCD9F2 !important; border-left:4px solid var(--sap-azul) !important; border-radius:6px !important; color:var(--sap-tinta) !important; font-size:.9rem !important; padding:10px 13px !important; } body.sap-app .crm-alert.warn,body.sap-app .crm-alert.b-orange{ background:var(--sap-naranja-claro) !important; border-color:#FBD1AF !important; border-left-color:var(--sap-naranja) !important; } body.sap-app .crm-alert.err,body.sap-app .crm-alert.b-red{ background:var(--sap-rojo-claro) !important; border-color:#F5B7B7 !important; border-left-color:var(--sap-rojo) !important; } body.sap-app .crm-alert.ok,body.sap-app .crm-alert.b-green{ background:var(--sap-verde-claro) !important; border-color:#C3E5D0 !important; border-left-color:var(--sap-verde) !important; } /* Botón "secundario" = transparente de Fiori (sólo texto azul) */ body.sap-app .btn-secondary{ background:transparent !important; border-color:transparent !important; color:var(--sap-azul) !important; box-shadow:none !important; } body.sap-app .btn-secondary:hover{ background:var(--sap-hover) !important; border-color:transparent !important; } /* Separadores y cuerpos de tarjeta */ body.sap-app .crm-hr{ border-top:1px solid var(--sap-linea2) !important; } body.sap-app .card-body{ padding:16px 18px; } /* Totales y cifras destacadas */ body.sap-app .tot{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--sap-tinta); } /* ══ Título de la barra superior: corta con puntos suspensivos, no a la mitad ══ */ body.sap-app .topbar-left{ min-width:0; overflow:hidden; } body.sap-app .breadcrumb{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ══ Barra superior en celular: crece si el contenido se parte en dos líneas ══ */ @media (max-width:900px){ .topbar{ height:auto !important; min-height:48px; flex-wrap:wrap; padding:6px 10px !important; gap:8px; } .topbar-right,.tb-right{ flex-wrap:wrap; gap:8px; } } /* ══ Menú lateral de las pantallas chicas (permisos/WMS): el ítem activo quedó blanco sobre blanco al pasar del tema oscuro al claro ══ */ .sb-item{ color:var(--sap-tinta) !important; } .sb-item:hover{ background:var(--sap-hover) !important; } .sb-item.active{ background:var(--sap-azul-claro) !important; color:var(--sap-azul) !important; font-weight:600; } .sb-section{ color:var(--sap-gris) !important; letter-spacing:.06em !important; font-size:.72rem !important; } /* ══ Restos del tema oscuro anterior que quedaron ilegibles en fondo claro ══ */ /* Texto de los campos: sin esto, el login escribía en gris casi blanco */ input,select,textarea{ color:var(--sap-tinta) !important; } input::placeholder,textarea::placeholder{ color:#8A94A6 !important; } /* Login: nombre de cada empresa bajo el logo */ .co-name{ color:var(--sap-tinta) !important; } /* Permisos: marca del menú lateral */ .sb-name{ color:var(--sap-tinta) !important; font-weight:700 !important; } .sb-sub{ color:var(--sap-gris) !important; } .sb-logo{ border-bottom:1px solid var(--sap-linea2) !important; } /* ══ VENTANAS: que entren enteras ══ Antes la ventana crecía hacia abajo y quedaban DOS barras de desplazamiento (la del fondo y la del contenido), con los botones de Guardar fuera de vista. Ahora: encabezado y botones fijos, y una sola barra en el medio. */ @media (min-width:901px){ .crm-modal{ align-items:center !important; padding:18px 14px !important; overflow:hidden !important; } .crm-modal-box{ max-width:760px; /* más ancha: los formularios de dos columnas respiran */ max-height:92vh !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } .crm-mh, .crm-mf{ flex:0 0 auto; } .crm-mb{ flex:1 1 auto; max-height:none !important; overflow-y:auto !important; overflow-x:auto; } /* Las tablas anchas dentro de una ventana se deslizan solas, sin estirarla */ .crm-mb > table, .crm-mb .tbl{ max-width:100%; } } /* ══ Tablas anchas: la primera columna queda fija al deslizar de costado ══ */ .tbl-fija th:first-child, .tbl-fija td:first-child{ position:sticky; left:0; z-index:2; background:#FFFFFF; box-shadow:1px 0 0 var(--sap-linea2); } .tbl-fija tbody tr:hover td:first-child{ background:var(--sap-hover); } /* ══ Que una tabla ancha no estire toda la pantalla ══ Antes, una tabla de 14 columnas empujaba la página entera y había que desplazar la barra de abajo del navegador. Ahora se desliza SOLO la tabla, dentro de su tarjeta, y el resto de la pantalla queda quieto. */ body.sap-app .main{ min-width:0; max-width:100%; overflow-x:hidden; } body.sap-app .page{ min-width:0; max-width:100%; } body.sap-app .card, body.sap-app .kpi{ min-width:0; max-width:100%; } body.sap-app .card > div[style*="overflow-x"], body.sap-app .page > div[style*="overflow-x"]{ max-width:100%; } /* Cifras largas (millones) dentro de las tarjetas: que se achiquen en vez de cortarse */ .kpi-val, .dkpi .val{ font-size:clamp(1.05rem, 1.55vw, 1.6rem) !important; overflow-wrap:anywhere; line-height:1.2; } @media(max-width:900px){ .kpi-val, .dkpi .val{ font-size:1.2rem !important; } } /* ══ Tocar el título de una columna la ordena ══ */ .tbl thead th{ cursor:pointer; user-select:none; } .tbl thead th:hover{ background:var(--sap-hover) !important; color:var(--sap-tinta) !important; } .tbl thead th[data-orden]{ color:var(--sap-azul) !important; }