/* Blazor le da foco al primer <h1> 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); }

/* KPIs compactos: son el encabezado del proyecto, no su contenido. Ocupando media pantalla
   empujaban las etapas —que es lo que el gerente viene a mirar— abajo del pliegue. */
.po-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.po-kpi { background: var(--po-surface); border: 1px solid var(--po-border); border-radius: 10px; padding: 9px 12px; }
.po-kpi-label { color: var(--po-ink-soft); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.po-kpi-value { font-size: 1.15rem; font-weight: 700; margin-top: 1px; white-space: nowrap; }
.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; }
/* Barra de resumen (etapa madre): fina y con las puntas marcadas, para que no compita con el
   trabajo real de las hojas. */
.po-gantt-bar-resumen { height: 8px; border-radius: 2px; opacity: .85; box-shadow: none; }
/* Hito de compromiso: rombo sobre la línea. Si la barra lo pasa, se pinta rojo — que el rombo quede
   a la izquierda del final de la barra es todo el mensaje. */
.po-gantt-hito { position: absolute; top: 50%; width: 11px; height: 11px; margin-left: -5.5px; transform: translateY(-50%) rotate(45deg); background: #0f172a; border: 1.5px solid #fff; border-radius: 2px; z-index: 2; }
/* Incumplido: el rombo NO se pinta de rojo — quedaría rojo sobre barra roja y desaparecería justo
   cuando más hay que verlo. Se lo despega con un anillo. */
.po-gantt-hito-mal { box-shadow: 0 0 0 1.5px #dc2626; }
.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; }

/* ─── ACORDEÓN DE SECCIONES (ficha de proyecto) ─── */
/* El título ES el control: un botón aparte al lado del título obliga a apuntar a un blanco chico
   para algo que el usuario piensa como "abrir/cerrar esta sección". */
.po-sec-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px; }
.po-sec-toggle:hover { color: var(--po-primary); }
.po-sec-count { font-size: .72rem; font-weight: 600; color: var(--po-ink-soft); background: var(--po-surface-2); border: 1px solid var(--po-border); border-radius: 999px; padding: 1px 8px; }
/* Chip de etapa en la grilla de recursos: responde "¿a qué etapa pega este costo?" de un vistazo. */
.po-etapa-chip { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.22); color: var(--po-primary); border-radius: 6px; padding: 1px 7px; font-size: .75rem; }

/* ─── REORDENAR ETAPAS (drag & drop entre hermanas) ─── */
.po-drag-handle { color: #94a3b8; cursor: grab; margin-right: 4px; }
.po-drag-handle:active { cursor: grabbing; }
.po-etapa-row[draggable="true"] { cursor: default; }
/* La fila que se está arrastrando se atenúa; la de destino marca el borde donde va a caer. */
.po-drag-src { opacity: .45; }
.po-drag-over td { border-top: 2px solid var(--po-primary) !important; background: rgba(37,99,235,.05); }

/* Edición inline de una asignación dentro de la fila desplegada de su etapa. */
.po-inline-edit { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.po-comp-row-edit { background: rgba(37,99,235,.06); }

/* Chevron del árbol: control propio, separado del badge de detalle. */
.po-tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; cursor: pointer; color: var(--po-ink-soft); }
.po-tree-toggle:hover { color: var(--po-primary); }
.po-badge-click { cursor: pointer; }
.po-badge-click:hover { background: rgba(37,99,235,.12); }

/* ─── 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; }
/* Formularios con varias columnas (alta/edición de etapa): 480px los aplasta en una sola. */
.po-modal.po-modal-wide { max-width: 860px; }
/* La caja recibe foco (tabindex="-1") para poder escuchar Escape; el anillo del navegador ahí no
   aporta nada, el modal ya es evidente. */
.po-modal:focus, .po-modal:focus-visible { outline: none; }
.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; }
/* Cruz de cierre: el click en el fondo NO cierra (IDENTIDAD.md regla 13), así que esta es una de las
   salidas reales del modal y tiene que estar siempre visible, no aparecer al hacer hover. */
