/* ============================================================
     STATION DESIGN SYSTEM v2 — tokens
     Oscuro minimalista · azul señal Finvivir · IBM Plex
     La profundidad la dan el hairline y el escalón de superficie,
     no la sombra. El acento aparece una vez por vista.
     ============================================================ */
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root {
    /* Familias */
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Superficies — escalón absoluto: 0 es el lienzo, 3 lo más elevado */
    --surface-0: #0B0D10;   /* página */
    --surface-1: #121519;   /* card en flujo */
    --surface-2: #171B20;   /* panel, fila hover, input */
    --surface-3: #1D2228;   /* popover, modal, dropdown */

    /* Texto — nunca opacity sobre texto: deriva distinto en cada fondo */
    --text-primary:   #E8EAED;  /* 15.2:1 sobre --surface-1 */
    --text-secondary: #9AA2AD;  /*  7.1:1 */
    --text-muted:     #7E8693;  /*  5.0:1 — AA a los 11-12px donde se usa */
    --text-disabled:  #4A515C;  /*  2.3:1 — exento por estar deshabilitado */

    /* Bordes — el hairline es el separador principal */
    --border:          rgba(255,255,255,.07);
    --border-strong:   rgba(255,255,255,.12);
    --border-stronger: rgba(255,255,255,.20);

    /* Acento de marca — un solo relleno de acento por vista */
    --accent:        #4FB6E6;
    --accent-hover:  #77CBF2;
    --accent-soft:   rgba(79,182,230,.12);
    --accent-border: rgba(79,182,230,.35);
    --on-accent:     #04060C;

    /* Semánticos: relleno, tinte, borde y texto del mismo rol.
       El `-border` existe por lo mismo que --accent-border: un tinte al 12% no
       se lee como borde, y sin token para eso cada componente inventaba su
       propio rgba() — que además venía de la paleta v1 y no casaba con el
       color del texto al que acompañaba. */
    --success: #3DD68C; --success-soft: rgba(61,214,140,.12); --success-border: rgba(61,214,140,.35);
    --warning: #E2A336; --warning-soft: rgba(226,163,54,.12); --warning-border: rgba(226,163,54,.35);
    --danger:  #F0616B; --danger-soft:  rgba(240,97,107,.12); --danger-border:  rgba(240,97,107,.35);

    /* Data-viz — rampa categórica de luminancia pareja sobre --surface-1,
       para que ninguna serie domine por brillo. */
    --cat-1: #4FB6E6; --cat-2: #A78BFA; --cat-3: #2DD4BF; --cat-4: #E2A336;
    --cat-5: #F0616B; --cat-6: #7CC96A; --cat-7: #818CF8; --cat-8: #E879B9;
    --chart-grid:  rgba(255,255,255,.05);
    --chart-axis:  #7E8693;
    --chart-label: #9AA2AD;

    /* Tipografía — escala fija en rem (el em compone al anidar) */
    --fs-caption:   0.6875rem;  /* 11px */
    --fs-footnote:  0.75rem;    /* 12px */
    --fs-body:      0.875rem;   /* 14px */
    --fs-body-lg:   1rem;       /* 16px */
    --fs-heading:   1.125rem;   /* 18px */
    --fs-title:     1.375rem;   /* 22px */
    --fs-metric:    1.75rem;    /* 28px */
    --fs-metric-lg: 2.25rem;    /* 36px */
    --lh-tight: 1.25; --lh-base: 1.5; --lh-loose: 1.7;

    /* Geometría */
    --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-xl: 12px;
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --h-control: 34px;

    /* Elevación — una sola sombra, y solo para lo que flota de verdad */
    --shadow-popover: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
    --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--accent);

    /* Movimiento */
    --dur-fast: 90ms; --dur-base: 150ms; --ease-out: cubic-bezier(.2,.6,.35,1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-base);
    color: var(--text-primary); background: var(--surface-0); min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  /* Cifras tabulares en todo lo que sea dato: las columnas dejan de bailar */
  .num, .mono, td, th { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--font-mono); }

  h1, h2, h3, h4 { font-weight: 500; line-height: var(--lh-tight); }
  h1 { font-size: var(--fs-title); }
  h2 { font-size: var(--fs-heading); }
  h3 { font-size: var(--fs-body); }

  /* CONTROLES — base común; las reglas por componente solo ajustan.
     `min-height`, no `height`: con altura fija, cualquier componente que
     redefina el padding sin redefinir también la altura acaba con una caja de
     contenido más baja que su propia línea de texto, y el navegador recorta las
     letras por abajo en silencio. Le pasaba a todo `select.l10-inp` (padding
     10px + texto de 14px contra 34px fijos = 12px de caja para 21px de línea) y
     a `.form-input` del check-in. Con min-height el control crece en vez de
     cortar, y el que ya cabía se ve idéntico. */
  /* `input:not([type])` va en la lista porque el selector de atributo NO casa
     con el default: un `<input>` sin `type` es de tipo text para el navegador
     pero invisible para `input[type=text]`. Media app escribe los inputs sin
     type, así que la regla base del design system no les aplicaba y salían con
     el estilo nativo del navegador. Misma especificidad (0,1,1) que el resto de
     la lista, así que no le gana a ninguna clase de componente. */
  input[type=text], input[type=number], input[type=search], input[type=date], input:not([type]), select, textarea {
    font-family: inherit; font-size: var(--fs-footnote); color: var(--text-primary);
    background: var(--surface-2); border: 0.5px solid var(--border);
    border-radius: var(--radius-sm); padding: 0 var(--sp-3); min-height: var(--h-control);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  textarea { min-height: 0; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-base); resize: vertical; }
  input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
  input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: none; }
  ::placeholder { color: var(--text-muted); }

  /* AUTH SCREEN */
  #auth-screen {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--surface-0);
  }
  .auth-card {
    background: var(--surface-1); border: 0.5px solid var(--border);
    border-radius: var(--radius-xl); padding: 48px 40px;
    text-align: center; max-width: 400px; width: 90%;
  }
  .auth-card .logo { margin-bottom: 20px; }
  .auth-card .logo img { width: 56px; height: 56px; border-radius: 12px; }
  .auth-card h1 {
    font-weight: 600; font-size: var(--fs-title); color: var(--text-primary); margin-bottom: 4px;
  }
  .auth-card .auth-eyebrow {
    font-family: var(--font-mono); font-size: var(--fs-footnote);
    color: var(--text-muted); margin-bottom: 24px;
  }
  .auth-card .auth-endorse { margin-top: 28px; padding-top: 18px; border-top: 0.5px solid var(--border); }
  .auth-card .auth-endorse img { height: 26px; filter: brightness(0) invert(1); opacity: 0.55; }
  .auth-card p { color: var(--text-muted); margin-bottom: 32px; font-size: var(--fs-body); }
  .btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: #fff; color: #333; border: none; border-radius: 8px;
    padding: 14px 24px; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
    width: 100%; transition: all 0.2s;
  }
  .btn-google:hover { background: #f0f0f0; transform: translateY(-1px); }
  .btn-google img { width: 20px; }
  .btn-microsoft {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: #0078d4; color: var(--text-primary); border: none; border-radius: 8px;
    padding: 14px 24px; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
    width: 100%; transition: all 0.2s; margin-top: 12px;
  }
  .btn-microsoft:hover { background: #106ebe; transform: translateY(-1px); }
  .btn-microsoft svg { width: 20px; height: 20px; flex-shrink: 0; }
  .auth-divider { color: var(--text-disabled); font-size: var(--fs-caption); margin: 8px 0; }

  /* DASHBOARD — shell de dos columnas: navegación fija + contenido.
     app.js lo pone en 'grid' al autenticar (antes 'block' con tabs arriba). */
  #dashboard { display: none; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
  .main { min-width: 0; }

  /* ── SIDEBAR ──────────────────────────────────────────────────
     Los 10 tabs horizontales tenían overflow-x: auto — en pantallas
     normales había que hacer scroll lateral para llegar al último. */
  .side {
    border-right: 0.5px solid var(--border);
    padding: var(--sp-4) var(--sp-3);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .side-brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-5); }
  .side-brand img { width: 22px; height: 22px; border-radius: var(--radius-sm); display: block; }
  .side-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); }
  .side-group {
    font-size: var(--fs-caption); color: var(--text-muted);
    padding: var(--sp-4) var(--sp-2) var(--sp-1);
  }
  .topbar {
    background: var(--surface-0); border-bottom: 0.5px solid var(--border);
    padding: var(--sp-3) var(--sp-6); display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
  }
  .crumb { font-size: var(--fs-footnote); color: var(--text-muted); }
  .crumb b { color: var(--text-primary); font-weight: 500; }
  .kr-row-clickable { cursor: pointer; }
  .kr-row-clickable:hover { background: var(--surface-2); }
  .okr-card-clickable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); }
  .okr-card-clickable:hover { border-color: var(--border-strong); }
  .topbar .user-info { display: flex; align-items: center; gap: 10px; }
  .topbar .user-info img { width: 26px; border-radius: 50%; }
  .topbar .user-name { font-size: var(--fs-footnote); color: var(--text-secondary); }
  .btn-logout {
    background: transparent; border: 0.5px solid var(--border-strong); color: var(--text-secondary);
    padding: 0 var(--sp-3); height: 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-caption);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .btn-logout:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

  /* CURRENCY SELECTOR — segmented control */
  .currency-toggle {
    display: inline-flex; align-items: center; margin-right: var(--sp-2);
    border: 0.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  }
  .currency-btn {
    border: none; background: transparent; color: var(--text-muted);
    height: 28px; padding: 0 10px; cursor: pointer;
    font-family: inherit; font-size: var(--fs-caption); font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .currency-btn.active { background: var(--surface-2); color: var(--text-primary); }
  .currency-btn:hover:not(.active) { color: var(--text-secondary); }

  /* NAV ITEMS del sidebar (conservan la clase .tab: showTab() los busca así) */
  .tab {
    display: flex; align-items: center; gap: 9px;
    padding: 6px var(--sp-2); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: var(--fs-footnote); cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .tab:hover { background: var(--surface-2); color: var(--text-primary); }
  .tab.active { background: var(--surface-2); color: var(--text-primary); }
  .tab svg { color: var(--text-muted); }
  .tab.active svg { color: var(--accent); }

  /* CONTENT */
  .tab-content { display: none; padding: var(--sp-6); }
  .tab-content.active { display: block; }

  /* KPI CARDS — sin border-left: un borde de un solo lado con esquinas
     redondeadas nunca cierra bien. El estado va en el subtexto. */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .kpi-card { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); }
  .kpi-card .kpi-label { font-size: var(--fs-footnote); color: var(--text-secondary); margin-bottom: var(--sp-2); }
  .kpi-card .kpi-value { font-size: var(--fs-metric); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
  .kpi-card .kpi-sub { font-size: var(--fs-footnote); color: var(--text-muted); margin-top: var(--sp-2); }

  /* ICONOS (Lucide) — por defecto salen a 24px, que en texto de 12px es un
     bloque. Se atan al tamaño de la línea y se alinean a la base; los
     componentes que quieran otro tamaño lo fijan aparte (ver .btn-action). */
  svg.lucide {
    width: 1.05em; height: 1.05em; vertical-align: -0.15em;
    flex-shrink: 0; stroke-width: 2;
  }

  /* Punto de estado — señal de semáforo sin el peso de un icono */
  .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; vertical-align: 2px; margin-right: 5px; }
  .dot--ok { background: var(--success); }
  .dot--warn { background: var(--warning); }
  .dot--bad { background: var(--danger); }
  .dot--idle { background: var(--text-disabled); }

  /* Equipo: KPIs compactos para caber los 7 en una sola fila */
  #kpi-equipo { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
  #kpi-equipo .kpi-card { padding: var(--sp-3); }
  #kpi-equipo .kpi-card .kpi-value { font-size: var(--fs-heading); }
  #kpi-equipo .kpi-card .kpi-label { font-size: var(--fs-caption); }
  #kpi-equipo .kpi-card .kpi-sub { font-size: var(--fs-caption); }

  /* CHARTS */
  .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
  .chart-card { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-5); }
  .chart-card h3 { font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); margin-bottom: var(--sp-4); }
  .chart-wrap { position: relative; height: 240px; }

  /* TABLE — filas con hairline; la card por fila multiplica el ruido */
  .table-card { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-5); margin-bottom: var(--sp-4); overflow-x: auto; }
  .table-card h3 { font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); margin-bottom: var(--sp-4); }
  table { width: 100%; border-collapse: collapse; font-size: var(--fs-footnote); }
  th { text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--text-muted); border-bottom: 0.5px solid var(--border); font-weight: 500; }
  td { padding: var(--sp-3); border-bottom: 0.5px solid var(--border); color: var(--text-primary); }
  tbody tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--surface-2); }

  /* Directorio inline edit */
  td.dir-editable { cursor:default; }
  td.dir-editable:hover { background:var(--accent-soft); }
  td.dir-cell-changed { background:var(--warning-soft) !important; }
  .dir-edit-input {
    border-color:var(--accent-border);border-radius:var(--radius-sm);
    font-size:inherit;width:100%;box-sizing:border-box;min-height:26px;padding:0 var(--sp-2);
  }
  .dir-edit-input:focus { border-color:var(--accent); }
  .dir-perfil-badge {
    font-size:var(--fs-caption);padding:2px 8px;border-radius:6px;font-weight:600;display:inline-block;
  }
  td.dir-edit-col { width:28px;padding:4px 6px !important;text-align:center; }
  .dir-edit-btn {
    visibility:hidden;cursor:pointer;color:var(--accent);font-size:var(--fs-body);
    padding:2px 5px;border-radius:4px;user-select:none;line-height:1;
  }
  tr:hover .dir-edit-btn { visibility:visible; }
  .dir-edit-btn:hover { background:var(--accent-soft); }

  /* ADKAR */
  .adkar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .org-btn { background:var(--surface-3);color:var(--text-secondary);border:none;border-radius:8px;padding:8px 18px;cursor:pointer;font-size:var(--fs-footnote);font-weight:600;transition:all 0.15s; }
  .org-btn:hover { background:var(--text-disabled); }
  .org-btn-active { background:var(--accent) !important;color:var(--text-primary) !important; }
  /* Org tree styles */
  .org-node { display:inline-flex;flex-direction:column;align-items:center; }
  .org-card { background:var(--surface-1);border-radius:10px;padding:10px 14px;min-width:130px;max-width:160px;text-align:center;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;border:2px solid transparent;position:relative; }
  .org-card:hover { transform:translateY(-2px);border-color:var(--border-strong); }
  .org-card .oc-name { font-size:var(--fs-caption);font-weight:600;color:var(--text-primary);line-height:1.3;margin-bottom:3px; }
  .org-card .oc-cargo { font-size:var(--fs-caption);color:var(--text-muted);line-height:1.2; }
  .org-card .oc-badge { position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;font-size:var(--fs-caption);display:flex;align-items:center;justify-content:center;font-weight:600; }
  .org-children { display:flex;gap:0;position:relative;padding-top:20px; }
  .org-children::before { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:20px;background:var(--surface-3); }
  .org-connector { position:relative;padding:0 8px; }
  .org-connector::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--surface-3); }
  .org-connector:first-child::before { left:50%; }
  .org-connector:last-child::before { right:50%; }
  .org-connector::after { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:20px;background:var(--surface-3); }
  /* Proyecto cards */
  .proyecto-card { background:var(--surface-1);border-radius:12px;padding:18px;border-top:4px solid; }
  .proyecto-card .p-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
  .proyecto-card .p-title { font-weight:600;color:var(--text-primary);font-size:var(--fs-body); }
  .proyecto-card .p-status { font-size:var(--fs-caption);padding:3px 10px;border-radius:10px;font-weight:600; }
  .proyecto-card .p-members { display:flex;flex-direction:column;gap:6px; }
  .proyecto-card .p-member { background:var(--surface-3);border-radius:8px;padding:7px 12px;font-size:var(--fs-caption);color:var(--text-secondary);display:flex;align-items:center;gap:8px; }
  .proyecto-card .p-member.lead { background:var(--accent-soft);border:1px solid var(--accent);color:var(--text-primary); }
  .proyecto-card .p-member .m-name { font-weight:600;flex:1; }
  .proyecto-card .p-member .m-cargo { font-size:var(--fs-caption);color:var(--text-muted); }
  .proyecto-card .p-member .m-equipo { font-size:var(--fs-caption);color:var(--text-disabled);background:var(--surface-1);padding:2px 7px;border-radius:4px; }

  /* ── Canvas modelo operativo (org) ── */
  .org-eyebrow { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted); }
  #org-canvas { border:0.5px solid var(--border);border-radius:var(--radius-xl);padding:18px; }
  .oc-cdo-wrap { display:flex;flex-direction:column;align-items:center;margin-bottom:14px; }
  .oc-cdo { background:var(--surface-1);border:1px solid var(--accent);border-radius:12px;padding:10px 24px;text-align:center;box-shadow:0 0 0 3px var(--accent-soft); }
  .oc-cdo-lab { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--accent);margin-bottom:3px; }
  .oc-cdo-nm { font-family:var(--font-sans);font-size:var(--fs-body);font-weight:600;color:var(--text-primary); }
  .oc-cdo-sub { font-size:var(--fs-caption);color:var(--text-muted); }
  .oc-stem { width:2px;height:16px;background:var(--surface-3); }
  .oc-empty { text-align:center;padding:48px 20px;color:var(--text-muted); }

  #oc-board { display:flex;flex-direction:column;gap:16px; }
  .oc-lane { border:0.5px solid var(--border);border-radius:12px;background:rgba(20,27,43,.45);padding:12px; }
  .oc-lane.tv { border-color:var(--success-border); }
  .oc-lane-head { display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap; }
  .oc-lead-chip { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--on-accent);background:var(--accent);border-radius:20px;padding:5px 12px;font-weight:600; }
  .oc-lane.tv .oc-lead-chip { background:var(--success); }
  .oc-lane-who { font-size:var(--fs-caption);color:var(--text-secondary);font-weight:600; }
  .oc-tv-tag { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--success);border:1px solid var(--success-border);border-radius:6px;padding:2px 7px; }
  .oc-area-head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap; }
  .oc-area-info { padding-left:10px; }
  .oc-area-eyebrow { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:2px; }
  .oc-area-name { font-family:var(--font-sans);font-size:var(--fs-body);font-weight:600;color:var(--text-primary);line-height:1.1; }
  .oc-area-btns { display:flex;align-items:center;gap:8px; }
  /* Líder de área como nodo del árbol */
  .oc-area-tree { display:flex;flex-direction:column;align-items:center; }
  .oc-lead-box { background:var(--surface-1);border:1px solid var(--accent);border-radius:10px;padding:7px 20px;text-align:center;min-width:170px;box-shadow:0 0 0 3px var(--accent-soft); }
  .oc-lead-box.empty { box-shadow:none;opacity:.7;border-style:dashed; }
  .oc-lead-lab { font-family:var(--font-mono);font-size:var(--fs-caption);margin-bottom:2px; }
  .oc-lead-nm { font-family:var(--font-sans);font-size:var(--fs-footnote);font-weight:600;color:var(--text-primary);line-height:1.15; }
  .oc-lead-sub { font-size:var(--fs-caption);color:var(--text-muted);margin-top:1px; }
  .oc-teams { width:100%; }
  .oc-add { background:transparent;color:var(--text-secondary);border:0.5px solid var(--border-strong);border-radius:var(--radius-sm);height:24px;padding:0 var(--sp-2);cursor:pointer;font-size:var(--fs-caption);font-weight:500;display:inline-flex;align-items:center;gap:6px; }
  .oc-add:hover { background:var(--surface-2);color:var(--text-primary); }
  .oc-cabeza { display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--text-secondary);background:transparent;border:0;border-bottom:0.5px solid var(--border);border-radius:0;padding:0 2px 7px;margin-bottom:8px; }
  .oc-cabeza-txt { display:flex;flex-direction:column;gap:1px; }
  .oc-cabeza-role { color:var(--text-muted);font-weight:400;font-size:var(--fs-footnote); }
  /* `safe center`: centrado cuando la fila cabe, pero alineado al inicio cuando
     desborda. Con `center` a secas los dos extremos quedan inalcanzables — el
     primer y el último sub-equipo se cortan y no hay scroll que los recupere.
     La declaración previa es el fallback para quien no entienda `safe`. */
  .oc-teams { display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scrollbar-width:thin;
              justify-content:center;justify-content:safe center; }
  .oc-team { flex:1 0 190px;max-width:300px;background:var(--surface-1);border:0.5px solid var(--border);border-radius:11px;padding:11px;display:flex;flex-direction:column;min-height:118px;transition:border-color .12s,background .12s,box-shadow .12s; }
  .oc-team.tv { border-top:2px solid var(--success); }
  .oc-team.over { border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft); }
  .oc-team-top { display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:9px; }
  .oc-team-title { display:flex;align-items:center;gap:6px;min-width:0; }
  .oc-team-grip { cursor:grab;color:var(--text-muted);font-size:var(--fs-footnote);line-height:1;flex-shrink:0;user-select:none;transition:.12s; }
  .oc-team-grip:hover { color:var(--text-secondary); }
  .oc-team-grip:active { cursor:grabbing; }
  .oc-team.team-dragging { opacity:.4; }
  .oc-team.ins-col-before { box-shadow:inset 3px 0 0 -1px var(--accent); }
  .oc-team.ins-col-after { box-shadow:inset -3px 0 0 -1px var(--accent); }
  .oc-team-name { font-size:var(--fs-footnote);font-weight:600;color:var(--text-primary); }
  .oc-team-actions { display:flex;align-items:center;gap:6px; }
  .oc-team-count { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted);font-variant-numeric:tabular-nums; }
  .oc-mini { background:transparent;color:var(--text-muted);border:0.5px solid var(--border-strong);border-radius:var(--radius-sm);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-caption); }
  .oc-mini:hover { background:var(--surface-2);color:var(--text-primary); }
  .oc-members { display:flex;flex-direction:column;gap:5px;flex:1;min-height:30px; }
  .oc-chip { display:flex;align-items:center;gap:8px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:8px;padding:5px 8px;cursor:grab;user-select:none; }
  .oc-chip[draggable=true]:active { cursor:grabbing; }
  .oc-chip.dragging { opacity:.4; }
  .oc-chip.vac { border-style:dashed;opacity:.88; }
  .oc-av { width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:600;color:var(--on-accent); }
  .oc-chip.vac .oc-av { border:1px dashed var(--text-disabled);color:var(--text-muted); }
  .oc-chip-txt { display:flex;flex-direction:column;line-height:1.15;min-width:0; }
  .oc-cn { font-size:var(--fs-caption);color:var(--text-secondary);font-weight:500; }
  .oc-cr { font-size:var(--fs-caption);color:var(--text-muted); }
  .oc-hint { font-size:var(--fs-caption);color:var(--text-disabled);font-style:italic;text-align:center;padding:6px 0; }
  /* Tick de confirmación "seguro en su posición" */
  .oc-chip.confirmed { box-shadow:inset 2px 0 0 var(--success); }
  .oc-confirm { margin-left:auto;flex-shrink:0;width:18px;height:18px;border-radius:var(--radius-sm);border:0.5px solid var(--border-strong);background:transparent;color:transparent;cursor:pointer;font-size:var(--fs-caption);line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s; }
  .oc-confirm:hover:not(:disabled) { border-color:var(--success); }
  .oc-confirm.on { background:var(--success-soft);border-color:var(--success);color:var(--success);font-weight:600; }
  .oc-confirm:disabled { cursor:default; }
  /* Indicadores de inserción al reordenar miembros */
  .oc-chip.ins-before { box-shadow:inset 0 3px 0 -1px var(--accent); }
  .oc-chip.ins-after { box-shadow:inset 0 -3px 0 -1px var(--accent); }
  .oc-members.ins-empty { box-shadow:inset 0 0 0 2px var(--accent-border);border-radius:6px; }

  .oc-layout { display:flex;gap:16px;align-items:flex-start; }
  .oc-main { flex:1;min-width:0; }
  .oc-pool { width:240px;flex-shrink:0;align-self:flex-start;position:sticky;top:12px;max-height:calc(100vh - 96px);overflow-y:auto;border:1px dashed var(--text-disabled);border-radius:12px;background:rgba(15,21,33,.6);padding:12px;transition:border-color .12s,background .12s; }
  .oc-pool.over { border-color:var(--accent);background:var(--accent-soft); }
  .oc-pool--collapsed { width:40px;padding:12px 0;max-height:none;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .12s,border-color .12s,background .12s; }
  .oc-pool--collapsed:hover, .oc-pool--collapsed.over { opacity:1; }
  .oc-pool--collapsed .oc-pool-ttl { writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap; }
  .oc-pool--collapsed .oc-pool-members { display:none; }
  .oc-pool-top { margin-bottom:8px; }
  .oc-pool-ttl { font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted); }
  .oc-search { width:100%;margin-bottom:10px; }
  .oc-pool-members { display:flex;flex-direction:column;gap:6px; }
  .oc-pool-members .oc-chip { min-width:0; }
  @media (max-width:760px) {
    .oc-layout { flex-direction:column; }
    .oc-teams { flex-wrap:wrap;overflow-x:visible; }
    .oc-team { flex:1 1 100%;max-width:none; }
    .oc-pool { width:auto;position:static;max-height:none;order:2; }
    .oc-pool--collapsed { width:auto;padding:8px 12px; }
    .oc-pool--collapsed .oc-pool-ttl { writing-mode:horizontal-tb;transform:none; }
    .oc-pool-members { flex-direction:row;flex-wrap:wrap; }
    .oc-pool-members .oc-chip { min-width:150px; }
  }
  .oc-flabel { font-size:var(--fs-caption);color:var(--text-muted);display:block;margin-bottom:6px; }
  .oc-finput { width:100%; }

  .adkar-card { background: var(--surface-1); border-radius: 12px; padding: 20px; }
  .adkar-card .adkar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .adkar-card .adkar-name { font-weight: 600; color: var(--text-primary); font-size: var(--fs-footnote); }
  .badge { padding: 3px 10px; border-radius: 20px; font-size: var(--fs-caption); font-weight: 600; }
  .badge-champion { background: var(--success-soft); color: var(--success); }
  .badge-promotor { background: var(--accent-soft); color: var(--cat-1); }
  .badge-pasivo { background: var(--warning-soft); color: var(--warning); }
  .badge-detractor { background: var(--danger-soft); color: var(--danger); }
  .adkar-bars { display: flex; flex-direction: column; gap: 8px; }
  .adkar-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-caption); }
  .adkar-label { color: var(--text-muted); width: 16px; font-weight: 600; }
  .adkar-bar-bg { flex: 1; background: var(--surface-3); border-radius: 4px; height: 6px; }
  .adkar-bar-fill { height: 6px; border-radius: 4px; background: var(--accent); }
  .adkar-score { color: var(--text-secondary); width: 28px; text-align: right; }
  .adkar-total { margin-top: 12px; text-align: right; font-size: var(--fs-footnote); color: var(--text-secondary); }

  /* FINDINGS */
  .finding-item { background: var(--surface-1); border-radius: 10px; padding: 16px; margin-bottom: 12px; border-left: 3px solid var(--accent); }
  .finding-cat { font-size: var(--fs-caption); color: var(--accent); margin-bottom: 4px; }
  .finding-title { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
  .finding-desc { font-size: var(--fs-footnote); color: var(--text-secondary); }

  .backlog-item { background: var(--surface-1); border-radius: 10px; padding: 14px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start; }
  .severity { padding: 3px 8px; border-radius: 4px; font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
  .severity-DEALBREAKER { background: var(--danger-soft); color: var(--danger); }
  .severity-HIGH { background: var(--warning-soft); color: var(--warning); }
  .severity-MEDIUM { background: var(--accent-soft); color: var(--cat-1); }
  .backlog-title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-footnote); }
  .backlog-meta { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 4px; }

  /* RATE BADGE */
  .rate-badge { background: var(--surface-3); border-radius: 8px; padding: 8px 14px; font-size: var(--fs-caption); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; }
  .rate-badge span { color: var(--success); font-weight: 600; }

  /* SECTION TITLE */
  .section-title { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 16px; margin-top: 28px; border-bottom: 0.5px solid var(--border); padding-bottom: 8px; }

  /* ── MOBILE BOTTOM NAV ──────────────────────────────────────── */
  .mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface-1); border-top: 0.5px solid var(--border);
    z-index: 200; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-disabled); cursor: pointer;
    padding: 6px 2px; min-width: 64px; flex-shrink: 0;
    transition: color 0.2s;
  }
  .mobile-nav-btn.active { color: var(--accent); }
  .mobile-nav-btn:hover { color: var(--text-secondary); }
  .mobile-nav-icon { font-size: var(--fs-heading); line-height: 1; }
  .mobile-nav-label { font-size: var(--fs-caption); font-weight: 600; margin-top: 2px; white-space: nowrap; }

  @media (max-width: 640px) {
    /* Bottom nav en vez de sidebar; el shell pasa a una sola columna */
    .mobile-nav { display: flex; }
    #dashboard { grid-template-columns: 1fr; }
    .side { display: none; }

    /* Topbar compact: la miga cede espacio antes que desbordar */
    .topbar { padding: 10px 12px; gap: 10px; }
    .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar .user-info { flex-shrink: 0; }
    .topbar .user-info { gap: 8px; }
    .topbar .user-name { font-size: var(--fs-caption); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn-logout { padding: 5px 10px; font-size: var(--fs-caption); }
    .currency-toggle { margin-right: 6px; }
    .currency-btn { padding: 4px 10px; font-size: var(--fs-caption); }

    /* Content area with bottom padding for nav */
    .tab-content { padding: 14px 12px 80px; }

    /* Grids single column */
    .chart-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .adkar-grid { grid-template-columns: 1fr; }

    /* Charts smaller */
    .chart-wrap { height: 220px; }
    .chart-card { padding: 14px; }
    .chart-card h3 { font-size: var(--fs-caption); margin-bottom: 10px; }

    /* KPI cards compact */
    .kpi-card { padding: 14px 12px; }
    .kpi-card .kpi-value { font-size: var(--fs-heading); }
    .kpi-card .kpi-label { font-size: var(--fs-caption); }
    .kpi-card .kpi-sub { font-size: var(--fs-caption); }

    /* Tables scroll */
    .table-card { padding: 12px; }
    table { font-size: var(--fs-caption); }
    th, td { padding: 8px 6px; }

    /* Modals full-width on mobile */
    .modal-box { width: 95vw !important; max-width: 95vw !important; padding: 20px 16px; border-radius: 12px; }

    /* Toolbar wrap */
    .toolbar { gap: 8px; }
    .filter-select { font-size: var(--fs-caption); padding: 6px 8px; }
    .btn-action { font-size: var(--fs-caption); padding: 7px 12px; }

    /* OKR view toggle scrollable */
    .okr-view-toggle { overflow-x: auto; flex-wrap: nowrap; }
    .okr-nav-btn { font-size: var(--fs-caption); padding: 5px 10px; white-space: nowrap; }

    /* Check-in adjustments */
    .checkin-header h2 { font-size: var(--fs-body); }
    .checkin-summary { gap: 8px; }
    .checkin-summary-card { min-width: 100px; padding: 10px 12px; }
    .checkin-summary-card .cs-number { font-size: var(--fs-body-lg); }
    .ci-obj-header { padding: 10px 12px; }
    .ci-save-bar { padding: 12px 12px calc(72px + env(safe-area-inset-bottom)); }

    /* Org tree horizontal scroll */
    #org-tree-container { overflow-x: auto; }
    .org-card { min-width: 100px; max-width: 120px; padding: 8px 10px; }
    .org-card .oc-name { font-size: var(--fs-caption); }
    .org-card .oc-cargo { font-size: var(--fs-caption); }

    /* ADKAR info compact */
    .adkar-info { padding: 16px 14px; }
    .adkar-dim-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Proyecto cards */
    #proyectos-grid { grid-template-columns: 1fr; }

    /* Campo */
    #campo-tree { flex-direction: column; gap: 8px; }

    /* Rate badge */
    .rate-badge { font-size: var(--fs-caption); padding: 6px 10px; }

    /* Section title */
    .section-title { font-size: var(--fs-caption); margin-top: 20px; }
  }

  /* Extra small - narrow phones */
  @media (max-width: 360px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .currency-toggle { display: none; }
    .adkar-dim-grid { grid-template-columns: 1fr; }
  }
  #okr-grid { grid-template-columns: repeat(3,1fr) !important; }
  @media (max-width: 900px) { #okr-grid { grid-template-columns: repeat(2,1fr) !important; } }
  @media (max-width: 560px) { #okr-grid { grid-template-columns: 1fr !important; } }

  /* ── CHECK-IN MASIVO ─────────────────────────────────────────── */
  .checkin-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px; }
  .checkin-header h2 { font-size:var(--fs-body-lg);color:var(--text-primary); }
  .checkin-header h2 span { color:var(--accent); }
  .checkin-filters { display:flex;gap:10px;flex-wrap:wrap;align-items:center; }
  
  .checkin-filters select:focus, .checkin-filters input:focus { border-color:var(--accent); }
  .checkin-summary { display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap; }
  .checkin-summary-card {
    background:var(--surface-1);border-radius:10px;padding:14px 20px;
    border:0.5px solid var(--border);flex:1;min-width:140px;text-align:center;
  }
  .checkin-summary-card .cs-number { font-size:var(--fs-title);font-weight:600; }
  .checkin-summary-card .cs-label { font-size:var(--fs-caption);color:var(--text-muted);margin-top:4px; }
  .ci-obj-header {
    display:flex;align-items:center;gap:12px;padding:14px 18px;
    background:var(--surface-1);border-radius:12px 12px 0 0;border:0.5px solid var(--border);border-bottom:none;
  }
  .ci-obj-title { font-size:var(--fs-footnote);font-weight:600;color:var(--text-primary);flex:1; }
  .ci-obj-meta { font-size:var(--fs-caption);color:var(--text-muted); }
  .ci-obj-pct { font-size:var(--fs-body-lg);font-weight:600;min-width:50px;text-align:right; }
  .ci-kr-table {
    background:var(--surface-1);border-radius:0 0 12px 12px;border:0.5px solid var(--border);
    border-top:none;overflow:hidden;margin-bottom:28px;
  }
  .ci-kr-row-header {
    display:grid;grid-template-columns:1fr 120px 100px 80px 100px 60px;
    gap:12px;padding:10px 18px;font-size:var(--fs-caption);font-weight:600;color:var(--accent);background:var(--surface-1);
  }
  .ci-persona-divider {
    display:flex;align-items:center;gap:10px;padding:8px 18px;
    background:var(--surface-1);border-bottom:0.5px solid var(--border);
  }
  .ci-persona-avatar {
    width:26px;height:26px;border-radius:50%;background:var(--accent-soft);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-caption);color:var(--accent);font-weight:600;
  }
  .ci-persona-name { font-size:var(--fs-caption);color:var(--text-secondary);font-weight:600; }
  .ci-persona-count { font-size:var(--fs-caption);color:var(--text-disabled); }
  .ci-kr-wrap { border-bottom:0.5px solid var(--border);transition:background 0.15s; }
  .ci-kr-wrap:hover { background:var(--surface-2); }
  .ci-kr-data {
    display:grid;grid-template-columns:1fr 120px 100px 80px 100px 60px;
    align-items:center;gap:12px;padding:14px 18px 8px;
  }
  .ci-kr-name { font-size:var(--fs-footnote);font-weight:600;color:var(--text-primary); }
  .ci-kr-meta { font-size:var(--fs-caption);color:var(--text-muted);margin-top:2px; }
  .ci-kr-bar { background:var(--surface-3);border-radius:4px;height:7px;width:100%; }
  .ci-kr-bar-fill { height:7px;border-radius:4px;transition:width 0.3s; }
  .ci-kr-input { width:100%;text-align:center; }
  .ci-kr-input:focus { border-color:var(--accent); }
  .ci-kr-input.ci-changed { border-color:var(--warning);background:var(--warning-soft); }
  .ci-kr-unit { font-size:var(--fs-caption);color:var(--text-muted); }
  .ci-kr-pct { font-weight:600;font-size:var(--fs-footnote);text-align:right; }
  .ci-save-badge { font-size:var(--fs-caption);padding:2px 8px;border-radius:6px;font-weight:600;text-align:center; }
  .ci-save-badge.ci-modified { background:var(--warning-soft);color:var(--warning); }
  .ci-save-badge.ci-saved { background:var(--success-soft);color:var(--success); }
  .ci-note-row { padding:0 18px 14px; }
  .ci-note-row label { font-size:var(--fs-caption);color:var(--text-muted);font-weight:600;display:block;margin-bottom:4px; }
  .ci-note-input {
    background:var(--surface-0);color:var(--text-secondary);border:0.5px solid var(--border);
    border-radius:6px;padding:6px 10px;font-size:var(--fs-caption);width:100%;
    outline:none;resize:none;font-family:inherit;box-sizing:border-box;
  }
  .ci-note-input::placeholder { color:var(--text-disabled); }
  .ci-note-input:focus { border-color:var(--accent-border); }
  .ci-save-bar {
    position:fixed;bottom:0;left:0;right:0;
    background:var(--surface-0);border-top:0.5px solid var(--border);
    padding:14px 24px 18px;display:none;align-items:center;
    justify-content:center;gap:16px;z-index:100;
  }
  .ci-save-bar-inner {
    background:var(--surface-1);border:1px solid var(--accent-border);border-radius:14px;
    padding:14px 28px;display:flex;align-items:center;gap:16px;
    box-shadow:var(--shadow-popover);
  }
  .ci-changes-count { font-size:var(--fs-footnote);color:var(--warning);font-weight:600; }
  .ci-btn-save {
    background:var(--success);color:var(--text-primary);border:none;border-radius:8px;
    padding:10px 28px;cursor:pointer;font-size:var(--fs-footnote);font-weight:600;transition:background 0.2s;
  }
  .ci-btn-save:hover { background:var(--success); }
  .ci-btn-discard {
    background:transparent;color:var(--danger);border:1px solid var(--danger-border);
    border-radius:8px;padding:9px 18px;cursor:pointer;font-size:var(--fs-caption);
  }
  @media (max-width:900px) {
    .ci-kr-data, .ci-kr-row-header { grid-template-columns:1fr 90px 80px 60px; }
    .ci-kr-data > :nth-child(5), .ci-kr-row-header > :nth-child(5),
    .ci-kr-data > :nth-child(6), .ci-kr-row-header > :nth-child(6) { display:none; }
  }
  @media (max-width:640px) {
    .ci-kr-data { grid-template-columns:1fr;gap:8px;padding:12px 14px; }
    .ci-kr-row-header { display:none; }
    .ci-kr-data > :nth-child(5), .ci-kr-data > :nth-child(6) { display:block; }
  }

  /* ── BITÁCORA (historial de check-ins) ───────────────────────── */
  .bitacora-toggle {
    background:var(--surface-1);color:var(--accent);border:none;border-radius:5px;
    padding:3px 8px;cursor:pointer;font-size:var(--fs-caption);font-weight:600;
  }
  .bitacora-toggle:hover { background:var(--surface-3); }
  .bitacora-wrap {
    margin-top:8px;background:var(--surface-0);border-radius:8px;border:0.5px solid var(--border);
    padding:10px 12px;max-height:220px;overflow-y:auto;
    user-select:text;-webkit-user-select:text;cursor:auto;
  }
  .bitacora-nota a { color:var(--accent);text-decoration:underline;word-break:break-all; }
  .bitacora-entry {
    display:flex;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--border);
    font-size:var(--fs-caption);align-items:flex-start;
  }
  .bitacora-entry:last-child { border-bottom:none; }
  .bitacora-dot {
    width:8px;height:8px;border-radius:50%;background:var(--accent);
    flex-shrink:0;margin-top:5px;
  }
  .bitacora-date { color:var(--text-muted);min-width:80px;flex-shrink:0; }
  .bitacora-delta { font-weight:600;min-width:90px;flex-shrink:0; }
  .bitacora-nota { color:var(--text-secondary);flex:1;line-height:1.4; }
  .bitacora-user { color:var(--text-disabled);font-size:var(--fs-footnote); }
  .bitacora-empty { color:var(--text-disabled);font-size:var(--fs-caption);font-style:italic;padding:6px 0; }

  /* ── AUTH ──────────────────────────────────────────────────── */
  #auth-error { color:var(--danger); margin-top:16px; font-size:var(--fs-footnote); display:none; }

  /* ── LAYOUT UTILITIES ─────────────────────────────────────── */
  .toolbar { display:flex; gap:10px; margin-bottom:20px; align-items:center; flex-wrap:wrap; }
  .flex-spacer { flex:1; }
  .chart-grid--single { grid-template-columns:1fr; }
  .chart-wrap--short { height:220px; }

  /* Contador junto a un filtro de tabla ("12 de 84") y línea de error de un
     formulario. Existían solo como style="" con hex de la paleta v1. */
  .table-filter-count { color:var(--text-muted); font-size:var(--fs-caption); min-width:60px; font-variant-numeric:tabular-nums; }
  .form-error { color:var(--danger); font-size:var(--fs-caption); display:none; margin-top:10px; }

  /* ── FILTER SELECT ────────────────────────────────────────── */
  .filter-select {
    background:var(--surface-2); color:var(--text-primary); border:0.5px solid var(--border);
    border-radius:var(--radius-sm); height:var(--h-control); padding:0 var(--sp-3);
    font-family:inherit; font-size:var(--fs-footnote);
    transition:border-color var(--dur-fast) var(--ease-out);
  }
  .filter-select:hover { border-color:var(--border-strong); }
  .filter-select:focus { border-color:var(--accent); outline:none; }

  /* ── ACTION BUTTONS ───────────────────────────────────────────
     Secundario es el default. El primario (relleno de acento) se
     usa una sola vez por vista. */
  .btn-action {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    height:var(--h-control); padding:0 var(--sp-3);
    font-family:inherit; font-size:var(--fs-footnote); font-weight:500;
    color:var(--text-primary); background:transparent;
    border:0.5px solid var(--border-strong); border-radius:var(--radius-sm);
    cursor:pointer; white-space:nowrap;
  }
  .btn-action:hover { background:var(--surface-2); border-color:var(--border-stronger); }
  .btn-action--primary { background:var(--accent); color:var(--on-accent); border-color:transparent; }
  .btn-action--primary:hover { background:var(--accent-hover); }
  .btn-action--success { background:var(--success); color:var(--on-accent); border-color:transparent; }
  .btn-action--cancel { border-color:transparent; color:var(--text-secondary); }
  .btn-action--secondary { color:var(--text-secondary); }
  .btn-action--warning { color:var(--warning); }
  .btn-action--export { color:var(--success); }
  .btn-action--export:hover { background:var(--success-soft); border-color:var(--success); }
  .btn-action--close { border-color:transparent; color:var(--text-secondary); }
  .btn-action i, .btn-action svg { width:15px; height:15px; }

  /* ── MODALS ───────────────────────────────────────────────── */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(4,6,10,.72); z-index:1000; align-items:center; justify-content:center; }
  .modal-overlay--dim { background:rgba(4,6,10,.66); }
  .modal-overlay--z1001 { z-index:1001; }
  .modal-overlay--z1002 { z-index:1002; }
  .modal-overlay--z1003 { z-index:1003; }
  .modal-box { background:var(--surface-3); border-radius:var(--radius-xl); padding:var(--sp-6); max-width:95vw; max-height:88vh; overflow-y:auto; }
  .modal-box--420 { width:420px; max-height:none; }
  .modal-box--460 { width:460px; max-height:90vh; }
  .modal-box--480 { width:480px; max-height:85vh; }
  .modal-box--520 { width:520px; }
  .modal-box--560 { width:560px; }
  .modal-title { color:var(--text-primary); margin-bottom:18px; }
  .modal-title--sm { margin-bottom:16px; }
  .modal-title--success { color:var(--success); margin-bottom:6px; }
  .modal-title--lg { margin-bottom:20px; }
  .modal-footer { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }

  /* ── DIÁLOGOS (stAlert / stConfirm / stPrompt) ───────────────
     Reemplazan alert/confirm/prompt nativos. z-index por encima de
     .modal-overlay (máx. 1003): un aviso puede salir sobre un modal. */
  #st-dlg-root { position:relative; z-index:2000; }
  .st-dlg-overlay {
    position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(4,6,10,.72);
    opacity:0; transition:opacity .12s ease;
  }
  .st-dlg-overlay.in { opacity:1; }
  .st-dlg-overlay.closing { opacity:0; }
  .st-dlg {
    width:100%; max-width:440px; background:var(--surface-3); border:0.5px solid var(--border-strong);
    border-radius:var(--radius-xl); padding:22px 24px 18px; box-shadow:var(--shadow-popover);
    transform:translateY(6px) scale(.985); transition:transform .14s cubic-bezier(.2,.7,.3,1);
  }
  .st-dlg-overlay.in .st-dlg { transform:none; }
  /* Hairline superior teñido por tono: la señal de color sin fondos pesados. */
  .st-dlg { border-top-width:2px; border-top-style:solid; }
  .tone-error .st-dlg { border-top-color:var(--danger); }
  .tone-warn  .st-dlg { border-top-color:var(--warning); }
  .tone-ok    .st-dlg { border-top-color:var(--success); }
  .tone-info  .st-dlg { border-top-color:var(--accent); }
  .st-dlg-head { display:flex; gap:14px; align-items:flex-start; }
  .st-dlg-icon {
    flex:0 0 auto; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
    margin-top:2px;
  }
  .st-dlg-icon svg { width:16px; height:16px; }
  .tone-error .st-dlg-icon { background:var(--danger-soft);  border:0.5px solid var(--danger);  color:var(--danger); }
  .tone-warn  .st-dlg-icon { background:var(--warning-soft); border:0.5px solid var(--warning); color:var(--warning); }
  .tone-ok    .st-dlg-icon { background:var(--success-soft); border:0.5px solid var(--success); color:var(--success); }
  .tone-info  .st-dlg-icon { background:var(--accent-soft);  border:0.5px solid var(--accent-border); color:var(--accent); }
  .st-dlg-eyebrow {
    display:block; font-family:var(--font-mono); font-size:var(--fs-caption); font-weight:500;
    color:var(--text-muted); margin-bottom:5px;
  }
  .st-dlg-msg { color:var(--text-primary); font-size:var(--fs-body); line-height:var(--lh-base); white-space:pre-wrap; overflow-wrap:anywhere; }
  .st-dlg-input {
    width:100%; margin-top:14px; background:var(--surface-2); color:var(--text-primary);
    border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px;
    font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.45; resize:vertical; min-height:38px;
  }
  .st-dlg-input:focus { outline:none; border-color:var(--accent); box-shadow:none; }
  .st-dlg-foot { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
  .st-dlg-foot .btn-action:focus-visible { outline:none; box-shadow:var(--focus-ring); }
  .btn-action--danger { background:transparent; color:var(--danger); border:0.5px solid var(--border-strong); }
  .btn-action--danger:hover { background:var(--danger-soft); color:var(--danger); border-color:var(--danger); }
  /* El anillo de foco toma el color de la acción (el azul choca con el rojo). */
  .st-dlg-foot .btn-action--danger:focus-visible { box-shadow:0 0 0 2px var(--surface-0), 0 0 0 4px var(--danger); }
  @media (max-width:600px) { .st-dlg { padding:18px 18px 14px; } .st-dlg-foot .btn-action { flex:1; } }

  /* ── ADKAR INFO BANNER ────────────────────────────────────── */
  .adkar-info { background:var(--surface-1); border-radius:var(--radius-xl); padding:24px 28px; margin-bottom:24px; border:0.5px solid var(--border); }
  .adkar-info-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .adkar-info-icon { font-size:var(--fs-metric); }
  .adkar-info-title { font-size:var(--fs-body); font-weight:600; color:var(--text-primary); }
  .adkar-info-subtitle { font-size:var(--fs-caption); color:var(--text-muted); }
  .adkar-info-desc { font-size:var(--fs-footnote); color:var(--text-secondary); line-height:1.75; margin-bottom:14px; }
  .adkar-info-desc strong { color:var(--text-primary); }
  .adkar-dim-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:14px; }
  .adkar-dim-card { background:rgba(255,255,255,0.05); border-radius:8px; padding:10px 12px; }
  .adkar-dim-label { font-size:var(--fs-caption); font-weight:600; color:var(--accent); margin-bottom:4px; }
  .adkar-dim-desc { font-size:var(--fs-caption); color:var(--text-muted); line-height:1.4; }
  .adkar-info-footer { font-size:var(--fs-caption); color:var(--text-muted); line-height:1.6; border-top:0.5px solid var(--border); padding-top:12px; margin:0; }
  .adkar-info-footer strong { color:var(--text-secondary); }
  .text-champion { color:var(--success); }
  .text-promotor { color:var(--cat-1); }
  .text-pasivo { color:var(--warning); }
  .text-detractor { color:var(--danger); }

  /* ── OKR VIEW TOGGLE ──────────────────────────────────────── */
  .okr-view-toggle { display:flex; background:var(--surface-3); border-radius:8px; padding:3px; gap:2px; flex-wrap:wrap; }
  .okr-nav-btn { background:transparent; color:var(--text-muted); border:none; border-radius:6px; padding:5px 14px; cursor:pointer; font-size:var(--fs-caption); font-weight:600; }
  .okr-nav-btn.active { background:var(--accent); color:var(--text-primary); }

  /* ── OKR LAYOUT ───────────────────────────────────────────── */
  #okrs-stats { margin-bottom:20px; }
  #org-tree-container { overflow-x:auto; padding-bottom:16px; }
  #proyectos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
  #campo-tree { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }

  /* ── CHECKIN FORM ─────────────────────────────────────────── */
  .checkin-subtitle { color:var(--text-secondary); font-size:var(--fs-footnote); margin-bottom:18px; }
  .form-group { margin-bottom:14px; }
  .form-group--lg { margin-bottom:18px; }
  .form-label { color:var(--text-secondary); font-size:var(--fs-caption); display:block; margin-bottom:5px; }
  .form-row { display:flex; gap:8px; align-items:center; }
  .form-input { flex:1; }
  .form-hint { color:var(--text-muted); font-size:var(--fs-caption); margin-top:4px; }
  .form-unit { color:var(--text-muted); font-size:var(--fs-footnote); min-width:40px; }
  .form-textarea { width:100%; box-sizing:border-box; }

  /* ── TAGS FORM ────────────────────────────────────────────── */
  .tags-form-row { display:flex; gap:8px; margin-bottom:20px; }
  .tags-input { flex:1; }
  .tags-color-picker { width:40px; height:38px; border:none; border-radius:8px; background:var(--surface-3); cursor:pointer; padding:2px; }
  .tags-list { display:flex; flex-wrap:wrap; gap:8px; min-height:40px; }

  /* ── UPLOAD ───────────────────────────────────────────────── */
  .upload-drop-zone {
    border:2px dashed var(--text-disabled); border-radius:10px; padding:24px; text-align:center;
    cursor:pointer; transition:all 0.2s;
  }
  .upload-drop-zone:hover, .upload-drop-active { border-color:var(--accent); background:var(--accent-soft); }

  /* ── INSIGHTS ─────────────────────────────────────────────── */
  .insight-priority-card {
    background:var(--surface-2); border-radius:10px; padding:16px 20px; margin-bottom:10px;
    border-left:4px solid var(--text-disabled); border-top:0.5px solid var(--border);
    border-right:0.5px solid var(--border); border-bottom:0.5px solid var(--border);
  }
  .insight-tag {
    font-size:var(--fs-caption); padding:3px 10px; border-radius:20px; font-weight:500;
  }
  .insights-spinner {
    width:36px; height:36px; border:3px solid var(--surface-3); border-top-color:var(--accent);
    border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto;
  }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── CHAT ──────────────────────────────────────────────────── */
  .chat-fab {
    position:fixed; bottom:24px; right:24px; z-index:1000;
    width:56px; height:56px; border-radius:16px; border:none;
    background:var(--accent);
    color:var(--text-primary); font-size:var(--fs-heading); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-popover);
    transition:all 0.2s;
  }
  .chat-fab:hover { transform:translateY(-2px); }

  .chat-panel {
    position:fixed; bottom:0; right:0; z-index:1001;
    width:400px; height:70vh; max-height:640px;
    background:var(--surface-0); border-left:0.5px solid var(--border); border-top:0.5px solid var(--border);
    border-radius:16px 0 0 0;
    display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform 0.3s ease;
    box-shadow:var(--shadow-popover);
  }
  .chat-panel--open { transform:translateX(0); }

  .chat-header {
    padding:14px 16px; border-bottom:0.5px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(0,0,0,0.2); border-radius:16px 0 0 0; flex-shrink:0;
  }
  .chat-header-left { display:flex; align-items:center; gap:10px; }
  .chat-header-icon {
    width:32px; height:32px; border-radius:8px;
    background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-footnote); font-weight:600; color:var(--text-primary); flex-shrink:0;
  }
  .chat-header-title { font-size:var(--fs-footnote); font-weight:600; color:var(--text-primary); }
  .chat-header-sub { font-size:var(--fs-caption); color:var(--text-muted); }
  .chat-header-btn {
    background:none; border:none; color:var(--text-muted); font-size:var(--fs-body); cursor:pointer;
    padding:4px 8px; border-radius:6px; transition:all 0.15s;
  }
  .chat-header-btn:hover { background:rgba(255,255,255,0.06); color:var(--text-secondary); }

  .chat-messages {
    flex:1; overflow-y:auto; padding:16px; display:flex;
    flex-direction:column; gap:12px;
  }
  .chat-messages::-webkit-scrollbar { width:4px; }
  .chat-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }

  .chat-bubble-row { display:flex; gap:8px; align-items:flex-start; }
  .chat-avatar {
    width:24px; height:24px; border-radius:6px;
    background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-caption); font-weight:600; color:var(--text-primary); flex-shrink:0; margin-top:2px;
  }
  .chat-bubble--user {
    max-width:80%; padding:10px 14px; border-radius:14px 14px 4px 14px;
    background:var(--accent); color:var(--text-primary);
    font-size:var(--fs-caption); line-height:1.6; align-self:flex-end;
  }
  .chat-bubble--assistant {
    max-width:85%; padding:10px 14px; border-radius:14px 14px 14px 4px;
    background:rgba(255,255,255,0.05); color:var(--text-primary);
    font-size:var(--fs-caption); line-height:1.6;
    border:1px solid rgba(255,255,255,0.06);
  }
  .chat-code {
    background:rgba(0,0,0,0.15); padding:1px 5px; border-radius:3px; font-size:var(--fs-footnote);
  }

  .chat-typing { display:flex; gap:5px; align-items:center; padding:10px 14px; }
  .chat-dot {
    width:6px; height:6px; border-radius:50%; background:var(--accent);
    animation:chatPulse 1.2s ease-in-out infinite;
  }
  .chat-dot:nth-child(2) { animation-delay:0.2s; }
  .chat-dot:nth-child(3) { animation-delay:0.4s; }
  @keyframes chatPulse {
    0%,80%,100% { opacity:0.3; transform:scale(0.8); }
    40% { opacity:1; transform:scale(1); }
  }

  .chat-suggestions {
    padding:8px 16px; display:flex; gap:6px; flex-wrap:wrap;
    border-top:1px solid rgba(255,255,255,0.04); flex-shrink:0;
  }
  .chat-suggestion-pill {
    padding:6px 12px; border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03); color:var(--text-secondary);
    font-size:var(--fs-caption); cursor:pointer; transition:all 0.15s;
  }
  .chat-suggestion-pill:hover { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-hover); }

  .chat-input-row {
    padding:10px 12px 14px; border-top:1px solid rgba(255,255,255,0.06);
    display:flex; gap:8px; align-items:center;
    background:rgba(0,0,0,0.2); flex-shrink:0;
  }
  .chat-input-row input {
    flex:1; border:none; outline:none; background:rgba(255,255,255,0.06);
    color:var(--text-primary); font-size:var(--fs-caption); padding:10px 14px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
  }
  .chat-input-row input::placeholder { color:var(--text-disabled); }
  .chat-send-btn {
    width:36px; height:36px; border-radius:10px; border:none;
    background:var(--accent); color:var(--text-primary);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:var(--fs-body); flex-shrink:0; transition:all 0.15s;
  }
  .chat-send-btn:hover { transform:scale(1.05); }

  /* ── CHAT RESPONSIVE ──────────────────────────────────────── */
  @media (max-width:500px) {
    .chat-panel { width:100%; border-radius:0; height:100vh; max-height:100vh; }
    .chat-fab { bottom:80px; right:16px; }
  }

