/* ============================================================================
   Valdra · Sistema de diseño — cromo compartido (Fase 7 y Fase 8)

   Capa ADITIVA que carga DESPUÉS de app.css: solo redeclara lo estrictamente
   necesario para (a) la barra lateral y la respuesta a la anchura, y (b) un
   barniz de movimiento/radio sobre `.btn`, `.card`, `.pill`, `.tabs` que ya
   existían. Ninguna de las dos cosas toca la lógica de `app.js` — permisos,
   rutas y el catálogo de navegación siguen viviendo exactamente donde
   vivían; esto es composición visual y respuesta a la anchura, nada más.

   ── Los tres tamaños ──────────────────────────────────────────────────────
   Escritorio (> 1180px):  la barra fija de siempre, `--rail-w` de ancho, con
                            icono y etiqueta.
   Tableta (721–1180px):   una barra de solo icono, más angosta, con el
                            nombre de cada ruta en `title` (ver app.js,
                            renderNav) en vez de escrito al lado. "☰" la
                            despliega entera encima, con su pie.
   Móvil (≤ 720px):        la barra deja de reservar columna — el lienzo usa
                            el ancho entero — y pasa a un cajón que se abre
                            con el botón "☰" del encabezado (`#railToggle`,
                            cableado en app.js, función bindNavDrawer). Un
                            velo (`#railBackdrop`) la cierra al tocar fuera.
   ============================================================================ */

/* ── La barra lateral, más cerca del azul-noche que pidió el dueño ────────
   Alcance a propósito: SOLO `.rail`, nunca la variable `--rail-bg` — esa
   variable también pinta `<option>` en el selector de entorno
   (app.css:754) y tocarla ahí no era parte de este encargo. */
.rail { background: #060B16; }

/* ============================================================================
   Tableta — rail de solo icono
   ============================================================================ */
@media (max-width: 1180px) and (min-width: 721px) {
  /* Se pisan las DOS propiedades que app.css fija a los 960px
     (grid-template-columns y position), para que en 721–960px gane esta
     regla y no la de app.css: aquí la barra sigue fija, solo más angosta —
     nunca se apila estática encima del lienzo. */
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .rail { position: sticky; top: 0; height: 100vh; padding-left: var(--s2); padding-right: var(--s2); }

  .brand { justify-content: center; }
  .brand .wm, .brand .tag { display: none; }

  .nav button { justify-content: center; padding: 9px 4px; }
  .nav .label { display: none; }
  /* En 76px ni el rótulo de grupo ni el pie (usuario, tema, idioma, sesión)
     caben sin partirse: el grupo se separa solo con su línea, y el pie
     completo se alcanza con "☰", que despliega la barra entera encima. */
  .nav-title { display: none; }
  .rail-foot { display: none; }

  .app.nav-open .rail {
    position: fixed; left: 0; top: 0; z-index: 50; width: 260px;
    padding-left: var(--s4, 16px); padding-right: var(--s4, 16px);
    box-shadow: var(--shadow-floating);
  }
  .app.nav-open .brand { justify-content: flex-start; }
  .app.nav-open .brand .wm, .app.nav-open .brand .tag { display: block; }
  .app.nav-open .nav button { justify-content: flex-start; padding: 9px 10px; }
  .app.nav-open .nav .label { display: inline; }
  .app.nav-open .nav-title { display: block; text-align: left; }
  .app.nav-open .rail-foot { display: flex; }
}

/* El botón "☰" y el velo sirven al cajón del móvil y a la barra desplegada
   de la tableta. */
@media (max-width: 1180px) {
  .rail-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(3,7,18,.55);
  }
  .rail-backdrop[hidden] { display: none; }

  .rail-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-right: var(--s2, 8px);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--surface-card); color: var(--text-secondary); cursor: pointer;
  }
  .rail-toggle:hover { color: var(--text-primary); }
}

/* ============================================================================
   Móvil — cajón
   ============================================================================ */
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: min(84vw, 280px); height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--motion-base, 220ms);
    box-shadow: var(--shadow-floating);
  }
  .app.nav-open .rail { transform: translateX(0); }

  .top { padding: 0 var(--s3, 12px); }
}

@media (min-width: 1181px) {
  .rail-toggle { display: none; }
  .rail-backdrop { display: none; }
}

