/* ======================================================================= DosERP — Estilos globales Variables --erp-* definen la paleta activa. ThemeStyle.razor las sobreescribe en según la elección del usuario. ======================================================================= */ /* ── Paleta por defecto: Oliva ──────────────────────────────────────── */ :root { --erp-primary: #7DA626; --erp-primary-rgb: 125, 166, 38; --erp-primary-dark: #3F5313; --erp-primary-light: #C2D991; --erp-primary-text: #000000; --erp-secondary: #B0D959; --erp-danger: #DB2635; --erp-text: #000000; --erp-text-light: #838488; --erp-section-text: #3F5313; --erp-title-text: #6D7E8C; --erp-gray-text: #808080; --erp-link-text: #7DA626; --erp-win-bg: #F2F2F2; --erp-container-bg: #FFFFFF; --erp-input-bg: #FFFFFF; --erp-selected-bg: #C2D991; --erp-hover-bg: #B0D959; --erp-border: #D6DFC3; --erp-border-strong: #A4B87A; /* Bootstrap mapea automáticamente a las vars ERP de arriba */ --bs-primary: var(--erp-primary); --bs-primary-rgb: var(--erp-primary-rgb); --bs-body-bg: var(--erp-win-bg); --bs-body-color: var(--erp-text); --bs-secondary-color: var(--erp-text-light); --bs-border-color: var(--erp-border); --bs-link-color: var(--erp-link-text); --bs-link-color-rgb: var(--erp-primary-rgb); /* ── Escala de espaciado ─────────────────────────────────────────── */ /* Antes de esto, cada regla se inventaba su propio padding/gap suelto (7px aquí, 9px allá, 10px más abajo…) sin ningún valor compartido. Usar siempre uno de estos 5 pasos en vez de un número nuevo. */ --erp-space-xs: 4px; --erp-space-sm: 8px; --erp-space-md: 12px; --erp-space-lg: 18px; --erp-space-xl: 24px; /* ── Escala tipográfica ──────────────────────────────────────────── */ --erp-font-xs: 11px; --erp-font-sm: 12px; --erp-font-base: 13px; /* tamaño base de toda la app */ --erp-font-md: 14px; /* Inter estático como base; InterVariable la sustituye si el navegador soporta fuentes variables (mismo fichero para todos los pesos). */ --erp-font-family: "Inter", "Segoe UI", Tahoma, Arial, sans-serif; } @supports (font-variation-settings: normal) { :root { --erp-font-family: "InterVariable", "Segoe UI", Tahoma, Arial, sans-serif; } } /* ── Base ────────────────────────────────────────────────────────────── */ html, body { font-family: var(--erp-font-family); font-optical-sizing: auto; font-size: var(--erp-font-base); background-color: var(--erp-win-bg); color: var(--erp-text); } /* Radzen fuerza "Source Sans Pro" en con este mismo selector (:root:has(.rz-layout) body, en default.css) en cuanto hay algún componente Radzen en la página — misma especificidad, pero esta regla va después en el (App.razor) y gana el empate. */ :root:has(.rz-layout) body { font-family: var(--erp-font-family); } a, .btn-link { color: var(--erp-link-text); } /* ── Contenedor raíz de cualquier ventana ERP ───────────────────────── */ .win-erp { font-family: var(--erp-font-family); font-size: var(--erp-font-base); color: var(--erp-text); } /* ── Tarjeta de ventana ─────────────────────────────────────────────── */ .ventana { background: var(--erp-container-bg); border: 1px solid var(--erp-border); border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.12); overflow: hidden; } /* ── Pestañas ───────────────────────────────────────────────────────── */ .tabs { display: flex; gap: var(--erp-space-xs); padding: var(--erp-space-sm) var(--erp-space-md) 0; border-bottom: 1px solid var(--erp-border); background: var(--erp-win-bg); flex-wrap: wrap; } .tab { padding: var(--erp-space-sm) var(--erp-space-lg); cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; color: var(--erp-text-light); font-weight: 600; user-select: none; background: none; font-size: var(--erp-font-base); } .tab:hover { background: var(--erp-hover-bg); color: var(--erp-text); } .tab.activa { background: var(--erp-container-bg); border-color: var(--erp-border); color: var(--erp-section-text); position: relative; top: 1px; } /* ── Cuerpo ficha (área principal + columna de botones) ─────────────── */ .cuerpo { display: flex; } .panel { flex: 1; padding: var(--erp-space-lg) var(--erp-space-xl); min-height: 520px; } .erp-sidebar { width: 170px; padding: var(--erp-space-lg) var(--erp-space-md); display: flex; flex-direction: column; gap: var(--erp-space-md); border-left: 1px solid var(--erp-border); background: var(--erp-win-bg); } /* ── Botones ERP ─────────────────────────────────────────────────────── */ .btn-win { display: flex; align-items: center; justify-content: center; gap: var(--erp-space-sm); background: var(--erp-primary); color: var(--erp-primary-text); border: none; border-radius: 7px; padding: var(--erp-space-sm) var(--erp-space-md); font-size: var(--erp-font-base); font-weight: 600; cursor: pointer; box-shadow: 0 2px 0 var(--erp-primary-dark); width: 100%; transition: filter .15s; } .btn-win:hover:not(:disabled) { filter: brightness(1.08); } .btn-win:disabled { opacity: .55; cursor: default; box-shadow: none; } .btn-win.outline { background: var(--erp-container-bg); color: var(--erp-primary); border: 1.5px solid var(--erp-primary); box-shadow: none; } .btn-mini { background: var(--erp-primary); color: var(--erp-primary-text); border: none; border-radius: 6px; width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--erp-font-md); } .btn-mini.outline { background: var(--erp-container-bg); color: var(--erp-primary); border: 1.5px solid var(--erp-primary); } /* ── Formulario: filas de campos ─────────────────────────────────────── */ .fila { display: flex; align-items: center; margin-bottom: var(--erp-space-md); gap: var(--erp-space-md); } .lbl { width: 140px; flex-shrink: 0; color: var(--erp-text); } .campo { background: var(--erp-input-bg); border: 1px solid var(--erp-border); border-radius: 4px; padding: var(--erp-space-sm) var(--erp-space-sm); font-size: var(--erp-font-base); color: var(--erp-text); width: 100%; } .campo:focus { outline: 2px solid var(--erp-primary-light); border-color: var(--erp-primary); background: var(--erp-container-bg); } .campo.num { text-align: right; max-width: 140px; } select.campo { appearance: auto; } textarea.campo { resize: vertical; } .sep { height: 14px; } /* Sub-pestañas */ .subtabs { display: flex; gap: 2px; margin: var(--erp-space-md) 0 0; } .subtab { padding: var(--erp-space-xs) var(--erp-space-md); border: 1px solid var(--erp-border); border-bottom: none; border-radius: 5px 5px 0 0; background: var(--erp-win-bg); cursor: pointer; font-size: var(--erp-font-sm); } .subtab.activa { background: var(--erp-container-bg); font-weight: 600; } .subtab-cont { border: 1px solid var(--erp-border); padding: var(--erp-space-sm); border-radius: 0 5px 5px 5px; } /* ── Barra de estado inferior ────────────────────────────────────────── */ .barra { background: var(--erp-win-bg); border-top: 1px solid var(--erp-border); padding: var(--erp-space-sm) var(--erp-space-lg); display: flex; justify-content: space-between; font-size: var(--erp-font-sm); color: var(--erp-text-light); } .otra-tab { padding: 48px; color: var(--erp-text-light); font-style: italic; } /* ── Rail / panel buscador lateral ──────────────────────────────────── */ .rail { font-size: var(--erp-font-base); } .rail .lista { max-height: 70vh; overflow: auto; border: 1px solid var(--erp-border); border-radius: 4px; } .rail .item { padding: var(--erp-space-sm) var(--erp-space-sm); border-bottom: 1px solid var(--erp-win-bg); cursor: pointer; background: var(--erp-container-bg); } .rail .item:hover { background: var(--erp-hover-bg); } .rail .item.sel { background: var(--erp-selected-bg); } .rail .item .ref { font-weight: 600; color: var(--erp-section-text); } /* ── Utilidades tipográficas ERP ─────────────────────────────────────── */ .text-erp-section { color: var(--erp-section-text) !important; } .text-erp-title { color: var(--erp-title-text) !important; } .text-erp-light { color: var(--erp-text-light) !important; } /* ── Ajuste de componentes Bootstrap para seguir la paleta ERP ────────── */ .btn-primary { --bs-btn-bg: var(--erp-primary); --bs-btn-border-color: var(--erp-primary-dark); --bs-btn-hover-bg: var(--erp-primary-dark); --bs-btn-hover-border-color: var(--erp-primary-dark); --bs-btn-active-bg: var(--erp-primary-dark); --bs-btn-active-border-color: var(--erp-primary-dark); --bs-btn-color: var(--erp-primary-text); --bs-btn-hover-color: var(--erp-primary-text); --bs-btn-active-color: var(--erp-primary-text); --bs-btn-focus-shadow-rgb: var(--erp-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--erp-primary); --bs-btn-border-color: var(--erp-primary); --bs-btn-hover-bg: var(--erp-primary); --bs-btn-hover-border-color: var(--erp-primary); --bs-btn-hover-color: var(--erp-primary-text); --bs-btn-active-bg: var(--erp-primary); --bs-btn-active-border-color: var(--erp-primary); --bs-btn-active-color: var(--erp-primary-text); } .form-control, .form-select { background-color: var(--erp-container-bg); } .form-control:focus, .form-select:focus { border-color: var(--erp-primary); box-shadow: 0 0 0 0.2rem rgba(var(--erp-primary-rgb), 0.2); } .btn:focus, .btn:active:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--erp-primary-rgb), 0.35); } .nav-link.active { color: var(--erp-primary) !important; border-bottom-color: var(--erp-primary) !important; } .nav-tabs .nav-link.active { border-color: var(--erp-border) var(--erp-border) var(--erp-container-bg); } /* ── Validación ──────────────────────────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid var(--erp-danger); } .validation-message { color: var(--erp-danger); } /* ── Blazor error boundary ───────────────────────────────────────────── */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "Ha ocurrido un error."; } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--erp-text-light); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── Toggle sidebar ─────────────────────────────────────────── */ @media (min-width: 641px) { .sidebar { overflow: hidden; transition: width 0.25s ease; } } /* ── Tabla ERP (usada en lista de documentos, auxiliares, etc.) ──────── */ .tabla-erp th { font-size: var(--erp-font-sm); white-space: nowrap; } .tabla-erp td { vertical-align: middle; font-size: var(--erp-font-sm); } .tabla-erp tbody tr:hover { background: var(--erp-hover-bg) !important; cursor: default; } .tabla-scroll { overflow-y: auto; max-height: 65vh; } /* ── Ventana título ──────────────────────────────────────────────────── */ .ventana-titulo { background: var(--erp-primary); color: var(--erp-primary-text); padding: var(--erp-space-sm) var(--erp-space-md); font-weight: 600; font-size: var(--erp-font-md); display: flex; align-items: center; gap: var(--erp-space-sm); min-height: 36px; } /* Botones de la barra de título de cualquier ficha (Documentos, Facturas, Artículos, Terceros...) — a medio camino entre el .btn-sm de Bootstrap y el tamaño normal, para que se lean bien sin arriesgar que una fila con muchos botones se parta en dos líneas. Confirmado con Pepe (31/08) sobre Documentos/Facturas, extendido aquí a toda la app en vez de a una ficha suelta. */ .ventana-titulo .btn-sm { font-size: var(--erp-font-md); padding: 4px 12px; } /* Barra de título de la ficha de Documentos, en dos líneas: arriba el documento (tipo, número, fecha, cliente) con los botones a la derecha; abajo los datos de la factura y los avisos. Trello M5 ERP #49 (Miguel): el nº se lee mejor porque TODA la línea va a un tamaño mayor — confirmado con Pepe: mismo tamaño en toda la línea, los fondos de color se mantienen. */ .ventana-titulo-doc { display: block; font-size: 17px; } .ventana-titulo-doc .doc-titulo-linea { display: flex; align-items: center; flex-wrap: wrap; gap: var(--erp-space-sm); min-height: 32px; } /* Los badges de Bootstrap son .75em: aquí se igualan al texto de la línea. */ .ventana-titulo-doc .badge { font-size: 1em; font-weight: 600; padding: 2px 8px; } /* ── Adjuntos: zona de arrastrar-y-soltar (AdjuntosPanel.razor) ───────── */ /* El de InputFile va invisible encima de todo el recuadro — los navegadores ya disparan su evento "change" al soltar un fichero sobre él, así que no hace falta JS/interop para el drag & drop. */ .adjuntos-dropzone { position: relative; width: 260px; min-height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; border: 2px dashed var(--erp-border-strong); border-radius: 6px; background: var(--erp-win-bg); transition: border-color .15s, background-color .15s; } .adjuntos-dropzone:hover { border-color: var(--erp-primary); background: var(--erp-primary-light); } .adjuntos-dropzone.adjuntos-dropzone-lleno { border-style: solid; border-color: var(--erp-primary); } .adjuntos-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .adjuntos-dropzone-texto { font-size: var(--erp-font-sm); color: #666; pointer-events: none; word-break: break-word; } /* ── Botón extra pequeño ─────────────────────────────────────────────── */ .btn-xs { padding: 1px 5px; font-size: var(--erp-font-xs); line-height: 1.4; border-radius: 3px; } /* ── Autocomplete dropdown ───────────────────────────────────────────── */ .autocomplete-dropdown { position: absolute; z-index: 1000; background: var(--erp-container-bg); border: 1px solid var(--erp-border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.18); max-height: 200px; overflow-y: auto; width: 100%; top: calc(100% + 2px); left: 0; } .autocomplete-item { padding: var(--erp-space-xs) var(--erp-space-md); cursor: pointer; font-size: var(--erp-font-sm); border-bottom: 1px solid var(--erp-border); } .autocomplete-item:hover, .autocomplete-item.active { background: var(--erp-hover-bg); } .autocomplete-item:last-child { border-bottom: none; } /* ── Buscador de menú (barra superior) ───────────────────────────────── */ .menu-search { width: 100%; max-width: 320px; } .menu-search-icon { background: var(--erp-container-bg); color: var(--erp-text-light); border-color: var(--bs-border-color); } /* ── Ventana Documentos ──────────────────────────────────────────────── */ .ventana-doc { display: flex; flex-direction: column; height: calc(100vh - 56px); /* descuenta la navbar top */ } .doc-cabecera { flex-shrink: 0; overflow-y: auto; max-height: 240px; } .doc-lineas { flex: 1; overflow-y: auto; } .doc-totales { flex-shrink: 0; background: var(--erp-win-bg); font-size: var(--erp-font-base); } /* ── Tabs de documento ─────────────────────────────────────────────────── */ .doc-tab-nav { display: flex; background: var(--erp-win-bg); flex-shrink: 0; } .doc-tab-btn { border: none; border-bottom: 3px solid transparent; background: none; padding: var(--erp-space-xs) var(--erp-space-lg); font-size: var(--erp-font-base); cursor: pointer; color: var(--erp-text-light); transition: color 0.12s, border-color 0.12s; white-space: nowrap; } .doc-tab-btn.active { border-bottom-color: var(--erp-primary); color: var(--erp-primary); font-weight: 600; } .doc-tab-btn:hover:not(.active) { background: var(--erp-hover-bg); color: var(--erp-text); } .doc-tab-body { flex: 1; overflow-y: auto; padding: var(--erp-space-sm) var(--erp-space-sm); } .doc-linea-editor { background: var(--erp-win-bg); border-bottom: 1px solid var(--erp-border); padding: var(--erp-space-sm) var(--erp-space-sm); flex-shrink: 0; } .doc-lineas-grid { flex: 1; overflow-y: auto; } .enlaces-arbol { display: flex; align-items: flex-start; gap: 24px; overflow: auto; padding: 8px; } .enlaces-nodo { display: flex; align-items: center; gap: 24px; } .enlaces-hijos { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 24px; border-left: 2px solid var(--erp-border); } .enlaces-caja { display: block; min-width: 140px; max-width: 180px; border: 2px solid var(--erp-border); border-radius: 6px; padding: 6px 8px; color: var(--erp-text); text-decoration: none; cursor: pointer; background: var(--erp-win-bg); } .enlaces-caja:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .enlaces-caja-actual { border-width: 4px; } /* ── Contenido de ayuda renderizado desde Markdown (Markdig) ──────────── */ .ayuda-markdown { max-height: 420px; overflow-y: auto; color: var(--erp-text); } .ayuda-markdown h1 { font-size: 1.3rem; margin-top: 0; } .ayuda-markdown h2, .ayuda-markdown h3 { font-size: 1.05rem; margin-top: 1rem; } .ayuda-markdown blockquote { border-left: 3px solid var(--erp-primary); background: var(--erp-primary-light); margin: 0.5rem 0; padding: 0.4rem 0.8rem; color: var(--erp-text); } .ayuda-markdown ul { padding-left: 1.2rem; } .ayuda-markdown p { margin-bottom: 0.5rem; } /* ── Widgets de Inicio: tablón de anuncios / notas (HTML de RadzenHtmlEditor) ── */ .dash-html-content { max-height: 260px; overflow-y: auto; color: var(--erp-text); } .dash-html-content p:last-child { margin-bottom: 0; } /* ── Menú de tipos de documento (Docs.razor): estrella de favorito ──────── */ .docmenu-fav-star { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; background: rgba(255, 255, 255, 0.55); color: #6c757d; } .docmenu-fav-star.is-fav { background: rgba(255, 255, 255, 0.85); color: #f5a623; text-shadow: 0 0 1px rgba(0, 0, 0, 0.35); } /* ── Widget de Inicio: Documentos por tipo (favoritos) ─────────────────── */ .dash-tipodoc-btn { font-size: 1.05rem; font-weight: 600; padding: 0.55rem 1.1rem; border: none; }