/* ── RECONOCIMIENTOS ─────────────────────────────────────────── */
.recon-feed-inner { max-width: 680px; margin: 0 auto; }
.recon-empty { text-align: center; padding: 60px 20px; color: var(--text-primary); }
.recon-card {
  background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 12px;
}
.recon-card-head { display: flex; align-items: center; gap: 10px; }
.recon-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 600;
  font-size: var(--fs-caption); color: var(--text-primary); flex-shrink: 0;
}
.recon-avatar--sm { width: 30px; height: 30px; font-size: var(--fs-caption); }
.recon-names { flex: 1; min-width: 0; font-size: var(--fs-footnote); line-height: 1.4; }
.recon-name { font-weight: 600; color: var(--text-primary); }
.recon-arrow { color: var(--text-muted); }
.recon-equipo { color: var(--text-muted); font-size: var(--fs-footnote); }
.recon-msg { margin-top: 10px; color: var(--text-primary); font-size: var(--fs-footnote); line-height: 1.5; word-break: break-word; }
.recon-meta { margin-top: 10px; color: var(--text-muted); font-size: var(--fs-caption); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recon-cat-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 3px 10px; font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
}
.recon-person-list {
  max-height: 200px; overflow-y: auto; border: 0.5px solid var(--border);
  border-radius: 8px; margin-top: 6px; background: var(--surface-0);
}
.recon-person-item {
  padding: 8px 12px; cursor: pointer; display: flex; gap: 10px;
  align-items: center; font-size: var(--fs-footnote); color: var(--text-primary);
}
.recon-person-item:hover { background: var(--surface-3); }
.recon-person-item--selected {
  cursor: default; border: 1px solid var(--accent); border-radius: 8px;
  margin-top: 6px; background: var(--accent-soft);
}
.recon-person-item--selected:hover { background: var(--accent-soft); }
.recon-person-clear {
  margin-left: auto; background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-body); padding: 4px 8px;
}
.recon-person-clear:hover { color: var(--danger); }
.recon-cat-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.recon-cat-option {
  border: 0.5px solid var(--border); border-radius: 999px; padding: 6px 12px;
  cursor: pointer; font-size: var(--fs-caption); color: var(--text-secondary); background: transparent;
  transition: all 0.15s;
}
.recon-cat-option:hover { border-color: var(--accent); color: var(--text-primary); }
.recon-config-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recon-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.recon-cat-del { background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--fs-footnote); }
.recon-cat-del:hover { color: var(--danger); }
.recon-mod-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}
.recon-mod-row--oculto { opacity: 0.45; }
.recon-tops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px 0; }
.recon-tops-title { font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.recon-tops-table { width: 100%; border-collapse: collapse; font-size: var(--fs-footnote); }
.recon-tops-table td { padding: 5px 6px; border-bottom: 0.5px solid var(--border); color: var(--text-primary); }
@media (max-width: 600px) {
  .recon-tops-grid { grid-template-columns: 1fr; }
  .recon-card { padding: 12px; }
}

/* ── CONDECORACIONES (imágenes en feed y modal) ──────────────── */
.recon-body { display: flex; gap: 14px; margin-top: 12px; align-items: flex-start; }
.recon-deco-img { width: 64px; height: 64px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.recon-deco-fallback { display: flex; align-items: center; justify-content: center; font-size: var(--fs-title); border-radius: 50%; }
.recon-deco-title { font-weight: 600; font-size: var(--fs-footnote); }
.recon-deco-tipo-inline { color: var(--text-muted); font-weight: 400; font-size: var(--fs-footnote); }
.recon-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 6px; }
.recon-deco-option {
  border: 0.5px solid var(--border); border-radius: 10px; padding: 10px 6px;
  cursor: pointer; text-align: center; background: var(--surface-0); transition: all 0.15s;
}
.recon-deco-option:hover { border-color: var(--accent); }
.recon-deco-option img, .recon-deco-option .recon-deco-fallback {
  width: 56px; height: 56px; margin: 0 auto 6px; display: block;
}
.recon-deco-option .recon-deco-fallback { display: flex; }
.recon-deco-name { font-size: var(--fs-caption); font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.recon-deco-tipo { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.recon-deco-desc { color: var(--text-secondary); font-size: var(--fs-caption); min-height: 1.2em; margin-top: 8px; line-height: 1.4; }
.recon-admin-badge {
  background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-border);
  border-radius: 999px; padding: 2px 8px; font-size: var(--fs-caption); font-weight: 600; white-space: nowrap;
}
@media (max-width: 480px) {
  .recon-deco-img { width: 52px; height: 52px; }
  .recon-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   STATION DS — refinamiento sobre los estilos base
   (al final del archivo para ganar la cascada)
   ============================================================ */

/* Topbar: opaca sobre el lienzo, separada por hairline */
.topbar {
  background: var(--surface-0);
  border-bottom: 0.5px solid var(--border);
}

/* Etiquetas de sección: sentence case, sin mono ni tracking amplio */
.chart-card h3, .table-card h3, .kpi-card .kpi-label {
  font-family: var(--font-sans); font-weight: 500;
}
.section-title { font-family: var(--font-sans); font-weight: 500; }

/* Cifras tabulares en los datos */
.kpi-card .kpi-value, .checkin-summary-card .cs-number, .ci-obj-pct,
.rate-badge, table td { font-variant-numeric: tabular-nums; }

/* Cards: hairline y nada más. La jerarquía la carga el borde, no la sombra. */
.kpi-card, .chart-card, .table-card, .checkin-summary-card, .recon-card,
.proyecto-card, .adkar-card, .org-card, .finding-item, .backlog-item {
  border: 0.5px solid var(--border);
  box-shadow: none;
  border-radius: var(--radius-lg);
}
.proyecto-card { border-top-width: 4px; }
.finding-item { border-left-width: 3px; }
/* 36 render de KPI traen style="border-color:…" inline: en v1 pintaba el
   border-left de 4px. Con el borde completo de 0.5px eso delinearía cada card
   en color saturado. El estado va en el subtexto; la fase 3 quita el atributo
   al reescribir esos render. */
.kpi-card[style*="border-color"] { border-color: var(--border) !important; }

/* Tabs: subrayado de acento, sin relleno ni glow */
.tab { font-weight: 500; }
.tab svg { width: 15px; height: 15px; }
.mobile-nav { background: var(--surface-0); border-top: 0.5px solid var(--border); }
.mobile-nav-btn { color: var(--text-muted); }
.mobile-nav-icon svg { width: 20px; height: 20px; }

/* Acción primaria: relleno de acento plano, una sola vez por vista */
.btn-action--primary, .ci-btn-save, .chat-send-btn, .chat-fab {
  background: var(--accent); color: var(--on-accent); font-weight: 500;
}
.btn-action--primary:hover, .ci-btn-save:hover, .chat-send-btn:hover, .chat-fab:hover {
  background: var(--accent-hover); box-shadow: none;
}
.btn-action { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn-action:active { transform: scale(.99); }
.btn-action--success { background: var(--success); color: var(--on-accent); }
.currency-btn.active, .okr-nav-btn.active, .org-btn-active {
  background: var(--surface-2) !important; color: var(--text-primary) !important;
}
.mobile-nav-btn.active { color: var(--accent); }
.chat-fab { box-shadow: var(--shadow-popover); }
.chat-bubble--user { background: var(--accent); color: var(--on-accent); }
.chat-avatar, .chat-header-icon { background: var(--surface-3); color: var(--accent); }

/* Overlays: oscurecen, no difuminan */
.modal-overlay { background: rgba(4,6,10,.72); }
.modal-box { border: 0.5px solid var(--border-strong); box-shadow: var(--shadow-popover); }
.modal-title { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-heading); }

/* Foco siempre visible (anillo de marca) */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus-ring); }

/* Scrollbars finos y oscuros */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid var(--surface-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border-stronger); }
::-webkit-scrollbar-track { background: transparent; }