/* ============================================================================
   Fase 8 — un barniz de movimiento y radio sobre el cromo compartido.
   Nunca color: los botones, tarjetas, pastillas y pestañas de las otras 24
   vistas siguen con su paleta de siempre (ver docs/ui/UI_AUDIT.md §6 sobre
   por qué no se redefinen las variables antiguas). Lo que cambia es la
   curva y la duración de la transición, para que pasar de Inicio a
   cualquier otra pantalla no se sienta como cruzar a un producto distinto.
   ============================================================================ */
/* Solo se armoniza la CURVA y la DURACIÓN de transiciones que esos
   selectores ya tenían en app.css (`.btn:hover`) — nunca se les añade una
   transición, un estado de :hover o una sombra que no tuvieran, porque eso
   cambiaría qué parece interactivo sin que ninguna de esas piezas lo sea
   de verdad. */
.btn {
  transition-duration: var(--motion-fast, 120ms);
  transition-timing-function: var(--ease-standard, cubic-bezier(.2,.8,.2,1));
}

/* Las dos líneas siguientes NO cambian un solo píxel — es la garantía bajo
   la que se escriben, y por eso está verificada aquí y no solo prometida:
   `.card` ya usaba `var(--r4)` (10px) y `.card .hd h2` ya usaba el peso
   620, y `--radius-md`/`--font-weight-semibold` valen exactamente eso (ver
   styles/tokens.css y styles/typography.css). Lo único que cambia es que
   ahora la regla la nombra el sistema de diseño nuevo y no un número suelto
   — así que el día que `--radius-md` cambie de intención, `.card` lo sigue
   sin que nadie tenga que acordarse de que también dependía de él. */
.card { border-radius: var(--radius-md); }
.card .hd h2 { font-weight: var(--font-weight-semibold); }

/* ============================================================================
   Lienzo de borde a borde — `bleed: true` en registerView (app.js). La vista
   dibuja su propio título y sus márgenes; hoy solo lo usa Inicio, cuyo hero
   ocupa el ancho entero del área de trabajo.
   ============================================================================ */
.canvas.bleed { max-width: none; padding: 0; }

/* ============================================================================
   Encabezado: buscador, campana y ficha del usuario
   ============================================================================ */
.top-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; min-width: 230px; padding: 0 8px 0 10px;
  border: 1px solid var(--border-subtle, var(--border)); border-radius: var(--radius-md, 8px);
  background: var(--bg); color: var(--text-muted);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.top-search:hover { color: var(--text-secondary, var(--text)); }
.top-search span { flex: 1; text-align: left; }
.top-search kbd {
  font: 600 10.5px/1 var(--font-mono, ui-monospace, monospace); color: var(--text-muted);
  padding: 3px 5px; border-radius: 5px; background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, var(--border));
}
.top-bell {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-secondary, var(--text)); cursor: pointer;
}
.top-bell:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.top-bell-count {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #EF4444; color: #fff;
  font: 700 9.5px/16px var(--font-sans, inherit); text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.top-bell-count[hidden] { display: none; }
.top-user { position: relative; }
.top-user-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 3px 4px 3px 3px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.top-user-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.top-user-avatar {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #0B1220; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.top-user-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; max-width: 170px; }
.top-user-text b { font-size: 12.5px; color: var(--text-primary, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-user-text span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-user-caret { transform: rotate(90deg); color: var(--text-muted); }
.top-user-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 6px;
  background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, var(--border));
  border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-floating);
  display: flex; flex-direction: column;
}
.top-user-menu[hidden] { display: none; }
.top-user-menu button {
  text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-primary, var(--text)); font: inherit; font-size: 13px; cursor: pointer;
}
.top-user-menu button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

@media (max-width: 1180px) { .top-search { min-width: 0; } .top-search span, .top-search kbd { display: none; } }
@media (max-width: 720px) { .top-user-text, .top-user-caret { display: none; } }

/* ── Buscador (⌘K) ─────────────────────────────────────────────────────── */
.palette-shade {
  position: fixed; inset: 0; z-index: 90; background: rgba(3,7,18,.45);
  display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
}
.palette {
  width: min(560px, 100%); background: var(--surface-card, #fff); color: var(--text-primary, var(--text));
  border: 1px solid var(--border-subtle, var(--border)); border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-floating); overflow: hidden;
}
.palette-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border-subtle, var(--border));
  padding: 15px 18px; font: inherit; font-size: 15px; background: transparent; color: inherit; outline: none;
}
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.palette-list li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.palette-list li.is-active { background: color-mix(in srgb, currentColor 8%, transparent); }
.palette-label { flex: 1; }
.palette-group { font-size: 11px; color: var(--text-muted); }
.palette-empty { color: var(--text-muted); cursor: default; }