.po-modal-x { margin-left: auto; border: 0; background: transparent; color: var(--po-ink-soft); line-height: 1; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.po-modal-x .bi { font-size: 1rem; }
.po-modal-x:hover:not(:disabled) { background: var(--po-surface-2); color: var(--po-ink); }
.po-modal-x:disabled { opacity: .4; cursor: default; }
.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; }
/* inline-block + nowrap: el texto del badge ("2 subetapas ocultas") se partia en dos lineas y
   rompia la fila de la etapa. */
.po-comp-badge { display: inline-block; white-space: nowrap; background: var(--po-surface-2); color: var(--po-ink-soft); font-weight: 600; font-size: .68rem; margin-left: 8px; padding: 1px 7px; border-radius: 999px; }
.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; }
/* Nombre de una linea de receta que ademas es puerta al item (recurso o componente): hereda el
   color del texto para no llenar la tabla de azul, y se delata al pasar por encima. */
.po-link-item { color: inherit; text-decoration: none; }
.po-link-item:hover { color: var(--po-primary); text-decoration: underline; }

/* ─── 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); }
/* Consumido que superó lo pactado en una contratación. La barra se clampea al 100% y cambia de
   color; cuánto se pasó va en texto al lado, porque una barra desbordada no dice el número.
   Avisa, no bloquea: es la misma doctrina que la holgura negativa del plan. */
.po-progress-mini-danger .po-progress-mini-fill { background: var(--po-danger); }
.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 <select>: la diferencia entre "simple" y
   "estructurado" no se entiende por el rótulo, hay que poder leer qué implica cada una antes
   de decidir. Cada tarjeta resume con 2 bullets + una etiqueta "para quién es", y la elegida
   lleva un check visible: no hace falta leer el párrafo completo para saber cuál está activa. */