/* Movimiento sereno — sin rebotes; respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ajustes responsive de marca y toggle */
.currency-btn { white-space: nowrap; }
@media (max-width: 640px) {
}

/* ============================================================
   LEVEL 10 MEETING (EOS) — todo scopeado a .l10-scope (tabs L10 y 1:1)
   ============================================================ */
.l10-scope .l10-eyebrow { font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--accent-hover); }
.l10-scope .l10-session-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.l10-scope .l10-h1 { font-family:var(--font-sans); font-size:var(--fs-metric); font-weight:600; color:var(--text-primary); line-height:1.1; margin-top:4px; }
.l10-scope .l10-meta { display:flex; gap:18px; margin-top:8px; flex-wrap:wrap; font-size:var(--fs-footnote); color:var(--text-muted); }
.l10-scope .l10-meta b { color:var(--text-primary); font-weight:600; }
.l10-scope .l10-head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.l10-scope .l10-btn { height:var(--h-control); padding:0 var(--sp-3); border:0.5px solid var(--border-strong); border-radius:var(--radius-sm); background:transparent; color:var(--text-primary); font-size:var(--fs-footnote); font-weight:500; cursor:pointer; font-family:var(--font-sans); transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap; }
.l10-scope .l10-btn-primary { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.l10-scope .l10-btn-primary:hover { filter:brightness(1.08); }
.l10-scope .l10-btn-primary:disabled { filter:none; opacity:.7; cursor:default; }
.l10-scope .l10-btn-ghost { background:transparent; border-color:transparent; color:var(--text-secondary); }
.l10-scope .l10-btn-ghost:hover { background:var(--surface-2); color:var(--text-primary); }
.l10-scope .l10-btn-sm { height:26px; padding:0 var(--sp-2); font-size:var(--fs-caption); }

.l10-scope .l10-grid { display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }
@media (max-width:880px){ .l10-scope .l10-grid { grid-template-columns:1fr; } }

.l10-scope .l10-side { position:sticky; top:84px; display:flex; flex-direction:column; gap:22px; }
@media (max-width:880px){ .l10-scope .l10-side { position:static; } }
.l10-scope .l10-agenda { background:var(--surface-1); border:0.5px solid var(--border); border-radius:14px; padding:16px; }
.l10-scope .l10-agenda-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.l10-scope .l10-timer-total { font-family:var(--font-mono); font-size:var(--fs-body-lg); font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.l10-scope .l10-agenda-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; transition:.15s; border:1px solid transparent; margin-bottom:3px; }
.l10-scope .l10-agenda-item:hover { background:var(--surface-2); }
.l10-scope .l10-agenda-item.active { background:var(--surface-3); border-color:var(--accent); }
.l10-scope .l10-agenda-item.done .l10-ai-name { color:var(--text-muted); }
.l10-scope .l10-ai-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-caption); font-weight:600; border:2px solid var(--text-disabled); color:var(--text-muted); font-family:var(--font-mono); }
.l10-scope .l10-agenda-item.active .l10-ai-dot { border-color:var(--accent); color:var(--accent-hover); }
.l10-scope .l10-agenda-item.done .l10-ai-dot { border-color:var(--success); background:var(--success-soft); color:var(--success); }
.l10-scope .l10-ai-body { flex:1; min-width:0; }
.l10-scope .l10-ai-name { font-size:var(--fs-body); font-weight:600; color:var(--text-primary); }
.l10-scope .l10-ai-time { font-size:var(--fs-caption); color:var(--text-muted); font-family:var(--font-mono); }
.l10-scope .l10-ai-badge { font-size:var(--fs-caption); font-family:var(--font-mono); color:var(--text-primary); background:var(--surface-2); padding:2px 7px; border-radius:7px; }
.l10-scope .l10-agenda-progress { height:5px; background:var(--surface-3); border-radius:5px; margin-top:14px; overflow:hidden; }
.l10-scope .l10-agenda-progress > div { height:100%; background:var(--accent); width:0; transition:width .4s; }

