:root { --bg-body: #0b1215; --bg-sidebar: #0e171a; --bg-surface: #121d21; --bg-surface-elevated: #182529; --bg-card: rgba(24, 37, 41, 0.7); --border-subtle: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.14); --border-focus: #00ad9a; --primary: #00ad9a; --primary-glow: rgba(0, 173, 154, 0.22); --success: #22c55e; --success-glow: rgba(34, 197, 94, 0.2); --warning: #f59e0b; --warning-glow: rgba(245, 158, 11, 0.2); --danger: #f43f5e; --danger-glow: rgba(244, 63, 94, 0.2); --text-title: #ffffff; --text-body: #d3dde0; --text-muted: #8a9ca2; --text-faint: #4d6067; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-sans); } body { display: flex; height: 100vh; background-color: var(--bg-body); color: var(--text-body); overflow: hidden; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } #toast-container { position: fixed; top: 20px; right: 24px; z-index: 10030; display: flex; flex-direction: column; gap: 10px; } .toast { min-width: 300px; max-width: 460px; padding: 14px 20px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; backdrop-filter: blur(12px); border: 1px solid var(--border-hover); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: space-between; animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .toast-success { background: rgba(20, 83, 45, 0.9); color: #bbf7d0; border-left: 3px solid var(--success); } .toast-error { background: rgba(127, 29, 29, 0.9); color: #fecaca; border-left: 3px solid var(--danger); } @keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } aside { width: 250px; min-width: 250px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 20px 12px; justify-content: space-between; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 12px 20px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 14px; } .brand-icon { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0, 173, 154, 0.22)); } .brand-marca { width: 150px; height: auto; display: block; } .brand-text { font-size: 1.62rem; font-weight: 800; color: #ffffff; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; } .brand-text span { color: #6fdccd; } .marca { display: inline-block; } .brand-tag { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #cbd5e1; margin-top: 5px; line-height: 1; white-space: nowrap; } .login-logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 22px; } .login-logo .login-marca { width: 300px; max-width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(0, 173, 154, 0.15)); } .login-logo .brand-text { font-size: 2.3rem; } .login-logo .brand-tag { font-size: 0.6rem; margin-top: 8px; } .creditos { font-size: 0.7rem; color: var(--text-muted); text-align: center; letter-spacing: 0.02em; opacity: 0.75; } .creditos b { color: var(--text-body); font-weight: 600; } .nav-list { display: flex; flex-direction: column; gap: 4px; } .nav-sep { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding: 12px 12px 4px; font-weight: 600; } .nav-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease; } /* Íconos de línea (mismo estilo que el menú): toman el color del texto donde están */ .ico { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; flex-shrink: 0; display: inline-block; } .btn .ico, .tab .ico { width: 1.05em; height: 1.05em; } /* campo de contraseña con botón para verla */ .campo-clave { position: relative; display: block; } .campo-clave input { width: 100%; padding-right: 40px; } .btn-ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; padding: 0; } .btn-ojo:hover { color: var(--text-title); background: rgba(127,127,127,0.12); } .btn-ojo .ico { width: 18px; height: 18px; } .badge .ico { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 1px; } .ficha-seccion .ico, h4 .ico, h3 .ico { color: var(--primary); } .kpi-icon-wrap .ico { width: 22px; height: 22px; } .notif-vacio .ico { width: 34px; height: 34px; color: var(--success); } .sin-foto b .ico { width: 2.4rem; height: 2.4rem; stroke-width: 1.5; } .nav-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; } .nav-btn:hover { background: var(--bg-surface); color: var(--text-title); border-color: var(--border-subtle); } .nav-btn.active { background: rgba(0, 173, 154, 0.12); color: #6fdccd; font-weight: 600; border-color: rgba(0, 173, 154, 0.28); box-shadow: inset 0 0 12px rgba(0, 173, 154, 0.08); } .nav-btn.active svg { stroke: #2fc7b3; } .oculto { display: none !important; } .sidebar-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 14px; } .user-badge-panel { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px; } .user-fila { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 6px; margin: -6px; border-radius: 10px; cursor: pointer; transition: background 0.15s; } .user-fila:hover, .user-fila:focus-visible { background: var(--bg-surface); outline: none; } .user-avatar.con-foto, .perfil-foto.con-foto { background: var(--bg-surface); padding: 0; overflow: hidden; } .user-avatar img, .perfil-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* versión y novedades */ .link-version { background: none; border: none; padding: 0; margin-top: -6px; font: inherit; font-size: 0.7rem; color: var(--text-faint); cursor: pointer; text-align: center; } .link-version:hover { color: #6fdccd; } .nov-lista { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; } .nov-version { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; } .nov-cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; } .nov-cabeza b { color: var(--text-title); font-size: 0.92rem; } .nov-cabeza span { color: var(--text-faint); font-size: 0.75rem; white-space: nowrap; } .nov-version ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .nov-version li { font-size: 0.86rem; line-height: 1.45; color: var(--text-body); } .nov-version li b { color: var(--text-title); } /* ventana Mi perfil */ .perfil-foto-fila { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .perfil-foto { width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2fc7b3, #00796b); box-shadow: 0 0 0 4px rgba(0, 173, 154, 0.18); color: #fff; font-weight: 700; font-size: 1.6rem; } .perfil-foto-botones { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .user-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .btn-usuario { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 8px; background: transparent; border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-muted); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .btn-usuario .ico { width: 15px; height: 15px; } .btn-usuario:hover { color: var(--text-title); border-color: var(--border-hover); background: var(--bg-surface); } .btn-usuario.salir:hover { color: #fda4af; border-color: rgba(244, 63, 94, 0.4); background: var(--danger-glow); } .user-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #2fc7b3, #00796b); box-shadow: 0 0 0 3px rgba(0, 173, 154, 0.18); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 0.85rem; letter-spacing: 0.02em; } .user-details { flex: 1; min-width: 0; } .user-name { font-size: 0.88rem; font-weight: 600; color: var(--text-title); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role-tag { margin-top: 2px; font-size: 0.76rem; font-weight: 500; color: #6fdccd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background-color: var(--bg-body); } header { padding: 16px 36px; border-bottom: 1px solid var(--border-subtle); background: rgba(14, 23, 26, 0.6); backdrop-filter: blur(12px); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; } .header-title h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-title); letter-spacing: -0.02em; } .header-title p { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; } .header-actions { display: flex; align-items: center; gap: 12px; } .content-area { padding: 28px 36px; flex: 1; } .view { display: none; } .view.active { display: block; animation: fadeIn 0.25s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .kpi-card { background: linear-gradient(180deg, var(--bg-surface-elevated) 0%, var(--bg-surface) 100%); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .kpi-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); } .kpi-card:hover { border-color: var(--border-hover); transform: translateY(-2px); } .kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .kpi-label { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .kpi-icon-wrap { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); } .kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--text-title); font-family: var(--font-mono); letter-spacing: -0.03em; } .kpi-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; } .dash-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } @media (max-width: 1180px) { .dash-layout { grid-template-columns: 1fr; } } .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; } .search-container { position: relative; flex: 1; } .search-container input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 13px 18px 13px 44px; color: var(--text-title); font-size: 0.92rem; outline: none; transition: all 0.2s; } .search-container input:focus { border-color: var(--primary); background: var(--bg-surface-elevated); box-shadow: 0 0 0 3px rgba(0, 173, 154, 0.18); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; pointer-events: none; } .panel-card { background: linear-gradient(180deg, var(--bg-surface) 0%, #0f181b 100%); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 24px; margin-bottom: 24px; } .panel-card h4 { font-size: 1.05rem; font-weight: 600; color: var(--text-title); margin-bottom: 16px; } .hint { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; } .form-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .form-grid.grid-4 { grid-template-columns: 1fr 1fr; } .form-grid.grid-4 > * { grid-column: 1 / -1 !important; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); } input, select, textarea { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; color: var(--text-title); font-size: 0.9rem; outline: none; transition: border-color 0.15s; } textarea { font-family: inherit; resize: vertical; min-height: 70px; line-height: 1.4; } textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 173, 154, 0.2); } input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 173, 154, 0.2); } input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; padding: 0; } /* Campos numéricos: sin las flechitas del navegador; botones − / + propios a los costados */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } .num-ctrl { display: inline-flex; align-items: stretch; gap: 4px; vertical-align: middle; } .num-ctrl.ancho { display: flex; width: 100%; } .num-ctrl.ancho > input { flex: 1; min-width: 0; width: auto; } .num-btn { flex-shrink: 0; width: 36px; border-radius: 8px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; user-select: none; touch-action: manipulation; background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); color: var(--text-muted); transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.08s; } .num-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; } .num-btn:hover { color: #fff; border-color: rgba(0, 173, 154, 0.55); background: rgba(0, 173, 154, 0.16); } .num-btn:active { transform: scale(0.92); } .num-btn:disabled { opacity: 0.35; cursor: not-allowed; } .num-ctrl.chico .num-btn { width: 26px; border-radius: 6px; } .tabla-compacta th, .tabla-compacta td { padding-left: 9px; padding-right: 9px; } .num-ctrl.chico .num-btn svg { width: 12px; height: 12px; } input[type=checkbox]:disabled { cursor: not-allowed; opacity: 0.6; } .input-sm { padding: 6px 8px; width: 120px; font-family: var(--font-mono); text-align: right; } .btn { background: var(--primary); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 9px 16px; font-size: 0.88rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; white-space: nowrap; } .btn:hover { background: #00917f; transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); } .btn:active { transform: translateY(0); } /* Acciones principales con el verde azulado de la marca (el verde de "correcto" queda para estados) */ .btn-success { background: var(--primary); } .btn-success:hover { background: #00917f; box-shadow: 0 4px 12px var(--primary-glow); } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #e11d48; box-shadow: 0 4px 12px var(--danger-glow); } .btn-warning { background: var(--warning); color: #1a1a1a; } .btn-warning:hover { background: #d97706; box-shadow: 0 4px 12px var(--warning-glow); } .btn-outline { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-body); } /* Ficha del cliente */ .fcli-sec { border-top: 1px solid var(--border-subtle); padding: 14px 0 6px; } .fcli-sec-tit { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 700; color: var(--text-title); font-size: 0.92rem; } .fcli-sec-tit .ico { color: var(--primary); } .fcli-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; } @media (max-width: 760px) { .fcli-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fcli-dato small { display: block; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; } .fcli-dato div { overflow-wrap: anywhere; } .fcli-nota { white-space: pre-wrap; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 10px; padding: 10px 12px; } .rubros-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 760px) { .rubros-cfg { grid-template-columns: 1fr; } } .rubro-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; } .rubro-uso { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; min-width: 48px; text-align: right; } .btn-nota-con { background: rgba(245, 158, 11, 0.16); border: 1px solid rgba(245, 158, 11, 0.55); color: #fbbf24; } /* proveedor con comentario */ .btn-nota-con:hover { background: rgba(245, 158, 11, 0.26); } .btn-outline:hover { background: var(--bg-surface-elevated); border-color: var(--border-hover); color: var(--text-title); } .btn-sm { padding: 6px 10px; font-size: 0.8rem; border-radius: 6px; } .table-wrap { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .table-scroll { max-height: 62vh; overflow-y: auto; } /* Tablas grandes: se desplaza solo la tabla (el encabezado de columnas y la barra de título quedan fijos). El programa envuelve sola cada tabla en .table-scroll y marca el recuadro con .con-scroll (ver envolverTablas en app.js). */ .table-wrap.con-scroll { display: flex; flex-direction: column; max-height: calc(100vh - 130px); } .table-wrap.con-scroll > * { flex: none; } .table-wrap.con-scroll > .table-scroll { flex: 0 1 auto; min-height: 0; max-height: none; overflow: auto; } .modal-card .table-wrap.con-scroll { max-height: 62vh; } .table-scroll > table > thead th { box-shadow: inset 0 -1px 0 var(--border-subtle); } .table-header-bar { padding: 14px 18px; background: var(--bg-surface-elevated); border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .table-header-bar h4 { font-size: 0.92rem; font-weight: 600; color: var(--text-title); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; } th { background: var(--bg-surface-elevated); padding: 12px 16px; color: var(--text-muted); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border-subtle); user-select: none; position: sticky; top: 0; z-index: 1; } th.sortable { cursor: pointer; transition: color 0.15s, background 0.15s; } th.sortable:hover { color: var(--text-title); } th.sortable .sort-arrow { display: inline-block; margin-left: 6px; font-size: 0.75rem; color: var(--primary); } td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); vertical-align: middle; } tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.15s ease; } tbody tr:hover { background: rgba(255, 255, 255, 0.035); } .num { text-align: right; font-family: var(--font-mono); } .stock-meter { display: flex; flex-direction: column; gap: 4px; min-width: 120px; } .stock-meter-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 0.72rem; font-family: var(--font-mono); color: var(--text-muted); } .stock-track { width: 100%; height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; } .stock-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; } .fill-ok { background: linear-gradient(90deg, #22c55e, #4ade80); } .fill-low { background: linear-gradient(90deg, #f43f5e, #fb7185); box-shadow: 0 0 8px var(--danger-glow); } .fill-mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .fill-over { background: linear-gradient(90deg, #8b5cf6, #a78bfa); box-shadow: 0 0 8px rgba(139, 92, 246, 0.35); } .badge-sobre { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.35); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .badge-brand { background: rgba(255, 255, 255, 0.05); color: #e5e7eb; border: 1px solid rgba(255, 255, 255, 0.1); } .badge-prov { background: rgba(99, 102, 241, 0.12); color: #c7d2fe; border: 1px solid rgba(99, 102, 241, 0.25); } /* Datos como texto (sin recuadro): los recuadros quedan solo para estados (Egreso, Atrasada, Cerrado...) */ .txt-prov { color: #a5b4fc; font-weight: 600; font-size: 0.82rem; } /* proveedor */ .txt-sec { color: var(--text-muted); font-weight: 500; font-size: 0.82rem; } /* usuario, marca, rubro, destino Stock */ .txt-dest { color: #6fdccd; font-weight: 600; font-size: 0.82rem; } /* destino: → proyecto */ /* Contadores al lado del título de cada tabla ("Últimos 8", "2 proyecto(s)"): texto gris, sin recuadro */ .table-header-bar .badge.badge-brand { background: none; border: none; padding: 0; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; } .badge-ok { background: var(--success-glow); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.25); } .badge-low { background: var(--danger-glow); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.3); } .badge-retiro { background: var(--danger-glow); color: #fda4af; } .badge-ingreso { background: var(--success-glow); color: #86efac; } .badge-devolucion { background: rgba(0, 173, 154, 0.15); color: #6fdccd; } .badge-ajuste { background: var(--warning-glow); color: #fcd34d; } .badge-admin { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); } .badge-panol { background: rgba(0, 173, 154, 0.15); color: #6fdccd; border: 1px solid rgba(0, 173, 154, 0.3); } .badge-op { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); } .badge-aud { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); } .perm-table th, .perm-table td { text-align: center; } .perm-table th:first-child, .perm-table td:first-child { text-align: left; } .perm-table td.alerta-sin-permiso { opacity: 0.35; } .perm-grupo td { background: rgba(255, 255, 255, 0.025); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); font-weight: 700; padding: 9px 16px; } .estado-box { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 14px 16px; font-size: 0.85rem; line-height: 1.7; } .estado-box b { color: var(--text-title); } .check-row { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--text-title); cursor: pointer; } .tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 5px; width: fit-content; } .tab { background: transparent; border: none; color: var(--text-muted); padding: 9px 16px; border-radius: 7px; font-size: 0.88rem; font-weight: 600; cursor: pointer; } .tab:hover { color: var(--text-title); } .tab.active { background: rgba(0, 173, 154, 0.15); color: #6fdccd; } .subtitulo { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); font-weight: 700; margin: 6px 0 12px; } .progreso { width: 90px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; } .progreso div { height: 100%; background: linear-gradient(90deg, #00ad9a, #22c55e); } .fila-click { cursor: pointer; } input[type=date] { color-scheme: dark; } .input-fecha { padding: 5px 8px; font-size: 0.82rem; } .totales-oc { margin: 14px 0 0 auto; width: 320px; max-width: 100%; font-family: var(--font-mono); font-size: 0.85rem; } .totales-oc div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; color: var(--text-muted); border-bottom: 1px dashed var(--border-subtle); } .totales-oc div span:last-child { color: var(--text-title); } .totales-oc div.total { border-bottom: none; border-top: 1px solid var(--border-hover); margin-top: 4px; padding-top: 8px; font-size: 1rem; font-weight: 700; } .totales-oc div.total span { color: var(--text-title); } .datos-oc { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; } .datos-oc b { color: var(--text-title); font-weight: 600; } /* OC nueva: rojo = falta completar; amarillo = valor puesto automáticamente (se puede cambiar) */ /* Las opciones de las listas desplegables siempre con fondo oscuro y letra clara (en Windows toman el color del recuadro y con los resaltados no se leían) */ select option, select optgroup { background-color: #182529 !important; color: #e8eef0 !important; } select option:checked { background-color: #00796b !important; color: #ffffff !important; } select option:disabled { color: #8a9ca2 !important; } .req-ast { color: var(--danger); font-weight: 700; } #view-prov .campo-falta, #modal-edit-prov .campo-falta, #view-cli .campo-falta, #modal-edit-cli .campo-falta { border-color: rgba(244, 63, 94, 0.85) !important; background-color: rgba(244, 63, 94, 0.09) !important; } #panel-nueva-oc .campo-falta { border-color: rgba(244, 63, 94, 0.85) !important; background-color: rgba(244, 63, 94, 0.09) !important; } #panel-nueva-oc .campo-defecto { border-color: rgba(245, 158, 11, 0.7) !important; background-color: rgba(245, 158, 11, 0.08) !important; } .leyenda-campos { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); margin: -6px 0 16px; } .leyenda-campos span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .leyenda-campos .ley-falta::before { border: 1.5px solid rgba(244, 63, 94, 0.85); background: rgba(244, 63, 94, 0.15); } .leyenda-campos .ley-defecto::before { border: 1.5px solid rgba(245, 158, 11, 0.7); background: rgba(245, 158, 11, 0.15); } table.sin-tipo .col-tipo-oc { display: none; } #tabla-oc th { white-space: nowrap; } #tabla-oc .progreso { width: 60px; } tr.fila-atrasada td { background: rgba(244, 63, 94, 0.13); } tr.fila-atrasada:hover td { background: rgba(244, 63, 94, 0.2); } tr.fila-atrasada td:first-child { box-shadow: inset 3px 0 0 #f43f5e; } tr.fila-hoy td { background: rgba(245, 158, 11, 0.12); } tr.fila-hoy:hover td { background: rgba(245, 158, 11, 0.19); } tr.fila-hoy td:first-child { box-shadow: inset 3px 0 0 #f59e0b; } /* Ficha de material */ .fm-grid { display: grid; grid-template-columns: 280px 1fr; gap: 22px; } @media (max-width: 860px) { .fm-grid { grid-template-columns: 1fr; } } .fm-foto { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--bg-surface-elevated); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .fm-foto img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; background: #fff; } .fm-foto .sin-foto { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 20px; line-height: 1.5; } .fm-foto .sin-foto b { display: block; font-size: 2.4rem; margin-bottom: 6px; opacity: 0.6; } .fm-foto.arrastrando { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); } .fm-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; } @media (max-width: 600px) { .fm-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #fm-kpis .va { font-size: 1.1rem; white-space: nowrap; } #fm-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .fm-dato .et { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; } .fm-dato .va { font-size: 0.95rem; color: var(--text-title); font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; } .foto-grande { position: fixed; inset: 0; z-index: 20050; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .foto-grande img { max-width: 94vw; max-height: 92vh; border-radius: 8px; background: #fff; } #tb-stock-master tr { cursor: pointer; } .cod-corto { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--primary); background: var(--primary-glow); border: 1px solid rgba(0, 173, 154, 0.35); border-radius: 5px; padding: 0 6px; } .desc-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.76rem; color: var(--text-muted); flex-wrap: wrap; } /* Listado de stock compacto: renglones bajos para ver más materiales por pantalla */ #tb-stock-master td { padding-top: 6px; padding-bottom: 6px; } .celda-sku { min-width: 200px; max-width: 260px; line-height: 1.5; } .celda-sku .sku-txt { font-family: var(--font-mono); font-weight: 600; color: var(--primary); overflow-wrap: anywhere; margin-right: 8px; } #tb-stock-master td:nth-child(3) { min-width: 220px; } .cod-corto-sku { display: inline-block; white-space: nowrap; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: #cbd5e1; background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 5px; padding: 0 6px; vertical-align: 1px; } #tb-stock-master .badge { padding: 1px 6px; font-size: 0.68rem; } #tb-stock-master .desc-sub { margin-top: 1px; } #tb-stock-master .btn-sm { padding: 4px 9px; font-size: 0.78rem; } #tb-stock-master .stock-meter { gap: 3px; min-width: 160px; } #tb-stock-master .stock-meter-labels { flex-wrap: wrap; row-gap: 0; line-height: 1.35; } #tb-stock-master .nota-prestado { margin-top: 2px; } #modal-material .cant { text-align: center; font-family: var(--font-mono); white-space: nowrap; } #alta-pasillo::placeholder, #edit-pasillo::placeholder { text-transform: none; } .alta-foto { display: flex; align-items: center; gap: 12px; } .alta-foto-caja { width: 84px; height: 84px; border-radius: 10px; border: 1px dashed var(--border-hover); background: var(--bg-surface-elevated); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text-muted); flex-shrink: 0; } .alta-foto-caja .ico { width: 28px; height: 28px; stroke-width: 1.5; } .alta-foto-caja img { width: 100%; height: 100%; object-fit: contain; background: #fff; cursor: zoom-in; } .alta-foto-caja.arrastrando { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); } .aviso-revisar { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.35); color: #e9d5ff; font-size: 0.86rem; } .aviso-revisar .ico { color: #d8b4fe; margin-right: 4px; } .nota-revisar { font-size: 0.76rem; color: #d8b4fe; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; } .fila-revisar td:first-child { box-shadow: inset 3px 0 0 #a855f7; } .fila-revisar { background: rgba(168, 85, 247, 0.06); } .badge-dep-st { background: rgba(245, 158, 11, 0.14); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.35); font-size: 0.66rem; } .badge-dep-ing { background: rgba(0, 173, 154, 0.12); color: #5eead4; border: 1px solid rgba(0, 173, 154, 0.35); font-size: 0.66rem; } /* ===== Stock actual: etiqueta arriba y color de todo el programa ===== */ .dep-wrap { position: relative; } .dep-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: 0.15s; } .dep-pill:disabled { cursor: default; } .dep-pill.dep-ing { color: #5eead4; background: rgba(0, 173, 154, 0.13); border: 1px solid rgba(0, 173, 154, 0.45); } .dep-pill.dep-st { color: #fcd34d; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.5); } .dep-pill:not(:disabled):hover, .dep-pill.abierto { filter: brightness(1.2); } .dep-pill .dep-flecha { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform 0.15s; } .dep-pill.abierto .dep-flecha { transform: rotate(180deg); } .dep-punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; box-shadow: 0 0 8px currentColor; } .dep-punto.dep-ing { color: #2dd4bf; } .dep-punto.dep-st { color: #fbbf24; } .dep-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 9500; background: var(--bg-surface-elevated); border: 1px solid var(--border-hover); border-radius: 12px; padding: 6px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6); } .dep-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text-body); font: inherit; font-size: 0.88rem; font-weight: 600; padding: 10px 12px; border-radius: 8px; cursor: pointer; text-align: left; } .dep-menu button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-title); } .dep-menu button.activo { color: var(--text-title); } @media (max-width: 760px) { .dep-pill { padding: 7px 11px; font-size: 0.78rem; } .dep-pill .dep-txt { max-width: 92px; overflow: hidden; text-overflow: ellipsis; } } /* franja de color arriba de todo */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10040; background: #00ad9a; pointer-events: none; } body[data-deposito="ST"]::before { background: #f59e0b; } /* Servicio técnico: el color principal pasa a ámbar */ body[data-deposito="ST"] { --primary: #f59e0b; --primary-glow: rgba(245, 158, 11, 0.22); --border-focus: #f59e0b; } body[data-deposito="ST"] .nav-btn.active { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-color: rgba(245, 158, 11, 0.32); box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.08); } body[data-deposito="ST"] .tab.active, body[data-deposito="ST"] .segmentado button.activo { background: rgba(245, 158, 11, 0.15); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35); } body[data-deposito="ST"] input:focus, body[data-deposito="ST"] select:focus, body[data-deposito="ST"] textarea:focus, body[data-deposito="ST"] .sel-boton:focus, body[data-deposito="ST"] .sel-boton.abierto { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22); } body[data-deposito="ST"] .brand-icon { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.3)); } .perm-par { display: inline-flex; gap: 14px; justify-content: center; align-items: center; } .perm-par input.perm-ing, .perm-table input.perm-ing { accent-color: #00ad9a; } .perm-par input.perm-st, .perm-table input.perm-st { accent-color: #f59e0b; } .perm-sub { display: flex; gap: 14px; justify-content: center; margin-top: 3px; font-size: 0.62rem; letter-spacing: 0.06em; } .perm-sub .ing, .perm-leyenda.ing { color: #2dd4bf; font-weight: 700; } .perm-sub .st, .perm-leyenda.st { color: #fbbf24; font-weight: 700; } .badge-tec { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.35); font-size: 0.66rem; } .dash-rep { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding: 12px 18px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); } .dash-rep-tit { font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 8px; } .dash-rep-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; } /* Parque de máquinas */ .pq-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .pq-kpi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; } .pq-kpi b { display: block; font-size: 1.4rem; color: var(--text-title); font-family: var(--font-mono); } .pq-kpi span { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .badge-pq-PENDIENTE { background: rgba(245, 158, 11, 0.16); color: #fbbf24; } .badge-pq-INSTALADO { background: var(--success-glow); color: #86efac; } .badge-pq-ANULADO, .badge-pq-BAJA { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; } .pq-clientes { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; } .pq-cli-lista { padding: 10px; max-height: 70vh; overflow-y: auto; } .pq-cli-lista input { width: 100%; margin-bottom: 8px; } .pq-cli-item { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 0.88rem; } .pq-cli-item:hover { background: rgba(255, 255, 255, 0.04); } .pq-cli-item.activo { background: var(--primary-glow, rgba(245, 158, 11, 0.14)); color: var(--primary); font-weight: 700; } .pq-inst { border: 1px solid var(--border-subtle); background: var(--bg-card); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; } .pq-inst:hover { border-color: var(--primary); } .pq-inst-tit { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 600; color: var(--text-title); margin-bottom: 8px; font-size: 0.9rem; } .pq-inst-eq { display: flex; gap: 8px; flex-wrap: wrap; } .pq-inst-eq > div { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 9px; padding: 7px 10px; min-width: 170px; font-size: 0.85rem; } .pq-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; margin: 12px 0; } .pq-dato span { display: block; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pq-dato b { font-weight: 600; color: var(--text-title); font-size: 0.88rem; } .pq-aviso { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); color: #fcd34d; font-size: 0.86rem; margin: 10px 0; } .pq-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pq-checks { display: flex; flex-direction: column; gap: 5px; } .pq-check { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 0.86rem; color: var(--text-muted); } .pq-check.on { color: var(--text-title); } .pq-check .x { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex: none; } .pq-check.on .x { background: var(--primary); border-color: var(--primary); color: #111; } .pq-check .hint { margin-left: auto; } .pq-form-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; } .pq-col { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; min-width: 0; } .pq-col-tit { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; } .pq-comp { padding: 7px 0; border-bottom: 1px solid var(--border-subtle); } .pq-comp:last-of-type { border-bottom: 0; } .pq-comp-mat { margin-top: 6px; } .pq-ver { display: flex; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.88rem; } .pq-adic { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .pq-adic > div:first-child { flex: 1 1 100% !important; } .pq-adic > select { flex: 1; min-width: 0; } .cfg-pq-comp { display: flex; gap: 10px; align-items: center; } .cfg-pq-comp input[type=text] { flex: 1; } @media (max-width: 900px) { .pq-kpis { grid-template-columns: repeat(2, 1fr); } .pq-clientes, .pq-form-cols, .pq-2col { grid-template-columns: 1fr; } .pq-datos { grid-template-columns: 1fr 1fr; } } .carpeta-ruta { font-family: var(--font-mono); font-size: 0.82rem; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); word-break: break-all; margin-bottom: 8px; } .carpeta-lista { max-height: 340px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 10px; } .carpeta-lista button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--text-body); font: inherit; font-size: 0.86rem; padding: 9px 12px; cursor: pointer; text-align: left; } .carpeta-lista button:hover { background: rgba(255,255,255,0.05); color: var(--text-title); } .carpeta-lista button .ico { color: #fbbf24; flex-shrink: 0; } .rep-pasos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; } .rep-pasos button { flex: 1 1 120px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.03); color: var(--text-muted); font: inherit; font-size: 0.8rem; font-weight: 600; padding: 9px 8px; border-radius: 8px; cursor: pointer; } .rep-pasos button.hecho { color: var(--text-body); border-color: var(--primary-glow); } .rep-pasos button.actual { background: var(--primary); color: #0b1514; border-color: var(--primary); } .rep-pasos button:disabled { cursor: default; } .rep-historial { font-size: 0.82rem; max-height: 200px; overflow-y: auto; } .rep-historial div { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); } .rep-historial .f { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.74rem; } /* Ficha de reparación por etapas: hecha (resumen), actual (abierta y resaltada), futura (apagada) */ .rep-etapas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .rep-etapa { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); overflow: hidden; transition: border-color 0.15s; } .rep-etapa-cab { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: none; border: none; color: inherit; font: inherit; cursor: pointer; text-align: left; } .rep-etapa-cab:hover { background: rgba(255,255,255,0.025); } .rep-etapa-num { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border-hover); color: var(--text-muted); } .rep-etapa-tit { font-weight: 700; color: var(--text-title); font-size: 0.92rem; flex-shrink: 0; } .rep-etapa-res { flex: 1; min-width: 0; color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rep-etapa-flecha { color: var(--text-muted); transition: transform 0.15s; flex-shrink: 0; } .rep-etapa-cuerpo { display: none; padding: 4px 14px 14px; border-top: 1px solid var(--border-subtle); } .rep-etapa.abierta .rep-etapa-cuerpo { display: block; } .rep-etapa.abierta .rep-etapa-flecha { transform: rotate(180deg); } .rep-etapa.hecha .rep-etapa-num { background: var(--success-glow); border-color: rgba(34,197,94,0.5); color: var(--success); } .rep-etapa.actual { border-color: var(--warning); } .rep-etapa.actual .rep-etapa-num { background: var(--warning); border-color: var(--warning); color: #1a1205; } .rep-etapa.futura:not(.abierta) { opacity: 0.55; } .rep-etapa .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rep-siguiente:empty { display: none; } .rep-siguiente { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(245,158,11,0.4); background: var(--warning-glow); color: #fde68a; font-size: 0.85rem; } .rep-siguiente.listo { border-color: rgba(34,197,94,0.4); background: var(--success-glow); color: #bbf7d0; } .rep-siguiente ul { margin: 4px 0 0; padding-left: 18px; } .rep-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); } @media (max-width: 760px) { .rep-etapa .form-grid { grid-template-columns: 1fr; } .rep-etapa-res { display: none; } } .aviso-serie { padding: 10px 14px; border-radius: 10px; font-size: 0.86rem; margin-top: 8px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.35); color: #bfdbfe; } .badge-rep-RECIBIDO { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; } .badge-rep-DIAGNOSTICO { background: rgba(59, 130, 246, 0.15); color: #93c5fd; } .badge-rep-REPARACION { background: var(--warning-glow); color: #fcd34d; } .badge-rep-LISTO { background: var(--success-glow); color: #86efac; } .badge-rep-ENTREGADO { background: rgba(255,255,255,0.05); color: var(--text-muted); } .check-linea { display: flex !important; align-items: center; gap: 8px; cursor: pointer; } .ser-lista { max-height: 300px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .ser-lista label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-mono); font-size: 0.82rem; cursor: pointer; } .ser-lista label:has(input:checked) { border-color: var(--primary); background: var(--primary-glow); color: var(--text-title); } .ser-chip { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; padding: 1px 6px; border-radius: 5px; margin: 2px 3px 0 0; background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); color: var(--text-body); } .badge-sn { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid var(--border-subtle); font-size: 0.62rem; font-family: var(--font-mono); } .link-nuevo-mat { font-size: 0.78rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; } .link-nuevo-mat:hover { text-decoration: underline; } .badge-nuevo { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.4); font-size: 0.68rem; } .aviso-incompletos { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding: 14px 18px; border-radius: 12px; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.4); color: #fde68a; } .aviso-incompletos > .ico { width: 22px; height: 22px; color: #fbbf24; flex-shrink: 0; margin-top: 2px; } .aviso-incompletos b { color: #fef3c7; } .aviso-incompletos ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; } .aviso-incompletos li { margin: 3px 0; } .aviso-incompletos a { color: #fcd34d; font-weight: 600; } .badge-revisar { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.35); } .chk-revisar { display: inline-flex; cursor: pointer; padding: 4px; } .chk-revisar input { display: none; } .chk-revisar span { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-hover); background: var(--bg-surface-elevated); display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; } .chk-revisar:hover span { border-color: #a855f7; } .chk-revisar input:checked + span { background: #a855f7; border-color: #a855f7; } .chk-revisar input:checked + span::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } #btn-solo-revisar.activo-revisar { border-color: #a855f7; color: #d8b4fe; background: rgba(168, 85, 247, 0.12); } #tb-ajuste td { padding-top: 7px; padding-bottom: 7px; } #tb-ajuste tr.fila-contada { background: rgba(0, 173, 154, 0.07); } #tb-ajuste tr.fila-contada td:first-child { box-shadow: inset 3px 0 0 var(--primary); } .bna-box { margin: 4px 0 18px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-surface-elevated); } .btn-menu { display: none; } .menu-fondo { display: none; } @media (max-width: 760px) { body { display: block; height: auto; min-height: 100vh; overflow: auto; } aside { position: fixed; top: 0; left: 0; bottom: 0; z-index: 10010; width: 270px; transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); } body.menu-abierto aside { transform: none; } body.menu-abierto .menu-fondo { display: block; position: fixed; inset: 0; z-index: 10009; background: rgba(0, 0, 0, 0.55); } main { overflow: visible; min-height: 100vh; } header { padding: 10px 12px; gap: 10px; } .btn-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-surface-elevated); color: var(--text-title); cursor: pointer; } .btn-menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .header-title { flex: 1; min-width: 0; } .header-title h2 { font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-title p { display: none; } .content-area { padding: 14px 12px 40px; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi-card { padding: 14px; } .kpi-value { font-size: 1.25rem; } .kpi-icon-wrap { width: 30px; height: 30px; } .toolbar { flex-wrap: wrap; gap: 8px; } .toolbar .search-container { flex: 1 1 100%; } .toolbar > .btn, .toolbar > select, .toolbar .sel-boton { flex: 1 1 auto; } .tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } .tabs .tab { white-space: nowrap; flex-shrink: 0; } .segmentado { overflow-x: auto; max-width: 100%; } .panel-card { padding: 16px; } .form-grid { grid-template-columns: 1fr !important; } .form-grid > * { grid-column: 1 / -1 !important; } .table-wrap { overflow-x: auto; } .table-wrap.con-scroll { display: block; max-height: none; } .table-wrap.con-scroll > .table-scroll { overflow: visible; } .table-header-bar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; } .modal-overlay { align-items: flex-end; } .modal-card { max-width: 100% !important; width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 18px 14px; } #toast-container { left: 10px; right: 10px; top: 10px; } .toast { min-width: 0; max-width: none; } /* (.notif-wrap delante para ganarle a la regla general de .notif-panel, que está más abajo en el archivo) */ .notif-wrap .notif-panel { position: fixed; left: 8px; right: 8px; top: 62px; width: auto; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); } .notif-head { padding: 12px 14px; gap: 6px; flex-wrap: wrap; } .notif-item { padding: 12px 14px; gap: 10px; } input, select, textarea, .sel-boton, .combo-input { font-size: 16px !important; } /* evita el zoom automático del iPhone */ .btn { min-height: 40px; } /* Listado de stock como tarjetas */ #view-stock thead { display: none; } #tb-stock-master tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "desc stock" "sku stock" "ubic marca"; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } #tb-stock-master td { border: none; padding: 0 !important; } #tb-stock-master td:nth-child(1), #tb-stock-master td:nth-child(6), #tb-stock-master td:nth-child(8), #tb-stock-master td:nth-child(9) { display: none; } #tb-stock-master td:nth-child(2) { grid-area: sku; max-width: none; min-width: 0; } #tb-stock-master td:nth-child(3) { grid-area: desc; min-width: 0 !important; font-size: 0.92rem; } #tb-stock-master td:nth-child(4) { grid-area: marca; text-align: right !important; } #tb-stock-master td:nth-child(5) { grid-area: ubic; text-align: left !important; } #tb-stock-master td:nth-child(5):has(> span[style*="text-faint"]) { visibility: hidden; } #tb-stock-master td:nth-child(7) { grid-area: stock; align-self: center; text-align: right; } #tb-stock-master .stock-meter { min-width: 0; align-items: flex-end; } #tb-stock-master .stock-meter-labels { flex-direction: column; align-items: flex-end; gap: 0; } #tb-stock-master .stock-meter-labels span:first-child { font-size: 1rem !important; } #tb-stock-master .stock-track { width: 80px; } /* Próximos a llegar como tarjetas */ #card-entregas thead { display: none; } #card-entregas .table-header-bar > div { flex-wrap: wrap; } #tb-dash-entregas tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "mat pend" "ent oc" "dest prov"; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } #tb-dash-entregas td { border: none; padding: 0 !important; background: transparent !important; box-shadow: none !important; } #tb-dash-entregas tr.fila-atrasada { background: rgba(244, 63, 94, 0.13); box-shadow: inset 3px 0 0 #f43f5e; } #tb-dash-entregas tr.fila-hoy { background: rgba(245, 158, 11, 0.12); box-shadow: inset 3px 0 0 #f59e0b; } #tb-stock-master td { background: transparent !important; } #tb-stock-master tr.fila-revisar { background: rgba(168, 85, 247, 0.06); box-shadow: inset 3px 0 0 #a855f7; } #tb-stock-master .nota-revisar { white-space: normal; max-width: none; } #tb-dash-entregas td[colspan] { grid-column: 1 / -1; } #tb-dash-entregas td:nth-child(1) { grid-area: ent; } #tb-dash-entregas td:nth-child(2) { grid-area: mat; min-width: 0; } #tb-dash-entregas td:nth-child(3) { grid-area: pend; } #tb-dash-entregas td:nth-child(4) { grid-area: dest; } #tb-dash-entregas td:nth-child(5) { grid-area: oc; text-align: right; } #tb-dash-entregas td:nth-child(6) { grid-area: prov; text-align: right; } /* Órdenes de compra como tarjetas */ #view-oc thead { display: none; } #tb-oc tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "num estado" "prov prov" "prox avance"; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } #tb-oc td { border: none; padding: 0 !important; } #tb-oc td:nth-child(2), #tb-oc td:nth-child(3), #tb-oc td:nth-child(5), #tb-oc td:nth-child(9), #tb-oc td:nth-child(10) { display: none; } #tb-oc td:nth-child(1) { grid-area: num; } #tb-oc td:nth-child(4) { grid-area: prov; } #tb-oc td:nth-child(6) { grid-area: avance; text-align: right; } #tb-oc td:nth-child(7) { grid-area: prox; } #tb-oc td:nth-child(8) { grid-area: estado; text-align: right; } /* ===== Más tablas como tarjetas (11/11/2026) ===== */ table:has(> #tb-dash-movs) > thead, table:has(> #tb-herr) > thead, table:has(> #tb-solicitudes) > thead, table:has(> #tb-carrito) > thead, table:has(> #tb-moc) > thead, table:has(> #fm-entregas) > thead, table:has(> #fm-compras) > thead, table:has(> #fm-movimientos) > thead, table:has(> #fm-series) > thead, table:has(> #tb-ac-detalle) > thead { display: none; } :is(#tb-dash-movs, #tb-herr, #tb-solicitudes, #tb-carrito, #tb-moc, #fm-entregas, #fm-compras, #fm-movimientos, #fm-series, #tb-ac-detalle) > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } :is(#tb-dash-movs, #tb-herr, #tb-solicitudes, #tb-carrito, #tb-moc, #fm-entregas, #fm-compras, #fm-movimientos, #fm-series, #tb-ac-detalle) > tr > td { border: none; padding: 0 !important; min-width: 0; text-align: left; white-space: normal; background: transparent; } :is(#tb-dash-movs, #tb-herr, #tb-solicitudes, #tb-carrito, #tb-moc, #fm-entregas, #fm-compras, #fm-movimientos, #fm-series, #tb-ac-detalle) > tr > td[colspan] { grid-column: 1 / -1; text-align: center; } /* etiqueta chica arriba del dato (solo donde se le pone texto) */ :is(#tb-moc, #fm-entregas, #fm-compras, #fm-movimientos, #tb-ac-detalle) > tr > td::before { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .alinear-der { justify-self: end; text-align: right !important; } /* Dashboard · Actividad de depósito: SKU | tipo / fecha | cantidad / proyecto | usuario */ #tb-dash-movs td:nth-child(2) { grid-row: 1; grid-column: 1; } #tb-dash-movs td:nth-child(3) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-dash-movs td:nth-child(1) { grid-row: 2; grid-column: 1; } #tb-dash-movs td:nth-child(4) { grid-row: 2; grid-column: 2; justify-self: end; } #tb-dash-movs td:nth-child(5) { grid-row: 3; grid-column: 1; } #tb-dash-movs td:nth-child(6) { grid-row: 3; grid-column: 2; justify-self: end; } /* Herramientas: descripción | stock / SKU / tipo · medida / ubicación · marca */ #tb-herr td:nth-child(3) { grid-row: 1; grid-column: 1; } #tb-herr td:nth-child(7) { grid-row: 1 / span 2; grid-column: 2; justify-self: end; text-align: right; } #tb-herr td:nth-child(1) { grid-row: 2; grid-column: 1; } #tb-herr td:nth-child(2) { grid-row: 3; grid-column: 1; } #tb-herr td:nth-child(4) { grid-row: 3; grid-column: 2; justify-self: end; } #tb-herr td:nth-child(6) { grid-row: 4; grid-column: 1; text-align: left !important; } #tb-herr td:nth-child(5) { grid-row: 4; grid-column: 2; justify-self: end; } #tb-herr td:nth-child(8), #tb-herr td:nth-child(9) { display: none; } /* Solicitudes: número | estado / materiales / pedido por | prioridad (la tarjeta se toca para abrirla) */ #tb-solicitudes td:nth-child(1) { grid-row: 1; grid-column: 1; } #tb-solicitudes td:nth-child(5) { grid-row: 1; grid-column: 2; justify-self: end; text-align: right; } #tb-solicitudes td:nth-child(3) { grid-row: 2; grid-column: 1 / -1; } #tb-solicitudes td:nth-child(2) { grid-row: 3; grid-column: 1; } #tb-solicitudes td:nth-child(4) { grid-row: 3; grid-column: 2; justify-self: end; } #tb-solicitudes td:nth-child(6) { display: none; } /* Egreso · lista a despachar: material | quitar / SKU | cantidad / (series, precio de venta) */ #tb-carrito td:nth-child(2) { grid-row: 1; grid-column: 1; } #tb-carrito td:last-child:not([colspan]) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-carrito td:nth-child(1) { grid-row: 2; grid-column: 1; } #tb-carrito td:nth-child(4) { grid-row: 2; grid-column: 2; justify-self: end; } #tb-carrito td:nth-child(3) { display: none; } #tb-carrito td:nth-child(n+5):not(:last-child) { grid-column: 1 / -1; } /* Ficha de la OC · ítems: material / pedido · recibido · pendiente / precio · IVA / entrega / destino / botones */ #tb-moc > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } #tb-moc td:nth-child(1) { grid-column: 1 / -1; } #tb-moc td:nth-child(2)::before { content: "Pedido"; } #tb-moc td:nth-child(3)::before { content: "Recibido"; } #tb-moc td:nth-child(4)::before { content: "Pendiente"; } #tb-moc td:nth-child(5) { grid-column: span 2; } #tb-moc td:nth-child(5)::before { content: "Precio unit."; } #tb-moc td:nth-child(6)::before { content: "IVA"; } #tb-moc td:nth-child(7) { grid-column: 1 / -1; } #tb-moc td:nth-child(7)::before { content: "Entrega"; } #tb-moc td:nth-child(8) { grid-column: 1 / -1; } #tb-moc td:nth-child(8)::before { content: "Destino"; } #tb-moc td:nth-child(9) { grid-column: 1 / -1; } #tb-moc td:nth-child(9) > div { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start; } #tb-moc td:nth-child(n+2) { text-align: left !important; } /* Ficha del material · entregas pendientes */ #fm-entregas td:nth-child(1) { grid-row: 1; grid-column: 1; } #fm-entregas td:nth-child(2) { grid-row: 1; grid-column: 2; justify-self: end; } #fm-entregas td:nth-child(4) { grid-row: 2; grid-column: 1; } #fm-entregas td:nth-child(3) { grid-row: 2; grid-column: 2; justify-self: end; } #fm-entregas td:nth-child(5) { grid-row: 3; grid-column: 1 / -1; } /* Ficha del material · últimas compras */ #fm-compras td:nth-child(2) { grid-row: 1; grid-column: 1; } #fm-compras td:nth-child(5) { grid-row: 1; grid-column: 2; justify-self: end; text-align: right; } #fm-compras td:nth-child(3) { grid-row: 2; grid-column: 1; } #fm-compras td:nth-child(4) { grid-row: 2; grid-column: 2; justify-self: end; } #fm-compras td:nth-child(1) { grid-row: 3; grid-column: 1; } /* Ficha del material · movimientos */ #fm-movimientos td:nth-child(1) { grid-row: 1; grid-column: 1; } #fm-movimientos td:nth-child(2) { grid-row: 1; grid-column: 2; justify-self: end; } #fm-movimientos td:nth-child(4) { grid-row: 2; grid-column: 1; } #fm-movimientos td:nth-child(3) { grid-row: 2; grid-column: 2; justify-self: end; } #fm-movimientos td:nth-child(5) { grid-row: 3; grid-column: 1; } #fm-movimientos td:nth-child(6) { grid-row: 3; grid-column: 2; justify-self: end; } #fm-movimientos td:not([colspan]):nth-child(4)::before { content: "Proyecto"; } #fm-movimientos td:nth-child(5)::before { content: "Referencia"; } /* Ficha del material · números de serie */ #fm-series td:nth-child(1) { grid-row: 1; grid-column: 1; } #fm-series td:nth-child(2) { grid-row: 1; grid-column: 2; justify-self: end; } #fm-series td:nth-child(3) { grid-row: 2; grid-column: 1 / -1; } #fm-series td:nth-child(4) { grid-row: 3; grid-column: 1; } /* Análisis de compras · detalle: material / OC | total / proveedor | cantidad / fecha | destino */ #tb-ac-detalle td:nth-child(4) { grid-row: 1; grid-column: 1 / -1; } #tb-ac-detalle td:nth-child(2) { grid-row: 2; grid-column: 1; } #tb-ac-detalle td:nth-child(8) { grid-row: 2; grid-column: 2; justify-self: end; } #tb-ac-detalle td:nth-child(3) { grid-row: 3; grid-column: 1; } #tb-ac-detalle td:nth-child(6) { grid-row: 3; grid-column: 2; justify-self: end; } #tb-ac-detalle td:nth-child(1) { grid-row: 4; grid-column: 1; } #tb-ac-detalle td:nth-child(9) { grid-row: 4; grid-column: 2; justify-self: end; } #tb-ac-detalle td:nth-child(5), #tb-ac-detalle td:nth-child(7) { display: none; } /* Análisis de compras · rankings: nombre arriba, barra y valor abajo */ .dc-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; } .dc-fila .dc-nom { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== Históricos y préstamos como tarjetas ===== */ table:has(> #tb-hing) > thead, table:has(> #tb-hegr) > thead, table:has(> #tb-prestamos) > thead, table:has(> #tb-prest-items) > thead, table:has(> #tb-mp) > thead { display: none; } :is(#tb-hing, #tb-hegr, #tb-prestamos, #tb-prest-items, #tb-mp) > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } :is(#tb-hing, #tb-hegr, #tb-prestamos, #tb-prest-items, #tb-mp) > tr > td { border: none; padding: 0 !important; min-width: 0; text-align: left !important; white-space: normal; background: transparent; } :is(#tb-hing, #tb-hegr, #tb-prestamos, #tb-prest-items, #tb-mp) > tr > td[colspan] { grid-column: 1 / -1; text-align: center !important; } :is(#tb-prest-items, #tb-mp) > tr > td::before { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } /* datos vacíos ("—"): en la tarjeta no ocupan lugar */ :is(#tb-hing, #tb-hegr, #tb-prestamos) > tr > td:has(> span[style*="text-faint"]:only-child) { display: none; } /* filtro de fechas de los históricos: desde / hasta sin cortarse */ div:has(> #hegr-desde), div:has(> #hing-desde) { width: 100%; flex-wrap: nowrap; } #hegr-desde, #hegr-hasta, #hing-desde, #hing-hasta { flex: 1 1 0; min-width: 0; width: auto; } /* Histórico de egresos: material | cantidad / tipo | fecha / proyecto | OC-préstamo / detalle | usuario */ #tb-hegr td:nth-child(3) { grid-row: 1; grid-column: 1; } #tb-hegr td:nth-child(4) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-hegr td:nth-child(2) { grid-row: 2; grid-column: 1; } #tb-hegr td:nth-child(1) { grid-row: 2; grid-column: 2; justify-self: end; } #tb-hegr td:nth-child(5) { grid-row: 3; grid-column: 1; } #tb-hegr td:nth-child(7) { grid-row: 3; grid-column: 2; justify-self: end; } #tb-hegr td:nth-child(6) { grid-row: 4; grid-column: 1; } #tb-hegr td:nth-child(8) { grid-row: 4; grid-column: 2; justify-self: end; } /* Histórico de ingresos: material | cantidad / origen | fecha / OC-préstamo | destino / detalle | usuario */ #tb-hing td:nth-child(3) { grid-row: 1; grid-column: 1; } #tb-hing td:nth-child(4) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-hing td:nth-child(2) { grid-row: 2; grid-column: 1; } #tb-hing td:nth-child(1) { grid-row: 2; grid-column: 2; justify-self: end; } #tb-hing td:nth-child(5) { grid-row: 3; grid-column: 1; } #tb-hing td:nth-child(7) { grid-row: 3; grid-column: 2; justify-self: end; } #tb-hing td:nth-child(6) { grid-row: 4; grid-column: 1; } #tb-hing td:nth-child(8) { grid-row: 4; grid-column: 2; justify-self: end; } /* Préstamos (lista): número | estado / prestado a / materiales / devolución prevista | ubicación / fecha */ #tb-prestamos td:nth-child(1) { grid-row: 1; grid-column: 1; } #tb-prestamos td:nth-child(7) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-prestamos td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; } #tb-prestamos td:nth-child(5) { grid-row: 3; grid-column: 1 / -1; } #tb-prestamos td:nth-child(6) { grid-row: 4; grid-column: 1; } #tb-prestamos td:nth-child(3) { grid-row: 4; grid-column: 2; justify-self: end; } #tb-prestamos td:nth-child(4) { grid-row: 5; grid-column: 1; } #tb-prestamos td:nth-child(8) { display: none; } /* Nuevo préstamo (materiales cargados): material | quitar / presta | disponible */ #tb-prest-items td:nth-child(1) { grid-row: 1; grid-column: 1; } #tb-prest-items td:nth-child(4) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-prest-items td:nth-child(2) { grid-row: 2; grid-column: 1; } #tb-prest-items td:nth-child(3) { grid-row: 2; grid-column: 2; justify-self: end; } #tb-prest-items td:not([colspan]):nth-child(2)::before { content: "Presta"; } #tb-prest-items td:nth-child(3)::before { content: "Disponible"; } /* Ficha del préstamo: material / prestado · devuelto · perdido / pendiente · devuelve ahora / no volvió */ #tb-mp > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } #tb-mp td:nth-child(1) { grid-column: 1 / -1; } #tb-mp td:nth-child(2)::before { content: "Prestado"; } #tb-mp td:nth-child(3)::before { content: "Devuelto"; } #tb-mp td:nth-child(4)::before { content: "Perdido"; } #tb-mp td:nth-child(5)::before { content: "Pendiente"; } #tb-mp td:nth-child(6) { grid-column: span 2; } #tb-mp td:nth-child(6)::before { content: "Devuelve ahora"; } #tb-mp td:nth-child(7) { grid-column: 1 / -1; } /* ===== Solicitudes de compra: materiales del formulario y de la ficha ===== */ table:has(> #tb-soln-items) > thead, table:has(> #tb-ms-items) > thead { display: none; } :is(#tb-soln-items, #tb-ms-items) > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } :is(#tb-soln-items, #tb-ms-items) > tr > td { border: none; padding: 0 !important; min-width: 0; text-align: left !important; white-space: normal; background: transparent; } :is(#tb-soln-items, #tb-ms-items) > tr > td[colspan] { grid-column: 1 / -1; text-align: center !important; } :is(#tb-soln-items, #tb-ms-items) > tr > td:has(> span[style*="text-faint"]:only-child) { display: none; } :is(#tb-soln-items, #tb-ms-items) > tr > td::before { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; } /* formulario: material | quitar / disponible | pedir / motivo / comentario / aviso */ #tb-soln-items td:nth-child(1) { grid-row: 1; grid-column: 1; } #tb-soln-items td:nth-child(7) { grid-row: 1; grid-column: 2; justify-self: end; } #tb-soln-items td:not([colspan]):nth-child(2) { grid-row: 2; grid-column: 1; } #tb-soln-items td:nth-child(2)::before { content: "Disponible / mín."; } #tb-soln-items td:nth-child(3) { grid-row: 2; grid-column: 2; } #tb-soln-items td:nth-child(3)::before { content: "Pedir"; } #tb-soln-items td:nth-child(3) { white-space: nowrap; } #tb-soln-items td:nth-child(3) input { width: 100px !important; } #tb-soln-items td:nth-child(4), #tb-soln-items td:nth-child(5), #tb-soln-items td:nth-child(6) { grid-column: 1 / -1; } #tb-soln-items td:nth-child(4)::before { content: "Motivo de compra"; } #tb-soln-items td:nth-child(5)::before { content: "Comentario"; } #tb-soln-items td:nth-child(4) select, #tb-soln-items td:nth-child(4) .sel-boton, #tb-soln-items td:nth-child(5) input { width: 100%; } /* ficha: material / pedido | disponible / motivo / aviso */ #tb-ms-items td:nth-child(1) { grid-column: 1 / -1; } #tb-ms-items td:nth-child(2)::before { content: "Pedido"; } #tb-ms-items td:nth-child(3)::before { content: "Disponible hoy"; } #tb-ms-items td:nth-child(4), #tb-ms-items td:nth-child(5) { grid-column: 1 / -1; } #tb-ms-items td:nth-child(4)::before { content: "Motivo"; } /* Botones de filtro: en dos renglones si no entran (no cortados) */ .segmentado { flex-wrap: wrap; overflow-x: visible; width: 100% !important; } .segmentado button { flex: 1 1 auto; } /* Importar OC históricas: solo desde la PC */ #btn-oc-historico { display: none !important; } } .mini-foto { font-size: 0.8rem; margin-left: 6px; opacity: 0.75; } .ubic { font-size: 0.78rem; color: var(--text-body); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 2px 7px; } .falta-dato { color: var(--warning); font-size: 0.75rem; font-weight: 600; background: rgba(245, 158, 11, 0.1); border-radius: 4px; padding: 1px 6px; } #panel-nueva-oc:not(.modo-servicio) .solo-serv { display: none !important; } .modo-servicio .solo-mat { display: none !important; } /* Listas desplegables propias (mismo estilo que el buscador de materiales) */ select.sel-nativo { display: none !important; } .sel-boton { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; color: var(--text-title); font-size: 0.9rem; font-family: inherit; min-width: 0; transition: border-color 0.15s; } .sel-boton:hover { border-color: var(--border-hover); } .sel-boton:focus, .sel-boton.abierto { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 173, 154, 0.2); } .sel-boton:disabled { opacity: 0.55; cursor: not-allowed; } .sel-boton .sel-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .sel-boton .sel-texto.vacio { color: var(--text-muted); } .sel-boton::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); flex-shrink: 0; transition: transform 0.15s; } .sel-boton.abierto::after { transform: rotate(225deg) translateY(-2px); } .sel-boton.input-fecha { padding: 5px 8px; font-size: 0.82rem; } .sel-lista { position: fixed; z-index: 20000; max-height: 320px; overflow-y: auto; background: var(--bg-surface-elevated); border: 1px solid var(--border-hover); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); padding: 4px; } .sel-lista .sel-buscar { width: 100%; margin-bottom: 4px; padding: 7px 10px; font-size: 0.84rem; } .sel-op { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 0.86rem; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sel-op.activo, .sel-op:hover { background: var(--primary-glow); color: var(--text-title); } .sel-op.elegido { color: var(--primary); font-weight: 600; } .sel-op.deshabilitado { color: var(--text-faint); cursor: default; background: none; } .sel-op.vacio-op { color: var(--text-muted); } .sel-op .sug-extra { float: right; margin-left: 12px; color: var(--text-muted); font-size: 0.75rem; font-weight: 400; } .sel-op mark { background: rgba(0, 173, 154, 0.3); color: inherit; border-radius: 2px; padding: 0 1px; } /* Buscador de materiales (reemplaza a una lista desplegable larga) */ .combo { position: relative; } .combo-input { width: 100%; padding-right: 34px; } .combo::after { content: '⌕'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 1.05rem; } .combo-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 330px; overflow-y: auto; z-index: 60; background: var(--bg-surface-elevated); border: 1px solid var(--border-hover); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); padding: 4px; } /* cada resultado en dos renglones: código + descripción arriba, los datos abajo (así entra en columnas angostas sin pisarse) */ .combo-item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 0.86rem; color: var(--text-body); } .combo-item .c-cod { font-family: var(--font-mono); color: var(--primary); font-weight: 600; font-size: 0.8rem; overflow-wrap: anywhere; } .combo-item .c-nom { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; } .combo-item .c-extra { flex: 1 1 100%; color: var(--text-muted); font-size: 0.76rem; overflow-wrap: anywhere; } .combo-item .c-extra:empty { display: none; } .combo-item.activo, .combo-item:hover { background: var(--primary-glow); color: var(--text-title); } .combo-item mark { background: rgba(0, 173, 154, 0.3); color: inherit; border-radius: 2px; padding: 0 1px; } .combo-vacio { padding: 12px; color: var(--text-muted); font-size: 0.84rem; text-align: center; } .logo-empresa { background: #fff; border-radius: 8px; padding: 10px; height: 76px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); } .logo-empresa img { max-height: 56px; max-width: 100%; } .total-oc { text-align: right; font-family: var(--font-mono); font-size: 1rem; color: var(--text-title); margin-top: 12px; } body.sin-costos .col-costo { display: none !important; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 10000; } .modal-overlay.active { display: flex; animation: modalFade 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalFade { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } .modal-card { background: var(--bg-surface); border: 1px solid var(--border-hover); border-radius: 14px; width: 100%; max-width: 600px; padding: 26px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.9); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; } .modal-close:hover { color: var(--text-title); } /* No lleva la clase modal-close: ESC aprieta el primer .modal-close del popup y tiene que ser la X */ .btn-pantalla-completa { background: none; border: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; } .btn-pantalla-completa:hover { color: var(--text-title); background: var(--bg-surface-elevated); } /* Ficha en pantalla completa: ocupa toda la ventana */ .modal-overlay.ficha-completa { left: 250px; width: calc(100% - 250px); } /* deja a la vista la barra lateral */ .modal-card.pantalla-completa { max-width: 100% !important; width: 100%; height: 100%; max-height: 100% !important; border-radius: 0; border: none; box-shadow: none; padding: 22px 28px; } #modal-login { z-index: 10005; background: rgba(0, 0, 0, 0.92); } /* Botones de filtro (selección rápida) */ .segmentado { display: flex; gap: 4px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 4px; flex-shrink: 0; } .segmentado button { background: transparent; border: none; color: var(--text-muted); padding: 8px 14px; border-radius: 7px; font-size: 0.86rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all 0.15s; white-space: nowrap; } .segmentado button:hover { color: var(--text-title); background: var(--bg-surface-elevated); } .segmentado button.activo { background: rgba(0, 173, 154, 0.16); color: #6fdccd; box-shadow: inset 0 0 0 1px rgba(0, 173, 154, 0.35); } .seg-num { font-size: 0.7rem; font-family: var(--font-mono); background: rgba(255, 255, 255, 0.08); color: var(--text-body); padding: 1px 7px; border-radius: 99px; } .segmentado button.activo .seg-num { background: rgba(0, 173, 154, 0.3); color: #d2f5f0; } /* Eliminar proyecto */ .opcion-radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; } .opcion-radio:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, 0.02); } .opcion-radio:has(input:checked) { border-color: rgba(0, 173, 154, 0.55); background: rgba(0, 173, 154, 0.08); } .opcion-radio input { margin-top: 2px; accent-color: var(--primary); width: 17px; height: 17px; flex-shrink: 0; } .opcion-radio b { display: block; color: var(--text-title); font-size: 0.9rem; } .opcion-radio span { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; line-height: 1.4; } .ep-material { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.83rem; max-height: 150px; overflow-y: auto; } .ep-material div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .ep-material div span:last-child { font-family: var(--font-mono); font-weight: 700; color: var(--text-title); white-space: nowrap; } /* Proyectos */ .campo-doble { grid-column: span 2; } @media (max-width: 900px) { .campo-doble { grid-column: 1 / -1; } } .proy-nombre { font-weight: 600; color: var(--text-title); } .proy-cliente { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6fdccd; font-weight: 600; } .vista-previa-nombre { background: var(--bg-surface-elevated); border: 1px dashed var(--border-hover); border-radius: 8px; padding: 10px 14px; font-weight: 700; color: var(--text-title); min-height: 42px; display: flex; align-items: center; } .vista-previa-nombre span { color: #6fdccd; } .ficha-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 20px; } .ficha-kpi { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 14px 16px; } .ficha-kpi .et { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; } .ficha-kpi .va { font-size: 1.35rem; font-weight: 700; color: var(--text-title); font-family: var(--font-mono); margin-top: 6px; } .ficha-seccion { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); font-weight: 700; margin: 20px 0 10px; } /* Ficha de alta de material */ .alta-card { max-width: 1200px; } .alta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .alta-card .ficha-seccion .ico { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 4px; } .alta-bloques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 6px; } .alta-bloque { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 2px 16px 12px; } .alta-bloque .ficha-seccion { margin-top: 12px; } .alta-bloque .form-group { margin-bottom: 12px; } @media (max-width: 1000px) { .alta-bloques { grid-template-columns: 1fr; } } .alta-pie { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-subtle); } .alta-pie > .hint { margin-right: auto; } .barra-presupuesto { height: 8px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; margin-top: 8px; } .barra-presupuesto div { height: 100%; border-radius: 99px; } .ficha-datos { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.82rem; color: var(--text-muted); margin-top: 6px; } .ficha-datos b { color: var(--text-body); font-weight: 600; } /* Campana de notificaciones */ .notif-wrap { position: relative; } .btn-campana { position: relative; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-body); transition: all 0.15s; } .btn-campana:hover, .btn-campana.abierta { border-color: var(--border-hover); color: var(--text-title); background: var(--bg-surface-elevated); } .btn-campana svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .notif-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-body); box-shadow: 0 0 10px var(--danger-glow); } .notif-panel { position: absolute; top: 50px; right: 0; width: 420px; max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-hover); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75); z-index: 500; overflow: hidden; animation: fadeIn 0.18s ease; } .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } .notif-head b { color: var(--text-title); font-size: 0.95rem; } .notif-link { background: none; border: none; color: #6fdccd; font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .notif-link:hover { background: var(--primary-glow); } .notif-link.rojo { color: #fda4af; } .notif-link.rojo:hover { background: var(--danger-glow); } .notif-lista { overflow-y: auto; flex: 1; } .notif-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.15s; position: relative; } .notif-item:hover { background: rgba(255, 255, 255, 0.035); } .notif-item.leida { opacity: 0.55; } .notif-punto { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .notif-punto svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .notif-punto.atraso { background: var(--danger-glow); color: #fda4af; } .notif-punto.minimo { background: var(--warning-glow); color: #fcd34d; } .notif-punto.revisar { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; } .notif-punto.hoy { background: var(--primary-glow); color: #6fdccd; } .notif-punto.prestamo { background: rgba(236, 72, 153, 0.16); color: #f9a8d4; } .segmentado.campo-falta { outline: 1.5px solid rgba(244, 63, 94, 0.85); outline-offset: 2px; border-radius: 10px; } .ct-tit { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 8px; font-weight: 600; color: var(--text-title); } .ct-cab, .ct-fila { display: grid; grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1fr) 70px minmax(0, 0.9fr) minmax(0, 1.3fr) 38px; gap: 6px; align-items: center; } .ct-cab { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .ct-fila { margin-bottom: 6px; } .ct-fila input { min-width: 0; } .ct-fila .ct-car, .ct-fila .ct-num { font-family: var(--font-mono); } .ct-aviso { grid-column: 2 / -1; } .ct-aviso:empty { display: none; } .ct-estrella { background: none; border: none; cursor: pointer; font-size: 1.15rem; color: var(--text-faint); padding: 0; line-height: 1; } .ct-estrella.on { color: var(--warning); } @media (max-width: 800px) { .ct-cab { display: none; } .ct-fila { grid-template-columns: 30px 1fr 1fr; } .ct-fila .ct-mail { grid-column: 2 / -1; } } .tel-par { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; } .tel-par input { font-family: var(--font-mono); } .tel-aviso { font-size: 0.75rem; color: var(--warning); margin-top: 4px; min-height: 0; } .segmentado-chico { padding: 3px; } .segmentado-chico button { padding: 5px 11px; font-size: 0.8rem; } .select-chico { width: auto; padding: 6px 10px; font-size: 0.82rem; } .dc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 16px 12px; } .dc-kpi { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; } .dc-kpi small { display: block; color: var(--text-muted); font-size: 0.75rem; } .dc-kpi b { font-size: 1.2rem; color: var(--text-title); font-weight: 700; } .dc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 0 16px 16px; } .dc-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; min-width: 0; } .dc-ancho { grid-column: 1 / -1; } .dc-tit { color: var(--text-title); font-weight: 600; font-size: 0.88rem; } .dc-sub { color: var(--text-muted); font-size: 0.74rem; margin: 2px 0 10px; } .dc-fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 120px; gap: 10px; align-items: center; margin: 7px 0; font-size: 0.84rem; } .dc-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-nom small { color: var(--text-muted); margin-left: 6px; } .dc-pista { height: 9px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; overflow: hidden; } .dc-barra { height: 100%; border-radius: 5px; transition: width 0.3s; } .dc-val { text-align: right; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-title); white-space: nowrap; } .dc-vacio { color: var(--text-muted); font-size: 0.82rem; padding: 10px 0; } @media (max-width: 1100px) { .dc-grid { grid-template-columns: minmax(0, 1fr); } .dc-kpis { grid-template-columns: minmax(0, 1fr); } .dc-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px; } } .dash-st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; align-items: stretch; } .dash-st.sin-mapa { grid-template-columns: minmax(0, 1fr); } .dash-st-mapa { display: flex; flex-direction: column; margin: 0; } .dash-st-mapa-div { flex: 1; min-height: 440px; } .dash-st-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .dash-st-col .table-wrap { margin: 0; } .dash-st-scroll { max-height: 250px; overflow-y: auto; } @media (max-width: 1100px) { .dash-st { grid-template-columns: minmax(0, 1fr); } .dash-st-mapa-div { min-height: 320px; } } .pq-mapa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; } .pq-mapa-div { height: 520px; border-radius: 10px; overflow: hidden; background: rgba(128,128,128,0.08); } .pq-mapa-lado { max-height: 520px; overflow-y: auto; } @media (max-width: 800px) { .pq-mapa-grid { grid-template-columns: 1fr; } .pq-mapa-div { height: 380px; } } .leaflet-popup-content a { color: #0d9488; font-weight: 600; } .badge-prestamo { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; } .badge-devprestamo { background: rgba(20, 184, 166, 0.16); color: #5eead4; } .nota-prestado { font-size: 0.7rem; color: #f9a8d4; margin-top: 3px; font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; line-height: 1.35; white-space: nowrap; } .nota-prestado .ico { width: 12px; height: 12px; flex: none; } .notif-punto.sistema { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; } .notif-texto { flex: 1; min-width: 0; } .notif-titulo { font-size: 0.86rem; font-weight: 600; color: var(--text-title); line-height: 1.3; } .notif-item:not(.leida) .notif-titulo::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00ad9a; margin-right: 7px; vertical-align: middle; } .notif-detalle { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .notif-tiempo { font-size: 0.7rem; color: var(--text-faint); margin-top: 4px; } .notif-quitar { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 1rem; width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; align-self: flex-start; } .notif-quitar:hover { color: var(--danger); background: var(--danger-glow); } .notif-vacio { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 0.88rem; } .notif-vacio div { font-size: 1.8rem; margin-bottom: 8px; } /* Ventana de confirmación propia (reemplaza a la del navegador) */ #modal-confirmar { z-index: 10020; } .confirmar-card { max-width: 460px; padding: 24px; } .confirmar-cuerpo { display: flex; gap: 16px; align-items: flex-start; } .confirmar-icono { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .confirmar-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .confirmar-icono.normal { background: var(--primary-glow); color: #6fdccd; border: 1px solid rgba(0, 173, 154, 0.3); } .confirmar-icono.aviso { background: var(--warning-glow); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); } .confirmar-icono.peligro { background: var(--danger-glow); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.3); } .confirmar-titulo { font-size: 1.08rem; font-weight: 700; color: var(--text-title); line-height: 1.3; } .confirmar-mensaje { font-size: 0.88rem; color: var(--text-body); line-height: 1.55; margin-top: 6px; white-space: pre-line; } .confirmar-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } /* ===== Solicitudes de compra ===== */ .badge-sol-PENDIENTE { background: var(--warning-glow); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); } .badge-sol-APROBADA { background: var(--success-glow); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.25); } .badge-sol-CANCELADA { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.25); } .badge-sol-FECHA { background: rgba(59, 130, 246, 0.14); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); } .notif-punto.solicitud { background: var(--warning-glow); color: #fcd34d; } .notif-punto.solicitud_resuelta { background: var(--success-glow); color: #86efac; } .btn-xs, #tb-stock-master .btn-xs { padding: 2px 8px; font-size: 0.72rem; border-radius: 6px; gap: 4px; } .btn-xs .ico { width: 12px; height: 12px; } .btn-solicitar { margin-left: 4px; vertical-align: middle; } .nav-num { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--warning-glow); color: #fcd34d; font-size: 0.7rem; font-weight: 700; text-align: center; } .sol-aprobar { margin-top: 18px; padding: 16px; border: 1px solid var(--border-hover); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } /* ===== Análisis de compras ===== */ .ac-filtros { margin-bottom: 16px; } .ac-rapidos { margin-bottom: 14px; flex-wrap: wrap; } .ac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; } .ac-grid .form-group { margin: 0; } .ac-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .ac-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; } .ac-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; background: var(--primary-glow); color: var(--text-title); border: 1px solid var(--border-hover); } .ac-chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; } .ac-chip button:hover { color: var(--danger); } .ac-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; } .ac-kpi { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 16px; } .ac-kpi small { display: block; color: var(--text-muted); font-size: 0.75rem; } .ac-kpi b { display: block; font-size: 1.2rem; color: var(--text-title); font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-kpi i { display: block; font-style: normal; font-size: 0.72rem; margin-top: 3px; } .ac-sube { color: #86efac; } .ac-baja { color: #fda4af; } .ac-aviso { margin: -4px 0 12px; color: var(--warning); } .ac-card { margin-bottom: 14px; } /* Códigos de barras: botón de cámara (solo en el celular) y lector de las recepciones / devoluciones */ .btn-camara { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-subtle); background: var(--bg-surface-elevated); color: var(--primary); } .btn-camara svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } body.modo-celular .btn-camara { display: inline-flex; } .con-camara { display: flex; gap: 8px; align-items: center; } .con-camara > .combo, .con-camara > .search-container, .con-camara > input { flex: 1; min-width: 0; } .lector-barras { margin: 0 0 12px; } .lector-barras .search-container { margin: 0; } .cb-codigo { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--primary); background: var(--bg-surface-elevated); border: 1px dashed var(--border-hover); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; letter-spacing: 0.05em; text-align: center; } .barras-lista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .barras-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.8rem; padding: 3px 8px; border-radius: 6px; background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); color: var(--text-title); } .barras-chip button { background: none; border: none; color: var(--danger); cursor: pointer; padding: 0; font-size: 0.95rem; line-height: 1; } .escaneo-foto { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; background: #000; margin-bottom: 12px; } .escaneo-estado { font-weight: 600; color: var(--text-title); margin-bottom: 8px; } .escaneo-ayuda { margin-bottom: 10px; } .escaneo-acciones { display: flex; flex-direction: column; gap: 10px; } .flash-lector { animation: flashLector 0.9s ease; } @keyframes flashLector { from { box-shadow: 0 0 0 3px var(--primary); } to { box-shadow: 0 0 0 0 transparent; } } /* Tablero mensual y comparador de proveedores */ /* Estado del sistema */ .est-avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .est-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 0.88rem; line-height: 1.4; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-body); } .est-aviso .ico { margin-top: 2px; } .est-aviso.error { border-color: rgba(244, 63, 94, 0.45); background: var(--danger-glow); color: #fecdd3; } .est-aviso.aviso { border-color: rgba(245, 158, 11, 0.45); background: var(--warning-glow); color: #fde68a; } .est-aviso.ok { border-color: rgba(0, 173, 154, 0.45); background: var(--primary-glow); color: #a7f3e8; } .est-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; } .est-card h4 { margin-bottom: 10px; } .est-fila { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.84rem; } .est-fila:last-child { border-bottom: none; } .est-fila > span { color: var(--text-muted); flex-shrink: 0; } .est-fila > b { font-weight: 500; color: var(--text-body); text-align: right; min-width: 0; overflow-wrap: anywhere; } .est-nuevas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 0.86rem; } .est-nuevas ul { margin: 6px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; } .est-ruta { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; } .est-bien { color: var(--success); font-weight: 700; } .est-mal { color: var(--danger); font-weight: 700; } .est-barra { height: 10px; border-radius: 99px; background: var(--bg-surface-elevated); overflow: hidden; margin: 4px 0 8px; } .est-barra > div { height: 100%; background: var(--primary); border-radius: 99px; } .est-barra > div.medio { background: var(--warning); } .est-barra > div.mal { background: var(--danger); } @media (max-width: 760px) { .est-grid { grid-template-columns: 1fr; } .est-fila { flex-direction: column; gap: 2px; } .est-fila > b { text-align: left; } } .tab-barra { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; } .tab-leyenda { display: flex; gap: 14px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); } .tab-leyenda i, .cmp-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .tab-barra-a { fill: var(--primary); opacity: 0.85; } .tab-barra-b { fill: #f59e0b; opacity: 0.85; } .tab-barra-s { fill: #60a5fa; opacity: 0.85; } .cmp-mejor { color: var(--success) !important; } .cmp-tabla td, .cmp-tabla th { white-space: nowrap; } .ac-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--text-title); font-weight: 600; font-size: 0.92rem; margin-bottom: 10px; } .ac-graf { width: 100%; } .ac-svg { width: 100%; height: auto; display: block; overflow: visible; } .ac-linea { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; } .ac-eje { fill: var(--text-muted); font-size: 12px; } .ac-barra { fill: var(--primary); opacity: 0.85; transition: opacity 0.15s; } .ac-barra-g { cursor: pointer; } .ac-barra-g:hover .ac-barra { opacity: 1; fill: #34d399; } .ac-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } #modal-ac-grupo th, #modal-ac-grupo td.num { white-space: nowrap; } #modal-ac-grupo th { padding: 10px 10px; } #modal-ac-grupo td { padding: 9px 10px; font-size: 0.84rem; } .ac-tit-clic { cursor: pointer; } .ac-tit-clic:hover > span:first-child { color: var(--primary); } .ac-tit-der { display: inline-flex; align-items: center; gap: 10px; } .ac-clic { cursor: pointer; border-radius: 6px; } .ac-clic:hover { background: rgba(255, 255, 255, 0.04); } @media (max-width: 1100px) { .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-rankings { grid-template-columns: minmax(0, 1fr); } } /* ===== Adjuntos de la OC (cotización) ===== */ .adj-caja { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--border-hover); border-radius: 10px; } .adj-caja.arrastrando, .adj-oc.arrastrando { border-color: var(--primary); background: var(--primary-glow); } .adj-lista { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; } .adj-lista:empty { display: none; } .adj-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; background: var(--bg-surface-elevated); border: 1px solid var(--border-hover); color: var(--text-title); } .adj-chip .ico { width: 13px; height: 13px; } .adj-chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .adj-chip button:hover { color: var(--danger); } .adj-oc { margin-bottom: 14px; border: 1px dashed transparent; border-radius: 10px; } .adj-oc:empty { display: none; } .adj-oc-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-title); font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; } .adj-oc-tit .ico { width: 14px; height: 14px; vertical-align: -2px; } .adj-fila { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 8px; background: var(--bg-surface-elevated); margin-bottom: 6px; flex-wrap: wrap; } .adj-nom { color: var(--primary); font-weight: 600; cursor: pointer; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; } .adj-nom:hover { text-decoration: underline; } .adj-nom .ico { width: 14px; height: 14px; vertical-align: -2px; } .adj-acc { margin-left: auto; display: flex; gap: 6px; } /* ===== Contraseña inicial / blanqueo ===== */ .aviso-clave { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; background: var(--primary-glow); color: var(--text-title); border: 1px solid var(--border-hover); } .aviso-clave .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--primary); } /* ===== Herramientas consumibles ===== */ .badge-herr { background: rgba(249, 115, 22, 0.14); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.35); } .alta-que { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; } #alta-herr { margin-bottom: 4px !important; }