/* ═══════════════════════════════════════════════════════════════════ NIVARIA MASTER — Sistema de diseño «Volcán y océano» Oscuro: basalto volcánico #16151a · teal atlántico #14b8a6 Claro: arena cálida #f8f4ec · verde atlántico #0e7d72 · barra basalto-verde Marca NIVAR.IA (blanco/azul/amarillo) intocable en ambos temas. ═══════════════════════════════════════════════════════════════════ */ /* ── TOKENS ──────────────────────────────────────────────────────── */ :root { --bg: #16151a; --bg2: #1e1d24; --bg3: #26252d; --bg4: #2e2c36; --sidebar: #100f13; --border: #34313c; --border2: #453f4e; --accent: #0f9e8e; --accent2: #14b8a6; --accent3: #2dd4bf; /* Acento para TEXTO sobre fondos (sustituye al azul var(--accent-text) cableado). */ --accent-text: #2dd4bf; --accent-glow: rgba(20,184,166,0.22); --yellow: #FFC107; --yellow2: #FFD54F; /* ── NIVAR.IA brand colors ──────────────────────────────── */ --nivar-ni: #FFFFFF; --nivar-var: #0768A9; --nivar-ia: #FFCC00; --green: #22c55e; --green-bg: rgba(34,197,94,0.08); --green-border:rgba(34,197,94,0.2); --orange: #f59e0b; --red: #ef4444; --purple: #a78bfa; --text: #eae6de; --text2: #9d97a3; --text3: #6e6876; --text4: #4b4653; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --sidebar-w: 228px; --sidebar-collapsed: 56px; --header-h: 56px; --tabs-h: 42px; --font: 'Inter', system-ui, -apple-system, sans-serif; /* Titulares con serifa (rasgo del estilo Volcán y océano). */ --font-display: Georgia, 'Times New Roman', serif; --mono: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --transition: 0.15s ease; --ui-scale: 1; --hover-overlay: rgba(255,255,255,0.02); } /* ── TEMA CLARO ────────────────────────────────────────────────────── Se activa poniendo data-theme="light" en (gestionado por theme.js). Pensado sobre todo para usar la tablet al aire libre, donde el tema oscuro original es difícil de leer con luz directa. Reutiliza los mismos nombres de variable que el tema oscuro, así que cualquier regla CSS que ya use var(--bg), var(--text), etc. cambia de color automáticamente sin tocar nada más. Los colores de estado (verde/rojo/amarillo/naranja) y los de marca NIVAR.IA se mantienen iguales en ambos temas para no perder reconocibilidad. */ html[data-theme="light"] { --bg: #f8f4ec; --bg2: #fffdf7; --bg3: #fbf7ee; --bg4: #efe9dd; /* La barra lateral se queda en basalto-verde también en claro: es el rasgo de identidad del estilo (y el logo NIVAR.IA conserva su blanco de marca). */ --sidebar: #1f3a36; --border: #e6ddcc; --border2: #d2c6ae; --accent: #0e7d72; --accent2: #0f9184; --accent3: #0a625a; --accent-text: #0a625a; --accent-glow: rgba(14,125,114,0.13); --yellow: #9a6414; --yellow2: #7a4f10; /* MARCA intocable también en claro: todos los contextos donde aparece NIVAR.IA (barra lateral, barra superior, insignia del asistente y pastilla del login) tienen fondo basalto-verde, así que el blanco/azul/amarillo de marca se mantiene tal cual — nunca se recolorea. */ --nivar-ni: #FFFFFF; --nivar-var: #0768A9; --nivar-ia: #FFCC00; --green: #16a34a; --green-bg: rgba(22,163,74,0.08); --green-border:rgba(22,163,74,0.25); --orange: #c2660a; --red: #dc2626; --purple: #7c3aed; --text: #2b2620; --text2: #6f6659; --text3: #988d7c; --text4: #bfb49e; --shadow: 0 4px 24px rgba(60,50,30,0.10); --shadow-sm: 0 2px 8px rgba(60,50,30,0.08); --hover-overlay: rgba(60,50,30,0.04); } /* Interior de la barra lateral Y la barra superior en tema claro: fondo basalto-verde → sus textos, hovers y bordes usan una escala clara PROPIA (las variables se re-declaran SOLO dentro de esas barras; el resto de la pantalla no cambia). Regla de MARCA del dueño: NIVAR.IA vive siempre sobre fondo oscuro y sus colores blanco/azul/amarillo NUNCA se modifican. */ html[data-theme="light"] .sidebar, html[data-theme="light"] .topbar { --bg2: #27463f; --bg3: rgba(255,255,255,0.09); --bg4: rgba(255,255,255,0.14); --border: #2e544e; --border2:#3c6b63; --text: #eef7f4; --text2: #c3d9d4; --text3: #9dbeb7; --text4: #6f948c; --accent-text: #5eead4; --accent-glow: rgba(94,234,212,0.14); --hover-overlay: rgba(255,255,255,0.06); } html[data-theme="light"] .topbar { background: #1f3a36; } /* En tema claro, .login-screen usa un degradado pensado para fondo oscuro; lo suavizamos para que no quede chillón sobre blanco. */ html[data-theme="light"] .login-screen { background: linear-gradient(135deg, rgba(14,125,114,0.10), transparent 34%), radial-gradient(circle at 75% 20%, rgba(183,134,11,0.08), transparent 26%), var(--bg); } /* ── RESET ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); height: 100%; overflow: hidden; font-size: calc(13px * var(--ui-scale)); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: var(--font); } input, select, textarea { font-family: var(--font); } .login-screen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(20,184,166,0.20), transparent 34%), radial-gradient(circle at 75% 20%, rgba(255,193,7,0.14), transparent 26%), var(--bg); } .login-panel { width: min(380px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); box-shadow: var(--shadow); } .login-brand { font-weight: 900; font-size: 28px; font-family: var(--font-display); letter-spacing: 0; margin-bottom: 2px; } /* .login-brand .ni/var/ia colours are defined in the unified brand rule below */ .login-subtitle { color: var(--text2); font-size: 12px; margin-bottom: 22px; } .login-error { min-height: 18px; margin-top: 10px; color: var(--red); font-size: 11px; } .login-hint { margin-top: 10px; color: var(--text3); font-size: 10px; } /* ── SCROLLBAR ───────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--text4); } /* ══════════════════════════════════════════════════════════════════ LAYOUT PRINCIPAL ══════════════════════════════════════════════════════════════════ */ .app { display: flex; height: 100vh; overflow: hidden; } /* ── SIDEBAR ─────────────────────────────────────────────────────── */ .sidebar { width: var(--sidebar-w); background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; transition: width var(--transition); overflow: hidden; z-index: 100; } .sidebar.collapsed { width: var(--sidebar-collapsed); } .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-badge, .sidebar.collapsed .sidebar-logo-text, .sidebar.collapsed .nav-section-label, .sidebar.collapsed .user-info, .sidebar.collapsed .user-meta { display: none; } .sidebar.collapsed .nav-item { justify-content: center; padding: 10px; } .sidebar.collapsed .nav-item .nav-icon { margin: 0; } /* Logo */ .sidebar-logo { padding: 14px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 60px; } .sidebar-logo img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .sidebar-logo-text { overflow: hidden; white-space: nowrap; } .logo-brand { font-size: 16px; font-weight: 800; font-family: var(--font-display); letter-spacing: 0; line-height: 1.1; } .logo-brand .ni { color: var(--nivar-ni); } .logo-brand .var { color: var(--nivar-var); } .logo-brand .ia { color: var(--nivar-ia); } .logo-brand span { color: var(--yellow); } .logo-suite { font-size: 10px; font-weight: 500; color: var(--text3); letter-spacing: 0.8px; text-transform: uppercase; } /* Toggle sidebar */ .sidebar-toggle { position: absolute; top: 16px; right: -12px; width: 24px; height: 24px; background: var(--bg3); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; color: var(--text3); z-index: 101; transition: all var(--transition); } .sidebar-toggle:hover { background: var(--border); color: var(--text); } /* Nav */ .sidebar-nav { flex: 1; padding: 8px 6px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; } .nav-section-label { font-size: 10px; font-weight: 600; color: var(--text4); letter-spacing: 0.8px; text-transform: uppercase; padding: 10px 10px 3px; white-space: nowrap; } .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; color: var(--text3); font-weight: 500; font-size: 13px; transition: all var(--transition); user-select: none; white-space: nowrap; position: relative; } .nav-item:hover { background: var(--bg3); color: var(--text2); } .nav-item.active { background: var(--accent-glow); color: var(--accent-text); border-left: 2px solid var(--accent-text); padding-left: 8px; } .nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; } .nav-label { flex: 1; } /* Tooltip con el nombre del apartado cuando la barra lateral está comprimida. Posicionado con position:fixed vía JS (initSidebarTooltips en core.js) para que no lo recorte el scroll de la barra. */ .nav-tooltip { position: fixed; transform: translateY(-50%); background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .08s ease; } .nav-tooltip.show { opacity: 1; } /* Chips de EPIs básicos predefinidos (ficha PRL del técnico). */ .epi-chip { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 12px; padding: 3px 10px; font-size: 11px; cursor: pointer; transition: background .1s, color .1s, border-color .1s; } .epi-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .nav-badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; min-width: 18px; text-align: center; } .nav-badge.orange { background: var(--orange); } .nav-badge.red { background: var(--red); } /* User footer */ .sidebar-user { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent3)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; letter-spacing: -0.5px; } .user-info { flex: 1; overflow: hidden; } .user-name { font-size: 12px; font-weight: 600; white-space: nowrap; } .user-role { font-size: 10px; color: var(--text3); white-space: nowrap; } .user-meta { display: flex; gap: 6px; } .user-meta-btn { background: none; border: none; color: var(--text3); font-size: 13px; cursor: pointer; padding: 2px; border-radius: 4px; transition: color var(--transition); } .user-meta-btn:hover { color: var(--text); } /* ── MAIN ────────────────────────────────────────────────────────── */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; } /* ── TOPBAR ──────────────────────────────────────────────────────── */ .topbar { height: var(--header-h); background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 18px; gap: 10px; flex-shrink: 0; overflow: hidden; } .topbar-empty { display: flex; align-items: center; gap: 12px; flex: 1; } .topbar-nivar { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; } .topbar-nivar .ni { color: var(--nivar-ni); } .topbar-nivar .var { color: var(--nivar-var); } .topbar-nivar .ia { color: var(--nivar-ia); } .topbar-tagline { font-size: 12px; color: var(--text3); } .exp-ref { font-size: 14px; font-weight: 700; color: var(--text); font-family: var(--mono); letter-spacing: -0.3px; white-space: nowrap; } .topbar-sep { color: var(--text4); font-size: 14px; } .topbar-chips { display: flex; gap: 6px; align-items: center; } .chip { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); white-space: nowrap; } .chip.blue { background: rgba(15,158,142,0.18); color: var(--accent-text); border-color: rgba(15,158,142,0.3); } .chip.green { background: rgba(34,197,94,0.12); color: var(--green); border-color: rgba(34,197,94,0.25); } .chip.orange{ background: rgba(245,158,11,0.12); color: var(--orange); border-color: rgba(245,158,11,0.25); } .chip.red { background: rgba(239,68,68,0.12); color: var(--red); border-color: rgba(239,68,68,0.25); } /* Progress en topbar */ .topbar-progress { display: flex; align-items: center; gap: 7px; margin-left: 8px; } .progress-wrap { width: 100px; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #42a5f5); transition: width 0.4s ease; } .progress-pct { font-size: 12px; font-weight: 700; color: var(--accent-text); } /* Semáforo */ .semaforo { display: flex; gap: 10px; align-items: center; padding: 0 10px; } .sem-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); } .sem-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sem-dot.green { background: var(--green); box-shadow: 0 0 5px var(--green); } .sem-dot.orange { background: var(--orange); box-shadow: 0 0 5px var(--orange); } .sem-dot.red { background: var(--red); box-shadow: 0 0 5px var(--red); } /* Calidad */ .topbar-quality { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); } .quality-wrap { width: 60px; height: 4px; background: var(--bg3); border-radius: 2px; } .quality-fill { height: 100%; border-radius: 2px; background: var(--accent); } .quality-pct { font-size: 11px; font-weight: 700; } .topbar-actions { margin-left: auto; display: flex; gap: 7px; align-items: center; } /* ── BOTONES ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition); white-space: nowrap; user-select: none; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent2); } .btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg4); color: var(--text); } .btn-danger { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.25); } .btn-danger:hover { background: rgba(239,68,68,0.2); } .btn-success { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.25); } .btn-success:hover { background: rgba(34,197,94,0.2); } .btn-sm { padding: 4px 10px; font-size: 11px; } .btn-xs { padding: 2px 7px; font-size: 10px; } .btn-icon { padding: 7px; border-radius: var(--radius); } /* ── TABS ────────────────────────────────────────────────────────── */ .tabs-bar { background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; padding: 0 18px; gap: 0; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; min-height: var(--tabs-h); } .tabs-bar::-webkit-scrollbar { height: 0; } .tab { padding: 0 14px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 5px; transition: all var(--transition); white-space: nowrap; user-select: none; min-height: var(--tabs-h); } .tab:hover { color: var(--text2); background: var(--hover-overlay); } .tab.active { color: var(--accent-text); border-bottom-color: var(--accent-text); font-weight: 600; } .tab-icon { font-size: 13px; } /* ── Stepper del ciclo de vida del expediente (workflow.js) ──────── */ .wf-strip { display: flex; align-items: center; gap: 12px; padding: 7px 18px; background: var(--bg2); border-bottom: 1px solid var(--border); overflow: visible; /* el desplegable "Método" debe poder salir de la tira */ flex-shrink: 0; } /* Estado del método pintado EN las pestañas (una sola barra, sin duplicar). */ .tab-check { color: var(--green); font-weight: 700; font-size: 11px; margin-left: 1px; } .tab.wf-next:not(.active) { color: var(--text2); border-bottom-color: rgba(245, 158, 11, .6); } /* Guía compacta del ciclo de vida (siguiente paso + progreso + Método). */ .wf-next { font-size: 11px; color: var(--text2); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg3); white-space: nowrap; } .wf-next b { color: var(--text); } .wf-next.nav { cursor: pointer; } .wf-next.nav:hover { background: var(--hover-overlay); } .wf-next.wf-done-all { color: var(--green); border: none; background: transparent; } .wf-strip .wf-progress { margin-left: auto; } .wf-metodo-wrap { position: relative; flex-shrink: 0; } .wf-metodo-btn { font-size: 11px; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; } .wf-metodo-btn:hover { color: var(--text); background: var(--hover-overlay); } .wf-metodo-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); padding: 6px; min-width: 230px; max-height: 62vh; overflow-y: auto; } .wf-metodo-pop[hidden] { display: none; } .wf-mrow { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--text3); white-space: nowrap; } .wf-mrow.nav { cursor: pointer; } .wf-mrow.nav:hover { background: var(--hover-overlay); color: var(--text2); } .wf-mrow.done { color: var(--green); } /* Los pasos hacen scroll horizontal propio; el progreso queda fijo a la derecha */ .wf-steps { display: flex; align-items: center; flex: 1; min-width: 0; overflow-x: auto; } .wf-steps::-webkit-scrollbar { height: 0; } .wf-step { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; color: var(--text3); font-size: 11px; } .wf-step.nav { cursor: pointer; } .wf-step.nav:hover { background: var(--hover-overlay); color: var(--text2); } .wf-step.done { color: var(--green); } .wf-step.optional .wf-dot { border-style: dashed; } .wf-opt { font-size: 9px; opacity: 0.6; margin-left: 2px; } .wf-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg3); font-size: 10px; flex-shrink: 0; } .wf-step.done .wf-dot { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: var(--green); font-weight: 700; } .wf-link { width: 14px; height: 1px; background: var(--border); flex-shrink: 0; } .wf-progress { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .wf-progress-bar { width: 90px; height: 5px; border-radius: 3px; background: var(--bg4); overflow: hidden; } .wf-progress-fill { height: 100%; background: var(--green); border-radius: 3px; } .wf-progress-text { font-size: 10px; color: var(--text3); min-width: 28px; } /* ── PÁGINA ──────────────────────────────────────────────────────── */ .page { flex: 1; overflow: hidden; display: none; min-height: 0; min-width: 0; } .page.active { display: flex; flex-direction: column; } #page-expediente > [id^="exp-tab-"] { min-height: 0; min-width: 0; } /* ── CONTENT GRID (3 paneles) ────────────────────────────────────── */ .content-grid { flex: 1; display: grid; grid-template-columns: 280px 1fr 370px; overflow: hidden; min-height: 0; min-width: 0; } .content-grid.two-col { grid-template-columns: 320px 1fr; } .content-grid.one-col { grid-template-columns: 1fr; } /* ── PANEL ───────────────────────────────────────────────────────── */ .panel { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); min-height: 0; min-width: 0; } .panel:last-child { border-right: none; } .panel-header { padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: var(--bg2); min-height: 44px; } .panel-title { font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: 0.5px; text-transform: uppercase; } .panel-body { flex: 1; overflow-y: auto; padding: 12px; min-height: 0; min-width: 0; } .panel-footer { padding: 8px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--bg2); position: sticky; bottom: 0; z-index: 4; } /* ── CARDS ───────────────────────────────────────────────────────── */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } .card-sm { padding: 12px; border-radius: var(--radius); } .card-title { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 10px; } /* ── STAT GRID ───────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .stat-item { } .stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; } .stat-value { font-size: 15px; font-weight: 700; font-family: var(--mono); color: var(--text); } .stat-value.accent { color: var(--accent-text); } .stat-value.green { color: var(--green); } .stat-value.yellow { color: var(--yellow); } /* ── FORMULARIOS ─────────────────────────────────────────────────── */ .form-section { margin-bottom: 18px; } .form-section-title { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .form-row.single { grid-template-columns: 1fr; } .form-row.triple { grid-template-columns: 1fr 1fr 1fr; } /* El display:grid de arriba anularía el atributo hidden (los campos que solo aplican a ciertos trabajos, p.ej. "Instalación BT de origen" solo en EERR, se ocultan con hidden). Esta regla devuelve a hidden su significado. */ .form-row[hidden] { display: none; } /* Croquis en modo dibujo a mano alzada: los elementos ya dibujados no capturan el puntero (ni clic en tramos ni arrastre de nodos), para que todo el gesto sea del trazo. */ #croquis-svg.croquis-drawing * { pointer-events: none; } .form-group { display: flex; flex-direction: column; gap: 4px; } .form-label { font-size: 11px; color: var(--text2); font-weight: 500; } .form-label.required::after { content: ' *'; color: var(--red); } .form-input, .form-select, .form-textarea { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 7px 10px; font-size: 12px; font-family: var(--font); outline: none; transition: border-color var(--transition), background var(--transition); width: 100%; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent2); background: rgba(15,158,142,0.05); } .form-input.error { border-color: var(--red); } .form-input.success { border-color: var(--green); } .form-textarea { resize: vertical; min-height: 80px; } .form-hint { font-size: 10px; color: var(--text3); margin-top: 2px; } /* Toggle tipo tramo */ .type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .toggle-btn { padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg3); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all var(--transition); font-family: var(--font); } .toggle-btn.active { background: rgba(15,158,142,0.2); border-color: var(--accent); color: var(--accent-text); } /* ── TABLAS ──────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 12px; } .data-table th { padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: var(--bg2); white-space: nowrap; } .data-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: middle; } .data-table tr:hover td { background: var(--hover-overlay); } .data-table tr.selected td { background: rgba(15,158,142,0.08); } .data-table tr:last-child td { border-bottom: none; } .data-table .mono { font-family: var(--mono); } .data-table .actions { display: flex; gap: 4px; justify-content: flex-end; } /* ── TRAMO LIST ──────────────────────────────────────────────────── */ .tramo-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px; border: 1px solid transparent; transition: all var(--transition); } .tramo-item:hover { background: var(--bg3); } .tramo-item.selected { background: rgba(15,158,142,0.1); border-color: rgba(15,158,142,0.3); } .tramo-num { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text3); width: 22px; flex-shrink: 0; } .tramo-check { font-size: 12px; flex-shrink: 0; } .tramo-info { flex: 1; min-width: 0; } .tramo-type { font-size: 12px; font-weight: 600; color: var(--text); } .tramo-len { font-size: 11px; color: var(--text3); font-family: var(--mono); } .tramo-dir { font-size: 16px; color: var(--text3); flex-shrink: 0; } .tramo-summary-grid { background: var(--bg3); border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ── CROQUIS ─────────────────────────────────────────────────────── */ .croquis-wrap { position: relative; background: var(--bg); flex: 1; overflow: hidden; display: flex; flex-direction: column; } .croquis-toolbar { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 10; align-items: center; } .view-toggle { display: flex; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .view-btn { padding: 5px 11px; font-size: 11px; font-weight: 600; color: var(--text3); cursor: pointer; transition: all var(--transition); user-select: none; } .view-btn.active { background: var(--accent); color: #fff; } .croquis-export { position: relative; } .croquis-export-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.28); } .croquis-export-menu .btn { justify-content: flex-start; white-space: nowrap; } .croquis-canvas { flex: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .croquis-legend { position: absolute; bottom: 12px; right: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; } .legend-title { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); } .legend-line { width: 18px; height: 2px; border-radius: 1px; flex-shrink: 0; } .croquis-3d-preview { position: absolute; bottom: 12px; left: 12px; width: 160px; height: 120px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .preview-label { position: absolute; top: 5px; left: 8px; font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; } /* ── STATUS BAR ──────────────────────────────────────────────────── */ .status-bar { padding: 8px 14px; border-top: 1px solid var(--green-border); background: var(--green-bg); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .status-bar.warning { border-top-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.06); } .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-dot.green { background: var(--green); } .status-dot.orange { background: var(--orange); } .status-text { font-size: 11px; color: var(--green); font-weight: 500; flex: 1; } .status-text.orange { color: var(--orange); } /* ── NIVAR.IA BADGE ──────────────────────────────────────────────── */ /* Helper reutilizable para renderizar NIVAR.IA con colores de marca */ .nivar-brand { font-weight: 800; letter-spacing: -0.5px; } .nivar-brand .ni, .logo-brand .ni, .topbar-nivar .ni, .nivar-badge-text .ni, .login-brand .ni { color: #FFFFFF !important; } .nivar-brand .var, .logo-brand .var, .topbar-nivar .var, .nivar-badge-text .var, .login-brand .var { color: #0768A9 !important; } .nivar-brand .ia, .logo-brand .ia, .topbar-nivar .ia, .nivar-badge-text .ia, .login-brand .ia { color: #FFCC00 !important; } /* Tema claro: las partes "NI" de NIVAR.IA se dibujan en blanco (pensado para fondo oscuro) y sobre el fondo blanco del tema claro serían invisibles. Las forzamos a un gris medio para que tengan contraste. Solo afecta al tema claro; el modo oscuro mantiene el blanco de marca. */ /* Regla de MARCA (dueño): los colores de NIVAR.IA no se modifican NUNCA. En tema claro ya no hace falta recolorear el "NI": la barra superior y la lateral son basalto-verde, y el login lleva la marca sobre pastilla oscura. */ /* Cualquier NIVAR.IA suelto en zonas de contenido claras (banner del asistente del panel, pantalla del asistente…) va sobre la misma pastilla basalto: el blanco de marca nunca se queda invisible ni se recolorea. */ html[data-theme="light"] .nivar-brand { background: #1f3a36; display: inline-block; padding: 1px 8px; border-radius: 8px; line-height: 1.5; } /* El del login (lleva también .nivar-brand) va después para que su pastilla grande mande sobre la genérica. */ html[data-theme="light"] .login-brand { background: #1f3a36; display: inline-block; padding: 4px 16px; border-radius: var(--radius-lg); line-height: 1.3; } .nivar-badge { /* En la barra superior (junto a la versión), no flotante: así no tapa botones. */ flex-shrink: 0; align-self: center; background: var(--bg2); border: 1px solid var(--border); border-radius: 24px; padding: 6px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; cursor: pointer; transition: all var(--transition); } .nivar-badge:hover { border-color: var(--accent); } .nivar-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} } .nivar-badge-text { color: var(--text2); } .nivar-badge-text .ni { color: var(--nivar-ni); } .nivar-badge-text .var { color: var(--nivar-var); } .nivar-badge-text .ia { color: var(--nivar-ia); } /* ── TOAST ───────────────────────────────────────────────────────── */ .toast-container { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); font-size: 13px; min-width: 280px; animation: slideIn 0.2s ease; } @keyframes slideIn { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} } .toast.success { border-left: 3px solid var(--green); } .toast.error { border-left: 3px solid var(--red); } .toast.info { border-left: 3px solid var(--accent); } .toast-icon { font-size: 16px; flex-shrink: 0; } .toast-close { margin-left: auto; cursor: pointer; color: var(--text3); font-size: 16px; } /* ── MODAL ───────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500; display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px); } .modal-overlay.open { display: flex; } .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; min-width: 400px; max-width: 90vw; max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: var(--shadow); animation: fadeUp 0.2s ease; scrollbar-gutter: stable; } @keyframes fadeUp { from{transform:translateY(16px);opacity:0;} to{transform:translateY(0);opacity:1;} } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font-size: 16px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.01em; } .modal-close { cursor: pointer; color: var(--text3); font-size: 20px; background:none; border:none; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); position: sticky; bottom: -24px; background: linear-gradient(180deg, rgba(24,28,39,0.92), var(--bg2) 30%); padding-bottom: 4px; z-index: 5; } /* ── EMPTY STATE ─────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text3); } .empty-icon { font-size: 40px; opacity: 0.4; } .empty-title { font-size: 15px; font-weight: 600; color: var(--text2); } .empty-sub { font-size: 12px; text-align: center; max-width: 260px; } /* ── DASHBOARD ───────────────────────────────────────────────────── */ .dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; } .kpi-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; } .kpi-label { font-size: 11px; color: var(--text3); margin-bottom: 4px; } .kpi-value { font-size: 28px; font-weight: 800; font-family: var(--mono); line-height: 1; } .kpi-value.blue { color: var(--accent-text); } .kpi-value.green { color: var(--green); } .kpi-value.orange { color: var(--orange); } .kpi-value.red { color: var(--red); } .kpi-link { font-size: 11px; color: var(--accent3); margin-top: 4px; cursor: pointer; } .kpi-link:hover { text-decoration: underline; } /* ── SEARCH ──────────────────────────────────────────────────────── */ .search-wrap { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 10px; color: var(--text3); font-size: 14px; pointer-events: none; } .search-input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 7px 10px 7px 32px; font-size: 12px; outline: none; width: 100%; transition: border-color var(--transition); } .search-input:focus { border-color: var(--accent2); } .search-input::placeholder { color: var(--text3); } /* ── ÁNGULO VISUAL ───────────────────────────────────────────────── */ .angulo-box { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; align-items: center; gap: 12px; } .angulo-deg { font-size: 24px; font-weight: 800; color: var(--yellow); font-family: var(--mono); } .angulo-hint { font-size: 11px; color: var(--text3); line-height: 1.5; } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE — TABLET (≤1024px) ══════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { :root { --sidebar-w: 56px; } .sidebar { width: 56px; } .sidebar .nav-label, .sidebar .nav-badge, .sidebar .sidebar-logo-text, .sidebar .nav-section-label, .sidebar .user-info, .sidebar .user-meta { display: none; } .sidebar .nav-item { justify-content: center; padding: 10px; } .sidebar .nav-icon { margin: 0; } .content-grid { grid-template-columns: 1fr; } .content-grid .panel:not(:first-child) { display: none; } .content-grid.show-detail .panel:nth-child(2) { display: flex; } .topbar { padding: 0 12px; } .semaforo { display: none; } .topbar-quality { display: none; } .dashboard-grid { grid-template-columns: repeat(2,1fr); } } /* ── TABLET VERTICAL (≤768px) ────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { display: none; } .bottom-nav { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; background: var(--sidebar); border-top: 1px solid var(--border); height: 56px; z-index: 200; align-items: center; justify-content: space-around; } .main { padding-bottom: 56px; } .topbar { height: 48px; } .exp-ref { font-size: 12px; } .topbar-chips { display: none; } .dashboard-grid { grid-template-columns: 1fr 1fr; padding: 10px; gap: 8px; } /* En pantallas estrechas solo el punto verde (el texto satura la barra). */ .nivar-badge { padding: 6px 8px; } .nivar-badge .nivar-badge-text { display: none; } } /* Barra de navegación inferior (móvil/tablet) */ .bottom-nav { display: none; } .bottom-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text3); cursor: pointer; font-size: 10px; padding: 8px 12px; border-radius: var(--radius); transition: color var(--transition); } .bottom-nav-btn.active { color: var(--accent-text); } .bottom-nav-btn .b-icon { font-size: 20px; } /* ── PWA / TOUCH ─────────────────────────────────────────────────── */ @media (hover: none) { .btn { padding: 9px 16px; } .tab { min-height: 48px; } .tramo-item { padding: 12px 10px; } .form-input, .form-select { padding: 10px 12px; font-size: 14px; } } /* ══════════════════════════════════════════════════════════════════ VALIDACIÓN DE CAMPOS — reglas permanentes Complementan los estilos inline que aplica NVAL.js. El atributo data-val-state lo escribe NVAL tras validar. ══════════════════════════════════════════════════════════════════ */ /* Transición suave en todos los campos validados */ [data-val] { transition: border-color var(--transition), background-color var(--transition); } /* Estado OK — verde tenue */ [data-val-state="ok"] { border-color: var(--green) !important; background-color: rgba(34,197,94,0.08) !important; } /* Estado error — rojo tenue */ [data-val-state="error"] { border-color: var(--red) !important; background-color: rgba(239,68,68,0.10) !important; } /* Icono hint junto al label cuando hay error */ [data-val-state="error"] + .form-val-hint { display: block; color: var(--red); font-size: 10px; margin-top: 2px; line-height: 1.4; } .form-val-hint { display: none; } /* ══════════════════════════════════════════════════════════════════ SELECT NATIVOS — contraste y aspecto en tema oscuro Se aplica a todos los