.l10-scope .l10-panel { background:var(--surface-1); border:0.5px solid var(--border); border-radius:14px; padding:24px; min-height:420px; position:relative; }
.l10-scope .l10-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.l10-scope .l10-panel-head h2 { font-family:var(--font-sans); font-size:var(--fs-title); font-weight:600; color:var(--text-primary); }
.l10-scope .l10-step-time { font-family:var(--font-mono); font-size:var(--fs-body); color:var(--accent-hover); background:var(--accent-soft); padding:4px 12px; border-radius:8px; }
.l10-scope .l10-panel-desc { font-size:var(--fs-body); color:var(--text-muted); line-height:1.5; margin-bottom:20px; max-width:62ch; }
.l10-scope .l10-section-label { font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text-muted); margin:22px 0 10px; }
.l10-scope .l10-guide { display:flex; gap:14px; align-items:flex-start; background:var(--surface-1); border:0.5px solid var(--border); border-radius:12px; padding:18px; font-size:var(--fs-body); color:var(--text-secondary); line-height:1.6; }
.l10-scope .l10-guide-ico { font-size:var(--fs-title); }
.l10-scope .l10-empty { color:var(--text-muted); font-size:var(--fs-body); padding:18px; text-align:center; background:var(--surface-1); border-radius:11px; }

