/* barra.css — Barra superior del ERP RocSteel (rediseño "Bloques de color").
   Referencia de diseño: docs/diseno/barra/barra_bloques_diseno.html (elegido por
   Alejandro, 25/10/2026). Aditivo: reemplaza las reglas de .topnav/.nav-* de
   main.css y el <style> inline de header.php. NO redefine tokens globales del
   ERP: todos los tokens de este archivo van con prefijo --bar- para no pisar
   --bg/--white/--sans de main.css ni los --rs-* de rs_ui.css. La fuente Outfit
   se aplica SOLO al contenedor de la barra, no al body. */

/* ───────────────────────── Fuente local (sin internet) ───────────────────────── */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit/outfit-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ───────────────────────── Tokens (claro) ───────────────────────── */
:root {
  --bar-surface: #ffffff;
  --bar-border:  #e6e0d6;
  --bar-ink:     #231a2b;
  --bar-muted:   #6b6472;
  --bar-chip:    #efebe4;
  --bar-ok:      #2f9e5a;
  --bar-alert:   #d64545;
  --bar-strip-h: 92px;
  /* Alto real de la barra = fila 1 (.rs-top, min 50px) + franja (.rs-strip).
     Lo usa main.css para el calc() de alto de .page y #app-wrapper. */
  --bar-h: calc(50px + var(--bar-strip-h));
  --bar-strip-radius: 26px;
  --bar-font: 'Outfit', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
[data-theme="dark"] {
  --bar-surface: #231a2b;
  --bar-border:  #3a2f45;
  --bar-ink:     #f3f1ec;
  --bar-muted:   #b4abbe;
  --bar-chip:    #2e2438;
}

/* ───────────────────────── Fila 1: franja superior ───────────────────────── */
.rs-header { position: sticky; top: 0; z-index: 400; font-family: var(--bar-font); }

.rs-top {
  min-height: 50px; padding: 0 20px; background: var(--bar-surface);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bar-border);
}
.rs-brand { display: flex; align-items: center; gap: 10px; }
.rs-brand .rs-logo { height: 38px; width: auto; object-fit: contain; }
.rs-brand b { font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--bar-ink); }
.rs-brand b span { font-weight: 400; color: var(--bar-muted); font-size: 11px; display: block; }
.rs-spacer { flex: 1 1 auto; }

.rs-stats { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--bar-muted); }
.rs-stats strong { color: var(--bar-ink); font-size: 14px; }
.rs-stats strong.ok { color: var(--bar-ok); }

.rs-ctls { display: flex; align-items: center; gap: 6px; }
.rs-ctl {
  position: relative; height: 34px; min-width: 34px; padding: 0; border: 0; border-radius: 17px;
  background: transparent; color: var(--bar-muted); display: flex; align-items: center;
  justify-content: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: 20px; line-height: 1;
  transition: background-color .2s ease, transform .2s ease;
}
.rs-ctl:hover { background: var(--bar-chip); transform: translateY(-2px); }
.rs-ctl.user { padding: 0 10px 0 3px; color: var(--bar-ink); font-size: 12.5px; font-weight: 600; }
.rs-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bar-active, #231a2b); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  transition: background-color .4s ease;
}
.rs-badge {
  position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--bar-alert); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}

/* ───────────────────────── Fila 2: franja de bloques ───────────────────────── */
.rs-strip {
  display: flex; min-height: var(--bar-strip-h);
  border-radius: 0 0 var(--bar-strip-radius) var(--bar-strip-radius);
  overflow: hidden; box-shadow: 0 16px 36px rgba(35,26,43,.16);
}
/* Con la banda abierta, las esquinas inferiores de la franja se enderezan para
   que la banda continúe sin corte; la banda lleva el redondeo inferior. */
.rs-strip.rs-flat { border-radius: 0; box-shadow: none; }