.po-modo-opt { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--po-border); border-radius: 8px; cursor: pointer; height: 100%; background: var(--po-surface); transition: border-color .15s, background .15s; }
.po-modo-opt:hover { border-color: var(--po-primary); }
.po-modo-opt.activa { border-color: var(--po-primary); background: #eff6ff; box-shadow: inset 0 0 0 1px var(--po-primary); }
.po-modo-opt input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--po-primary); }
.po-modo-opt .bi { color: var(--po-primary); }
.po-modo-check { position: absolute; top: 10px; right: 12px; color: var(--po-primary); font-size: 1rem; }
.po-modo-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.po-modo-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 18px; }
.po-modo-head strong { font-size: .95rem; }
.po-modo-tag { margin-left: auto; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--po-ink-soft); background: var(--po-surface-2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.po-modo-opt.activa .po-modo-tag { color: var(--po-primary-d); background: #dbeafe; }
.po-modo-features { margin: 0; padding-left: 18px; font-size: .8rem; color: var(--po-ink-soft); }
.po-modo-features li { margin-bottom: 2px; }

/* Aviso de conversión ("¿el trabajo creció?"): tip de menor jerarquía que una .po-card de contenido
   real, por eso NO es blanca ni de borde sólido — borde punteado celeste (acento de marca) para que
   se lea como sugerencia, no como otra sección de datos a la par de la planilla o el equipo. */
.po-modo-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px dashed #bae6fd; background: #f6fbff; border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.po-modo-nudge > .bi { font-size: 1.3rem; color: var(--po-accent); flex-shrink: 0; }

/* Chip de modo en la cabecera del detalle: tono neutro (informativo, no un estado ni un plan). */
.po-badge-modo { background: var(--po-surface-2); color: var(--po-ink-soft); border: 1px solid var(--po-border); }

.po-insumos > thead th { font-size: .78rem; color: var(--po-ink-soft); font-weight: 600; }
/* Cabecera pegajosa: la planilla puede tener muchos renglones y no tiene paginación, así que sin
   esto se pierde de vista qué es cada columna al bajar.
   ⚠️ `top: 0` y NO el alto del topbar: la tabla vive dentro de un `.table-responsive`, que con su
   `overflow-x` crea su PROPIO contexto de scroll. Ahí el offset no se mide contra la ventana sino
   contra el borde del contenedor, así que un `top: 54px` bajaba la cabecera 54px dentro de la tabla
   y tapaba el primer renglón — el presupuesto arrancaba en la línea 2 y nadie lo notaba salvo por el
   contador. Verificado en pantalla con el Bicicletero Doble (2026-08-13). */
.po-insumos > thead th { position: sticky; top: 0; z-index: 5; background: var(--po-surface); }
.po-insumos > tbody > tr > td { vertical-align: top; }
/* La fila nueva se distingue de la ya guardada: en una planilla que mezcla ambas, sin esto no se
   sabe qué está persistido y qué se pierde si se recarga la página. El acento a la izquierda queda
   visible incluso si la fila se sale de la pantalla por el scroll horizontal. */
.po-insumos > tbody > tr.po-insumo-nueva > td { background: #fffbeb; }
.po-insumos > tbody > tr.po-insumo-nueva > td:first-child { border-left: 3px solid var(--po-warn); }
.po-insumo-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
/* Mismo formato (píldora, tamaño chico) para las dos anotaciones de la columna Descripción, así se
   escanean igual de rápido: gris = ya identificado en el catálogo, azul = se va a crear al guardar. */
.po-insumo-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.po-insumo-tag-nuevo { background: #eff6ff; color: var(--po-primary-d); }
.po-insumo-tag-catalogo { background: var(--po-surface-2); color: var(--po-ink-soft); }

/* Barra de acciones al pie de la planilla: se separa como un "footer" propio (mismo criterio que
   .po-modal-foot) para que no se confunda con una fila más de la tabla. Guardar queda a la derecha,
   Agregar renglón a la izquierda — separar "seguir cargando" de "confirmar". */
.po-insumos-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px -20px -18px; padding: 12px 20px; background: var(--po-surface-2); border-top: 1px solid var(--po-border); border-radius: 0 0 14px 14px; }
/* .po-spacer sólo empuja dentro de .po-page-head (ver esa regla arriba); acá se repite el mismo
   contrato acotado a esta barra para no tocar el comportamiento del resto del producto. */
.po-insumos-actions .po-spacer { flex: 1; }

/* ─── CERTIFICADOS DE AVANCE ───
   La cascada de un certificado no es una escalera: el anticipo y el fondo de reparo se calculan los
   DOS sobre el Sub Total 1. Por eso las dos filas van dentro de .po-cert-cascada-grupo, con un
   conector a la izquierda que las ata al mismo origen — dibujadas como escalones, se leen como si el
   fondo de reparo saliera del subtotal de arriba, que da otro número. El IVA sí se apila, y por eso
   queda afuera del grupo. */
.po-cert-cascada { margin-top: 10px; padding: 10px 14px; background: var(--po-surface-2); border: 1px solid var(--po-border); border-radius: 10px; max-width: 560px; margin-left: auto; }
.po-cert-cascada-row { display: grid; grid-template-columns: 1fr 70px 150px; align-items: center; gap: 8px; padding: 3px 0; font-size: .86rem; }
.po-cert-cascada-row > :last-child { text-align: right; }
.po-cert-cascada-row > :nth-child(2) { text-align: right; color: var(--po-ink-soft); font-size: .8rem; }
.po-cert-cascada-row.subtotal { border-top: 1px solid var(--po-border); font-weight: 600; padding-top: 5px; }
/* El número más grande de la pantalla: es a lo que se llega y lo que se firma. */
.po-cert-cascada-row.total { border-top: 2px solid var(--po-ink); margin-top: 4px; padding-top: 7px; font-size: 1.02rem; font-weight: 700; }
.po-cert-cascada-nota { font-size: .74rem; color: var(--po-ink-soft); padding: 4px 0 2px; }
.po-cert-cascada-grupo { border-left: 2px solid var(--po-border); padding-left: 10px; margin-left: 2px; }
/* Los % y los importes editables no ensanchan la fila: entran en la misma grilla de 3 columnas. */
.po-cert-pct { width: 68px; display: inline-block; padding: 1px 4px; height: auto; font-size: .8rem; text-align: right; }
.po-cert-imp { width: 140px; display: inline-block; padding: 1px 6px; height: auto; font-size: .82rem; }
.po-cert-avance { white-space: nowrap; }
.po-cert-lineas > tbody > tr > td { vertical-align: middle; }
.po-cert-detalle { padding: 4px 0 8px; }

/* Loader de la ficha de proyecto. Ocupa alto real para que la página no parezca vacía mientras
   corren las consultas: en un proyecto grande son varios segundos y un renglón de texto no alcanza. */
.po-cargando-ficha { display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 46vh; text-align: center; color: var(--po-ink); }
/* Fila de la lista mientras se abre: el clic ya entró y el proyecto está cargando. */
.po-row-abriendo { background: var(--po-surface-2); opacity: .75; }
/* Prefijo de moneda en un KPI que muestra un valor por moneda (avance certificado bimonetario). */
.po-kpi-moneda { font-size: .62rem; font-weight: 600; color: var(--po-ink-soft); letter-spacing: .04em;
    margin-right: 4px; vertical-align: middle; }

/* ── Situación económica y financiera (lectura del directorio) ───────────────────────────────── */
.po-veredicto { background: var(--po-surface-2); border: 1px solid var(--po-border); border-radius: 8px;
    padding: 12px 14px; }
.po-veredicto-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 3px 0; }
.po-veredicto-moneda { font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: var(--po-ink-soft);
    border: 1px solid var(--po-border); border-radius: 4px; padding: 1px 6px; }
.po-vered-deben { color: var(--po-primary); }
.po-fin-tabla .po-fin-grupo td { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--po-ink-soft); background: var(--po-surface-2); font-weight: 700; padding-top: 8px; }
.po-fin-tabla .po-fin-total td { font-weight: 700; border-top: 2px solid var(--po-border); }
.po-fin-ok { color: var(--po-success, #16a34a); }
.po-fin-deben { color: var(--po-primary); font-weight: 700; }

/* ── Densidad de la ficha de proyecto ─────────────────────────────────────────────────────────
   Una obra tiene 29 etapas, 20 certificados y 22 documentos: cada píxel de alto que se gana es un
   renglón más de lo que el usuario vino a mirar. Se comprime el cromo, nunca el dato. */
.po-ficha-cab { padding-top: 6px; padding-bottom: 8px; }
.po-ficha-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px;
    padding: 2px 0; }
.po-ficha-toggle:hover { color: var(--po-primary); }
.po-card { padding: 12px 14px; }
.po-kpis { gap: 8px; margin-bottom: 10px; }
.po-kpi { padding: 7px 11px; }
.po-kpi-value { font-size: 1.06rem; }
.table-sm > :not(caption) > * > * { padding-top: .3rem; padding-bottom: .3rem; }
/* Lo que hace alta una fila no es el padding de la celda sino lo que se le mete adentro: un botón
   con su padding propio, una barrita con margen, un badge. Se comprimen ESOS, no el dato. */
.po-card .table-sm .btn-sm { padding: .1rem .38rem; font-size: .78rem; line-height: 1.35; }
/* Los iconos de acción quedan pegados sin esto: se leen como un bloque y no como botones distintos. */
.po-card .table-sm .btn-sm + .btn-sm { margin-left: 2px; }
.po-card .table-sm .po-progress-mini { margin-bottom: 0; vertical-align: middle; }
.po-card .table-sm .po-comp-badge { padding: 0 5px; }
/* Incidencia sobre el proyecto completo: al lado del relativo, no en un segundo renglón. */
.po-inc-abs { font-size: .68rem; color: var(--po-ink-soft); margin-left: 6px; }

/* ── Escala de texto de las tablas de la ficha ────────────────────────────────────────────────
   El dato baja de 16 a 15 px. Es UNA prueba acotada a la ficha de proyecto (por eso la clase
   propia y no `.po-card .table`): una obra tiene 29 etapas y 22 documentos, y ahí el píxel por
   fila se nota; en una pantalla de seis renglones sólo se leería peor.

   Lo secundario NO se toca a mano: `.small` de Bootstrap es `em`, así que sigue al padre y baja
   solo a ~13 px. Los rótulos, badges y códigos están en `rem` —anclados al root— y se quedan
   donde están: si bajaran todos juntos, la jerarquía se conservaría en proporción pero el
   escalón más chico caería por debajo de los 10 px, que ya no se lee. */
.po-tabla-ficha { font-size: .94rem; }
/* Los importes: más chicos que el texto y SIN negrita. El peso 600 de `.po-money` está pensado para
   un total suelto, no para una grilla donde cada fila trae cuatro; ahí todo grita y no destaca nada.
   Se conserva `tabular-nums`, que es lo que hace que las columnas de cifras se alineen. */
.po-tabla-ficha .po-money { font-weight: 400; font-size: .86rem; }
/* El encabezado tampoco necesita peso: ya se distingue por versalita, color y el filete inferior. */
.po-tabla-ficha thead th { font-weight: 500; }
/* Nombre de una etapa hoja: mismo cuerpo que la madre, sin el peso. */
.po-etapa-hoja { font-weight: 400; }
.po-page-head { margin-bottom: 8px; }
/* KPI en alerta (plazo vencido): el borde tiñe sin gritar. */
.po-kpi-alerta { border-color: var(--po-danger, #dc2626); background: color-mix(in srgb, var(--po-danger, #dc2626) 4%, var(--po-surface)); }
/* KPI cuyo valor es una FRASE, no un número. El `nowrap` de .po-kpi-value existe para que
   "ARS 628,685,264" no se parta al medio; aplicado a "vencido hace 2 años y 5 meses" corta el texto
   contra el borde de la card y el usuario lee media respuesta. */
.po-kpi-frase { white-space: normal; font-size: 1rem; line-height: 1.2; text-wrap: balance; }
/* Aviso de que el indicador todavía no tiene contra qué medirse. Ámbar, no rojo: no es un error. */
.po-desvio-aviso { color: var(--po-warning, #b45309); }

/* ── Resumen para dirección ─────────────────────────────────────────────────────────────────────
   Las cuatro respuestas van en cajas del mismo tamaño y peso: ninguna es "la principal", el orden
   ya dice cuál se lee primero. La pregunta va arriba y en texto normal —no en mayúsculas como los
   KPI de la ficha— porque acá el rótulo ES una pregunta y tiene que leerse como tal. */
.po-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.po-res-caja { display: flex; flex-direction: column; gap: 4px; }
.po-res-preg { font-size: .9rem; font-weight: 600; color: var(--po-ink); }
/* El valor no lleva nowrap: acá un importe puede venir en dos monedas, y cortarlo contra el borde
   haría que se lea media respuesta. Es la lección de los KPI cuyo valor es una frase. */
.po-res-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.po-res-ayuda { font-size: .78rem; color: var(--po-ink-soft); margin-top: auto; }
/* Destaque sobrio: un borde, no un fondo de color. La caja tiene que seguir siendo legible. */
.po-res-destaca { border-color: var(--po-primary); box-shadow: inset 3px 0 0 var(--po-primary); }
.po-res-alerta { border-color: #f59e0b; box-shadow: inset 3px 0 0 #f59e0b; }
.po-res-alertas { padding-left: 18px; }
.po-res-alertas li + li { margin-top: 4px; }

@media (max-width: 575px) {
    .po-res-valor { font-size: 1.28rem; }
}

/* La descripción del proyecto en el resumen: es prosa larga, no un dato de tabla, así que respira
   distinto del resto de las cards. */
.po-res-descripcion p { line-height: 1.5; color: var(--po-ink); }

/* Aviso informativo de menor jerarquía que una card: explica una decisión del sistema (por qué los
   importes van separados por moneda) sin competir visualmente con los datos. */
.po-tip { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 14px;
          font-size: .85rem; color: #1e3a8a; }
.po-tip .bi { color: var(--po-primary); margin-right: 4px; }

/* El titular del resumen: una sola frase, del tamaño de un subtítulo. No es un h1 —el nombre del
   proyecto ya lo es— pero tiene que ganarle en peso al resto del texto de la pantalla. */
.po-res-titular { font-size: 1.05rem; font-weight: 600; color: var(--po-ink);
                  border-left: 4px solid var(--po-primary); padding: 8px 0 8px 12px; }

/* ── Las cajas se abren ─────────────────────────────────────────────────────────────────────────
   La afordancia va en la lupa y en el hover, no en un borde permanente: las cinco cajas son
   clickeables, así que marcarlas todas todo el tiempo no distingue nada y sólo agrega ruido a la
   pantalla que se le muestra a alguien de afuera. */
.po-res-abrible { cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.po-res-abrible:hover { border-color: var(--po-primary); box-shadow: 0 2px 10px rgba(37,99,235,.14); }
.po-res-abrible:focus-visible { outline: 2px solid var(--po-primary); outline-offset: 2px; }
.po-res-preg { display: flex; align-items: center; gap: 6px; }
/* La lupa vive apagada y se enciende con el hover: presente para que se sepa que hay algo abajo,
   callada para que no compita con la pregunta. */
.po-res-lupa { margin-left: auto; font-size: .78rem; color: var(--po-ink-soft); opacity: .45; }
.po-res-abrible:hover .po-res-lupa { opacity: 1; color: var(--po-primary); }

/* ── De dónde sale este número ──────────────────────────────────────────────────────────────────
   La cuenta escrita para que la lea alguien de afuera del proyecto. Prioridad absoluta a que los
   importes se puedan seguir con el dedo: columna derecha, tabulares, y los cortes marcados con
   filete en vez de color —esto se imprime y se adjunta a un expediente—. */
.po-origen { max-height: 68vh; overflow-y: auto; }
.po-origen-def { font-size: .95rem; color: var(--po-ink); margin-bottom: 12px; }
/* Los datos del papel del que cuelga todo: rótulo y valor en dos columnas, no en prosa. */
.po-origen-doc { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 14px;
                 font-size: .84rem; background: var(--po-surface-2); border-radius: 8px; padding: 10px 12px; }
.po-origen-doc dt { color: var(--po-ink-soft); font-weight: 500; }
.po-origen-doc dd { margin: 0; color: var(--po-ink); }
.po-origen-bloque + .po-origen-bloque { margin-top: 18px; }
.po-origen-moneda { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--po-ink-soft);
                    text-transform: uppercase; margin-bottom: 4px; }
.po-origen-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.po-origen-tabla td { padding: 4px 6px; vertical-align: top; }
.po-origen-concepto { width: 100%; }
.po-origen-fecha { white-space: nowrap; color: var(--po-ink-soft); font-size: .8rem; text-align: right; }
.po-origen-importe { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* La referencia del documento (período, número externo) va debajo del concepto: es lo que permite
   encontrar el papel en una carpeta, pero no compite con el renglón. */
.po-origen-ref { display: block; font-size: .78rem; color: var(--po-ink-soft); }
/* Detalle: los documentos que componen un subtotal. Indentados, para que se lea que cuelgan de él. */
.po-origen-detalle > td:first-child { padding-left: 20px; }
.po-origen-detalle { color: var(--po-ink-soft); }
.po-origen-suma > td, .po-origen-resta > td { border-top: 1px solid var(--po-border); }
.po-origen-subtotal > td { border-top: 1px solid var(--po-border); font-weight: 600; }
.po-origen-resultado > td { border-top: 2px solid var(--po-ink); border-bottom: 2px solid var(--po-ink);
                            font-weight: 700; font-size: .95rem; }
.po-origen-info > td { color: var(--po-ink-soft); font-style: italic; }
/* La diferencia sin explicar se marca en ámbar: no es un error de cálculo, es algo para ir a mirar. */
.po-origen-diferencia > td { color: #b45309; }
.po-origen-notas { margin: 14px 0 0; padding-left: 18px; font-size: .82rem; color: var(--po-ink-soft); }
.po-origen-notas li + li { margin-top: 3px; }
.po-origen-fuentes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
                     padding-top: 12px; border-top: 1px solid var(--po-border); }
.po-origen-fuentes-rotulo { font-size: .82rem; color: var(--po-ink-soft); }
/* Marca de "abre al lado". Va en el botón y no en cada renglón: repetida veinte veces en la columna
   de conceptos ensuciaría la cuenta, que es lo que se vino a leer. */
.po-origen-fuera { font-size: .7rem; opacity: .55; margin-left: 2px; }
.po-origen-pie { font-size: .78rem; color: var(--po-ink-soft); margin: 10px 0 0; }