/* Rocas */
.l10-scope .l10-rocas-summary { display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.l10-scope .l10-rsum { background:var(--surface-1); border:0.5px solid var(--border); border-radius:11px; padding:12px 18px; flex:1; min-width:120px; }
.l10-scope .l10-rsum .n { font-family:var(--font-sans); font-size:var(--fs-metric); font-weight:600; }
.l10-scope .l10-rsum .l { font-size:var(--fs-caption); color:var(--text-muted); }
.l10-scope .l10-tog { display:flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:3px; }
/* Toggle On/Off dentro del detalle del KR (rocas en modo lista): compacto */
.l10-scope .l10-tog.l10-tog-inline { display:inline-flex; width:auto; margin:2px 0; }
.l10-scope .l10-tog.l10-tog-inline button { flex:0 0 auto; padding:5px 14px; }
.l10-scope .l10-tog button { flex:1; border:none; background:transparent; color:var(--text-muted); font-size:var(--fs-footnote); font-weight:600; padding:6px 8px; border-radius:7px; cursor:pointer; font-family:var(--font-sans); transition:.15s; }
.l10-scope .l10-tog button:disabled { cursor:default; }
.l10-scope .l10-tog button.sel-on { background:var(--success-soft); color:var(--success); box-shadow:inset 0 0 0 1px var(--success-border); }
.l10-scope .l10-tog button.sel-off { background:var(--danger-soft); color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger-border); }
.l10-scope .l10-roca-foot { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.l10-scope .l10-flag { font-size:var(--fs-caption); font-family:var(--font-mono); }
.l10-scope .l10-flag.auto { color:var(--text-muted); }
.l10-scope .l10-flag.manual { color:var(--accent-hover); }
.l10-scope .l10-link { background:none; border:none; color:var(--text-muted); font-size:var(--fs-caption); cursor:pointer; text-decoration:underline; padding:0; font-family:var(--font-sans); }
.l10-scope .l10-link:hover { color:var(--text-primary); }

/* To-dos */
.l10-scope .l10-todo { display:flex; flex-direction:column; padding:6px 12px; background:var(--surface-1); border-radius:9px; margin-bottom:4px; border:0.5px solid var(--border); transition:.15s; }
.l10-scope .l10-todo:hover { border-color:var(--border-strong); }
.l10-scope .l10-todo-main { display:flex; align-items:center; gap:12px; }
.l10-scope .l10-todo.done { opacity:.55; }
.l10-scope .l10-todo.done .l10-todo-text { text-decoration:line-through; color:var(--text-muted); }
.l10-scope .l10-subhead { font-size:var(--fs-caption); color:var(--text-muted); margin:16px 0 7px; padding-left:2px; }
.l10-scope .l10-subhead.done { color:var(--text-disabled); margin-top:20px; }
/* Notas con botón + Guardar/Cerrar — las usa el módulo 1:1 (oneonone.js).
   Level 10 migró a .l10-noteline (abajo). */
.l10-scope .l10-note-btn { background:none; border:none; cursor:pointer; font-size:var(--fs-body); line-height:1; padding:3px 4px; border-radius:6px; opacity:.45; filter:grayscale(1); transition:.15s; }
.l10-scope .l10-note-btn:hover { opacity:1; filter:none; background:var(--surface-3); }
.l10-scope .l10-note-btn.has { opacity:1; filter:none; }
.l10-scope .l10-todo-note { margin:5px 0 1px 34px; font-size:var(--fs-footnote); color:var(--text-secondary); background:var(--surface-1); border-left:2px solid var(--border-strong); padding:6px 10px; border-radius:6px; white-space:pre-wrap; }
.l10-scope .l10-todo-note:not(.editing) { cursor:pointer; }
.l10-scope .l10-todo-note:not(.editing):hover { border-left-color:var(--accent); }
.l10-scope .l10-todo-note.editing { background:none; border-left:none; padding:5px 0 1px 34px; }
.l10-scope .l10-todo-note textarea { width:100%; min-height:58px; resize:vertical; font-size:var(--fs-body); line-height:1.4; }
.l10-scope .l10-note-actions { display:flex; gap:8px; margin-top:6px; }

/* Nota inline: un textarea que se lee como texto y crece con el contenido.
   Sin botones: escribe al modelo en cada tecla y persiste con debounce. */
.l10-scope .l10-noteline { display:block; width:100%; max-width:720px; box-sizing:border-box; margin:8px 0 2px; padding:6px 10px;
  font-family:var(--font-sans); font-size:var(--fs-footnote); line-height:1.5; color:var(--text-secondary); white-space:pre-wrap;
  background:transparent; border:none; border-left:2px solid var(--border-strong); border-radius:0 6px 6px 0;
  resize:none; overflow:hidden; transition:background .15s, border-color .15s; }
.l10-scope textarea.l10-noteline::placeholder { color:var(--text-muted); opacity:.55; }
.l10-scope textarea.l10-noteline:hover { background:var(--surface-1); border-left-color:var(--accent); }
.l10-scope textarea.l10-noteline:focus { outline:none; background:var(--surface-1); border-left-color:var(--accent); color:var(--text-primary); }
.l10-scope .l10-noteline.ro { background:var(--surface-1); }
.l10-scope .l10-todo.open .l10-noteline { margin-left:32px; }
.l10-scope .l10-chk { width:20px; height:20px; border-radius:6px; border:2px solid var(--text-disabled); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; color:var(--on-accent); font-weight:600; font-size:var(--fs-footnote); }
.l10-scope .l10-chk.on { background:var(--success); border-color:var(--success); }
.l10-scope .l10-todo-text { flex:1; font-size:var(--fs-body); color:var(--text-primary); }
.l10-scope .l10-todo-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.l10-scope .l10-pill { font-size:var(--fs-caption); font-family:var(--font-mono); padding:3px 9px; border-radius:8px; background:var(--surface-3); color:var(--text-secondary); }
.l10-scope .l10-pill.owner { background:var(--accent-soft); color:var(--accent-hover); }
.l10-scope .l10-pill.overdue { background:var(--danger-soft); color:var(--danger); }
.l10-scope .l10-x { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:var(--fs-footnote); padding:2px 4px; }
.l10-scope .l10-x:hover { color:var(--danger); }
.l10-scope .l10-add-row { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.l10-scope .l10-maxw { max-width:940px; }
/* Home de Level 10: mismo ancho de lectura acotado y centrado que Mis
   Pendientes, para que fechas/indicadores de la derecha no queden lejos
   del texto en pantallas anchas. */
#l10-home { max-width:940px; margin:0 auto; }
.l10-scope .l10-quick-box { background:var(--surface-1); border:0.5px solid var(--border); border-radius:14px; padding:16px; }
.l10-scope .l10-quick-box .l10-add-row { flex-direction:column; align-items:stretch; margin-top:12px; gap:8px; }
.l10-scope .l10-quick-box .l10-inp { min-width:0; }
.l10-scope .l10-quick-box .l10-cal-anchor { display:block; }
.l10-scope .l10-quick-box .l10-cal-btn { width:100%; justify-content:flex-start; }
.l10-scope .l10-quick-box .l10-cal.l10-cal-pop { right:auto; left:0; }
.l10-scope .l10-inp { flex:1; min-width:160px; background:var(--surface-2); border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:0 var(--sp-3); min-height:var(--h-control); color:var(--text-primary); font-family:var(--font-sans); font-size:var(--fs-body); transition:border-color var(--dur-fast) var(--ease-out); }
.l10-scope .l10-inp:hover { border-color:var(--border-strong); }
.l10-scope .l10-inp:focus { outline:none; border-color:var(--accent); }
.l10-scope .l10-inp-sm { flex:0 0 auto; min-width:auto; }

/* IDS */
.l10-scope .l10-ids-head { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.l10-scope .l10-ids-stat { flex:1; min-width:90px; background:var(--surface-1); border:0.5px solid var(--border); border-radius:11px; padding:11px 14px; text-align:center; }
.l10-scope .l10-ids-stat .n { font-family:var(--font-sans); font-size:var(--fs-title); font-weight:600; color:var(--text-primary); }
.l10-scope .l10-ids-stat .l { font-size:var(--fs-caption); color:var(--text-muted); }
.l10-scope .l10-issue { background:var(--surface-1); border:0.5px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; transition:.2s; }
.l10-scope .l10-issue.solving { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border); }
.l10-scope .l10-issue.solved { opacity:.6; }
.l10-scope .l10-issue-row { display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; }
.l10-scope .l10-issue-rank { width:26px; height:26px; border-radius:7px; background:var(--surface-3); color:var(--text-secondary); font-family:var(--font-mono); font-weight:600; display:flex; align-items:center; justify-content:center; font-size:var(--fs-footnote); flex-shrink:0; }
.l10-scope .l10-issue.solving .l10-issue-rank { background:var(--accent); color:var(--on-accent); }
.l10-scope .l10-issue-main { flex:1; min-width:0; }
.l10-scope .l10-issue-title { font-size:var(--fs-body); font-weight:600; color:var(--text-primary); }
.l10-scope .l10-issue.solved .l10-issue-title { text-decoration:line-through; color:var(--text-muted); }
.l10-scope .l10-issue-sub { font-size:var(--fs-footnote); color:var(--text-muted); margin-top:2px; }
/* Asa de arrastre + indicadores de reordenamiento (IDS y to-dos) */
.l10-scope .l10-drag { cursor:grab; color:var(--text-muted); font-size:var(--fs-body-lg); line-height:1; padding:6px 7px; margin:-4px 0 -4px -6px; border-radius:7px; flex-shrink:0; user-select:none; touch-action:none; transition:.15s; }
.l10-scope .l10-drag:hover { color:var(--text-secondary); background:var(--surface-2); }
.l10-scope .l10-drag:active { cursor:grabbing; }
.l10-scope .l10-dragging { opacity:.35; border-style:dashed; }
/* Línea de inserción que sigue al cursor durante el arrastre (Pointer Events) */
.l10-scope .l10-drop-indicator { position:absolute; left:0; right:0; height:0; z-index:5; pointer-events:none; opacity:0; }
.l10-scope .l10-drop-indicator::before { content:""; position:absolute; left:2px; right:2px; top:-1px; height:3px; border-radius:3px; background:var(--accent); }
.l10-scope .l10-drop-indicator.show { opacity:1; }
/* Fantasma de la fila arrastrada */
.l10-scope .l10-ghost { position:fixed; left:0; top:0; z-index:200; pointer-events:none; opacity:.97; box-shadow:var(--shadow-popover); }
.l10-scope .l10-ghost .l10-issue, .l10-scope .l10-ghost .l10-todo { margin:0; max-height:66px; overflow:hidden; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border); }
/* Flechas ↑↓: alternativa de reordenamiento que siempre funciona (touch/precisión) */
.l10-scope .l10-reorder { display:inline-flex; flex-direction:column; gap:2px; flex-shrink:0; }
.l10-scope .l10-reorder-btn { width:24px; height:16px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-caption); line-height:1; padding:0; background:var(--surface-1); border:0.5px solid var(--border); color:var(--text-secondary); border-radius:5px; cursor:pointer; transition:.12s; }
.l10-scope .l10-reorder-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-hover); }
.l10-scope .l10-reorder-btn:disabled { opacity:.25; cursor:default; }
.l10-scope .l10-tag { font-size:var(--fs-caption); font-family:var(--font-mono); padding:2px 8px; border-radius:7px; flex-shrink:0; }
.l10-scope .l10-tag.t-people { background:var(--accent-soft); color:var(--accent-hover); }
.l10-scope .l10-tag.t-proceso { background:var(--warning-soft); color:var(--warning); }
.l10-scope .l10-tag.t-cliente { background:var(--success-soft); color:var(--success); }
.l10-scope .l10-issue-detail { padding:0 16px 16px 56px; }
.l10-scope .l10-ids-steps { display:flex; gap:8px; margin-bottom:12px; }
.l10-scope .l10-ids-step { flex:1; text-align:center; font-size:var(--fs-caption); font-family:var(--font-mono); padding:7px; border-radius:8px; background:var(--surface-2); color:var(--text-muted); cursor:pointer; }
.l10-scope .l10-ids-step.act { background:var(--accent-soft); color:var(--accent-hover); box-shadow:inset 0 0 0 1px var(--accent-border); }
.l10-scope .l10-issue-actions { display:flex; gap:8px; flex-wrap:wrap; }
.l10-scope .l10-icon-btn { height:26px; padding:0 var(--sp-2); background:transparent; border:0.5px solid var(--border-strong); color:var(--text-secondary); border-radius:var(--radius-sm); font-size:var(--fs-caption); cursor:pointer; font-family:var(--font-sans); display:inline-flex; align-items:center; gap:6px; }
.l10-scope .l10-icon-btn:hover { background:var(--surface-2); color:var(--text-primary); }
.l10-scope .l10-icon-btn.solve { color:var(--success); }

