/* Blazor le da foco al primer

en cada navegación (FocusOnNavigate, por accesibilidad): sin esto el navegador dibuja su anillo de foco alrededor del título de cada pantalla. Se neutraliza el recuadro SIN sacar el foco, que es lo que usan los lectores de pantalla. Regla global del monorepo: design-system/REGLAS-GLOBALES.md */ h1:focus, h1:focus-visible { outline: none; } :root { --po-bg: #0f172a; --po-bg-2: #111c34; --po-surface: #ffffff; --po-surface-2: #f1f5f9; --po-ink: #0f172a; --po-ink-soft: #475569; --po-primary: #2563eb; --po-primary-d: #1d4ed8; --po-accent: #38bdf8; --po-border: #e2e8f0; --po-ok: #16a34a; --po-warn: #d97706; --po-danger: #dc2626; --po-sidebar-w: 244px; } html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--po-surface-2); color: var(--po-ink); margin: 0; } a { color: var(--po-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .btn-primary { --bs-btn-bg: var(--po-primary); --bs-btn-border-color: var(--po-primary); --bs-btn-hover-bg: var(--po-primary-d); --bs-btn-hover-border-color: var(--po-primary-d); } .btn-outline-primary { --bs-btn-color: var(--po-primary); --bs-btn-border-color: var(--po-primary); --bs-btn-hover-bg: var(--po-primary); --bs-btn-hover-border-color: var(--po-primary); } .text-primary { color: var(--po-primary) !important; } /* ─── AUTH ─── */ .po-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 20% -10%, #1e3a8a 0%, var(--po-bg) 55%); padding: 24px; } .po-auth-card { width: 100%; max-width: 420px; background: var(--po-surface); border-radius: 16px; box-shadow: 0 20px 60px rgba(2,6,23,.45); padding: 32px 32px 28px; } .po-auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 1.4rem; color: var(--po-primary); margin-bottom: 18px; } .po-auth-brand .bi { font-size: 1.6rem; } .po-auth-brand strong { color: var(--po-ink); } .po-auth-title { font-size: 1.25rem; text-align: center; margin-bottom: 18px; } .po-auth-foot { color: #94a3b8; font-size: .8rem; margin-top: 16px; letter-spacing: .04em; } /* ─── SHELL ─── */ .po-shell { display: flex; min-height: 100vh; } .po-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .po-sidebar { width: var(--po-sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--po-bg) 0%, var(--po-bg-2) 100%); color: #cbd5e1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .po-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-size: 1.2rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); } .po-sidebar-brand .bi { color: var(--po-accent); font-size: 1.4rem; } .po-sidebar-brand strong { color: var(--po-accent); } .po-nav-scroll { flex: 1; overflow-y: auto; padding: 12px 10px; } .po-navlink { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 9px; color: #cbd5e1; font-size: .92rem; margin-bottom: 3px; transition: background .12s, color .12s; } .po-navlink:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .po-navlink.active { background: var(--po-primary); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.45); } .po-navlink .bi { font-size: 1.05rem; width: 20px; text-align: center; } .po-nav-sep { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #64748b; padding: 14px 14px 6px; } .po-sidebar-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.07); } .po-badge-empresa { font-size: .78rem; color: #94a3b8; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Badge de plan (junto a la marca) ─── */ .po-plan-badge { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.4; white-space: nowrap; text-decoration: none; border: 1px solid transparent; transition: filter .12s; } .po-plan-badge:hover { text-decoration: none; filter: brightness(1.12); } .po-plan-free { background: rgba(148,163,184,.18); color: #cbd5e1; border-color: rgba(148,163,184,.35); } .po-plan-basic { background: rgba(56,189,248,.16); color: #7dd3fc; border-color: rgba(56,189,248,.4); } .po-plan-pro { background: rgba(37,99,235,.22); color: #93b4fb; border-color: rgba(37,99,235,.5); } .po-plan-enterprise { background: linear-gradient(135deg, var(--po-primary), var(--po-accent)); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(37,99,235,.45); } /* ─── Grupos colapsables del NavMenu ─── */ .po-nav-group { margin-top: 4px; } .po-nav-grouptoggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: transparent; border-radius: 9px; color: #7e8ba0; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: background .12s, color .12s; } .po-nav-grouptoggle:hover { background: rgba(255,255,255,.05); color: #e2e8f0; } .po-nav-grouptoggle > .bi:first-child { font-size: 1rem; width: 20px; text-align: center; } .po-chevron { margin-left: auto; font-size: .78rem !important; width: auto !important; transition: transform .18s; } .po-nav-grouptoggle.open .po-chevron { transform: rotate(180deg); } .po-nav-groupitems { display: none; padding-left: 8px; } .po-nav-groupitems.show { display: block; } .po-nav-groupitems .po-navlink { font-size: .88rem; } /* ─── TOPBAR ─── */ .po-topbar { display: flex; align-items: center; gap: 14px; background: var(--po-bg); color: #e2e8f0; padding: 0 18px; height: 54px; position: sticky; top: 0; z-index: 40; } .po-topbar-empresa { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; } .po-topbar-empresa .bi { color: var(--po-accent); } .po-topbar-logo { display: none; height: 30px; max-width: 140px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px 4px; } .po-topbar-user { margin-left: auto; display: flex; align-items: center; gap: 12px; } .po-user-name { font-size: .85rem; color: #cbd5e1; } .po-navtoggle { display: inline-flex; align-items: center; color: #e2e8f0; border: 0; background: transparent; } .po-navtoggle:hover { color: #fff; } .po-content { padding: 22px 26px 60px; width: 100%; max-width: none; } /* ─── SIDEBAR COLAPSADO (solo desktop; en mobile el toggle abre/cierra) ─── */ @media (min-width: 861px) { .po-shell.po-nav-collapsed { --po-sidebar-w: 66px; } .po-nav-collapsed .po-sidebar-brand span, .po-nav-collapsed .po-navlink span, .po-nav-collapsed .po-nav-sep, .po-nav-collapsed .po-plan-badge, .po-nav-collapsed .po-nav-grouptoggle span, .po-nav-collapsed .po-chevron, .po-nav-collapsed .po-sidebar-foot { display: none; } .po-nav-collapsed .po-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } .po-nav-collapsed .po-navlink { justify-content: center; padding-left: 0; padding-right: 0; } .po-nav-collapsed .po-navlink .bi { width: auto; } .po-nav-collapsed .po-nav-scroll { padding: 12px 8px; } /* En el rail colapsado los grupos se muestran siempre como íconos (ignora estado abierto/cerrado) */ .po-nav-collapsed .po-nav-grouptoggle { justify-content: center; padding-left: 0; padding-right: 0; } .po-nav-collapsed .po-nav-grouptoggle > .bi:first-child { width: auto; } .po-nav-collapsed .po-nav-groupitems { display: block; padding-left: 0; } } /* ─── COMPONENTES ─── */ .po-page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .po-page-head h1 { margin: 0; } .po-page-head .po-spacer { flex: 1; } .po-card { background: var(--po-surface); border: 1px solid var(--po-border); border-radius: 14px; padding: 18px 20px; } .po-card + .po-card { margin-top: 16px; } /* ─── Vista Enterprise (pantalla de planes) ─── */ .po-enterprise { border-color: #bfdbfe; box-shadow: 0 6px 24px rgba(37,99,235,.1); } .po-enterprise-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .po-enterprise-head > .bi { font-size: 2.2rem; color: var(--po-accent); } .po-ent-stat { background: linear-gradient(135deg, #eff6ff, #f0f9ff); border: 1px solid #dbeafe; border-radius: 12px; padding: 14px 12px; text-align: center; height: 100%; } .po-ent-num { font-weight: 700; font-size: 1.05rem; color: var(--po-primary-d); } .po-ent-lbl { color: var(--po-ink-soft); font-size: .8rem; margin-top: 2px; } .po-ent-lbl .bi { color: var(--po-primary); } .po-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; } .po-kpi { background: var(--po-surface); border: 1px solid var(--po-border); border-radius: 14px; padding: 16px 18px; } .po-kpi-label { color: var(--po-ink-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; } .po-kpi-value { font-size: 1.7rem; font-weight: 700; margin-top: 4px; } .po-kpi .bi { color: var(--po-primary); } .table { --bs-table-hover-bg: #f8fafc; } /* Cabeceras ordenables (componente SortTh) */ .po-sort-th { cursor: pointer; user-select: none; white-space: nowrap; } .po-sort-th:hover { color: var(--po-primary); } .po-sort-ico { font-size: .68rem; margin-left: 5px; opacity: .35; } .po-sort-ico.po-sort-on { opacity: 1; color: var(--po-primary); } .table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--po-ink-soft); border-bottom: 2px solid var(--po-border); } .table td { vertical-align: middle; } .po-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; } .po-badge-plan { background: #eff6ff; color: var(--po-primary-d); border: 1px solid #bfdbfe; } .po-est-0 { background: #f1f5f9; color: #475569; } .po-est-1 { background: #dbeafe; color: #1d4ed8; } .po-est-2 { background: #fef3c7; color: #b45309; } .po-est-3 { background: #dcfce7; color: #15803d; } .po-est-4 { background: #fee2e2; color: #b91c1c; } .po-tipo-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--po-ink-soft); } .po-tipo-chip .bi { color: var(--po-primary); } .po-money { font-variant-numeric: tabular-nums; font-weight: 600; } .po-desvio-pos { color: var(--po-danger); } .po-desvio-neg { color: var(--po-ok); } .po-empty { text-align: center; color: var(--po-ink-soft); padding: 40px 20px; } .po-empty .bi { font-size: 2.4rem; color: #cbd5e1; display: block; margin-bottom: 8px; } /* ─── SMART SEARCH (typeahead) ─── */ .po-smartsearch { position: relative; } .po-ss-box { position: relative; } .po-ss-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; pointer-events: none; } .po-ss-input { padding-left: 30px; padding-right: 30px; } .po-ss-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #94a3b8; cursor: pointer; padding: 2px 4px; line-height: 1; } .po-ss-clear:hover { color: var(--po-danger); } .po-ss-dropdown { position: absolute; z-index: 1200; top: calc(100% + 2px); left: 0; right: 0; background: #fff; border: 1px solid var(--po-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(2,6,23,.18); max-height: 280px; overflow-y: auto; } .po-ss-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 12px; cursor: pointer; } .po-ss-item:hover { background: var(--po-surface-2); } .po-ss-item-text { font-size: .9rem; color: var(--po-ink); } .po-ss-item-sub { font-size: .76rem; color: var(--po-ink-soft); } .po-ss-empty { padding: 10px 12px; color: var(--po-ink-soft); font-size: .85rem; } /* GeoPicker: el buscador geo + combos ahora es el componente compartido de IntegraIA.Shared, con su CSS propio (_content/IntegraIA.Shared/geopicker.css). Las clases po-geo-* se eliminaron. */ /* ─── ICON PICKER ─── */ .po-iconpicker { position: relative; } .po-ip-box { position: relative; } .po-ip-trigger { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; } .po-ip-trigger:disabled { cursor: not-allowed; opacity: .6; } .po-ip-cur-icon { font-size: 1rem; color: var(--po-primary); flex: 0 0 auto; } .po-ip-cur-desc { font-size: .9rem; color: var(--po-ink); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .po-ip-cur-code { font-size: .72rem; color: var(--po-ink-soft); flex: 0 0 auto; } .po-ip-caret { font-size: .7rem; color: #94a3b8; flex: 0 0 auto; } .po-ip-backdrop { position: fixed; inset: 0; z-index: 1190; } .po-ip-dropdown { position: absolute; z-index: 1200; top: calc(100% + 2px); left: 0; right: 0; background: #fff; border: 1px solid var(--po-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(2,6,23,.18); overflow: hidden; } .po-ip-search { position: relative; padding: 8px; border-bottom: 1px solid var(--po-border); } .po-ip-search .bi-search { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; pointer-events: none; } .po-ip-search input { padding-left: 28px; } .po-ip-list { max-height: 260px; overflow-y: auto; } .po-ip-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 12px; cursor: pointer; } .po-ip-item:hover { background: var(--po-surface-2); } .po-ip-item.sel { background: color-mix(in srgb, var(--po-primary) 12%, #fff); } .po-ip-item-icon { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--po-primary); } .po-ip-item-desc { display: flex; flex-direction: column; min-width: 0; } .po-ip-item-name { font-size: .88rem; color: var(--po-ink); } .po-ip-item-code { font-size: .72rem; color: var(--po-ink-soft); } .po-ip-empty { padding: 10px 12px; color: var(--po-ink-soft); font-size: .85rem; } /* ─── LOGO EMPRESA (form) ─── */ .po-logo-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .po-logo-preview { height: 72px; max-width: 220px; object-fit: contain; border: 1px solid var(--po-border); border-radius: 10px; padding: 6px 10px; background: #fff; } .po-logo-empty { height: 72px; width: 120px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--po-border); border-radius: 10px; color: #94a3b8; font-size: 1.6rem; background: var(--po-surface-2); } .po-logo-actions { display: flex; flex-direction: column; gap: 6px; min-width: 240px; } /* ─── GANTT ─── */ .po-gantt { border: 1px solid var(--po-border); border-radius: 10px; overflow: hidden; font-size: .8rem; } .po-gantt-head { display: flex; align-items: stretch; background: var(--po-surface-2); border-bottom: 1px solid var(--po-border); } .po-gantt-row { display: flex; align-items: stretch; min-height: 34px; border-bottom: 1px solid #eef2f7; } .po-gantt-row:last-child { border-bottom: 0; } .po-gantt-labelcol { width: 210px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 4px 12px; border-right: 1px solid var(--po-border); background: #fff; } .po-gantt-head .po-gantt-labelcol { background: var(--po-surface-2); font-weight: 600; color: var(--po-ink-soft); text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; } .po-gantt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po-gantt-sub { color: var(--po-ink-soft); font-size: .72rem; margin-left: auto; white-space: nowrap; } .po-gantt-track { position: relative; flex: 1; min-width: 0; height: auto; } .po-gantt-head .po-gantt-track { height: 26px; } .po-gantt-bucket { position: absolute; top: 0; height: 100%; display: flex; align-items: center; padding-left: 5px; font-size: .68rem; color: var(--po-ink-soft); border-left: 1px solid var(--po-border); white-space: nowrap; overflow: hidden; } .po-gantt-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: #f1f5f9; } .po-gantt-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 20px; border-radius: 5px; display: flex; align-items: center; padding: 0 7px; color: #fff; box-shadow: 0 1px 3px rgba(2,6,23,.18); overflow: hidden; } .po-gantt-bar-text { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .po-gantt-foot { display: flex; padding: 4px 12px; background: var(--po-surface-2); border-top: 1px solid var(--po-border); } .po-gantt-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; } .po-gantt-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--po-ink-soft); } .po-gantt-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } /* ─── NIVELES DE PERMISO ─── */ .po-nivel-0 { color: #64748b; } .po-nivel-1 { border-left: 3px solid #64748b; } .po-nivel-2 { border-left: 3px solid var(--po-primary); } .po-nivel-3 { border-left: 3px solid var(--po-ok); } /* ─── MODAL (confirmación / danger zone) ─── */ .po-modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.55); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; } .po-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(2,6,23,.4); overflow: hidden; } .po-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--po-border); font-weight: 700; font-size: 1.05rem; } .po-modal-head .bi { font-size: 1.3rem; } .po-modal-body { padding: 18px 20px; } .po-modal-body ul { margin: 8px 0; padding-left: 20px; color: var(--po-ink-soft); } .po-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; background: var(--po-surface-2); border-top: 1px solid var(--po-border); } .po-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fee2e2; color: #991b1b; padding: 10px 16px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,.1); } .po-error-ui .reload, .po-error-ui .dismiss { margin-left: 12px; cursor: pointer; } /* ─── ANÁLISIS IA (chat foto→BOM) ─── */ .po-analisis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .po-chat { display: flex; flex-direction: column; } .po-chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px; margin-bottom: 12px; } .po-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; font-size: .9rem; line-height: 1.4; } .po-msg-usuario { align-self: flex-end; background: var(--po-primary); color: #fff; border-bottom-right-radius: 3px; } .po-msg-agente { align-self: flex-start; background: var(--po-surface-2); color: var(--po-ink); border: 1px solid var(--po-border); border-bottom-left-radius: 3px; } .po-msg-sistema { align-self: center; background: #fffbeb; color: #92400e; font-size: .82rem; } .po-msg-typing { font-style: italic; color: var(--po-ink-soft); } /* Markdown renderizado de las respuestas del agente: mismo aire que un párrafo suelto, sin los márgenes de bloque que meterían aire de más adentro de la burbuja. */ .po-msg-md > :first-child { margin-top: 0; } .po-msg-md > :last-child { margin-bottom: 0; } .po-msg-md p { margin-bottom: .5rem; } .po-msg-md ul, .po-msg-md ol { margin-bottom: .5rem; padding-left: 1.15rem; } .po-msg-md li + li { margin-top: .15rem; } .po-msg-md code { background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 4px; font-size: .88em; } .po-msg-md pre { background: rgba(0,0,0,.05); padding: 8px 10px; border-radius: 8px; overflow-x: auto; } .po-msg-md table { width: 100%; font-size: .85em; border-collapse: collapse; } .po-msg-md th, .po-msg-md td { border: 1px solid var(--po-border); padding: 3px 6px; } .po-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .po-foto-item { position: relative; } .po-foto-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--po-border); } .po-foto-file { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--po-border); background: var(--po-surface-2); display: flex; align-items: center; justify-content: center; color: var(--po-primary); font-size: 1.7rem; text-decoration: none; } .po-foto-file:hover { background: #e8eefc; } .po-foto-del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--po-danger); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; } .po-foto-add { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .po-foto-add .form-control { max-width: 240px; } .po-composer { display: flex; gap: 8px; align-items: flex-end; } .po-composer textarea { flex: 1; resize: vertical; } .po-bom-table th { font-size: .78rem; color: var(--po-ink-soft); } .po-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; background: var(--po-surface-2); border: 1px solid var(--po-border); border-radius: 4px; padding: 0 4px; color: var(--po-ink-soft); } .po-linea-promovida { background: #f0fdf4; } .po-linea-promovida td { color: var(--po-ink-soft); } /* ─── REPORTE COSTOS: desglose por componente ─── */ .po-rep-chevron { color: var(--po-ink-soft); font-size: .72rem; margin-right: 6px; transition: transform .18s; display: inline-block; } .po-rep-chevron.open { transform: rotate(90deg); } .po-rep-chevron-spacer { display: inline-block; width: 12px; margin-right: 6px; } .po-comp-badge { background: var(--po-surface-2); color: var(--po-ink-soft); font-weight: 600; font-size: .68rem; margin-left: 8px; } .po-comp-row > td { background: var(--po-surface-2); border-top: 0; padding-top: .3rem; padding-bottom: .3rem; } .po-comp-row:hover > td { background: #e8eef7; } .po-comp-name { padding-left: 30px !important; } .po-comp-name i { color: var(--po-accent); font-size: .8rem; } /* ─── ETAPAS: árbol, avance e incidencia ─── */ /* Barras compactas dentro de la fila: avance = azul primario (progreso de ejecución), incidencia = celeste acento (peso estructural, mismo criterio que .po-comp-name i). */ .po-progress-mini { display: inline-block; vertical-align: middle; width: 64px; height: 6px; border-radius: 999px; background: var(--po-surface-2); overflow: hidden; border: 1px solid var(--po-border); } .po-progress-mini-fill { display: block; height: 100%; background: var(--po-primary); border-radius: 999px; } .po-incidencia-mini .po-progress-mini-fill { background: var(--po-accent); } .po-progress-mini-label { display: inline-block; margin-left: 6px; font-size: .74rem; color: var(--po-ink-soft); vertical-align: middle; } .po-etapa-row { cursor: pointer; } .po-etapa-nombre i.po-etapa-tipo { color: var(--po-accent); font-size: .8rem; } /* Fila de un registro anulado: presente pero fuera de circulación. */ .po-row-anulada > td { opacity: .55; } .po-row-anulada:hover > td { opacity: .8; } /* ─── EDITOR DE FLUJO DE ESTADOS (3 cajas + drag & drop) ─── Caja de disponibles a la izquierda y dos destinos (estados anteriores / posteriores). Se puede arrastrar entre cajas o usar los botones de mover uno / mover todos. */ .po-flow-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; } .po-flow-col { display: flex; flex-direction: column; min-width: 0; } .po-flow-col > label { font-size: .78rem; font-weight: 600; color: var(--po-ink-soft); margin-bottom: 4px; } .po-flow-box { border: 1px solid var(--po-border); border-radius: 10px; background: #fff; min-height: 170px; max-height: 260px; overflow-y: auto; padding: 6px; } /* Feedback de drop: el borde punteado aparece sólo mientras se arrastra encima. */ .po-flow-box.po-drop { border-style: dashed; border-color: var(--po-primary); background: #f5f8ff; } .po-flow-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; cursor: grab; font-size: .84rem; border: 1px solid transparent; } .po-flow-item:hover { background: var(--po-surface-2); } .po-flow-item.po-sel { background: #e8eef7; border-color: var(--po-primary); } .po-flow-item:active { cursor: grabbing; } .po-flow-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .po-flow-btns { display: flex; flex-direction: column; gap: 4px; justify-content: center; padding-top: 22px; } .po-flow-btns .btn { padding: 2px 8px; line-height: 1.4; } .po-flow-empty { color: var(--po-ink-soft); font-size: .78rem; text-align: center; padding: 18px 6px; } @media (max-width: 860px) { .po-flow-grid { grid-template-columns: 1fr; } .po-flow-btns { flex-direction: row; justify-content: center; padding-top: 0; } } /* ─── ZONA PELIGROSA ─── Se separa del resto de la pantalla ANTES de que el usuario lea una palabra. El bloque verde ("esto no se toca") usa el semáforo real del producto: el contraste rojo/verde es lo que evita el malentendido de creer que borra todo el sistema. */ .po-danger-zone { border: 1px solid var(--po-danger); border-radius: 14px; overflow: hidden; } .po-danger-zone-head { background: #fef2f2; color: var(--po-danger); padding: 14px 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--po-danger); } .po-danger-zone-body { padding: 18px 20px; background: #fff; } .po-danger-zone-scope { display: flex; align-items: flex-start; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: .85rem; color: #166534; } .po-danger-zone-scope .bi { color: var(--po-ok); flex-shrink: 0; margin-top: 2px; } /* Resaltado del buscador transversal del detalle de proyecto. */ .po-search-hit { background: color-mix(in srgb, var(--po-warn) 22%, #fff); border-radius: 3px; padding: 0 2px; } /* ─── RESPONSIVE ─── */ @media (max-width: 980px) { .po-analisis-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .po-sidebar { position: fixed; left: calc(-1 * var(--po-sidebar-w)); z-index: 60; transition: left .2s; } .po-nav-open .po-sidebar { left: 0; } .po-content { padding: 16px 14px 60px; } } /* ─── MODO SIMPLE: selector del alta y planilla de insumos ─── */ /* El modo se elige entre dos tarjetas y no en un