.rs-blk {
  flex: 1 1 0; min-width: 0; border: 0; padding: 0 14px; color: #fff; cursor: pointer;
  font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(160deg, var(--bar-tint) 0%, var(--bar-c) 100%);
  transition: flex-grow .5s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.rs-blk:hover { flex-grow: 1.9; filter: saturate(1.18) brightness(1.07); }
.rs-blk.on { flex-grow: 3.6; }
.rs-blk.on:hover { flex-grow: 3.6; filter: none; }
.rs-blk:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.rs-blk-main { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rs-ic { display: flex; align-items: center; justify-content: center; }
.rs-ic img { height: 24px; width: 24px; object-fit: contain; }
.rs-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs-blk:hover .rs-ic { animation: rsBounce .6s cubic-bezier(.3,1.4,.5,1); }
.rs-lb {
  font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; transition: transform .3s ease, letter-spacing .3s ease;
}
.rs-blk:hover .rs-lb { transform: translateY(-2px); letter-spacing: .4px; }

/* ───────────────────────── Banda de secciones (a todo el ancho) ───────────────────────── */
/* Fondo: tono claro del color del módulo = 15% color + 85% superficie. En claro
   la superficie es blanca (~85% blanco); en oscuro es el panel oscuro (mezcla con
   el fondo oscuro). --bar-c lo setea el JS en la banda según el módulo activo. */
.rs-band {
  display: none; font-family: var(--bar-font);
  background: color-mix(in srgb, var(--bar-c) 15%, var(--bar-surface));
  border-radius: 0 0 var(--bar-strip-radius) var(--bar-strip-radius);
  box-shadow: 0 16px 36px rgba(35,26,43,.16);
  padding: 16px 22px 18px;
}
.rs-band.on { display: block; }
.rs-band-cols { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.rs-band-col { display: flex; flex-direction: column; gap: 9px; min-width: 150px; }
.rs-band-col-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--bar-c) 60%, var(--bar-ink));
}
.rs-band-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* En columnas por grupo (Producción) las píldoras se apilan verticales. */
.rs-band-col.has-title .rs-band-pills { flex-direction: column; align-items: flex-start; }

/* Píldora de sección: fondo claro translúcido (superficie), texto oscuro (tinta),
   borde fino del color del módulo para que lea sobre la banda clara. */
.rs-chip {
  min-height: 30px; padding: 5px 13px; border-radius: 15px;
  background: color-mix(in srgb, var(--bar-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--bar-c) 35%, transparent);
  color: var(--bar-ink); font-size: 12.5px; font-weight: 600; text-align: left;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  cursor: pointer; font-family: inherit;
  animation: rsPop .4s cubic-bezier(.2,.8,.2,1) both;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.rs-chip:hover {
  background: color-mix(in srgb, var(--bar-c) 18%, var(--bar-surface));
  border-color: color-mix(in srgb, var(--bar-c) 60%, transparent);
  transform: translateY(-2px);
}
.rs-chip img { height: 18px; width: 18px; object-fit: contain; }
.rs-chip-ic { display: inline-flex; align-items: center; }

/* Píldora principal (página de cabecera del módulo): color del módulo al 100% y
   texto blanco para distinguirla como la principal. */
.rs-chip-main {
  background: var(--bar-c); border-color: transparent; color: #fff; font-weight: 700;
}
.rs-chip-main:hover {
  background: color-mix(in srgb, var(--bar-c) 88%, #000); border-color: transparent; color: #fff;
}
/* Fila principal a todo el ancho, arriba de las columnas (Producción). */
.rs-band-principal { margin-bottom: 14px; }

/* ───────────────────────── Animaciones ───────────────────────── */
@keyframes rsBounce {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-7px) scale(1.14); }
  70% { transform: translateY(2px) scale(.98); }
  100% { transform: none; }
}
@keyframes rsPop {
  from { opacity: 0; transform: translateY(6px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-blk, .rs-lb, .rs-chip, .rs-ctl { transition: none; }
  .rs-blk:hover .rs-ic, .rs-chip { animation: none; }
  .rs-ctl:hover, .rs-chip:hover { transform: none; }
}

/* ───────────────────────── Responsive ───────────────────────── */
/* Pantallas angostas: la franja se vuelve desplazable y los bloques no se
   achican por debajo de 92px (mismo criterio que la referencia, con el
   breakpoint 768 del resto del sistema). */
@media (max-width: 768px) {
  .rs-strip { overflow-x: auto; }
  .rs-blk { flex: 0 0 auto; min-width: 92px; }
  .rs-blk.on { flex: 0 0 auto; min-width: 180px; }
  .rs-band { padding: 14px 14px 16px; }
  .rs-band-cols { gap: 18px; }
  .rs-band-col { min-width: 100%; }
  .rs-top { padding: 6px 12px; row-gap: 6px; }
  .rs-brand b span { display: none; }
  .rs-stats { display: none; }
  .rs-ctl.user .rs-uname { display: none; }
}