/* Conclusión */
.l10-scope .l10-conclude-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:680px){ .l10-scope .l10-conclude-grid { grid-template-columns:1fr; } }
.l10-scope .l10-rating-box { background:var(--surface-1); border:0.5px solid var(--border); border-radius:12px; padding:18px; text-align:center; }
.l10-scope .l10-rating-num { font-family:var(--font-sans); font-size:var(--fs-metric-lg); font-weight:600; color:var(--accent); }
.l10-scope .l10-rate-pills { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.l10-scope .l10-rate-pills button { width:30px; height:30px; border-radius:7px; border:0.5px solid var(--border-strong); background:var(--surface-2); color:var(--text-muted); cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-footnote); }
.l10-scope .l10-rate-pills button.sel { background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:600; }

/* Barra de sesión */
.l10-scope .l10-sessionbar { position:fixed; bottom:0; left:0; right:0; background:var(--surface-1); border-top:0.5px solid var(--border); padding:12px 28px; display:none; align-items:center; justify-content:space-between; gap:16px; z-index:60; box-shadow:var(--shadow-popover); }
.l10-scope .l10-sessionbar.on { display:flex; }
.l10-scope .l10-sb-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.l10-scope .l10-sb-clock { font-family:var(--font-mono); font-size:var(--fs-title); font-weight:600; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.l10-scope .l10-sb-step { font-size:var(--fs-body); color:var(--text-muted); }
.l10-scope .l10-sb-step b { color:var(--accent-hover); font-weight:600; }
.l10-scope .l10-sb-right { display:flex; align-items:center; gap:8px; }

/* Toggle de vista Reunión/Biblioteca */
.l10-scope .l10-viewtog { display:flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:3px; }
.l10-scope .l10-viewtog button { border:none; background:transparent; color:var(--text-muted); font-size:var(--fs-footnote); font-weight:600; padding:7px 16px; border-radius:7px; cursor:pointer; font-family:var(--font-sans); }
.l10-scope .l10-viewtog button.active { background:var(--accent); color:var(--on-accent); }

/* Asistentes (Segue) */
.l10-scope .l10-att-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; margin-bottom:8px; }
/* Selector de miembros agrupado por equipo del organigrama (área · squad) */
.l10-scope .l10-mgroup { margin-bottom:18px; }
.l10-scope .l10-mgroup-head { display:flex; align-items:baseline; gap:10px; margin:0 2px 8px; padding-bottom:6px; border-bottom:0.5px solid var(--border); }
.l10-scope .l10-mgroup-name { font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text-secondary); }
.l10-scope .l10-mgroup-sub { color:var(--text-muted); }
.l10-scope .l10-mgroup-sub::before { content:"·"; margin:0 6px; color:var(--text-disabled); }
.l10-scope .l10-mgroup-count { flex:1; font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--text-muted); }
.l10-scope .l10-mgroup-count.on { color:var(--accent-hover); }
.l10-scope .l10-att { display:flex; align-items:center; gap:11px; padding:10px 13px; background:var(--surface-1); border:0.5px solid var(--border); border-radius:10px; cursor:pointer; transition:.15s; }
.l10-scope .l10-att.on { border-color:var(--success); background:var(--success-soft); }
.l10-scope .l10-att-chk { width:20px; height:20px; border-radius:6px; border:2px solid var(--text-disabled); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-weight:600; font-size:var(--fs-footnote); }
.l10-scope .l10-att-chk.on { background:var(--success); border-color:var(--success); }
.l10-scope .l10-att-name { font-size:var(--fs-body); color:var(--text-primary); font-weight:600; }
.l10-scope .l10-att-cargo { font-size:var(--fs-caption); color:var(--text-muted); font-weight:400; }
.l10-scope .l10-att-tag { font-size:var(--fs-caption); font-family:var(--font-mono); color:var(--accent-hover); background:var(--accent-soft); padding:1px 6px; border-radius:6px; vertical-align:middle; }

/* Notas (textarea) */
.l10-scope .l10-notes { width:100%; min-height:96px; background:var(--surface-2); border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; color:var(--text-primary); font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.5; resize:vertical; }
.l10-scope .l10-notes:focus { outline:none; border-color:var(--accent); }
.l10-scope .l10-notes-actions { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

/* Scorecard */
.l10-scope table.l10-sc { width:100%; border-collapse:collapse; font-size:var(--fs-body); }
.l10-scope table.l10-sc th { text-align:left; padding:8px 10px; color:var(--text-muted); font-size:var(--fs-caption); border-bottom:0.5px solid var(--border); font-weight:600; }
.l10-scope table.l10-sc td { padding:10px; border-bottom:1px solid var(--surface-2); color:var(--text-primary); vertical-align:middle; }
.l10-scope .l10-sc-meta { color:var(--text-muted); font-family:var(--font-mono); font-size:var(--fs-footnote); }
.l10-scope .l10-sc-val { font-family:var(--font-mono); font-weight:600; }
.l10-scope .l10-sc-badge { font-size:var(--fs-caption); font-family:var(--font-mono); padding:2px 7px; border-radius:7px; font-weight:600; }
.l10-scope .l10-sc-badge.on { background:var(--success-soft); color:var(--success); }
.l10-scope .l10-sc-badge.off { background:var(--danger-soft); color:var(--danger); }

/* Votación */
.l10-scope .l10-vote-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--surface-2); flex-wrap:wrap; }
.l10-scope .l10-vote-name { font-size:var(--fs-body); color:var(--text-primary); font-weight:600; min-width:140px; }
.l10-scope .l10-vote-pills { display:flex; gap:4px; flex-wrap:wrap; }
.l10-scope .l10-vote-pills button { width:28px; height:28px; border-radius:6px; border:0.5px solid var(--border-strong); background:var(--surface-2); color:var(--text-muted); cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-footnote); }
.l10-scope .l10-vote-pills button.sel { background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:600; }
.l10-scope .l10-close-bar { margin-top:20px; padding-top:16px; border-top:0.5px solid var(--border); display:flex; justify-content:flex-end; }

/* Biblioteca: métricas acumuladas + lista */
.l10-scope .l10-accum { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.l10-scope .l10-accum-card { background:var(--surface-1); border:0.5px solid var(--border); border-radius:12px; padding:18px; }
.l10-scope .l10-accum-card .n { font-family:var(--font-sans); font-size:var(--fs-metric-lg); font-weight:600; color:var(--text-primary); line-height:1; }
.l10-scope .l10-accum-card .l { font-size:var(--fs-footnote); color:var(--text-muted); margin-top:6px; }
.l10-scope .l10-sess { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface-1); border:0.5px solid var(--border); border-radius:11px; margin-bottom:9px; cursor:pointer; transition:.15s; }
.l10-scope .l10-sess:hover { border-color:var(--accent); }
.l10-scope .l10-sess-main { flex:1; min-width:0; }
.l10-scope .l10-sess-date { font-size:var(--fs-body); color:var(--text-primary); font-weight:600; text-transform:capitalize; }
.l10-scope .l10-sess-sub { font-size:var(--fs-footnote); color:var(--text-muted); margin-top:3px; }
.l10-scope .l10-sess-rating { font-family:var(--font-sans); font-size:var(--fs-title); font-weight:600; color:var(--accent); flex-shrink:0; }

/* Minuta */
.l10-scope .l10-min-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.l10-scope .l10-min-actions { display:flex; gap:8px; }
.l10-scope .l10-min-title { font-family:var(--font-sans); font-size:var(--fs-title); font-weight:600; color:var(--text-primary); text-transform:capitalize; }
.l10-scope .l10-min-meta { font-size:var(--fs-footnote); color:var(--text-muted); margin-bottom:8px; }
.l10-scope .l10-min-sec { margin-top:6px; }
.l10-scope .l10-min-text { font-size:var(--fs-body); color:var(--text-primary); line-height:1.6; white-space:pre-wrap; background:var(--surface-1); border-radius:9px; padding:12px 14px; }
.l10-scope .l10-min-att { display:flex; gap:6px; flex-wrap:wrap; }
.l10-scope .l10-min-roca, .l10-scope .l10-min-li { font-size:var(--fs-body); color:var(--text-primary); padding:5px 0; line-height:1.4; }

/* Botones "→ IDS" compactos */
.l10-scope .l10-link.l10-toids { margin-left:6px; color:var(--accent-hover); white-space:nowrap; }
.l10-scope .l10-toids-btn { background:var(--surface-3); border:none; color:var(--accent-hover); border-radius:6px; padding:3px 8px; font-size:var(--fs-caption); cursor:pointer; font-family:var(--font-mono); white-space:nowrap; }
.l10-scope .l10-toids-btn:hover { background:var(--text-disabled); color:var(--text-primary); }

