/* ═══════════════════════════════════════════════════════════════
 * Gestor+ · Hoja de estilos compartida del shell
 * Extraída de views/formulacion.html para que /formulacion y
 * /seguimiento usen EXACTAMENTE el mismo sistema de diseño
 * (topbar, aside, tarjetas, tablas, matriz de calor, píldoras…).
 * Un cambio aquí aplica a los dos módulos.
 * ═══════════════════════════════════════════════════════════════ */
/* ─── TOKENS ─────────────────────────────────────────────────── */
    :root {
      --amber: #F2A020;
      --amber-dark: #C07C10;
      --amber-tint: #FEF3DC;
      --amber-glow: rgba(242,160,32,.18);
      --carbon: #141414;
      --carbon-mid: #1E1E1E;
      --carbon-light: #252525;
      --carbon-border: rgba(255,255,255,.07);
      --carbon-border2: rgba(255,255,255,.12);
      --text-muted: rgba(255,255,255,.40);
      --text-dim: rgba(255,255,255,.60);
      --text-base: rgba(255,255,255,.85);
      --text-bright: #FFFFFF;
      --content-bg: #F0EDE8;
      --font-d: 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-b: 'Inter', system-ui, sans-serif;
      --topbar-h: 72px;
      --sidebar-w: 260px;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --shadow-card: 0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
      --shadow-elev: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
      --green: #22C55E;
      --green-dim: rgba(34,197,94,.12);
      --red: #EF4444;
      --red-dim: rgba(239,68,68,.12);
      --blue: #3B82F6;
      --blue-dim: rgba(59,130,246,.12);
      --orange: #F97316;
      /* ── gm-* tokens (shared with landing / PTEP panels) ── */
      --gm-amber: #F2A020; --gm-amber-dark: #C07C10; --gm-amber-tint: #FEF3DC;
      --gm-ink: #141414; --gm-text: #374151; --gm-muted: #7A7065;
      --gm-line: #E8E3D8; --gm-gray-50: #FAFAF8;
      --gm-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
      --gm-radius: 12px; --gm-radius-sm: 8px; --gm-radius-pill: 100px;
      --gm-shadow-lg: 0 8px 32px rgba(0,0,0,.14); --gm-ease: cubic-bezier(.4,0,.2,1);
      /* ── formulacion env colors (distinct from admin/carbon) ── */
      --fe-topbar:  #D97706;
      --fe-sidebar: #ffffff;
      --fe-border:  rgba(255,255,255,.2);
    }

    /* ─── RESET ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { height: 100%; }
    body {
      font-family: var(--font-b);
      background: var(--carbon);
      color: var(--text-base);
      height: 100%;
      overflow: hidden;
    }

    /* ─── LOADING SCREEN ─────────────────────────────────────────── */
    #loading-screen {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--carbon);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 20px;
      transition: opacity .4s ease;
    }
    #loading-screen img { width: 64px; height: 64px; object-fit: contain; }
    #loading-screen .loading-ring {
      width: 40px; height: 40px;
      border: 3px solid rgba(242,160,32,.2);
      border-top-color: var(--amber);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    #loading-screen p { font-family: var(--font-b); font-size: 13px; color: var(--text-muted); letter-spacing: .5px; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ─── APP SHELL ───────────────────────────────────────────────── */
    #app {
      display: none;
      flex-direction: column;
      height: 100%;
    }

    /* ─── TOP BAR ────────────────────────────────────────────────── */
    .topbar {
      height: var(--topbar-h);
      min-height: var(--topbar-h);
      background: var(--fe-topbar);
      border-bottom: 1px solid var(--fe-border);
      display: flex; align-items: center;
      padding: 0 20px;
      gap: 0;
      position: relative; z-index: 100;
      flex-shrink: 0;
    }
    .topbar-brand {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
      margin-right: 16px;
    }
    .topbar-brand img {
      width: 28px; height: 28px; object-fit: contain;
    }
    .topbar-brand-name {
      font-family: var(--font-d); font-size: 15px; font-weight: 800;
      color: var(--text-bright); letter-spacing: -.3px;
    }
    .topbar-badge {
      background: var(--amber); color: #fff;
      font-family: var(--font-d); font-size: 10px; font-weight: 700;
      letter-spacing: .8px; text-transform: uppercase;
      padding: 3px 8px; border-radius: 4px;
      white-space: nowrap;
    }
    .topbar-sep {
      width: 1px; height: 22px;
      background: var(--carbon-border2);
      margin: 0 16px; flex-shrink: 0;
    }
    .topbar-view-label {
      font-size: 12px; color: var(--text-muted);
      font-family: var(--font-b); white-space: nowrap;
    }
    .topbar-view-label span { color: var(--text-dim); font-weight: 500; margin-left: 4px; }
    .topbar-spacer { flex: 1; }
    .topbar-nav {
      display: flex; align-items: center; gap: 4px;
      margin-right: 8px;
    }
    .topbar-nav a {
      font-size: 12px; font-weight: 500; color: var(--text-dim);
      text-decoration: none; padding: 5px 10px;
      border-radius: var(--radius-sm);
      transition: background .15s, color .15s;
    }
    .topbar-nav a:hover { background: var(--carbon-light); color: var(--text-bright); }
    .topbar-avatar {
      display: flex; align-items: center; gap: 10px;
      cursor: pointer; padding: 4px 10px;
      border-radius: var(--radius-md);
      transition: background .15s;
    }
    .topbar-avatar:hover { background: var(--carbon-light); }
    .topbar-avatar .av-circle {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--amber); display: flex; align-items: center;
      justify-content: center; font-size: 12px; font-weight: 700;
      color: #000; flex-shrink: 0;
      overflow: hidden;
    }
    .topbar-avatar .av-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .topbar-avatar .av-name { font-size: 12px; font-weight: 500; color: var(--text-dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ─── TOPBAR: SEARCH BAR (dark-adapted) ─────────────────────── */
    .topbar-search {
      position: absolute; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 8px;
      width: 300px; height: 34px;
      background: rgba(255,255,255,.07);
      border: 1.5px solid transparent; border-radius: 100px;
      padding: 0 14px; cursor: text;
      transition: width .28s var(--gm-ease), background .22s, border-color .22s, box-shadow .22s;
    }
    .topbar-search:hover, .topbar-search:focus-within {
      width: 440px; background: #fff;
      border-color: rgba(255,255,255,.6); cursor: default;
      box-shadow: 0 4px 20px rgba(0,0,0,.2);
    }
    .topbar-search-icon {
      font-size: .8rem; color: rgba(255,255,255,.45); flex-shrink: 0; transition: color .18s;
    }
    .topbar-search:hover .topbar-search-icon,
    .topbar-search:focus-within .topbar-search-icon { color: #6B7280; }
    .topbar-search input {
      flex: 1; border: none; background: transparent; outline: none;
      font-family: var(--font-b); font-size: .84rem; color: var(--text-base); min-width: 0;
      transition: color .18s;
    }
    .topbar-search:hover input, .topbar-search:focus-within input { color: #111; }
    .topbar-search input::placeholder { color: rgba(255,255,255,.3); transition: color .18s; }
    .topbar-search:hover input::placeholder,
    .topbar-search:focus-within input::placeholder { color: #9CA3AF; }
    .topbar-search-kbd {
      flex-shrink: 0; font-family: var(--font-b); font-size: .68rem;
      color: rgba(255,255,255,.3); background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 1px 6px;
      opacity: 0; transition: opacity .22s, color .18s, background .18s, border-color .18s; pointer-events: none;
    }
    .topbar-search:hover .topbar-search-kbd,
    .topbar-search:focus-within .topbar-search-kbd {
      opacity: 1; color: #6B7280; background: #F3F4F6; border-color: #D1D5DB;
    }

    /* ─── TOPBAR: NAV ACTIONS (Bell / Apps / User) ───────────────── */
    .gm-nav-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
    .gm-bell-menu, .gm-apps-menu, .gm-user-menu { position: relative; display: inline-flex; align-items: center; }

    /* Bell + Apps icon buttons — dark theme */
    .gm-bell-btn, .gm-apps-btn {
      position: relative; width: 38px; height: 38px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.65); font-size: .95rem; transition: all .2s;
    }
    .gm-bell-btn:hover, .gm-apps-btn:hover {
      background: #fff; border-color: #fff; color: #374151;
      box-shadow: 0 2px 10px rgba(0,0,0,.15);
    }
    .gm-bell-badge {
      position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px;
      border-radius: var(--gm-radius-pill); background: #ef4444; border: 2px solid var(--carbon);
      display: flex; align-items: center; justify-content: center;
      font-size: .62rem; font-weight: 700; color: #fff;
    }
    .gm-bell-badge[hidden] { display: none !important; }
    .gm-bell-badge-pulse {
      position: absolute; inset: -3px; border-radius: 50%;
      background: rgba(239,68,68,.35); animation: gmBellPulse 1.8s ease-in-out infinite;
    }
    @keyframes gmBellPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.5);opacity:0} }

    /* Dropdown panels — always light/white */
    .gm-bell-panel, .gm-apps-panel, .gm-user-panel {
      position: absolute; top: calc(100% + 10px); right: 0;
      background: #fff; border: 1px solid var(--gm-line); border-radius: var(--gm-radius);
      box-shadow: var(--gm-shadow-lg); z-index: 9000; overflow: hidden;
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: all .2s var(--gm-ease);
    }
    .gm-bell-panel { width: 340px; }
    .gm-apps-panel { width: 320px; }
    .gm-user-panel { width: 320px; }
    .gm-bell-menu.open .gm-bell-panel,
    .gm-apps-menu.open .gm-apps-panel,
    .gm-user-menu.open .gm-user-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }

    .gm-bell-panel-head {
      padding: 14px 16px 10px; display: flex; align-items: flex-start;
      justify-content: space-between; border-bottom: 1px solid var(--gm-line);
    }
    .gm-bell-panel-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gm-muted); }
    .gm-bell-panel-title { font-family:var(--gm-font-display); font-weight:700; font-size:.95rem; color:var(--gm-ink); margin-top:2px; }
    .gm-bell-panel-count { background:var(--gm-amber-tint); color:var(--gm-amber-dark); font-size:.78rem; font-weight:700; padding:3px 8px; border-radius:var(--gm-radius-pill); }
    .gm-bell-panel-list { max-height:280px; overflow-y:auto; }
    .gm-bell-panel-empty { padding:32px 16px; text-align:center; color:var(--gm-muted); font-size:.9rem; }
    .gm-bell-panel-empty i { font-size:1.8rem; margin-bottom:8px; opacity:.5; display:block; }
    .gm-bell-panel-foot, .gm-apps-panel-foot, .gm-user-panel-foot { padding:10px 16px; border-top:1px solid var(--gm-line); }
    .gm-bell-panel-more, .gm-apps-panel-more {
      font-size:.85rem; font-weight:600; color:var(--gm-amber-dark);
      display:flex; align-items:center; gap:6px; text-decoration:none;
    }
    .gm-bell-panel-more:hover, .gm-apps-panel-more:hover { color:var(--gm-ink); }

    .gm-apps-panel-head { padding:14px 16px 10px; border-bottom:1px solid var(--gm-line); }
    .gm-apps-panel-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gm-muted); display:block; }
    .gm-apps-panel-title { font-family:var(--gm-font-display); font-weight:700; font-size:.95rem; color:var(--gm-ink); display:block; margin-top:2px; }
    .gm-apps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:10px; }
    .gm-app-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:var(--gm-radius-sm); text-decoration:none; transition:background .15s; }
    .gm-app-tile:hover { background:var(--gm-gray-50); }
    .gm-app-tile-ico { width:40px; height:40px; border-radius:10px; background:var(--tile,#fff); border:1px solid var(--gm-line); box-shadow:0 1px 3px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
    .gm-app-tile-ico img { width:26px; height:26px; object-fit:contain; }
    .gm-app-tile-name { font-size:.72rem; font-weight:600; color:var(--gm-ink); text-align:center; line-height:1.1; }

    /* User trigger — dark theme */
    .gm-user-trigger {
      display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
      padding:4px 8px; border-radius:var(--gm-radius-pill); transition:background .15s;
    }
    .gm-user-trigger:hover { background:rgba(255,255,255,.07); }
    .gm-user-avatar { width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--gm-amber-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .gm-user-avatar img { width:100%; height:100%; object-fit:cover; display:none; }
    .gm-user-avatar.has-photo img { display:block; }
    .gm-user-avatar.has-photo .gm-user-initials { display:none; }
    .gm-user-initials { font-family:var(--gm-font-display); font-weight:700; font-size:.78rem; color:var(--gm-amber-dark); }
    .gm-user-avatar-lg { width:44px; height:44px; }
    .gm-user-name { font-family:var(--gm-font-display); font-weight:600; font-size:.88rem; color:rgba(255,255,255,.85); }
    .gm-user-chev { font-size:.7rem; color:rgba(255,255,255,.4); transition:transform .2s; }
    .gm-user-menu.open .gm-user-chev { transform:rotate(180deg); }

    .gm-user-panel-head { padding:16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--gm-line); background:var(--gm-gray-50); }
    .gm-user-panel-meta { min-width:0; }
    .gm-user-panel-name { font-family:var(--gm-font-display); font-weight:700; font-size:.95rem; color:var(--gm-ink); }
    .gm-user-panel-mail { font-size:.78rem; color:var(--gm-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .gm-user-section { padding:8px; }
    .gm-user-section-label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gm-muted); padding:6px 8px 4px; }
    .gm-user-action { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--gm-radius-sm); text-decoration:none; color:var(--gm-text); transition:background .15s; cursor:pointer; }
    .gm-user-action:hover { background:var(--gm-gray-50); color:var(--gm-ink); }
    .gm-user-action-ico { width:32px; height:32px; border-radius:8px; background:var(--gm-amber-tint); color:var(--gm-amber-dark); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
    .gm-user-action-text { display:flex; flex-direction:column; min-width:0; }
    .gm-user-action-title { font-weight:600; font-size:.88rem; color:var(--gm-ink); }
    .gm-user-action-desc { font-size:.76rem; color:var(--gm-muted); }
    .gm-user-logout { border:none; background:none; width:100%; text-align:left; }
    .gm-user-logout .gm-user-action-ico { background:rgba(185,28,28,.08); color:#b91c1c; }
    .gm-user-logout:hover { background:rgba(185,28,28,.06) !important; }
    .gm-user-panel-foot { padding:8px; border-top:1px solid var(--gm-line); }

    /* ─── BODY ROW ────────────────────────────────────────────────── */
    .body-row {
      flex: 1; display: flex; overflow: hidden;
      position: relative;
    }

    /* ─── SIDEBAR ─────────────────────────────────────────────────── */
    .sidebar {
      width: var(--sidebar-w); min-width: var(--sidebar-w);
      background: var(--fe-sidebar);
      border-right: 1px solid rgba(0,0,0,.08);
      display: flex; flex-direction: column;
      overflow-y: auto; overflow-x: visible;
      flex-shrink: 0;
      transition: width .26s cubic-bezier(.4,0,.2,1), min-width .26s cubic-bezier(.4,0,.2,1);
      position: relative; z-index: 10;
    }
    .sidebar::-webkit-scrollbar { width: 4px; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }
    .sidebar.collapsed { width: 58px; min-width: 58px; }

    /* ── Toggle button ── */
    .sidebar-toggle {
      position: absolute;
      left: var(--sidebar-w); top: 18px;
      transform: translateX(-50%);
      width: 28px; height: 28px;
      background: #fff; border: 1.5px solid rgba(0,0,0,.11); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 200; font-size: .66rem; color: #9CA3AF;
      box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 0 0 3px rgba(255,255,255,.95);
      transition: left .26s cubic-bezier(.4,0,.2,1), background .15s, color .15s, border-color .15s, box-shadow .15s;
    }
    .sidebar-toggle:hover {
      background: var(--amber); border-color: var(--amber); color: #fff;
      box-shadow: 0 3px 12px rgba(242,160,32,.4), 0 0 0 3px rgba(255,255,255,.95);
    }
    .sidebar-toggle .toggle-icon { transition: transform .26s cubic-bezier(.4,0,.2,1); }
    #fe-body.sb-collapsed .sidebar-toggle { left: 58px; }
    #fe-body.sb-collapsed .sidebar-toggle .toggle-icon { transform: rotate(180deg); }

    /* ── Sidebar header ── */
    .sidebar-head {
      padding: 13px 13px 11px;
      border-bottom: 1px solid rgba(0,0,0,.07);
      transition: padding .26s;
      flex-shrink: 0;
    }
    .sidebar.collapsed .sidebar-head { padding: 12px 0 10px; border-bottom: none; }
    .sidebar-head-icon {
      display: none; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px;
      background: var(--amber-tint); color: var(--amber-dark);
      font-size: 1rem; margin: 0 auto;
    }
    .sidebar.collapsed .sidebar-head-icon { display: flex; }
    .sidebar-head-row {
      display: flex; align-items: center; gap: 10px;
      transition: opacity .18s;
    }
    .sidebar.collapsed .sidebar-head-row { opacity: 0; visibility: hidden; height: 0; margin: 0; overflow: hidden; }
    .sidebar-head-row-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--amber-tint); color: var(--amber-dark); font-size: .95rem;
    }
    .sidebar-app-label {
      font-family: var(--font-d); font-size: .8rem; font-weight: 800;
      letter-spacing: .03em; color: #111827;
    }
    .sidebar-app-sub { font-size: .67rem; color: #9CA3AF; }

    /* ── Section labels ── */
    .sidebar-section-label {
      font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase; color: #9CA3AF;
      padding: 14px 16px 6px;
      white-space: nowrap; overflow: hidden;
      transition: opacity .18s, height .22s, padding .22s;
      flex-shrink: 0;
    }
    .sidebar.collapsed .sidebar-section-label {
      opacity: 0; visibility: hidden; height: 0; padding: 0; pointer-events: none;
    }

    /* ── Nav items ── */
    .sidebar-item {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 12px;
      cursor: pointer; text-decoration: none;
      border-left: 3px solid transparent;
      transition: background .12s, border-color .12s;
      position: relative; user-select: none;
    }
    .sidebar-item:hover { background: rgba(0,0,0,.04); }
    .sidebar-item.active { background: rgba(242,160,32,.1); border-left-color: var(--amber); }
    .sidebar-item .si-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: .88rem; color: #9CA3AF; flex-shrink: 0;
      transition: background .12s, color .12s, transform .12s, box-shadow .12s;
    }
    .sidebar-item:hover .si-icon { background: rgba(0,0,0,.06); color: #374151; }
    .sidebar-item.active .si-icon { background: var(--amber-tint); color: var(--amber-dark); }
    .sidebar-item .si-label {
      flex: 1; font-size: 13px; font-weight: 500; color: #374151;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: opacity .18s, width .22s;
    }
    .sidebar-item.active .si-label { color: #111827; font-weight: 600; }
    .sidebar-item .si-badge {
      font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px;
      background: rgba(0,0,0,.06); color: #9CA3AF;
      transition: opacity .18s;
    }
    .sidebar-item.active .si-badge { background: var(--amber); color: #000; }
    .sidebar-item .si-badge.badge-wiz {
      background: rgba(242,160,32,.15); color: var(--amber-dark);
      font-size: 9px; letter-spacing: .5px;
    }

    /* ── Collapsed state ── */
    .sidebar.collapsed .sidebar-item {
      padding: 7px 0; justify-content: center; border-left: none; gap: 0;
    }
    .sidebar.collapsed .si-label, .sidebar.collapsed .si-badge {
      opacity: 0; pointer-events: none; flex: 0 0 0; width: 0; overflow: hidden; padding: 0; margin: 0;
    }
    .sidebar.collapsed .sidebar-item.active { background: transparent; }
    .sidebar.collapsed .sidebar-item.active .si-icon {
      background: var(--amber); color: #fff;
      box-shadow: 0 3px 10px rgba(242,160,32,.38);
    }
    .sidebar.collapsed .sidebar-item:hover .si-icon { transform: scale(1.1); }

    /* Tooltips when collapsed */
    .sidebar.collapsed .sidebar-item::after {
      content: attr(data-tip);
      position: absolute; left: calc(100% + 12px); top: 50%;
      transform: translateY(-50%);
      background: #1C1917; color: #fff;
      padding: 5px 11px; border-radius: 7px;
      font-size: .74rem; font-family: var(--font-b); font-weight: 500;
      white-space: nowrap; opacity: 0; pointer-events: none;
      transition: opacity .14s; z-index: 500;
      box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }
    .sidebar.collapsed .sidebar-item::before {
      content: ''; position: absolute;
      left: calc(100% + 7px); top: 50%; transform: translateY(-50%);
      border: 5px solid transparent; border-right-color: #1C1917;
      opacity: 0; pointer-events: none; transition: opacity .14s; z-index: 500;
    }
    .sidebar.collapsed .sidebar-item:hover::after,
    .sidebar.collapsed .sidebar-item:hover::before { opacity: 1; }

    /* ── Footer elements ── */
    .sidebar-divider {
      height: 1px; background: rgba(0,0,0,.07); margin: 10px 16px;
      transition: opacity .18s;
    }
    .sidebar.collapsed .sidebar-divider { opacity: 0; pointer-events: none; }
    .sidebar-stats {
      margin: 4px 12px 0; background: rgba(0,0,0,.04);
      border: 1px solid rgba(0,0,0,.07); border-radius: var(--radius-md); padding: 12px;
    }
    .sidebar-stats-title {
      font-size: 10px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px;
    }
    .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-cell { background: rgba(0,0,0,.04); border-radius: var(--radius-sm); padding: 8px 10px; }
    .stat-cell .sc-val {
      font-family: var(--font-d); font-size: 20px; font-weight: 800;
      color: #111827; line-height: 1;
    }
    .stat-cell .sc-label { font-size: 10px; color: #9CA3AF; margin-top: 2px; }
    .stat-cell.accent .sc-val { color: var(--amber); }
    .stat-cell.ok .sc-val { color: var(--green); }
    .stat-cell.warn .sc-val { color: #FBBF24; }
    .stat-cell.red .sc-val { color: var(--red); }
    .sidebar-spacer { flex: 1; min-height: 20px; }
    .btn-planitone-home {
      margin: 0;
      padding: 18px 12px;
      display: flex; align-items: center; justify-content: center; text-decoration: none;
      background: var(--fe-topbar); position: relative;
      transition: padding .4s cubic-bezier(.34,1.56,.64,1), background .3s;
      overflow: hidden;
    }
    /* Hover: la banda crece para dar pista de lanzamiento */
    .btn-planitone-home:hover:not(.is-launching) { padding-top: 46px; padding-bottom: 46px; }
    .btn-planitone-home.is-launching { padding-top: 120px; padding-bottom: 64px; }
    .sidebar.collapsed .btn-planitone-home { padding: 0; height: 0; margin: 0; overflow: hidden; pointer-events: none; }

    /* ── Logo PlanItOne (2 frames) + cohete del emblema sobre la "O" ──
       Emblema (f1) → cohete acoplado; al despegar queda el frame2 (hueco). */
    .pt-logo-wrap {
      --o-x: 64.04%;    /* centro de la O: (504,112) medido en el logo 787×200 */
      --o-y: 56%;
      --rk-w: 132px;    /* tamaño del cohete (posición anclada por el centro de la ventana) */
      --rk-cy: 50.7%;   /* centro de la ventana: y=613 de 1209 en el PNG */
      position: relative; display: inline-block; line-height: 0;
      z-index: 1;       /* la plataforma queda por encima de las partículas de fondo */
    }
    .pt-logo { width: 200px; height: auto; display: block; }
    .pt-logo-f1 { transition: opacity .3s ease; }
    .pt-logo-f2 { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
    /* Cohete (imagen) centrado por su ventana sobre la O */
    .pt-rocket {
      position: absolute; left: var(--o-x); top: var(--o-y);
      width: var(--rk-w);
      transform: translate(-50%, calc(-1 * var(--rk-cy)));
      opacity: 0; pointer-events: none; z-index: 2;
      transition: opacity .3s ease, transform .55s cubic-bezier(.34,1.4,.6,1);
      will-change: transform, opacity;
    }
    .pt-rocket-img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
    /* Aura/halo de energía del motor (detrás del cohete) */
    .pt-glow {
      position: absolute; left: 50%; top: var(--rk-cy);
      width: calc(var(--rk-w) * 1.5); height: calc(var(--rk-w) * 1.5);
      transform: translate(-50%, -50%) scale(.4);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,228,160,.55), rgba(249,115,22,.20) 42%, transparent 68%);
      opacity: 0; z-index: -2; filter: blur(3px);
      transition: opacity .45s ease, transform .45s ease;
    }
    /* Llama del motor (entre las aletas) */
    .pt-flame {
      position: absolute; left: 50%; top: 84%; z-index: 0;
      width: calc(var(--rk-w) * .2); height: calc(var(--rk-w) * .5);
      border-radius: 50% 50% 50% 50% / 36% 36% 64% 64%;
      background: linear-gradient(#FFF6D5, #FBBF24 36%, #F97316 66%, #EF4444);
      transform: translate(-50%, 0) scaleY(0); transform-origin: top center;
      opacity: 0; filter: blur(.5px);
      transition: opacity .25s, transform .3s;
    }
    /* El emblema se desvanece y el cohete acopla en su lugar (hover y click) */
    .btn-planitone-home:hover:not(.is-launching) .pt-logo-f1,
    .btn-planitone-home.is-launching .pt-logo-f1 { opacity: 0; }
    .btn-planitone-home:hover:not(.is-launching) .pt-logo-f2,
    .btn-planitone-home.is-launching .pt-logo-f2 { opacity: 1; }

    /* HOVER — la plataforma flota (estación en vuelo), el motor entra en ralentí */
    .btn-planitone-home:hover:not(.is-launching) .pt-logo-wrap { animation: ptFloat 5.4s ease-in-out infinite; }
    @keyframes ptFloat {
      0%,100% { transform: translateY(0)     rotate(-.45deg); }
      50%     { transform: translateY(-2.5px) rotate(.45deg); }
    }
    .btn-planitone-home:hover:not(.is-launching) .pt-rocket { opacity: 1; animation: ptIdle 3.6s ease-in-out infinite; }
    @keyframes ptIdle {
      0%,100% { transform: translate(-50%, calc(-1*var(--rk-cy)))       rotate(-.3deg); }
      50%     { transform: translate(-50%, calc(-1*var(--rk-cy) - 2px)) rotate(.3deg); }
    }
    .btn-planitone-home:hover:not(.is-launching) .pt-glow { opacity: 1; animation: ptGlowPulse 3.6s ease-in-out infinite; }
    @keyframes ptGlowPulse {
      0%,100% { opacity:.5;  transform: translate(-50%,-50%) scale(.76); }
      50%     { opacity:.82; transform: translate(-50%,-50%) scale(.88); }
    }
    .btn-planitone-home:hover:not(.is-launching) .pt-flame { opacity: 1; transform: translate(-50%,0) scaleY(1); animation: ptFlame .34s ease-in-out infinite alternate; }
    @keyframes ptFlame {
      from { transform: translate(-50%,0)  scaleY(1);    opacity:.88; }
      to   { transform: translate(-50%,1px) scaleY(1.32); opacity:1; }
    }

    /* CLICK — secuencia de despegue: anticipación → ignición → ascenso → alejarse */
    .btn-planitone-home.is-launching .pt-rocket { opacity: 1; animation: ptLaunch 1.5s forwards; }
    @keyframes ptLaunch {
      0%   { transform: translate(-50%, calc(-1*var(--rk-cy)))          scale(1)        rotate(0);    animation-timing-function: cubic-bezier(.3,0,.3,1); }
      11%  { transform: translate(-50%, calc(-1*var(--rk-cy) + 11px))   scale(1.06,.9)  rotate(-1.2deg); animation-timing-function: cubic-bezier(.4,0,.6,1); }  /* anticipación: agacharse + squash */
      21%  { transform: translate(-50%, calc(-1*var(--rk-cy) + 7px))    scale(1,.98)    rotate(0);    animation-timing-function: cubic-bezier(.5,0,.75,0); }   /* coil → ignición */
      46%  { transform: translate(-50%, calc(-1*var(--rk-cy) - 120px))  scale(.62)      rotate(3deg); animation-timing-function: cubic-bezier(.4,0,.9,.4); }    /* ascenso rápido */
      100% { transform: translate(-50%, calc(-1*var(--rk-cy) - 540px))  scale(.12)      rotate(9deg); opacity: 0; }                                              /* se aleja en la distancia */
    }
    .btn-planitone-home.is-launching .pt-glow { opacity: 1; animation: ptGlowBlast 1.5s ease-out forwards; }
    @keyframes ptGlowBlast {
      0%   { opacity:.7; transform: translate(-50%,-50%) scale(.8); }
      16%  { opacity:1;  transform: translate(-50%,-50%) scale(1.8); }   /* fogonazo de ignición */
      42%  { opacity:.5; transform: translate(-50%,-50%) scale(1); }
      100% { opacity:0;  transform: translate(-50%,-50%) scale(.35); }
    }
    .btn-planitone-home.is-launching .pt-flame { opacity: 1; transform: translate(-50%,0) scaleY(1); height: calc(var(--rk-w) * 1.15); animation: ptFlameBlast 1.5s ease-out forwards; }
    @keyframes ptFlameBlast {
      0%   { transform: translate(-50%,0) scaleY(.5);  opacity:.8; }
      10%  { transform: translate(-50%,0) scaleY(1.9); opacity:1; }   /* llamarada */
      30%  { transform: translate(-50%,0) scaleY(1.3); opacity:1; }
      100% { transform: translate(-50%,0) scaleY(.4);  opacity:0; }
    }
    /* La plataforma (frame2) recula por el empuje y se estabiliza (estación, no cae) */
    .btn-planitone-home.is-launching .pt-logo-f2 { animation: ptKick .85s cubic-bezier(.2,.8,.3,1) .28s both; }
    @keyframes ptKick {
      0%   { transform: translateY(0)    scale(1); }
      24%  { transform: translateY(11px) scale(.978); }   /* retroceso por el empuje */
      54%  { transform: translateY(-3px) scale(1.006); }  /* rebote */
      78%  { transform: translateY(1px)  scale(.999); }
      100% { transform: translateY(0)    scale(1); }
    }
    /* REPOSO — respiración casi imperceptible (invita a interactuar sin distraer) */
    .btn-planitone-home:not(:hover):not(.is-launching) .pt-logo-wrap { animation: ptRest 7s ease-in-out infinite; }
    @keyframes ptRest { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
    /* IGNICIÓN — sacudida de cámara (se activa por JS en el instante del despegue) */
    .btn-planitone-home.pt-shake { animation: ptShake .5s ease-out; }
    @keyframes ptShake {
      0%,100% { transform: translate(0,0); }
      22%  { transform: translate(-.8px, .8px); }
      45%  { transform: translate(1px, -.8px); }
      68%  { transform: translate(-1px, .5px); }
      86%  { transform: translate(.6px, -.4px); }
    }

    /* ── OVERLAY de despegue a pantalla completa: cohete orbitando + partículas,
          fondo naranja → verde institucional ── */
    .pt-overlay {
      position: fixed; inset: 0; z-index: 99999;
      background: #D97706; overflow: hidden;
      opacity: 0; transition: opacity .35s ease; pointer-events: none;
    }
    .pt-overlay.show { opacity: 1; }
    /* Capa del fondo final estilo planitone.co (degradado verde con glow central) */
    .pt-ov-grad {
      position: absolute; inset: 0; z-index: 0; opacity: 0;
      background:
        radial-gradient(circle at 50% 44%, rgba(28,150,116,.5) 0%, rgba(28,150,116,0) 46%),
        radial-gradient(ellipse 78% 72% at 50% 46%, #0c5a47 0%, #084033 32%, #052a21 60%, #03150f 100%);
    }
    /* Cohete del overlay: crece desde abajo al centro (sin rotar) hasta 60vh de alto */
    .pt-ov-rocket {
      position: absolute; left: 50%; top: 50%; height: 60vh;
      transform: translate(-50%, calc(-50% + 52vh)) scale(.08);
      will-change: transform, opacity; z-index: 2;
    }
    .pt-ov-rocket > img { height: 100%; width: auto; display: block; position: relative; z-index: 1; filter: drop-shadow(0 0 26px rgba(0,0,0,.22)); }
    .pt-ov-rocket .ov-glow {
      position: absolute; left: 50%; top: 50.7%; width: 120%; height: 64%;
      transform: translate(-50%,-50%); border-radius: 50%; z-index: -1;
      background: radial-gradient(circle, rgba(255,232,170,.6), rgba(249,115,22,.2) 44%, transparent 68%);
      filter: blur(10px); animation: ptGlowPulse 1.9s ease-in-out infinite;
    }
    .pt-ov-rocket .ov-flame {
      position: absolute; left: 50%; top: 86%; width: 22%; height: 52%; z-index: -1;
      transform: translate(-50%,0) scaleY(1); transform-origin: top center;
      border-radius: 50% 50% 50% 50% / 34% 34% 66% 66%;
      background: linear-gradient(#FFF6D5,#FBBF24 34%,#F97316 64%,#EF4444);
      filter: blur(.8px); animation: ptFlame .2s ease-in-out infinite alternate;
    }

    /* ─── CONTENT AREA ────────────────────────────────────────────── */
    .content-area {
      --content-pad-y: 28px;   /* lo hereda .wcard-context para pegarse al borde real */
      flex: 1; overflow-y: auto; overflow-x: hidden;
      background: var(--content-bg);
      padding: var(--content-pad-y) 32px;
    }
    .content-area::-webkit-scrollbar { width: 6px; }
    .content-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 6px; }
    .content-area::-webkit-scrollbar-track { background: transparent; }

    /* ─── SUB-VIEW ────────────────────────────────────────────────── */
    .sub-view { display: none; }
    .sub-view.active { display: block; }

    /* ─── SECTION HEADING ─────────────────────────────────────────── */
    .section-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 24px;
    }
    .section-head-left h2 {
      font-family: var(--font-d); font-size: 22px; font-weight: 800;
      color: #111; letter-spacing: -.4px;
    }
    .section-head-left p {
      font-size: 13px; color: #666; margin-top: 2px;
    }

    /* ─── CARD ────────────────────────────────────────────────────── */
    .card {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(0,0,0,.06);
    }

    /* ─── WIZARD STEP BAR ─────────────────────────────────────────── */
    .wizard-steps-card {
      padding: 22px 28px 20px;
      margin-bottom: 20px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
    }
    .wizard-steps-bar {
      display: flex; align-items: center; gap: 0;
    }
    .ws-step {
      display: flex; flex-direction: column; align-items: center;
      flex: 1; position: relative; cursor: pointer;
      min-width: 0;
    }
    .ws-step + .ws-step::before {
      content: '';
      position: absolute; top: 19px; left: calc(-50%);
      width: 100%; height: 2px;
      background: #E5E7EB; z-index: 0;
      transition: background .35s ease;
    }
    .ws-step.done + .ws-step::before { background: #22C55E; }
    .ws-step.active + .ws-step::before { background: linear-gradient(90deg, var(--amber) 0%, #E9D5A0 60%, #E5E7EB 100%); }
    .ws-dot {
      width: 38px; height: 38px; border-radius: 50%;
      border: 2.5px solid #E5E7EB; background: #F9FAFB;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #9CA3AF;
      position: relative; z-index: 1;
      transition: all .25s cubic-bezier(.4,0,.2,1);
      flex-shrink: 0;
    }
    .ws-step.done .ws-dot {
      background: #22C55E; border-color: #22C55E; color: #fff;
      box-shadow: 0 2px 8px rgba(34,197,94,.25);
    }
    .ws-step.active .ws-dot {
      background: var(--amber); border-color: var(--amber); color: #fff;
      box-shadow: 0 0 0 6px rgba(242,160,32,.15), 0 4px 14px rgba(242,160,32,.35);
      transform: scale(1.12);
    }
    .ws-label {
      font-size: 10px; font-weight: 600; color: #9CA3AF;
      margin-top: 8px; text-align: center; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; max-width: 80px;
      transition: color .2s;
    }
    .ws-step.active .ws-label { color: var(--amber-dark); font-weight: 700; font-size: 10.5px; }
    .ws-step.done .ws-label { color: #16A34A; font-weight: 600; }
    /* Paso todavía inalcanzable: que no parezca clicable */
    .ws-step.locked { cursor: not-allowed; opacity: .5; }
    .ws-step.locked .ws-dot { border-style: dashed; }
    .ws-step:not(.locked):not(.active):hover .ws-dot { border-color: var(--amber); color: var(--amber-dark); }
    .ws-step:not(.locked):not(.active):hover .ws-label { color: var(--amber-dark); }

    /* ─── WIZARD MAIN CARD ────────────────────────────────────────── */
    .wizard-card {
      overflow: hidden;        /* fallback */
      overflow: clip;          /* clip NO crea scroll container → permite el sticky de .wcard-context */
      box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.06);
    }

    /* ─── Barra de contexto del riesgo (fija en todos los pasos) ───── */
    .wcard-context {
      /* top negativo = padding-y del scroller, para quedar a ras del borde
         superior y que no se cuele contenido por encima al hacer scroll. */
      position: sticky; top: calc(var(--content-pad-y, 0px) * -1); z-index: 20;
      display: flex; align-items: flex-start; gap: 11px;
      padding: 11px 32px 12px;
      background: #FEF9EF;
      border-bottom: 1px solid rgba(242,160,32,.28);
      box-shadow: 0 4px 12px -6px rgba(0,0,0,.18);
    }
    .wcard-context__icon {
      width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 1px;
      background: var(--amber-tint); color: var(--amber-dark);
      display: flex; align-items: center; justify-content: center; font-size: 11px;
    }
    .wcard-context__main { flex: 1; min-width: 0; }
    .wcard-context__eyebrow {
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
      font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
      text-transform: uppercase; color: #A8A29E; margin-bottom: 3px;
    }
    .wcard-context__id {
      font-family: var(--font-d), monospace; font-size: 10.5px; font-weight: 800;
      letter-spacing: 0; color: #00594E; background: rgba(0,89,78,.09);
      border-radius: 4px; padding: 1px 6px;
    }
    .wcard-context__chip {
      font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
      color: #6B7280; background: #fff; border: 1px solid #E7E5E4;
      border-radius: 4px; padding: 1px 6px; text-transform: none;
    }
    .wcard-context__q {
      font-size: 12.5px; font-weight: 600; color: #1F2937; line-height: 1.45;
    }
    .wcard-context.is-collapsed .wcard-context__q {
      display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .wcard-context__sub { font-size: 11.5px; color: #78716C; line-height: 1.45; margin-top: 3px; }
    .wcard-context.is-collapsed .wcard-context__sub { display: none; }
    .wcard-context__toggle {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
      border: 1px solid rgba(242,160,32,.35); background: #fff;
      color: var(--amber-dark); cursor: pointer; font-size: 10px;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s, transform .12s;
    }
    .wcard-context__toggle:hover { background: var(--amber-tint); }
    .wcard-context__answer {
      font-size: 9.5px; font-weight: 800; letter-spacing: .5px; border-radius: 4px;
      padding: 1px 6px; text-transform: uppercase;
    }
    .wcard-context__answer.si { color: #15803D; background: rgba(34,197,94,.13); }
    .wcard-context__answer.no { color: #B91C1C; background: rgba(239,68,68,.11); }
    @media (max-width: 720px) {
      .wcard-context { padding: 10px 18px 11px; }
    }
    .wcard-header {
      padding: 24px 32px 20px;
      border-bottom: 1px solid #F0EFED;
      display: flex; align-items: flex-start; gap: 18px;
      background: linear-gradient(135deg, #FFFFFF 0%, #FDFCFB 100%);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      position: relative;
    }
    .wcard-header::after {
      content: ''; position: absolute; bottom: 0; left: 32px; right: 32px;
      height: 1px; background: linear-gradient(90deg, var(--amber-tint) 0%, transparent 100%);
    }
    .wcard-step-num {
      width: 50px; height: 50px; border-radius: 14px;
      background: linear-gradient(135deg, var(--amber-tint) 0%, rgba(242,160,32,.18) 100%);
      border: 2px solid rgba(242,160,32,.3);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-d); font-size: 20px; font-weight: 900;
      color: var(--amber-dark); flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(242,160,32,.2), inset 0 1px 0 rgba(255,255,255,.6);
    }
    .wcard-header-text { flex: 1; }
    .wcard-header-text h3 {
      font-family: var(--font-d); font-size: 17px; font-weight: 800;
      color: #0F172A; letter-spacing: -.3px; margin-bottom: 2px;
    }
    .wcard-header-text .wcard-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: var(--amber-tint); color: var(--amber-dark);
      border: 1px solid rgba(242,160,32,.2);
      font-size: 9px; font-weight: 800; letter-spacing: .9px;
      text-transform: uppercase; padding: 2px 9px; border-radius: 5px;
      margin-bottom: 6px;
    }
    .wcard-header-text p { font-size: 12.5px; color: #6B7280; margin-top: 2px; line-height: 1.55; max-width: 680px; }
    .wcard-body { padding: 28px 32px; }
    .wcard-footer {
      padding: 16px 32px;
      border-top: 1px solid #EEEDE9;
      display: flex; align-items: center; justify-content: space-between;
      background: linear-gradient(to bottom, #F8F7F5 0%, #F5F4F1 100%);
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .wcard-footer-center { font-size: 12px; color: #9CA3AF; font-weight: 500; letter-spacing: .2px; }
    .wcard-footer-right { display: flex; align-items: center; gap: 8px; }

    /* ─── FORM ELEMENTS ───────────────────────────────────────────── */
    .form-label {
      display: block; font-size: 11.5px; font-weight: 700;
      color: #374151; margin-bottom: 6px; letter-spacing: .3px;
      text-transform: uppercase;
    }
    .form-label span.req { color: var(--red); margin-left: 2px; }
    .form-input, .form-select, .form-textarea {
      width: 100%; padding: 10px 14px;
      border: 1.5px solid #E9E8E4;
      border-radius: 8px;
      font-family: var(--font-b); font-size: 13.5px; color: #111;
      background: #FAFAF9;
      outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .form-input:hover, .form-select:hover, .form-textarea:hover {
      border-color: #D1CFC9; background: #fff;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--amber); background: #fff;
      box-shadow: 0 0 0 3.5px rgba(242,160,32,.1), 0 1px 4px rgba(0,0,0,.06);
    }
    .form-textarea { resize: vertical; min-height: 90px; line-height: 1.65; }

    /* ─── Campo con conector fijo ("por…" / "debido a…") ───────────────
       El conector es parte de la redacción institucional de la descripción
       del riesgo, así que va fuera del input y no se puede editar ni borrar. */
    .pfx-wrap {
      display: flex; align-items: stretch; width: 100%;
      border: 1.5px solid #E9E8E4; border-radius: 8px; background: #FAFAF9;
      overflow: hidden; transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .pfx-wrap:hover { border-color: #D1CFC9; background: #fff; }
    .pfx-wrap:focus-within {
      border-color: var(--amber); background: #fff;
      box-shadow: 0 0 0 3.5px rgba(242,160,32,.1), 0 1px 4px rgba(0,0,0,.06);
    }
    .pfx-tag {
      display: flex; align-items: center; gap: 6px; padding: 10px 13px;
      background: #F1EFEA; border-right: 1.5px solid #E9E8E4;
      font-family: var(--font-b); font-size: 13.5px; font-weight: 700; color: #C07C10;
      white-space: nowrap; user-select: none; cursor: default; flex-shrink: 0;
    }
    .pfx-tag.est { color: #0F766E; }
    .pfx-tag i { font-size: 9.5px; opacity: .5; }
    .pfx-wrap .form-input { border: none; background: transparent; border-radius: 0; }
    .pfx-wrap .form-input:hover,
    .pfx-wrap .form-input:focus { background: transparent; box-shadow: none; border: none; }
    .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
    .form-row { display: flex; gap: 18px; }
    .form-row .form-group { flex: 1; min-width: 0; }
    .form-group { margin-bottom: 20px; }
    .form-group:last-child { margin-bottom: 0; }

    /* ─── BUTTONS ─────────────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 10px 20px; border-radius: 8px;
      font-family: var(--font-b); font-size: 13px; font-weight: 600;
      cursor: pointer; border: none; outline: none;
      transition: all .18s; text-decoration: none; white-space: nowrap;
      letter-spacing: .15px;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--amber) 0%, #E8940A 100%);
      color: #000; box-shadow: 0 2px 8px rgba(242,160,32,.3), inset 0 1px 0 rgba(255,255,255,.25);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #E8940A 0%, var(--amber-dark) 100%);
      box-shadow: 0 4px 14px rgba(242,160,32,.4);
      transform: translateY(-1px);
    }
    .btn-secondary {
      background: #F3F4F6; color: #374151; border: 1.5px solid #E5E7EB;
    }
    .btn-secondary:hover { background: #E9EAEC; border-color: #D1D5DB; }
    .btn-ghost {
      background: transparent; color: #6B7280;
      border: 1.5px solid #E5E7EB;
    }
    .btn-ghost:hover { background: #F5F4F2; color: #374151; border-color: #D1D5DB; }
    .btn-ghost-amber {
      background: var(--amber-tint); color: var(--amber-dark);
      border: 1.5px solid rgba(242,160,32,.3);
    }
    .btn-ghost-amber:hover { background: rgba(242,160,32,.18); border-color: rgba(242,160,32,.5); }
    .btn-sm { padding: 6px 13px; font-size: 12px; }
    .btn-icon { gap: 0; padding: 9px 11px; }
    .btn:disabled { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

    /* ─── STEP 1: PROCESSES ───────────────────────────────────────── */
    .category-tabs {
      display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
      padding: 4px; background: #F5F4F1; border-radius: 12px; width: fit-content;
    }
    .cat-tab {
      padding: 6px 14px; border-radius: 9px;
      font-size: 11.5px; font-weight: 600;
      border: none; color: #6B7280;
      background: transparent; cursor: pointer; transition: all .18s;
    }
    .cat-tab:hover { color: #374151; background: rgba(255,255,255,.6); }
    .cat-tab.active {
      background: #fff; color: var(--amber-dark); font-weight: 700;
      box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 1px rgba(242,160,32,.15);
    }
    .process-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .process-card {
      border: 1.5px solid #ECEAE6; border-radius: 12px;
      padding: 18px 15px 16px; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1);
      background: #fff; position: relative; overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    .process-card::before {
      content: ''; position: absolute; inset: 0; opacity: 0;
      background: linear-gradient(135deg, rgba(242,160,32,.07) 0%, transparent 60%);
      transition: opacity .2s;
    }
    .process-card:hover {
      border-color: rgba(242,160,32,.5);
      transform: translateY(-3px); box-shadow: 0 8px 24px rgba(242,160,32,.12), 0 2px 6px rgba(0,0,0,.06);
    }
    .process-card:hover::before { opacity: 1; }
    .process-card.selected {
      border-color: var(--amber);
      box-shadow: 0 0 0 3px rgba(242,160,32,.12), 0 4px 16px rgba(242,160,32,.15);
      background: linear-gradient(135deg, #FFFBF0 0%, #FEF3DC 100%);
    }
    .process-card.selected::after {
      content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
      position: absolute; top: 9px; right: 11px;
      font-size: 10px; color: var(--amber-dark);
      background: rgba(242,160,32,.15); width: 20px; height: 20px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      text-align: center; line-height: 20px;
    }
    .pc-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: linear-gradient(135deg, rgba(242,160,32,.15) 0%, rgba(242,160,32,.08) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; color: var(--amber-dark); margin-bottom: 12px;
      box-shadow: 0 2px 6px rgba(242,160,32,.15);
    }
    .process-card.selected .pc-icon {
      background: linear-gradient(135deg, rgba(242,160,32,.3) 0%, rgba(242,160,32,.18) 100%);
    }
    .pc-cat {
      font-size: 8.5px; font-weight: 800; letter-spacing: .9px;
      text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
      margin-bottom: 8px; display: inline-block;
    }
    .pc-cat.estrategico { background: rgba(59,130,246,.1); color: #1D4ED8; }
    .pc-cat.misional { background: rgba(34,197,94,.1); color: #166534; }
    .pc-cat.apoyo { background: rgba(168,85,247,.1); color: #6D28D9; }
    .pc-cat.evaluacion { background: rgba(239,68,68,.1); color: #B91C1C; }
    .pc-name {
      font-size: 12px; font-weight: 700; color: #0F172A; line-height: 1.35;
    }

    /* ─── STEP 2: RISK TYPE ──────────────────────────────────────── */
    .rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
    .rt-card {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 18px; border: 1.5px solid #ECEAE6; border-radius: 12px;
      background: #fff; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 1px 3px rgba(0,0,0,.05);
    }
    .rt-card:hover {
      border-color: rgba(242,160,32,.4); transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(242,160,32,.12), 0 2px 6px rgba(0,0,0,.06);
    }
    .rt-card.selected {
      border-color: var(--amber);
      background: linear-gradient(135deg, #FFFBF0 0%, #FEF3DC 100%);
      box-shadow: 0 0 0 3px rgba(242,160,32,.12), 0 4px 14px rgba(242,160,32,.14);
    }
    .rt-card-left { display: flex; align-items: center; gap: 15px; }
    .rt-icon {
      width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
      box-shadow: 0 2px 6px rgba(0,0,0,.08);
    }
    .rt-name { font-size: 13.5px; font-weight: 700; color: #0F172A; margin-bottom: 3px; }
    .rt-desc { font-size: 11px; color: #6B7280; line-height: 1.45; }
    .rt-arrow { font-size: 11px; flex-shrink: 0; color: #D1D5DB; transition: color .18s, transform .18s; }
    .rt-card:hover .rt-arrow { color: var(--amber-dark); transform: translateX(2px); }

    /* ─── STEP 5: RISK MATRIX ─────────────────────────────────────── */
    .matrix-layout {
      display: grid; grid-template-columns: 1fr 240px; gap: 20px;
    }
    .matrix-wrap { overflow-x: auto; }
    .risk-matrix {
      display: grid;
      grid-template-columns: 40px repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr) 40px;
      gap: 3px; min-width: 380px;
    }
    .rm-label-y {
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: #6B7280;
      writing-mode: horizontal-tb; text-align: center; padding: 0 2px;
      line-height: 1.2;
    }
    .rm-label-x {
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: #6B7280; text-align: center;
      padding: 4px 2px;
    }
    .rm-corner { }
    .rm-cell {
      aspect-ratio: 1; border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; color: rgba(255,255,255,.8);
      cursor: pointer; transition: all .15s;
      position: relative; border: 2px solid transparent;
    }
    .rm-cell:hover { transform: scale(1.07); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
    .rm-cell.selected {
      border-color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.2), inset 0 0 0 2px rgba(255,255,255,.4);
    }
    .rm-cell.zone-bajo { background: #22C55E; }
    .rm-cell.zone-bajo:hover { background: #16A34A; }
    .rm-cell.zone-medio { background: #EAB308; }
    .rm-cell.zone-medio:hover { background: #CA8A04; }
    .rm-cell.zone-alto { background: #F97316; }
    .rm-cell.zone-alto:hover { background: #EA580C; }
    .rm-cell.zone-extremo { background: #EF4444; }
    .rm-cell.zone-extremo:hover { background: #DC2626; }
    .matrix-sidebar { }
    .matrix-level-card {
      background: #F9FAFB; border: 1.5px solid #E5E7EB;
      border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px;
    }
    .matrix-level-card h4 {
      font-size: 11px; font-weight: 700; letter-spacing: .5px;
      text-transform: uppercase; color: #9CA3AF; margin-bottom: 10px;
    }
    .level-display {
      text-align: center; padding: 12px;
      border-radius: var(--radius-sm); margin-bottom: 10px;
    }
    .level-display .ld-val {
      font-family: var(--font-d); font-size: 32px; font-weight: 900;
      line-height: 1;
    }
    .level-display .ld-label {
      font-size: 12px; font-weight: 700; margin-top: 4px;
      letter-spacing: .3px;
    }
    .level-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 12px; border-radius: 20px;
      font-size: 12px; font-weight: 700;
    }
    .pill-bajo { background: rgba(34,197,94,.12); color: #15803D; }
    .pill-medio { background: rgba(234,179,8,.12); color: #92400E; }
    .pill-alto { background: rgba(249,115,22,.12); color: #C2410C; }
    .pill-extremo { background: rgba(239,68,68,.12); color: #B91C1C; }
    .matrix-legend { }
    .legend-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; color: #6B7280; margin-bottom: 6px;
    }
    .legend-dot {
      width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
    }

    /* ─── STEP 7: REVIEW TABLE ────────────────────────────────────── */
    .review-table { width: 100%; border-collapse: collapse; }
    .review-table td {
      padding: 10px 14px; border-bottom: 1px solid #F3F4F6;
      font-size: 13px; vertical-align: top;
    }
    .review-table td:first-child {
      font-weight: 600; color: #374151; width: 35%; background: #F9FAFB;
    }
    .review-table td:last-child { color: #111; }
    .alert-info {
      display: flex; align-items: flex-start; gap: 12px;
      background: rgba(59,130,246,.07); border: 1.5px solid rgba(59,130,246,.2);
      border-radius: var(--radius-md); padding: 14px 16px; margin-top: 16px;
    }
    .alert-info i { color: var(--blue); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
    .alert-info p { font-size: 13px; color: #374151; line-height: 1.6; }

    /* ─── BORRADORES ──────────────────────────────────────────────── */
    /* Tabs de seguimiento (Mis plantillas) */
    .bor-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1.5px solid #EEEDEA; }
    .bor-tab {
      appearance: none; background: none; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: 7px;
      padding: 11px 16px; font-family: var(--font-b); font-size: 13.5px; font-weight: 600;
      color: #6B7280; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
      transition: color .15s, border-color .15s;
    }
    .bor-tab:hover { color: #374151; }
    .bor-tab.is-active { color: var(--amber-dark); border-bottom-color: var(--amber); }
    .bor-tab i { font-size: 12px; opacity: .8; }
    .bor-tab-count {
      font-size: 11px; font-weight: 800; min-width: 20px; text-align: center;
      background: #F1F0EE; color: #6B7280; border-radius: 20px; padding: 1px 7px;
    }
    .bor-tab.is-active .bor-tab-count { background: var(--amber); color: #fff; }
    .drafts-list { display: flex; flex-direction: column; gap: 10px; }
    .draft-card {
      display: flex; align-items: center; gap: 16px;
      background: #fff; border: 1.5px solid #E5E7EB;
      border-radius: var(--radius-md); padding: 16px 18px;
      cursor: pointer; transition: all .15s;
      box-shadow: var(--shadow-card);
    }
    .draft-card:hover {
      border-color: var(--amber); box-shadow: 0 4px 16px rgba(242,160,32,.12);
      transform: translateY(-1px);
    }
    .draft-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--amber-tint); display: flex; align-items: center;
      justify-content: center; font-size: 18px; color: var(--amber-dark);
      flex-shrink: 0;
    }
    .draft-info { flex: 1; min-width: 0; }
    .draft-title {
      font-size: 14px; font-weight: 700; color: #111;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .draft-meta {
      font-size: 12px; color: #9CA3AF; margin-top: 2px;
    }
    .draft-meta span { margin-right: 12px; }
    .draft-badge {
      background: var(--amber-tint); color: var(--amber-dark);
      font-size: 11px; font-weight: 700; padding: 4px 10px;
      border-radius: 20px; white-space: nowrap; flex-shrink: 0;
    }
    .draft-arrow { color: #D1D5DB; font-size: 14px; }

    /* ─── PLANTILLAS: TOOLBAR (búsqueda + filtros) ────────────────── */
    .pl-toolbar {
      display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
      margin-bottom: 14px;
    }
    .pl-search {
      flex: 1 1 320px; min-width: 240px;
      display: flex; align-items: center; gap: 9px;
      background: #fff; border: 1.5px solid #E9E8E4; border-radius: 10px;
      padding: 0 12px; height: 42px;
      transition: border-color .18s, box-shadow .18s;
    }
    .pl-search:focus-within {
      border-color: var(--amber);
      box-shadow: 0 0 0 3.5px rgba(242,160,32,.1);
    }
    .pl-search i { color: #9CA3AF; font-size: 13px; flex-shrink: 0; }
    .pl-search input {
      flex: 1; border: none; outline: none; background: transparent;
      font-family: var(--font-b); font-size: 13.5px; color: #111; min-width: 0;
    }
    .pl-search input::placeholder { color: #9CA3AF; }
    .pl-search button {
      border: none; background: #F3F4F6; color: #6B7280; cursor: pointer;
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 11px;
      transition: background .15s, color .15s;
    }
    .pl-search button:hover { background: #E5E7EB; color: #374151; }
    .pl-filter {
      height: 42px; padding: 0 36px 0 14px;
      border: 1.5px solid #E9E8E4; border-radius: 10px; background: #fff;
      font-family: var(--font-b); font-size: 13px; color: #374151; cursor: pointer;
      outline: none; transition: border-color .18s, box-shadow .18s;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 13px center;
    }
    .pl-filter:hover { border-color: #D1CFC9; }
    .pl-filter:focus { border-color: var(--amber); box-shadow: 0 0 0 3.5px rgba(242,160,32,.1); }
    .pl-result-bar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px; min-height: 22px;
    }
    .pl-result-bar #pl-count-label,
    .pl-result-bar #bor-count-label { font-size: 12.5px; color: #6B7280; font-weight: 500; }
    .pl-result-bar #pl-count-label strong { color: #111; }
    .pl-reset {
      border: none; background: none; cursor: pointer;
      font-family: var(--font-b); font-size: 12px; font-weight: 600;
      color: var(--amber-dark); display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 8px; border-radius: 6px; transition: background .15s;
    }
    .pl-reset:hover { background: var(--amber-tint); }
    .pl-row-hidden { display: none !important; }
    mark.pl-hl { background: rgba(242,160,32,.32); color: inherit; border-radius: 2px; padding: 0 1px; }

    /* ─── REVISIÓN DE ENVÍOS — KPIs, filtros y visor ───────────────── */
    .rev-kpis {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
      gap: 11px; margin-bottom: 12px;
    }
    .rev-kpi {
      position: relative; overflow: hidden;
      background: #fff; border: 1.5px solid #ECEAE6; border-radius: 14px;
      padding: 15px 16px 14px; cursor: pointer; text-align: left;
      font-family: var(--font-b); box-shadow: 0 1px 3px rgba(0,0,0,.04);
      transition: border-color .16s var(--gm-ease), transform .16s var(--gm-ease), box-shadow .16s var(--gm-ease);
    }
    /* Filo superior del color del KPI — lo pinta cada tarjeta vía --kpi */
    .rev-kpi::before {
      content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
      background: var(--kpi, #D1D5DB); opacity: .55; transition: opacity .16s;
    }
    .rev-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: #DDD9D2; }
    .rev-kpi:hover::before { opacity: 1; }
    .rev-kpi.active { border-color: var(--kpi, var(--fe-topbar)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpi, #D97706) 18%, transparent); }
    .rev-kpi.active::before { opacity: 1; height: 4px; }
    .rev-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .rev-kpi-ico {
      width: 31px; height: 31px; border-radius: 9px; display: flex; flex-shrink: 0;
      align-items: center; justify-content: center; font-size: 13px;
    }
    .rev-kpi-val {
      font-family: var(--font-d); font-size: 27px; font-weight: 900; color: #0F172A;
      line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums;
    }
    .rev-kpi-lbl { font-size: 11.5px; font-weight: 700; color: #4B5563; margin-top: 10px; line-height: 1.3; }
    .rev-kpi-sub { font-size: 10.5px; color: #9CA3AF; margin-top: 3px; line-height: 1.35; }
    .rev-kpi-note {
      display: flex; align-items: flex-start; gap: 8px;
      background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px;
      padding: 9px 13px; margin-bottom: 14px; font-size: 11.5px; color: #92400E; line-height: 1.5;
    }
    .rev-kpi-note i { margin-top: 2px; flex-shrink: 0; }

    .rev-progress {
      background: #fff; border: 1.5px solid #ECEAE6; border-radius: 14px;
      padding: 15px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .rev-progress-bar { height: 11px; background: #F1F0EE; border-radius: 8px; overflow: hidden; display: flex; }
    .rev-progress-bar span { height: 100%; transition: width .5s var(--gm-ease); }
    .rev-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: #6B7280; }
    .rev-legend i { font-size: 8px; margin-right: 5px; vertical-align: middle; }

    /* ── Panel de filtros ── */
    .rev-filters {
      background: #fff; border: 1.5px solid #ECEAE6; border-radius: 14px;
      padding: 14px 16px 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .rev-filters-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; margin-bottom: 12px;
    }
    .rev-filters-title {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #9CA3AF;
    }
    .rev-filters-count {
      background: var(--amber-tint); color: var(--amber-dark);
      border-radius: 20px; padding: 1px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0;
    }
    .rev-filters .pl-search { flex: 1 1 auto; width: 100%; margin-bottom: 10px; }
    /* 7 filtros en 4 columnas → 4 + 3, más equilibrado que auto-fit (que deja uno solo) */
    .rev-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    @media (max-width: 1180px) { .rev-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 860px)  { .rev-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px)  { .rev-filter-grid { grid-template-columns: 1fr; } }
    .rev-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .rev-fld > span {
      font-size: 10.5px; font-weight: 700; color: #9CA3AF;
      letter-spacing: .3px; padding-left: 2px;
    }
    .rev-fld .pl-filter { width: 100%; height: 40px; font-size: 12.5px; }
    /* Un filtro activo se distingue del que sigue en "cualquiera" */
    .rev-fld .pl-filter.on { border-color: var(--amber); background-color: #FFFDF7; color: #92400E; font-weight: 600; }

    /* ── Tabla de la cola ──
       8 columnas: se compacta el padding, la cabecera queda fija al desplazar
       y, si aun así no cabe a lo ancho, se desplaza en vez de recortar acciones. */
    #view-revisiones .hist-table-wrap { overflow: auto; max-height: min(66vh, 760px); }
    #view-revisiones .hist-table { min-width: 1080px; }
    #view-revisiones .hist-table thead th {
      padding: 11px; position: sticky; top: 0; z-index: 2;
      background: #FBFAF8; border-bottom: 1.5px solid #EFEDE8;
    }
    #view-revisiones .hist-table tbody td { padding: 11px; }
    #view-revisiones .hist-table tbody tr { border-bottom: 1px solid #F4F3F0; }
    #view-revisiones .hist-table tbody tr:hover { background: #FFFCF5; }
    #view-revisiones .btn-sm { padding: 5px 10px; font-size: 11.5px; }
    .rev-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .14s; }
    .rev-th-sort:hover { color: var(--fe-topbar); }
    .rev-th-sort .fa { font-size: 9px; margin-left: 4px; opacity: .4; }
    .rev-th-sort.on { color: var(--fe-topbar); }
    .rev-th-sort.on .fa { opacity: 1; }
    .rev-id { color: #00594E; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; }
    .rev-sub { font-size: 10.5px; color: #9CA3AF; line-height: 1.35; }

    .rev-chip {
      display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700;
      border-radius: 20px; padding: 2px 8px; background: #F4F3F0; color: #6B7280;
      border: 1px solid #EBE9E4; letter-spacing: .2px;
    }
    .rev-steps { display: flex; gap: 3px; }
    .rev-steps span { width: 14px; height: 5px; border-radius: 3px; background: #E8E6E1; display: block; }
    .rev-steps span.ok { background: #16A34A; }
    .rev-steps span.cur { background: var(--fe-topbar); box-shadow: 0 0 0 2px rgba(217,119,6,.18); }

    @media (max-width: 900px) {
      .rev-kpis { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
      .rev-kpi-val { font-size: 23px; }
    }

    /* Visor del wizard (modal) */
    .rev-modal {
      display: none; position: fixed; inset: 0; z-index: 9600;
      background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
      align-items: center; justify-content: center; padding: 22px;
    }
    .rev-modal.open { display: flex; }
    .rev-modal-box {
      background: #F7F6F3; border-radius: 18px; width: 100%; max-width: 1000px;
      max-height: 92vh; display: flex; flex-direction: column;
      box-shadow: 0 28px 70px rgba(0,0,0,.35); overflow: hidden;
    }
    .rev-modal-head {
      background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
      color: #fff; padding: 18px 24px; display: flex; align-items: flex-start;
      justify-content: space-between; gap: 16px; flex-wrap: wrap;
    }
    /* color explícito: el <body> del shell es oscuro (texto blanco) y el modal es claro */
    .rev-modal-body { flex: 1; overflow-y: auto; padding: 20px 24px 26px; color: #374151; }
    .rev-modal-foot {
      padding: 13px 24px; border-top: 1px solid #E9E8E4; background: #fff;
      display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    }
    .rev-card {
      background: #fff; border: 1.5px solid #ECEAE6; border-radius: 14px;
      padding: 16px 18px; margin-bottom: 14px;
    }
    .rev-card-h {
      display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
      padding-bottom: 10px; border-bottom: 1px solid #F3F2EF;
    }
    .rev-card-n {
      width: 26px; height: 26px; border-radius: 8px; background: rgba(217,119,6,.13);
      color: #B45309; font-size: 12px; font-weight: 800; display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
    }
    .rev-card-t { font-family: var(--font-d); font-size: 14px; font-weight: 800; color: #0F172A; flex: 1; }
    .rev-card, .rev-modal-foot { color: #374151; }
    .rev-kv { width: 100%; border-collapse: collapse; }
    .rev-kv td { padding: 7px 10px; font-size: 12.5px; vertical-align: top; border-bottom: 1px solid #F5F4F2; color: #111; }
    .rev-kv td:first-child { background: #FAFAF9; color: #6B7280; width: 34%; font-size: 12px; font-weight: 600; }
    .rev-kv tr:last-child td { border-bottom: none; }
    .rev-missing { color: #B45309; font-style: italic; }
    .rev-badge-ok   { background: rgba(34,197,94,.14); color: #15803D; border-radius: 20px; padding: 2px 10px; font-size: 10.5px; font-weight: 800; }
    .rev-badge-miss { background: rgba(217,119,6,.14); color: #B45309; border-radius: 20px; padding: 2px 10px; font-size: 10.5px; font-weight: 800; }
    @media (max-width: 720px) {
      .rev-modal { padding: 0; }
      .rev-modal-box { max-height: 100vh; border-radius: 0; }
    }
    /* Nueva plantilla — section labels */
    .np-sec {
      font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
      color: var(--amber-dark); margin: 22px 0 14px; padding-bottom: 8px;
      border-bottom: 1px solid var(--amber-tint);
    }
    .np-sec:first-child { margin-top: 0; }

    /* ─── HISTORIAL TABLE ─────────────────────────────────────────── */
    .hist-table-wrap {
      background: #fff; border-radius: var(--radius-lg);
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: var(--shadow-card);
      /* overflow-x auto (no hidden): en ventana angosta la tabla se desplaza
         en vez de recortar la última columna (Acciones). */
      overflow: hidden auto; overflow-x: auto;
    }
    .hist-table-wrap::-webkit-scrollbar { height: 8px; }
    .hist-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; }
    .hist-table-wrap::-webkit-scrollbar-track { background: transparent; }
    .hist-table { width: 100%; border-collapse: collapse; }
    .hist-table thead th {
      padding: 12px 16px; text-align: left;
      font-size: 11px; font-weight: 700; letter-spacing: .5px;
      text-transform: uppercase; color: #9CA3AF;
      background: #F9FAFB; border-bottom: 1px solid #F3F4F6;
    }
    .hist-table tbody tr { border-bottom: 1px solid #F9FAFB; transition: background .1s; }
    .hist-table tbody tr:last-child { border-bottom: none; }
    .hist-table tbody tr:hover { background: #FAFAFA; }
    .hist-table tbody td {
      padding: 13px 16px; font-size: 13px; color: #374151;
      vertical-align: middle;
    }
    .hist-table tbody td strong { color: #111; font-weight: 600; }
    .state-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 20px;
      font-size: 11px; font-weight: 700;
    }
    .state-pill.aprobado { background: rgba(34,197,94,.12); color: #15803D; }
    .state-pill.revision { background: rgba(59,130,246,.12); color: #1D4ED8; }
    .state-pill.devuelto { background: rgba(239,68,68,.12); color: #B91C1C; }
    .state-pill.borrador { background: rgba(107,114,128,.14); color: #4B5563; }
    .state-pill.descartado { background: rgba(139,92,246,.13); color: #6D28D9; }
    .state-pill::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
    }
    .state-pill.aprobado::before { background: #22C55E; }
    .state-pill.revision::before { background: #3B82F6; }
    .state-pill.devuelto::before { background: #EF4444; }
    .state-pill.borrador::before { background: #9CA3AF; }
    .state-pill.descartado::before { background: #8B5CF6; }

    /* ─── MISC ────────────────────────────────────────────────────── */
    .empty-hint {
      text-align: center; padding: 32px 20px; color: #9CA3AF; font-size: 13px;
    }
    .empty-hint i { font-size: 28px; display: block; margin-bottom: 8px; color: #D1D5DB; }
    .hint-text {
      font-size: 12px; color: #9CA3AF; margin-top: 6px; display: block;
    }
    .controls-row {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px;
    }
    .selected-process-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--amber-tint); border: 1.5px solid rgba(242,160,32,.3);
      border-radius: 20px; padding: 5px 12px;
      font-size: 12px; font-weight: 600; color: var(--amber-dark);
    }
    .selected-process-chip i { font-size: 11px; }

    /* ─── MOBILE GUARD ────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .process-grid { grid-template-columns: repeat(2, 1fr); }
      .form-row { flex-direction: column; gap: 0; }
      .matrix-layout { grid-template-columns: 1fr; }
    }

    /* ─── PI-TABS v2 (step 4) — light-theme ─────────────────────── */
    .pi-tablist {
      display: flex; gap: 4px;
      background: #F3F4F6; border: 1px solid #E5E7EB;
      border-radius: 12px; padding: 4px; margin-bottom: 24px;
    }
    .pi-tab {
      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 9px 14px; background: none; border: none; border-radius: 9px;
      font-family: var(--font-b); font-size: 13px; font-weight: 500;
      color: #9CA3AF; cursor: pointer; transition: all .15s;
    }
    .pi-tab:hover { color: #374151; background: #E5E7EB; }
    .pi-tab.is-active { color: #111827; background: #fff; font-weight: 600; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
    .pi-tab.is-active i { color: var(--amber); }
    .pi-tab-check {
      width: 15px; height: 15px; border-radius: 50%;
      background: var(--green); display: none;
      align-items: center; justify-content: center;
      font-size: 7px; color: #fff; flex-shrink: 0;
    }
    .pi-tab.is-done .pi-tab-check { display: inline-flex; }
    .pi-panel { display: none; }
    .pi-panel.is-active { display: block; }

    /* Encabezado de pregunta de los tabs Probabilidad / Impacto */
    .pi-pregunta {
      display: flex; gap: 12px; align-items: flex-start;
      background: linear-gradient(135deg, rgba(242,160,32,.09), rgba(242,160,32,.03));
      border: 1px solid rgba(242,160,32,.24); border-radius: 12px;
      padding: 13px 16px; margin-bottom: 16px;
    }
    .pi-pregunta > i {
      color: var(--amber-dark); font-size: 15px; margin-top: 2px; flex-shrink: 0;
      width: 26px; height: 26px; border-radius: 8px; background: rgba(242,160,32,.16);
      display: flex; align-items: center; justify-content: center;
    }
    .pi-pregunta__t { font-size: 13.5px; font-weight: 700; color: #1F2937; line-height: 1.45; }
    .pi-pregunta__s { font-size: 11.5px; color: #8A8177; line-height: 1.5; margin-top: 3px; }

    /* 5-button level picker */
    .pi-level-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
    .pi-level-btn {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 14px 6px; border: 2px solid #E5E7EB; border-radius: 12px;
      background: #FAFAFA; cursor: pointer;
      transition: border-color .15s, background .15s, transform .12s, box-shadow .12s;
      position: relative;
    }
    .pi-level-btn:hover { border-color: #9CA3AF; background: #F3F4F6; transform: translateY(-2px); }
    .pi-level-btn.is-selected { border-color: var(--pi-color, #D97706); background: #fff; transform: translateY(-2px); box-shadow: 0 2px 12px rgba(0,0,0,.1); }
    .pi-level-btn__dot {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--pi-color, #9CA3AF);
      box-shadow: 0 2px 8px color-mix(in srgb, var(--pi-color, #9CA3AF) 50%, transparent);
      transition: width .12s, height .12s, box-shadow .12s;
    }
    .pi-level-btn.is-selected .pi-level-btn__dot { width: 28px; height: 28px; }
    .pi-level-btn__name { font-size: 11.5px; font-weight: 700; color: #111827; text-align: center; line-height: 1.2; }
    .pi-level-btn__pct {
      font-family: var(--font-d); font-size: 13px; font-weight: 800; color: #6B7280;
      letter-spacing: -.2px;
    }
    .pi-level-btn.is-selected .pi-level-btn__pct { color: var(--pi-color, #6B7280); }
    .pi-level-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
    .pi-level-btn__check {
      position: absolute; top: 5px; right: 5px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--pi-color, #D97706); color: #fff;
      font-size: 7px; display: none; align-items: center; justify-content: center;
    }
    .pi-level-btn.is-selected .pi-level-btn__check { display: flex; }

    /* Selection banner */
    .pi-sel-banner {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px; border-radius: 12px;
      border: 1px solid var(--pi-bcolor, #E5E7EB);
      background: var(--pi-bg, #F9FAFB);
      margin-bottom: 20px;
    }
    .pi-sel-banner__swatch { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
    .pi-sel-banner__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #9CA3AF; margin-bottom: 3px; }
    .pi-sel-banner__value { font-size: 16px; font-weight: 800; color: #111827; margin-bottom: 4px; }
    .pi-sel-banner__desc { font-size: 12px; color: #6B7280; line-height: 1.45; }

    /* Empty state hint */
    .pi-empty-hint {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 16px; border-radius: 10px;
      border: 1px dashed #D1D5DB; background: #F9FAFB;
      color: #9CA3AF; font-size: 13px; margin-bottom: 20px;
    }

    /* Reference table */
    .pi-ref-wrap { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
    .pi-ref-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .pi-ref-table thead th {
      padding: 9px 14px; text-align: left;
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
      color: #9CA3AF; background: #F9FAFB; border-bottom: 1px solid #E5E7EB;
    }
    .pi-ref-table thead th.pi-col-sel { color: var(--amber); background: rgba(242,160,32,.08); }
    .pi-ref-table tbody td { padding: 11px 14px; border-bottom: 1px solid #F3F4F6; vertical-align: middle; color: #6B7280; }
    .pi-ref-table tbody tr:last-child td { border-bottom: none; }
    .pi-ref-table tbody tr { transition: background .12s; }
    .pi-ref-table tbody tr:hover td { background: #FCFBF9; }
    .pi-ref-table tbody tr.is-active td { background: rgba(242,160,32,.09); }
    .pi-ref-table tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
    .pi-ref-table tbody tr.is-active .pi-ref-copy { color: #111827; font-weight: 600; }
    .pi-ref-lvl {
      display: inline-flex; flex-direction: column; align-items: center;
      min-width: 78px; padding: 7px 10px; border-radius: 7px;
      background: var(--pi-cell); color: var(--pi-text);
      font-weight: 700; font-size: 12px; text-align: center;
    }
    .pi-ref-lvl small { font-size: 10px; opacity: .85; font-weight: 600; margin-top: 1px; }
    .pi-ref-copy { color: #6B7280; line-height: 1.45; }
    .pi-ref-copy.is-sel { color: #374151; }

    /* Criteria grid */
    .pi-criteria-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0 20px; }
    .pi-criterion {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; border-radius: 10px;
      border: 2px solid #E5E7EB; cursor: pointer; background: #FAFAFA;
      transition: border-color .15s, background .15s;
    }
    .pi-criterion:hover { border-color: rgba(242,160,32,.5); background: rgba(242,160,32,.04); }
    .pi-criterion:has(.pi-criterion__input:checked) { border-color: var(--amber); background: rgba(242,160,32,.06); }
    .pi-criterion__input { margin-top: 3px; accent-color: var(--amber); cursor: pointer; flex-shrink: 0; width: 15px; height: 15px; }
    .pi-criterion__title { font-size: 13px; font-weight: 600; color: #111827; }
    .pi-criterion__help { font-size: 11px; color: #9CA3AF; line-height: 1.4; margin-top: 3px; }

    /* Impacto 2-col: inputs a la izquierda · tabla de referencia a la derecha */
    .pi-impact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 28px; align-items: start; }
    .pi-impact-left { min-width: 0; }
    .pi-impact-right { min-width: 0; }
    .pi-impact-grid .pi-criteria-grid { grid-template-columns: 1fr; margin-bottom: 0; }

    /* Score hero (consolidado) */
    .pi-score-hero {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      padding: 28px 20px; border-radius: 16px;
      background: #F3F4F6; border: 1px solid #E5E7EB;
      margin-bottom: 24px; text-align: center;
    }
    .pi-score-ring {
      width: 92px; height: 92px; border-radius: 50%;
      background: var(--sz-color, #9CA3AF);
      box-shadow: 0 0 0 10px var(--sz-glow, rgba(0,0,0,.06)), 0 6px 24px var(--sz-color, #9CA3AF80);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: var(--sz-text, #fff);
    }
    .pi-score-ring__val { font-family: var(--font-d); font-size: 32px; font-weight: 900; line-height: 1; }
    .pi-score-ring__lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; opacity: .75; margin-top: 2px; }
    /* El anillo muestra la SEVERIDAD, no el producto P×I: "20" junto a
       "100% × 80%" se leía como un porcentaje y confundía. */
    .pi-score-ring__val.is-zona {
      font-family: var(--font-d); font-size: 15px; font-weight: 900;
      letter-spacing: .3px; text-transform: uppercase; line-height: 1.05;
      padding: 0 6px; text-align: center;
    }
    .pi-score-nota { font-size: 11px; color: #9CA3AF; line-height: 1.45; max-width: 330px; }
    .pi-score-zone { font-size: 18px; font-weight: 800; }
    .pi-score-caption { font-size: 12px; color: #6B7280; }
    .pi-score-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 4px; }
    .pi-score-stat { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; text-align: left; }
    .pi-score-stat__lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #9CA3AF; display: block; margin-bottom: 3px; }
    .pi-score-stat__val { font-size: 13px; font-weight: 600; color: #111827; }

    /* Consolidado 2-col layout */
    .pi-consol-grid { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
    .pi-consol-left { flex-shrink: 0; }
    .pi-consol-right { min-width: 0; }
    .pi-score-hero { margin-bottom: 0; }

    /* 5×5 heatmap grid */
    .pi-mat-wrap { overflow: visible; padding: 18px 16px; margin: -18px -16px; }
    .pi-mat-grid {
      display: inline-grid;
      grid-template-columns: 96px repeat(5, 58px);
      grid-template-rows: 48px repeat(5, 58px);
      gap: 6px;
    }
    .pi-mat-corner { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 8px 8px 0; }
    .pi-mat-head {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: #6B7280; text-align: center; gap: 2px;
    }
    .pi-mat-head small { opacity: .6; font-weight: 400; }
    .pi-mat-rowhead {
      display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
      font-size: 10px; font-weight: 700; color: #6B7280; text-align: right;
      padding-right: 10px; gap: 1px;
    }
    .pi-mat-rowhead small { opacity: .6; font-weight: 400; }
    .pi-mat-cell {
      width: 58px; height: 58px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-d); font-size: 15px; font-weight: 800;
      background: var(--pi-cell, #E5E7EB); color: var(--pi-text, #374151);
      cursor: pointer; border: 3px solid transparent;
      transition: transform .12s, box-shadow .12s, border-color .12s, border-width .12s;
      position: relative; user-select: none;
    }
    .pi-mat-cell:hover { transform: scale(1.1); z-index: 1; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
    .pi-mat-cell.is-active {
      border: 4px solid #fff;
      transform: scale(1.22); z-index: 2;
      box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 8px 28px rgba(0,0,0,.45);
    }
    .pi-mat-cell__zone {
      position: absolute; bottom: 3px; left: 0; right: 0;
      font-size: 7px; font-weight: 700; text-align: center; opacity: .8; text-transform: uppercase; letter-spacing: .3px;
    }
    /* ─── Paso 6 · Revisión y envío ──────────────────────────────── */
    .rv { display: flex; flex-direction: column; gap: 14px; }
    .rv-sec { background: #fff; border: 1.5px solid #EFEDE9; border-radius: 14px; padding: 16px 18px; }
    .rv-sec__t {
      display: flex; align-items: center; gap: 7px; margin: 0 0 12px;
      font-size: 10.5px; font-weight: 800; letter-spacing: .7px;
      text-transform: uppercase; color: var(--amber-dark);
    }
    .rv-sec__t i { font-size: 11px; }
    .rv-cnt {
      font-size: 9.5px; font-weight: 800; color: #6B7280; background: #F3F4F6;
      border-radius: 20px; padding: 1px 8px; letter-spacing: 0;
    }
    /* Pares clave/valor */
    .rv-dl { margin: 0; display: flex; flex-direction: column; }
    .rv-row {
      display: grid; grid-template-columns: 210px 1fr; gap: 14px;
      padding: 8px 0; border-bottom: 1px solid #F6F5F2; align-items: baseline;
    }
    .rv-row:last-child { border-bottom: none; }
    .rv-row dt { font-size: 11.5px; color: #9CA3AF; font-weight: 600; }
    .rv-row dd { margin: 0; font-size: 13px; color: #1F2937; font-weight: 500; }
    .rv-vacio { color: #C0BCB5; font-style: italic; font-size: 12.5px; }
    .rv-id {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-d), monospace; font-size: 13px; font-weight: 800;
      color: #00594E; background: rgba(0,89,78,.08);
      border: 1px solid rgba(0,89,78,.2); border-radius: 7px; padding: 3px 11px;
    }
    /* Descripción */
    .rv-sec--desc { background: #FFFDF7; border-color: rgba(242,160,32,.3); }
    .rv-desc { margin: 0; font-size: 13.5px; line-height: 1.65; color: #374151; }
    /* Evaluación inherente → residual */
    .rv-eval { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .rv-eval__col { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
    .rv-eval__t { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #9CA3AF; }
    .rv-eval__d { font-size: 11.5px; color: #6B7280; line-height: 1.5; }
    .rv-eval__d b { color: #111827; font-weight: 700; }
    .rv-eval__flecha { color: #16A34A; font-size: 15px; }
    .rv-sev {
      align-self: flex-start; font-size: 11px; font-weight: 800;
      border-radius: 20px; padding: 3px 13px; letter-spacing: .2px;
    }
    .rv-crit { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #F0EEEA; font-size: 12.5px; color: #374151; }
    .rv-k { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #9CA3AF; margin-right: 6px; }
    /* Controles */
    .rv-ctrls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
    .rv-ctrl { display: flex; gap: 11px; align-items: flex-start; }
    .rv-ctrl__n {
      flex-shrink: 0; width: 21px; height: 21px; border-radius: 6px;
      background: var(--amber-tint); color: var(--amber-dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: 800; margin-top: 1px;
    }
    .rv-ctrl__b { min-width: 0; flex: 1; }
    .rv-ctrl__d { font-size: 12.5px; color: #374151; line-height: 1.5; }
    .rv-ctrl__m { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
    .rv-tag {
      font-size: 10px; color: #6B7280; background: #F7F6F3;
      border: 1px solid #EDEAE5; border-radius: 5px; padding: 1px 7px; text-transform: capitalize;
    }
    .rv-tag.is-falta { color: #B45309; background: rgba(242,160,32,.13); border-color: rgba(242,160,32,.3); }
    .rv-tag.is-total { color: #00594E; background: rgba(0,89,78,.09); border-color: rgba(0,89,78,.2); font-weight: 800; }
    /* Avisos de faltantes */
    .rv-aviso {
      display: flex; align-items: center; gap: 8px;
      font-size: 12.5px; color: #92400E;
      background: rgba(242,160,32,.11); border: 1px solid rgba(242,160,32,.28);
      border-radius: 9px; padding: 10px 13px;
    }
    /* Caracterización plegable */
    .rv-det { background: #fff; border: 1.5px solid #EFEDE9; border-radius: 14px; overflow: hidden; }
    .rv-det > summary {
      padding: 13px 18px; cursor: pointer; user-select: none;
      font-size: 10.5px; font-weight: 800; letter-spacing: .7px;
      text-transform: uppercase; color: var(--amber-dark); list-style: none;
    }
    .rv-det > summary::-webkit-details-marker { display: none; }
    .rv-det > summary::after { content: '\f078'; font: 900 9px 'Font Awesome 6 Free'; float: right; opacity: .5; }
    .rv-det[open] > summary::after { content: '\f077'; }
    .rv-det > summary i { margin-right: 7px; }
    .rv-det__b { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 10px; }
    .rv-qa { padding-top: 10px; border-top: 1px solid #F6F5F2; }
    .rv-qa__q { font-size: 12.5px; color: #374151; line-height: 1.5; }
    .rv-qa__a { margin-top: 5px; font-size: 12px; color: #6B7280; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .rv-si, .rv-no { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 8px; }
    .rv-si { color: #15803D; background: rgba(34,197,94,.13); }
    .rv-no { color: #B91C1C; background: rgba(239,68,68,.11); }
    .rv-qa__d { font-style: italic; }
    /* Nota de envío */
    .rv-envio {
      display: flex; gap: 12px; align-items: flex-start;
      background: linear-gradient(135deg, rgba(0,89,78,.06), rgba(0,89,78,.02));
      border: 1.5px solid rgba(0,89,78,.2); border-radius: 14px; padding: 15px 18px;
    }
    .rv-envio i { color: #00594E; font-size: 15px; margin-top: 2px; flex-shrink: 0; }
    .rv-envio p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #374151; }
    @media (max-width: 720px) {
      .rv-row { grid-template-columns: 1fr; gap: 3px; }
      .rv-eval { gap: 10px; }
      .rv-eval__flecha { transform: rotate(90deg); }
    }

    /* Paso 5 — tarjetas de control */
    .ctrl-card {
      background: #fff; border: 1.5px solid #ECEAE6; border-radius: 14px;
      padding: 16px 18px 14px; margin-bottom: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
      transition: border-color .16s, box-shadow .16s;
    }
    .ctrl-card:hover { border-color: rgba(242,160,32,.4); box-shadow: 0 3px 14px rgba(0,0,0,.07); }
    .ctrl-card:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242,160,32,.14); }
    .ctrl-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
    .ctrl-num {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 800; letter-spacing: .5px;
      text-transform: uppercase; color: var(--amber-dark);
    }
    .ctrl-chip {
      font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
      border-radius: 5px; padding: 2px 7px; text-transform: none; white-space: nowrap;
    }
    .ctrl-chip.is-peso { color: #1D4ED8; background: rgba(59,130,246,.12); }
    .ctrl-card .form-textarea { border-radius: 10px; }
    .ctrl-card .form-label { font-size: 10.5px; letter-spacing: .3px; }
    /* Desglose Tabla 6 */
    .ctrl-pesos {
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
      margin-top: 12px; padding-top: 11px; border-top: 1px dashed #EFEDE9;
    }
    .ctrl-pesos__t {
      font-size: 9.5px; font-weight: 800; letter-spacing: .6px;
      text-transform: uppercase; color: #9CA3AF; margin-right: 2px;
    }
    .ctrl-pesos__mas { font-size: 11px; color: #C7C3BC; font-weight: 700; }
    .ctrl-peso {
      font-size: 10.5px; color: #6B7280; background: #F7F6F3;
      border: 1px solid #EDEAE5; border-radius: 6px; padding: 2px 8px;
    }
    .ctrl-peso b { color: #111827; font-weight: 800; }
    .ctrl-peso.is-cero { opacity: .55; }
    .ctrl-peso.is-cero b { color: #9CA3AF; }
    .ctrl-peso.is-total {
      background: rgba(0,89,78,.08); border-color: rgba(0,89,78,.22);
    }
    .ctrl-peso.is-total b { color: #00594E; font-size: 11.5px; }
    @media (max-width: 720px) {
      .ctrl-card .form-row { grid-template-columns: 1fr; gap: 10px; }
    }
    .pi-mini-grid {
      display: inline-grid;
      grid-template-columns: 28px repeat(5, 64px);
      grid-template-rows: 24px repeat(5, 64px);
      gap: 6px;
    }
    .pi-mini-head, .pi-mini-rowhead {
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #9CA3AF;
    }
    .pi-mini-cell {
      border-radius: 10px; background: var(--mc, #E5E7EB); opacity: .4;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 17px; transition: opacity .2s, transform .2s;
    }
    .pi-mini-cell.is-sel {
      opacity: 1; transform: scale(1.14); position: relative; z-index: 1;
      box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.3);
    }

    /* Variante reducida de la matriz — paso 5 (dos comparativos lado a lado).
       Mantiene rótulos y porcentajes de la Figura 18: es la MISMA matriz. */
    /* Comparativo del paso 5: casi del tamaño de la matriz del consolidado.
       Baja por tramos para seguir cabiendo lado a lado; si no cabe, el
       flex-wrap del contenedor las apila. */
    .pi-mat-grid.is-mini {
      grid-template-columns: 92px repeat(5, 74px);
      grid-template-rows: 48px repeat(5, 60px);
      gap: 6px;
    }
    .pi-mat-grid.is-mini .pi-mat-head { font-size: 10px; gap: 2px; line-height: 1.2; padding: 0 3px; hyphens: none; }
    .pi-mat-grid.is-mini .pi-mat-head small,
    .pi-mat-grid.is-mini .pi-mat-rowhead small { font-size: 9px; }
    .pi-mat-grid.is-mini .pi-mat-rowhead { font-size: 10px; padding-right: 10px; gap: 2px; line-height: 1.2; }
    .pi-mat-grid.is-mini .pi-mat-cell { width: 74px; height: 60px; border-radius: 9px; font-size: 17px; border-width: 3px; }
    .pi-mat-grid.is-mini .pi-mat-cell.is-active { border-width: 4px; transform: scale(1.08); }
    .pi-mat-grid.is-mini .pi-mat-origen-dot { width: 10px; height: 10px; }
    @media (max-width: 1400px) {
      .pi-mat-grid.is-mini { grid-template-columns: 82px repeat(5, 64px); grid-template-rows: 44px repeat(5, 52px); gap: 5px; }
      .pi-mat-grid.is-mini .pi-mat-cell { width: 64px; height: 52px; font-size: 15px; }
      .pi-mat-grid.is-mini .pi-mat-head { font-size: 9px; }
      .pi-mat-grid.is-mini .pi-mat-rowhead { font-size: 9px; padding-right: 8px; }
      .pi-mat-grid.is-mini .pi-mat-head small,
      .pi-mat-grid.is-mini .pi-mat-rowhead small { font-size: 8.5px; }
    }
    @media (max-width: 1100px) {
      .pi-mat-grid.is-mini { grid-template-columns: 70px repeat(5, 54px); grid-template-rows: 40px repeat(5, 46px); gap: 4px; }
      .pi-mat-grid.is-mini .pi-mat-cell { width: 54px; height: 46px; font-size: 13px; border-width: 2px; }
      .pi-mat-grid.is-mini .pi-mat-head { font-size: 8px; }
      .pi-mat-grid.is-mini .pi-mat-rowhead { font-size: 8px; padding-right: 6px; }
      .pi-mat-grid.is-mini .pi-mat-head small,
      .pi-mat-grid.is-mini .pi-mat-rowhead small { font-size: 7.5px; }
    }
    /* Variante compacta — visor del modal de revisión (espacio reducido). */
    .pi-mat-grid.is-mini.is-compacta {
      grid-template-columns: 74px repeat(5, 58px);
      grid-template-rows: 40px repeat(5, 46px);
      gap: 4px;
    }
    .pi-mat-grid.is-mini.is-compacta .pi-mat-cell { width: 58px; height: 46px; font-size: 14px; border-radius: 8px; border-width: 3px; }
    .pi-mat-grid.is-mini.is-compacta .pi-mat-cell.is-active { border-width: 4px; transform: scale(1.08); }
    .pi-mat-grid.is-mini.is-compacta .pi-mat-head { font-size: 9px; line-height: 1.18; padding: 0 2px; }
    .pi-mat-grid.is-mini.is-compacta .pi-mat-rowhead { font-size: 9px; padding-right: 8px; line-height: 1.18; }
    .pi-mat-grid.is-mini.is-compacta .pi-mat-head small,
    .pi-mat-grid.is-mini.is-compacta .pi-mat-rowhead small { font-size: 8px; }
    .pi-mat-grid.is-mini.is-compacta .pi-mat-origen-dot { width: 9px; height: 9px; }
    /* El modal se estrecha en pantallas pequeñas: se reduce para no desbordar. */
    @media (max-width: 900px) {
      .pi-mat-grid.is-mini.is-compacta {
        grid-template-columns: 62px repeat(5, 46px);
        grid-template-rows: 36px repeat(5, 38px);
      }
      .pi-mat-grid.is-mini.is-compacta .pi-mat-cell { width: 46px; height: 38px; font-size: 12px; border-width: 2px; }
      .pi-mat-grid.is-mini.is-compacta .pi-mat-head,
      .pi-mat-grid.is-mini.is-compacta .pi-mat-rowhead { font-size: 8px; }
      .pi-mat-grid.is-mini.is-compacta .pi-mat-head small,
      .pi-mat-grid.is-mini.is-compacta .pi-mat-rowhead small { font-size: 7px; }
    }

    /* Solo lectura: sin cursor de clic ni realce al pasar el mouse. */
    .pi-mat-grid.is-lectura .pi-mat-cell { cursor: default; }
    .pi-mat-grid.is-lectura .pi-mat-cell:hover { transform: none; box-shadow: none; }
    .pi-mat-grid.is-lectura .pi-mat-cell.is-active:hover { transform: scale(1.12); }

    /* Celda de ORIGEN en la matriz residual: dónde estaba antes de los controles. */
    .pi-mat-cell.is-origen { position: relative; opacity: .95; }
    .pi-mat-cell.is-origen::after {
      content: ''; position: absolute; inset: 2px; border-radius: inherit;
      border: 2.5px dashed rgba(17,24,39,.55);
    }
    .pi-mat-origen-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(17,24,39,.6); box-shadow: 0 0 0 2px rgba(255,255,255,.75);
    }

    /* Resumen explícito del movimiento inherente → residual (guía, Figura 21). */
    .pi-mov { margin-top: 14px; background: #FBFAF8; border: 1px solid #ECEAE6; border-radius: 12px; padding: 13px 16px; }
    .pi-mov__t { font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--amber-dark); margin-bottom: 10px; }
    .pi-mov__t i { margin-right: 5px; }
    .pi-mov__filas { display: flex; flex-direction: column; gap: 7px; }
    .pi-mov__fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
    .pi-mov__eje { min-width: 88px; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #9CA3AF; }
    .pi-mov__de { color: #6B7280; text-decoration: line-through; text-decoration-color: rgba(107,114,128,.45); }
    .pi-mov__a { font-weight: 700; color: #111827; }
    .pi-mov__flecha { color: #16A34A; font-size: 12px; }
    .pi-mov__delta { font-size: 10px; font-weight: 800; color: #15803D; background: rgba(34,197,94,.13); border-radius: 5px; padding: 2px 7px; }
    .pi-mov__igual { font-size: 11.5px; color: #9CA3AF; }
    .pi-mov__sev { font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 3px 11px; }
    .pi-mov__fila--sev { margin-top: 2px; padding-top: 8px; border-top: 1px dashed #ECEAE6; }
    .pi-mov__pie { font-size: 10.5px; color: #9CA3AF; margin-top: 10px; line-height: 1.5; }
    .pi-mov__leyenda { white-space: nowrap; }

    /* Ejes externos del mapa de calor */
    .pi-mat-axes { display: flex; align-items: stretch; }
    .pi-axis-y {
      display: flex; align-items: center; justify-content: center;
      padding-top: 48px; /* compensa la fila de cabeceras de impacto */
    }
    .pi-axis-y span {
      writing-mode: vertical-rl; transform: rotate(180deg);
      font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--amber-dark);
    }
    .pi-axis-x {
      padding-left: 102px; /* 96px columna rowhead + 6px gap */
      font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--amber-dark);
      text-align: center; margin-bottom: 4px;
    }
    .pi-legend-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
    .pi-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #374151; }
    .pi-legend-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }

    /* ─── Pantalla dividida / ventana angosta (≤1100px) ───────────────
       El aside se pliega solo (ver syncSidebarToViewport) y se recupera
       ancho útil: menos padding, tablas desplazables y celdas más compactas. */
    @media (max-width: 1100px) {
      .content-area { --content-pad-y: 18px; padding: var(--content-pad-y) 18px; }
      .section-head { flex-wrap: wrap; gap: 12px; }
      .section-head h2 { font-size: 19px; }
      /* Tablas: ancho mínimo legible + scroll horizontal en el contenedor. */
      #view-borradores .hist-table,
      #view-historial  .hist-table { min-width: 880px; }
      .hist-table thead th { padding: 10px 12px; font-size: 10px; letter-spacing: .3px; }
      .hist-table tbody td { padding: 11px 12px; font-size: 12.5px; }
      .bor-tabs { gap: 2px; }
      .bor-tab { padding-left: 10px; padding-right: 10px; font-size: 12px; }
      /* Wizard: la tarjeta y su barra de contexto también se aprietan menos. */
      .wcard-header { padding: 18px 20px 16px; gap: 13px; }
      .wcard-body   { padding: 20px; }
      .wcard-footer { padding: 13px 18px; flex-wrap: wrap; gap: 10px; }
      .wcard-footer-center { order: 3; width: 100%; text-align: center; }
      .wcard-context { padding: 10px 20px 11px; }
      .wcard-step-num { width: 42px; height: 42px; font-size: 17px; border-radius: 12px; }
    }
    /* Ventana muy angosta: buscador y selects a ancho completo, uno por línea. */
    @media (max-width: 820px) {
      .content-area { padding: var(--content-pad-y) 14px; }
      .pl-toolbar { gap: 8px; }
      .pl-search { flex: 1 1 100%; min-width: 0; }
      .pl-toolbar .pl-filter { flex: 1 1 100%; min-width: 0; }
      .wcard-footer-right { width: 100%; }
      .wcard-footer-right .btn { flex: 1; justify-content: center; }
    }

    @media (max-width: 960px) {
      .pi-consol-grid { grid-template-columns: 1fr; }
      .pi-consol-right { order: -1; }
      .pi-impact-grid { grid-template-columns: 1fr; }
      .pi-level-picker { gap: 5px; }
      .pi-level-btn { padding: 10px 4px; }
      .pi-level-btn__name { font-size: 10px; }
      .pi-criteria-grid { grid-template-columns: 1fr; }
      .pi-mat-grid { grid-template-columns: 80px repeat(5, 46px); grid-template-rows: 42px repeat(5, 46px); gap: 4px; }
      .pi-mat-cell { width: 46px; height: 46px; font-size: 12px; border-radius: 7px; }
      .pi-axis-y { padding-top: 42px; }
      .pi-axis-x { padding-left: 84px; }
      .bor-admin-grid { grid-template-columns: 1fr !important; }
    }