/* Mini calendario (fecha de to-do) */
.l10-scope .l10-cal-wrap { position:relative; display:inline-block; }
.l10-scope .l10-cal-btn { cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-width:auto; flex:0 0 auto; }
.l10-scope .l10-cal { position:absolute; bottom:calc(100% + 6px); left:0; z-index:30; background:var(--surface-1); border:0.5px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow-popover); width:236px; }
.l10-scope .l10-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.l10-scope .l10-cal-head span { font-size:var(--fs-body); font-weight:600; color:var(--text-primary); }
.l10-scope .l10-cal-head button { background:var(--surface-3); border:none; color:var(--text-primary); width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:var(--fs-body); line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.l10-scope .l10-cal-head button:hover { background:var(--text-disabled); }
.l10-scope .l10-cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.l10-scope .l10-cal-dow span { text-align:center; font-size:var(--fs-caption); color:var(--text-muted); font-family:var(--font-mono); }
.l10-scope .l10-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.l10-scope .l10-cal-grid button { aspect-ratio:1; border:none; background:transparent; color:var(--text-primary); border-radius:7px; cursor:pointer; font-size:var(--fs-footnote); font-family:var(--font-mono); }
.l10-scope .l10-cal-grid button:hover { background:var(--surface-3); }
.l10-scope .l10-cal-grid button.today { box-shadow:inset 0 0 0 1px var(--accent); }
.l10-scope .l10-cal-grid button.sel { background:var(--accent); color:var(--on-accent); font-weight:600; }
.l10-scope .l10-cal-foot { display:flex; justify-content:space-between; margin-top:8px; gap:6px; }
.l10-scope .l10-cal-foot button { flex:1; background:var(--surface-3); border:none; color:var(--text-secondary); border-radius:7px; padding:5px; cursor:pointer; font-size:var(--fs-footnote); }
.l10-scope .l10-cal-foot button:hover { background:var(--text-disabled); color:var(--text-primary); }
/* Popup anclado al botón/pill que lo dispara (no empuja el layout) */
.l10-scope .l10-cal-anchor { position:relative; display:inline-block; }
.l10-scope .l10-cal.l10-cal-pop { top:calc(100% + 6px); bottom:auto; left:auto; right:0; z-index:40; }
.l10-scope .l10-cal-btn.open { border-color:var(--accent); color:var(--text-primary); }
.l10-scope .l10-pill.start { background:var(--accent-soft); color:var(--accent-hover); }
.l10-scope .l10-pill.day { background:var(--surface-2); color:var(--text-muted); }
.l10-scope .l10-pill.day.warn { background:var(--warning-soft); color:var(--warning); }
.l10-scope .l10-pill.day.late { background:var(--danger-soft); color:var(--danger); }
/* Antigüedad del pendiente: >1 semana amarillo, >2 semanas rojo (acento izquierdo) */
.l10-scope .l10-todo.age-warn { border-left:3px solid var(--warning); }
.l10-scope .l10-todo.age-late { border-left:3px solid var(--danger); }
.l10-scope .l10-pill.edit { cursor:pointer; }
.l10-scope .l10-pill.edit:hover { filter:brightness(1.25); }

/* IDS: editar item */
.l10-scope .l10-issue-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.l10-scope .l10-edit { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:var(--fs-body); padding:2px 4px; border-radius:6px; }
.l10-scope .l10-edit:hover { color:var(--accent-hover); background:var(--surface-3); }
.l10-scope .l10-issue.editing { padding:12px 16px; }
.l10-scope .l10-todo.editing { display:block; }
.l10-scope .l10-issue-edit { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.l10-scope .l10-issue-edit .l10-inp { flex:1; min-width:220px; }

/* ── Rediseño: home (biblioteca) + filas compactas expandibles ── */
.l10-scope .l10-teampills { display:flex; flex-wrap:wrap; gap:3px; background:var(--surface-2); border-radius:9px; padding:3px; }
.l10-scope .l10-teampill { border:none; background:transparent; color:var(--text-muted); font-size:var(--fs-footnote); font-weight:600; padding:7px 14px; border-radius:7px; cursor:pointer; font-family:var(--font-sans); transition:.15s; }
.l10-scope .l10-teampill:hover { color:var(--text-primary); }
.l10-scope .l10-teampill.active { background:var(--accent); color:var(--on-accent); font-weight:600; }
.l10-scope .trunc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.l10-scope .l10-mini { font-size:var(--fs-footnote); opacity:.6; flex-shrink:0; }

/* Títulos de sección del home: jerarquía clara sobre los subheads de grupo */
.l10-scope .l10-home-sec { display:flex; align-items:baseline; gap:10px; margin:30px 0 10px; padding-top:14px; border-top:0.5px solid var(--border); }
.l10-scope .l10-home-sec:first-child { margin-top:0; padding-top:0; border-top:none; }
.l10-scope .l10-home-sec h3 { font-family:var(--font-sans); font-size:var(--fs-heading); font-weight:600; color:var(--text-primary); line-height:1.2; }
.l10-scope .l10-home-sec span { font-size:var(--fs-caption); color:var(--text-muted); }

/* To-dos personales (todos.js): reusa toda la anatomía .l10-todo; solo añade la
   ayuda de la captura de una línea y el aire del carril dentro de Level 10. */
.l10-scope .pt-hint { font-size:var(--fs-footnote); color:var(--text-muted); margin:6px 0 12px; padding-left:2px; }
.l10-scope .pt-hint b { color:var(--text-secondary); font-weight:600; font-family:var(--font-mono); font-size:var(--fs-caption); }
/* El separador solo cuando arriba está la caja del equipo (si no puede editar
   el L10, la captura personal queda sola y sin línea colgando). */
.l10-scope .l10-quick-box [data-pt-host]:not(:first-child) { margin-top:16px; padding-top:14px; border-top:0.5px solid var(--border); }
.l10-scope .l10-quick-box .pt-hint { display:none; }

/* Etiquetas de tarea personal. Identidad, no estado: el punto sale de la rampa
   --cat-* (ptTagColor), nunca de los semánticos — una etiqueta en ámbar se
   leería como una alerta sobre esa tarea. */
.l10-scope .pt-tag {
  display:inline-flex; align-items:center; gap:4px; flex:none;
  padding:1px 8px; border-radius:999px;
  border:0.5px solid var(--border-strong); background:var(--surface-1);
  font-size:var(--fs-caption); color:var(--text-secondary); white-space:nowrap;
  font-family:var(--font-sans);
}
.l10-scope .pt-tag::before {
  content:''; width:5px; height:5px; border-radius:999px; flex:none;
  background:var(--pt-tag-color, var(--text-disabled));
}
/* Editor de la fila expandida */
.l10-scope .pt-tag-edit { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.l10-scope button.pt-tag { cursor:pointer; }
.l10-scope button.pt-tag:hover { border-color:var(--border-stronger); color:var(--text-primary); }
.l10-scope .pt-tag.rm svg { width:11px; height:11px; color:var(--text-muted); }
.l10-scope .pt-tag.add { border-style:dashed; color:var(--text-muted); }
.l10-scope .pt-tag.add::before { display:none; }
.l10-scope .pt-tag-inp {
  width:120px; min-height:24px; padding:0 8px; border-radius:999px;
  background:var(--surface-2); border:0.5px solid var(--border);
  color:var(--text-primary); font-family:var(--font-sans); font-size:var(--fs-caption);
}

/* CompactList: contenedor único con separadores hairline; los items pierden su
   tarjeta propia. Los subheads (grupos) son bandas internas. */
.l10-scope .l10-list { position:relative; background:var(--surface-1); border:0.5px solid var(--border); border-radius:12px; margin-bottom:6px; }
.l10-scope .l10-list > * { border-bottom:0.5px solid var(--border); }
.l10-scope .l10-list > :last-child { border-bottom:none; }
.l10-scope .l10-list > .l10-drop-indicator { border:none; }
.l10-scope .l10-list > :first-child { border-top-left-radius:12px; border-top-right-radius:12px; }
.l10-scope .l10-list > :last-child { border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.l10-scope .l10-list .l10-subhead { margin:0; padding:4px 12px; background:var(--surface-1); }
.l10-scope .l10-list .l10-subhead.toggle { cursor:pointer; }
.l10-scope .l10-list .l10-subhead.toggle:hover { color:var(--text-secondary); }
.l10-scope .l10-list .l10-subhead .l10-caret { display:inline-block; width:13px; }
.l10-scope .l10-list .l10-todo,
.l10-scope .l10-list .l10-issue,
.l10-scope .l10-list .l10-sess { background:transparent; border-left:none; border-right:none; border-top:none; border-radius:0; margin:0; box-shadow:none; }
/* Antigüedad: el acento izquierdo sobrevive dentro de la lista */
.l10-scope .l10-list .l10-todo.age-warn { border-left:3px solid var(--warning); }
.l10-scope .l10-list .l10-todo.age-late { border-left:3px solid var(--danger); }
.l10-scope .l10-list > :first-child.l10-todo, .l10-scope .l10-list > :first-child.l10-issue, .l10-scope .l10-list > :first-child.l10-sess { border-radius:12px 12px 0 0; }
.l10-scope .l10-list > :last-child.l10-todo, .l10-scope .l10-list > :last-child.l10-issue, .l10-scope .l10-list > :last-child.l10-sess { border-radius:0 0 12px 12px; }

/* Fila compacta: 1 línea (~32px), texto truncado, fecha en mono a la derecha,
   acciones visibles al hover. Clic = expandir. */
.l10-scope .l10-todo.compact { flex-direction:row; align-items:center; gap:9px; padding:5px 12px; cursor:pointer; }
.l10-scope .l10-todo.compact:hover { background:var(--surface-1); }
.l10-scope .l10-todo.compact .l10-todo-text { flex:1; font-size:var(--fs-body); }
/* Checkbox circular y más chico dentro de listas (como el patrón CompactList) */
.l10-scope .l10-list .l10-chk { width:16px; height:16px; border-radius:50%; border-width:2px; font-size:var(--fs-caption); }
/* Reorden sin inflar la fila: flechas en horizontal, visibles al hover */
.l10-scope .l10-list .l10-reorder { flex-direction:row; gap:2px; opacity:0; transition:.12s; }
.l10-scope .l10-list .l10-issue-row:hover .l10-reorder,
.l10-scope .l10-list .l10-todo:hover .l10-reorder { opacity:1; }
.l10-scope .l10-list .l10-reorder-btn { width:18px; height:18px; }
.l10-scope .l10-list .l10-drag { padding:2px 4px; margin:0 0 0 -4px; opacity:.35; }
.l10-scope .l10-list .l10-drag:hover { opacity:1; }
@media (hover:none) { .l10-scope .l10-list .l10-reorder { opacity:.6; } }
.l10-scope .l10-date { font-family:var(--font-mono); font-size:var(--fs-footnote); color:var(--text-muted); flex-shrink:0; font-variant-numeric:tabular-nums; }
.l10-scope .l10-date.overdue { color:var(--danger); }
.l10-scope .l10-who { font-size:var(--fs-footnote); color:var(--text-muted); flex-shrink:0; }
.l10-scope .l10-hover-acts { display:inline-flex; gap:2px; flex-shrink:0; opacity:0; transition:.12s; }
.l10-scope .l10-todo.compact:hover .l10-hover-acts,
.l10-scope .l10-issue-row.compact:hover .l10-hover-acts { opacity:1; }
@media (hover:none) { .l10-scope .l10-hover-acts { opacity:.6; } }

/* Fila expandida */
.l10-scope .l10-todo.open { background:var(--surface-1); padding-top:10px; padding-bottom:12px; }
.l10-scope .l10-todo.open .l10-todo-main { cursor:pointer; }
.l10-scope .l10-todo-text.full { white-space:pre-wrap; line-height:1.5; }
.l10-scope .l10-todo-detail { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 0 32px; }
.l10-scope .l10-todo-acts { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0 32px; }
.l10-scope .l10-todo.open .l10-todo-note { margin:8px 0 0 32px; max-width:720px; }
.l10-scope .l10-todo.open .l10-todo-note.editing { padding:0; }
.l10-scope .l10-todo-note.editing textarea { max-width:720px; }
.l10-scope .l10-issue-detail .l10-noteline { margin:0 0 12px; }

/* Inline edit: campos editables (clic → input/select) con affordance sutil */
.l10-scope .editable { cursor:text; border-radius:6px; transition:.12s; }
.l10-scope .editable:hover { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-border); }
.l10-scope .l10-pill.editable, .l10-scope .l10-tag.editable { cursor:pointer; }
.l10-scope .l10-pill.editable.ghost { background:var(--surface-2); color:var(--text-muted); border:1px dashed var(--text-disabled); }
.l10-scope .l10-inline-inp { min-width:180px; margin:-3px 0; padding:5px 8px; font-size:var(--fs-body); }
.l10-scope select.l10-inline-inp { min-width:auto; }
.l10-scope .l10-issue-title .l10-inline-inp, .l10-scope .l10-todo-main .l10-inline-inp { width:100%; flex:1; }

/* Asuntos: dot de estado en vez de rank; owner en texto plano */
.l10-scope .l10-dot { width:8px; height:8px; border-radius:50%; background:var(--warning); flex-shrink:0; font-size:var(--fs-caption); display:flex; align-items:center; justify-content:center; color:var(--on-accent); }
.l10-scope .l10-dot.act { background:var(--accent); }
.l10-scope .l10-dot.ok { width:16px; height:16px; background:var(--success-soft); color:var(--success); font-weight:600; }
.l10-scope .l10-issue-row.compact { padding:5px 12px; gap:9px; cursor:pointer; }
.l10-scope .l10-issue-row.compact:hover { background:var(--surface-1); }
.l10-scope .l10-issue-title.trunc { font-weight:500; font-size:var(--fs-body); }
.l10-scope .l10-issue.solving { border:none; box-shadow:none; background:var(--surface-1); }
.l10-scope .l10-issue.solving .l10-issue-row { padding:10px 14px 0; }
.l10-scope .l10-issue-detail { padding:12px 14px 14px 32px; }

/* Minutas compactas */
.l10-scope .l10-sess { padding:5px 12px; gap:12px; }
.l10-scope .l10-sess:hover { background:var(--surface-1); border-color:var(--border); }
.l10-scope .l10-sess-date { font-size:var(--fs-body); flex-shrink:0; }
.l10-scope .l10-sess-sub { flex:1; margin-top:0; }
.l10-scope .l10-sess-rating { font-size:var(--fs-body-lg); font-family:var(--font-mono); color:var(--accent-hover); }

/* Modo enfoque: colapsa el chrome superior para concentrarse en la reunión */
body.l10-focus .topbar,
body.l10-focus .side,
body.l10-focus #mobile-nav { display:none !important; }
body.l10-focus #dashboard { grid-template-columns: 1fr; }
body.l10-focus .tab-content.active { padding-top:18px; }

/* ═══════════════════════════ 1:1 — Conversaciones de liderazgo ═══════════════ */
#o2o-root .card { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-xl); }
#o2o-root .card-h { padding: 13px 16px; border-bottom: 0.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.o2o-ttl { font-family: var(--font-sans); font-size: var(--fs-body-lg); color: var(--text-primary); }
.o2o-eyebrow { font-size: var(--fs-caption); color: var(--text-muted); }
.o2o-muted { color: var(--text-muted); font-size: var(--fs-body); }
.o2o-empty, .o2o-empty-up { color: var(--text-muted); font-size: var(--fs-body); padding: 18px; }
.o2o-empty-up { border-top: 1px dashed var(--border); }
.o2o-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
@media (max-width: 880px) { .o2o-layout { grid-template-columns: 1fr; } }
.o2o-subhead { padding: 12px 14px 4px; font-size: var(--fs-caption); color: var(--text-muted); }
.o2o-list { padding: 8px; }
.o2o-pitem { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.o2o-pitem:hover { background: var(--surface-2); }
.o2o-pitem.active { background: var(--surface-2); border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-soft); }
.o2o-av { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-footnote); font-weight: 600; color: var(--on-accent); flex: none; }
.o2o-pn { font-weight: 600; color: var(--text-primary); font-size: var(--fs-body); line-height: 1.15; }
.o2o-pc { color: var(--text-muted); font-size: var(--fs-footnote); }
.o2o-pmeta { margin-left: auto; text-align: right; }
.o2o-badge { font-size: var(--fs-caption); padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-secondary); }
/* "N pendientes" no es un estado de alerta: todo el mundo tiene pendientes
   siempre. El ámbar se reserva para .late, que es lo que sí pide atención —
   y de paso la vista deja de tener dos rellenos de color compitiendo. */
.o2o-badge.due { background: var(--surface-3); color: var(--text-secondary); }
.o2o-badge.late { background: var(--warning-soft); color: var(--warning); }
.o2o-badge.ok { background: var(--success-soft); color: var(--success); }
.o2o-wstop { display: flex; align-items: center; gap: 14px; padding: 16px; }
.o2o-wstop .o2o-av { width: 46px; height: 46px; font-size: var(--fs-body); }
.o2o-wsname { font-family: var(--font-sans); font-size: var(--fs-heading); color: var(--text-primary); }
.o2o-wssub { color: var(--text-muted); font-size: var(--fs-footnote); margin-top: 2px; }
.o2o-cadence { margin-left: auto; text-align: right; font-size: var(--fs-footnote); color: var(--text-secondary); }
.o2o-cadence select { border-radius: var(--radius-sm); font-size: var(--fs-footnote); margin-left: 4px; }
.o2o-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 0.5px solid var(--border-strong); justify-content: space-between; }
.o2o-tabbtn { background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-caption); padding: 11px 13px; cursor: pointer; border-bottom: 2px solid transparent; }
.o2o-tabbtn.active { color: var(--accent-hover); border-bottom-color: var(--accent); }
.o2o-pane { padding: 18px; display: none; } .o2o-pane.active { display: block; }
.o2o-block { border: 0.5px solid var(--border); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
.o2o-bh { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface-2); }
.o2o-bn { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--accent-hover); background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; }
.o2o-bt { font-weight: 600; color: var(--text-primary); font-size: var(--fs-body); }
.o2o-bm { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.o2o-bb { padding: 11px 13px; }
.o2o-q { color: var(--text-muted); font-style: italic; font-size: var(--fs-body); margin: 0 0 8px; }
.o2o-ta { width: 100%; min-height: 90px; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; padding: 10px 12px; resize: vertical; }
.o2o-ta:focus { outline: none; border-color: var(--accent); }
.o2o-energy { display: flex; gap: 6px; margin: 2px 0 11px; }
.o2o-energy button { width: 34px; height: 34px; border-radius: 8px; border: 0.5px solid var(--border-strong); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-footnote); }
.o2o-energy button.sel { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft); }
/* Mis Pendientes (tab home): ancho de lectura acotado y centrado, para que
   fechas y controles queden cerca del texto en pantallas anchas */
#pend-root { max-width: 940px; margin: 0 auto; }
/* Tipografía más amplia que en las listas densas de reunión (L10/1:1) */
#pend-root .l10-list .l10-subhead { padding: 6px 14px; }
#pend-root .l10-todo { padding: 8px 14px; }
#pend-root .l10-empty { font-size: var(--fs-footnote); }

/* To-dos del 1:1: usan el UI compartido de Level 10 (.l10-scope .l10-todo …) */
.o2o-leaderonly { border: 1px dashed var(--warning-border); background: var(--warning-soft); border-radius: 11px; padding: 13px 14px; margin-top: 16px; }
.o2o-lotag { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--warning); }
.o2o-leadstate { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.o2o-leadstate button { display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 9px; border: 0.5px solid var(--border-strong); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; font-size: var(--fs-body); font-family: var(--font-sans); }
.o2o-leadstate button.sel.g { border-color: var(--success); color: var(--success); background: var(--success-soft); font-weight: 600; }
.o2o-leadstate button.sel.y { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); font-weight: 600; }
.o2o-leadstate button.sel.r { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); font-weight: 600; }
.o2o-btn { height: var(--h-control); padding: 0 var(--sp-3); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-weight: 500; font-size: var(--fs-footnote); cursor: pointer; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: var(--sp-2); }
.o2o-btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.o2o-btn.ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.o2o-btn.xs { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-caption); }
.o2o-note { background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: 8px; padding: 8px 11px; font-size: var(--fs-footnote); color: var(--text-secondary); }
.o2o-log { border-left: 2px solid var(--surface-3); padding: 0 0 16px 16px; margin-left: 6px; position: relative; }
.o2o-log::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1); }
.o2o-logdate { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--accent-hover); }
.o2o-logbody { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-top: 7px; font-size: var(--fs-body); color: var(--text-secondary); }
.o2o-logbody h4 { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); margin: 0 0 4px; }
.o2o-logbody p { margin: 0 0 9px; }
.o2o-thermo { margin-bottom: 18px; }
/* Termómetro: el estado de 3 categorías se lee como anillo, no como barra a
   ancho completo — con conteos bajos la barra era un bloque de color plano. */
.o2o-donut { position: relative; flex-shrink: 0; }
.o2o-donut svg { width: 100%; height: 100%; display: block; }
.o2o-donut-c {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-footnote); font-variant-numeric: tabular-nums;
}
.o2o-thermo-head > .o2o-donut .o2o-donut-c { font-size: var(--fs-heading); }
.o2o-thermo-head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.o2o-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fs-footnote); color: var(--text-secondary); }
.o2o-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.o2o-area { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.o2o-thermo-trend { margin-top: var(--sp-4); border-top: 0.5px solid var(--border); padding-top: var(--sp-3); }
.o2o-trow { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; margin-top: 10px; }
.o2o-bigidx { font-family: var(--font-sans); font-size: var(--fs-metric-lg); line-height: 1; }
.o2o-loghead { display: flex; align-items: center; gap: 10px; }
.o2o-logenergy { font-size: var(--fs-footnote); color: var(--text-secondary); }
.o2o-logactions { margin-left: auto; display: flex; gap: 6px; }

/* ══════════════════════════════════════════
   OKRs — vista lista (estilo Tability)
   ══════════════════════════════════════════ */
.okrl-panel { background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.okrl-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 0.5px solid var(--border); flex-wrap: wrap; }
.okrl-head .okrl-eyebrow { flex: 1; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); }
.okrl-switch { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-caption); color: var(--text-secondary); cursor: pointer; user-select: none; }
.okrl-switch input { display: none; }
.okrl-track { width: 36px; height: 20px; border-radius: 11px; background: var(--text-disabled); position: relative; transition: background .18s; flex-shrink: 0; }
.okrl-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-primary); transition: transform .18s; }
.okrl-switch input:checked + .okrl-track { background: var(--accent); }
.okrl-switch input:checked + .okrl-track::after { transform: translateX(16px); }
.okrl-btn { height: 26px; padding: 0 var(--sp-2); background: transparent; color: var(--text-secondary); border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-caption); font-family: var(--font-sans); }
.okrl-btn:hover { background: var(--surface-2); color: var(--text-primary); }

/* Fila de objetivo */
.okrl-obj { display: flex; align-items: center; gap: 11px; padding: 14px 20px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background .12s; }
.okrl-obj:hover { background: rgba(255,255,255,.02); }
.okrl-caret { flex-shrink: 0; color: var(--text-muted); font-size: var(--fs-caption); width: 14px; transition: transform .15s; user-select: none; }
.okrl-caret.open { transform: rotate(90deg); }
.okrl-flag { flex-shrink: 0; font-size: var(--fs-body); }
.okrl-obj-main { flex: 1; min-width: 0; }
.okrl-obj-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); word-break: break-word; line-height: 1.35; }
.okrl-obj-title:hover { color: var(--accent-hover); }
.okrl-obj-meta { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
.okrl-badges { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.okrl-obj-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.okrl-ico { background: transparent; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px 7px; cursor: pointer; font-size: var(--fs-caption); color: var(--text-secondary); }
.okrl-ico:hover { background: var(--surface-2); color: var(--text-primary); }
.okrl-prog { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 150px; justify-content: flex-end; }
.okrl-prog .okrl-pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-footnote); font-weight: 600; min-width: 38px; text-align: right; }
.okrl-bar { width: 90px; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.okrl-bar > div { height: 7px; border-radius: 4px; transition: width .4s; }

/* Cuerpo de KRs de un objetivo */
.okrl-krs { background: var(--surface-1); }
.okrl-cierre-wrap { padding: 4px 20px 10px 45px; background: var(--surface-1); border-bottom: 0.5px solid var(--border); }

/* Fila de KR */
.okrl-kr { padding: 0; border-bottom: 0.5px solid var(--border); transition: background .12s; }
.okrl-kr:hover { background: rgba(255,255,255,.02); }
.okrl-kr-row { display: flex; align-items: center; gap: 11px; padding: 11px 20px 11px 34px; cursor: pointer; }
.okrl-kr-drag { cursor: grab; color: var(--text-disabled); font-size: var(--fs-body); user-select: none; flex-shrink: 0; }
.okrl-dot { flex-shrink: 0; width: 14px; height: 14px; border-radius: 4px; }
.okrl-kr-title { flex: 1; min-width: 0; font-size: var(--fs-footnote); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okrl-kr-title.muted { color: var(--text-muted); font-style: italic; }
.okrl-metric { width: 150px; flex-shrink: 0; }
.okrl-metric .okrl-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okrl-metric .okrl-mbar { height: 4px; border-radius: 3px; background: var(--surface-3); margin-top: 5px; overflow: hidden; }
.okrl-metric .okrl-mbar > div { height: 4px; border-radius: 3px; }
.okrl-trend { width: 50px; flex-shrink: 0; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); font-weight: 600; }
.okrl-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600; color: var(--on-accent); }
.okrl-avatar.empty { background: var(--surface-3); color: var(--text-muted); }

/* Detalle expandido del KR */
.okrl-kr-detail { background: var(--surface-0); padding: 13px 20px 15px 59px; font-size: var(--fs-caption); color: var(--text-secondary); cursor: default; }
.okrl-kr-detail .okrl-desc { color: var(--text-muted); line-height: 1.5; margin-bottom: 9px; }
.okrl-kr-detail .okrl-range { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); margin-bottom: 9px; }
.okrl-kr-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.okrl-mini { border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px var(--sp-2); cursor: pointer; font-size: var(--fs-caption); font-family: var(--font-sans); background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.okrl-mini:hover { background: var(--surface-2); color: var(--text-primary); }
.okrl-mini.ok { color: var(--success); }
.okrl-mini.danger { color: var(--danger); }

@media (max-width: 720px) {
  .okrl-metric { width: 100px; }
  .okrl-trend { display: none; }
  .okrl-obj-actions { display: none; }
  .okrl-prog { min-width: 0; }
  .okrl-bar { width: 54px; }
}

/* ── HOJA "MÁS" de la bottom nav ──────────────────────────────
   La barra solo sostiene 5 items; el resto vive aquí. */
.mobile-more {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(4,6,10,.72); align-items: flex-end;
}
.mobile-more.on { display: flex; }
.mobile-more-sheet {
  width: 100%; background: var(--surface-3);
  border-top: 0.5px solid var(--border-strong);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-popover);
}
.mobile-more-title { font-size: var(--fs-caption); color: var(--text-muted); padding: 0 var(--sp-2) var(--sp-2); }
.mobile-more-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px var(--sp-2); border: none; background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: var(--fs-body);
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.mobile-more-item:hover, .mobile-more-item:active { background: var(--surface-2); }
.mobile-more-item svg { width: 18px; height: 18px; color: var(--text-muted); }

/* ============================================================
   PALETA DE COMANDOS (Cmd-K) — js/utils/shortcuts.js
   Flota de verdad, así que sí lleva --shadow-popover.
   ============================================================ */
.cmdk-overlay {
  display: none; position: fixed; inset: 0; z-index: 1500;
  background: rgba(4,6,10,.72);
  align-items: flex-start; justify-content: center;
  padding: 12vh var(--sp-4) var(--sp-4);
}
.cmdk-overlay.on { display: flex; }
.cmdk {
  width: 100%; max-width: 560px; max-height: 64vh; display: flex; flex-direction: column;
  background: var(--surface-3); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-popover); overflow: hidden;
}
.cmdk-inputrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 0.5px solid var(--border);
}
.cmdk-inputrow svg { color: var(--text-muted); width: 16px; height: 16px; }
/* El campo de la paleta no es un control del formulario: es la propia caja.
   Sin borde ni relleno propios para que la fila entera se lea como el input. */
.cmdk-inputrow input {
  flex: 1; min-width: 0; background: transparent; border: none; padding: 0;
  min-height: 0; height: 26px; color: var(--text-primary); font-size: var(--fs-body-lg);
}
.cmdk-inputrow input:focus { outline: none; box-shadow: none; }
.cmdk-kbd {
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted);
  background: var(--surface-2); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 6px; line-height: 1.5;
}
.cmdk-list { overflow-y: auto; padding: var(--sp-2); flex: 1; }
.cmdk-group {
  font-size: var(--fs-caption); color: var(--text-muted);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
}
.cmdk-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-2); border-radius: var(--radius-sm); cursor: pointer;
}
.cmdk-item svg { color: var(--text-muted); width: 15px; height: 15px; flex-shrink: 0; }
.cmdk-item.sel { background: var(--surface-2); }
.cmdk-item.sel svg { color: var(--accent); }
.cmdk-item-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cmdk-item-txt b { font-size: var(--fs-body); font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-txt span { font-size: var(--fs-caption); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-none { padding: var(--sp-6) var(--sp-2); text-align: center; color: var(--text-muted); font-size: var(--fs-footnote); }
.cmdk-foot {
  display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border-top: 0.5px solid var(--border); font-size: var(--fs-caption); color: var(--text-muted);
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 640px) {
  .cmdk-overlay { padding: var(--sp-4) var(--sp-3); align-items: flex-start; }
  .cmdk { max-height: 80vh; }
  .cmdk-foot { display: none; }
}

/* ============================================================
   BUSCADOR — ficha de persona / equipo (js/modules/buscar.js)
   ============================================================ */
#buscar-root { max-width: 1040px; }
.bs-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.bs-av {
  width: 44px; height: 44px; border-radius: var(--radius-lg); flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 600; color: var(--on-accent);
}
.bs-title { font-size: var(--fs-title); font-weight: 600; color: var(--text-primary); }
.bs-sub { font-size: var(--fs-footnote); color: var(--text-muted); margin-top: 2px; }
.bs-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.bs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); color: var(--text-secondary);
  background: var(--surface-1); border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 3px var(--sp-2);
}
.bs-chip svg { color: var(--text-muted); width: 13px; height: 13px; }
.bs-sec {
  font-size: var(--fs-body); font-weight: 500; color: var(--text-primary);
  margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 0.5px solid var(--border); display: flex; align-items: baseline; gap: var(--sp-2);
}
.bs-count { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }
.bs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2); }
.bs-card {
  display: flex; align-items: center; gap: var(--sp-3); text-align: left;
  background: var(--surface-1); border: 0.5px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-3); cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bs-card:hover { border-color: var(--border-strong); }
.bs-card-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bs-card-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.bs-card-txt b { font-size: var(--fs-footnote); font-weight: 500; color: var(--text-primary); }
.bs-card-txt span { font-size: var(--fs-caption); color: var(--text-muted); }
.bs-card svg { color: var(--text-muted); width: 14px; height: 14px; }
.bs-empty {
  color: var(--text-muted); font-size: var(--fs-footnote); padding: var(--sp-6);
  text-align: center; background: var(--surface-1);
  border: 0.5px solid var(--border); border-radius: var(--radius-lg);
}
.bs-note {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.bs-tag {
  font-size: var(--fs-caption); color: var(--text-muted);
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 1px 6px;
}

/* ── OKRs · alerta de KRs sin check-in ─────────────────────────
   Banda, no card: es un aviso sobre la lista, no un dato más del
   resumen. El color va en el hairline y en el icono; el fondo se
   queda en la superficie de card para no competir con los KPIs. */
.okr-alert {
  background: var(--surface-1); border: 0.5px solid var(--border);
  border-left-width: 2px; border-left-style: solid;
  border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4); font-size: var(--fs-footnote);
}
.okr-alert--warn { border-left-color: var(--warning); }
.okr-alert--ok   { border-left-color: var(--success); display: flex; align-items: center; gap: var(--sp-3); color: var(--text-secondary); }
.okr-alert--ok svg { color: var(--success); }
.okr-alert-head { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-primary); }
.okr-alert--warn .okr-alert-head svg { color: var(--warning); }
.okr-alert-head b { font-weight: 500; }
/* Dos niveles: la persona y, debajo, sus KRs parados. Con ~9 personas y ~17
   KRs la lista pasa de 25 filas, así que scrollea dentro de su propia caja en
   vez de empujar la lista de OKRs fuera de la pantalla. */
.okr-alert-list { margin-top: var(--sp-2); max-height: 380px; overflow-y: auto; }
.okr-alert-person {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-2) 5px; margin-top: var(--sp-2);
  border-top: 0.5px solid var(--border);
}
.okr-alert-person:first-child { border-top: none; margin-top: 0; }
.okr-alert-person:hover { color: var(--accent); }
.okr-alert-name { color: var(--text-primary); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okr-alert-person:hover .okr-alert-name { color: var(--accent); }
.okr-alert-n {
  font-family: var(--font-mono); font-size: var(--fs-caption); flex-shrink: 0;
  color: var(--warning); background: var(--warning-soft);
  border-radius: var(--radius-sm); padding: 1px 7px;
}
.okr-alert-person svg { color: var(--text-muted); width: 14px; height: 14px; flex-shrink: 0; margin-left: auto; }
.okr-alert-kr {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 4px var(--sp-2) 4px var(--sp-5);
  border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-caption);
}
.okr-alert-kr:hover { background: var(--surface-2); }
.okr-alert-kr-title { color: var(--text-secondary); min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okr-alert-kr:hover .okr-alert-kr-title { color: var(--text-primary); }
.okr-alert-kr-obj { color: var(--text-muted); flex: 0 1 auto; min-width: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okr-alert-age {
  font-family: var(--font-mono); color: var(--text-muted);
  flex-shrink: 0; margin-left: auto; font-variant-numeric: tabular-nums;
}
.okr-alert-age.late  { color: var(--warning); }
.okr-alert-age.nunca { color: var(--danger); }
.okr-alert-meta { color: var(--text-muted); font-size: var(--fs-caption); margin-left: auto; flex-shrink: 0; }

/* ── NOVEDADES (release-notes.js) ──────────────────────────────
   Card con hairline de acento a la izquierda, igual que .okr-alert
   usa el ámbar. No es un banner: informa y se va. */
.rn-box {
  background: var(--surface-1); border: 0.5px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4) var(--sp-4); margin-bottom: var(--sp-5);
}
.rn-head { display: flex; align-items: center; gap: var(--sp-2); }
.rn-head > svg { color: var(--accent); width: 15px; height: 15px; }
.rn-head b { color: var(--text-primary); font-weight: 500; font-size: var(--fs-body); }
.rn-meta { color: var(--text-muted); font-size: var(--fs-caption); }
.rn-x {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center;
}
.rn-x:hover { color: var(--text-primary); background: var(--surface-2); }
.rn-rel { margin-top: var(--sp-3); }
.rn-rel-head {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding-bottom: 5px; border-bottom: 0.5px solid var(--border); margin-bottom: var(--sp-2);
}
.rn-rel-title { color: var(--text-primary); font-size: var(--fs-footnote); font-weight: 500; }
.rn-rel-date { color: var(--text-muted); font-size: var(--fs-caption); margin-left: auto; flex-shrink: 0; }
/* Grid, no flex: la columna de la etiqueta es de ancho fijo para que todos los
   textos arranquen alineados, pero la píldora se ciñe a su contenido — con un
   `width` sobre la propia etiqueta, el relleno de "Nuevo" sobraba media píldora. */
.rn-item { display: grid; grid-template-columns: 78px 1fr auto; align-items: baseline; gap: var(--sp-3); padding: 4px 0; }
.rn-tag {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start;
  font-size: var(--fs-caption); border-radius: var(--radius-sm); padding: 1px 6px;
}
.rn-tag svg { width: 11px; height: 11px; }
.rn-tag--nuevo   { color: var(--accent);  background: var(--accent-soft); }
.rn-tag--mejora  { color: var(--success); background: var(--success-soft); }
.rn-tag--arreglo { color: var(--text-secondary); background: var(--surface-2); }
.rn-text { color: var(--text-secondary); font-size: var(--fs-footnote); line-height: var(--lh-base); flex: 1; min-width: 0; }
.rn-go {
  flex: none; background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: var(--accent); font-size: var(--fs-caption); padding: 1px 4px; border-radius: var(--radius-sm);
}
.rn-go:hover { background: var(--accent-soft); }
@media (max-width: 640px) {
  .rn-item { grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-2); }
  .rn-tag { grid-column: 1 / -1; }
}