/* shared/css/oficina.css — marco de la oficina (barra superior + barra lateral)
 *
 * Lo cargan SOLO las dos páginas de la oficina (dashboard/index.html y
 * dashboard/clientes.html); los módulos no. Sin Shadow DOM a propósito
 * (a diferencia de shared/js/modal-emision.js): el modal se inyecta en
 * páginas ajenas con reglas globales que no controlamos, las barras
 * viven en páginas nuestras y comparten tipografía y color con el
 * centro. El aislamiento es por prefijo: toda clase de acá empieza con
 * `of-`. Mismos valores de color que el resto de la oficina.
 *
 * Reemplaza al CSS del <header> que estaba copiado igual en las dos
 * páginas.
 *
 * COLORES: ninguno escrito acá. Todos salen de shared/css/tokens.css
 * (--hs-*, "Campo serio"), que las páginas enlazan ANTES que este archivo.
 * No hay capa intermedia: cada regla usa el var(--hs-*) directo, y
 * cambiar la paleta es cambiar un archivo. El :root de abajo tiene solo
 * medidas (--of-ancho-lateral, --of-alto-superior), ningún color. Lo
 * cuida tests/navegador/paleta-una-sola-fuente.js (ni un literal de color
 * en todo el archivo, :root incluido).
 * Barra superior BLANCA con una línea abajo; barra lateral OSCURA
 * (--hs-side-*). Ojo con las dos trampas espejo: lo blanco translúcido
 * que servía sobre la barra azul desaparece sobre la blanca, y lo claro de
 * la página (--hs-ground, --hs-line) es un destello sobre la lateral
 * oscura. Adentro de la lateral, solo --hs-side-*.
 */

:root {
  --of-ancho-lateral: 260px;
  --of-alto-superior: 64px;
}

/* Solo los elementos del marco que se esconden con `hidden`: una regla
   propia que fije `display` le ganaría al atributo (HALLAZGOS.md, el
   #perfilError del PR B1). Acotado al marco para no cambiar nada de las
   páginas. */
.of-aviso[hidden], .of-sub[hidden], .of-eleccion-fondo[hidden] { display: none !important; }

/* ===== Barra superior ===== */
.of-superior {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--of-alto-superior);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(10px, 2vw, 24px);
  background: var(--hs-surface);
  color: var(--hs-ink);
  border-bottom: 1px solid var(--hs-line);
}
.of-plegar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--hs-radio-control);
  border: 1px solid var(--hs-line);
  background: var(--hs-surface);
  color: var(--hs-ink);
  font-size: 1.2rem;
  cursor: pointer;
}
.of-plegar:hover { background: var(--hs-ground); }
.of-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hs-ink);
  text-decoration: none;
  flex-shrink: 0;
}
.of-marca img {
  height: 38px;
  width: auto;
  background: var(--hs-surface);
  border-radius: var(--hs-radio-control);
  padding: 3px 8px;
}
.of-marca strong { font-size: 1.1rem; letter-spacing: 0.3px; }
.of-nav { display: flex; gap: 4px; }
.of-nav a {
  color: var(--hs-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: var(--hs-radio-control);
  white-space: nowrap;
}
.of-nav a:hover { background: var(--hs-ground); }
/* La página actual: fondo y color del acento, además del aria-current. */
.of-nav a[aria-current="page"] { background: var(--hs-ground); color: var(--hs-accent); }

/* El cliente activo: lugar fijo, siempre visible. */
.of-cliente {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radio-tarjeta);
  padding: 5px 6px 5px 12px;
}
.of-cliente label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hs-muted);
  white-space: nowrap;
}
.of-cliente select {
  min-width: 0;
  max-width: 260px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hs-ink);
  background: var(--hs-surface);
  border: none;
  border-radius: var(--hs-radio-control);
  padding: 6px 8px;
}
.of-cliente select.of-sin-cliente { font-weight: 400; color: var(--hs-muted); font-style: italic; }
.of-salir {
  flex-shrink: 0;
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  color: var(--hs-ink);
  padding: 8px 12px;
  border-radius: var(--hs-radio-control);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.of-salir:hover { background: var(--hs-ground); }

/* Aviso al cambiar de cliente: las pestañas de tareas ya abiertas NO se
   enteran (los módulos leen su contexto una vez, al cargar). */
.of-aviso {
  position: sticky;
  top: var(--of-alto-superior);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(12px, 2vw, 24px);
  background: var(--hs-warn-bg);
  border-bottom: 1px solid var(--hs-warn-line);
  color: var(--hs-warn-ink);
  font-size: 0.88rem;
}
.of-aviso button {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: inherit;
}

/* Texto libre dentro del marco (nombres de clientes y establecimientos
   que cargó el profesional): un valor largo sin espacios corta en vez de
   desbordar la página — misma regla que el texto libre del centro
   (dashboard/index.html), también `break-word` y no `anywhere`: un nombre
   con espacios corta en el espacio, no a mitad de palabra. min-width: 0
   porque son ítems de flex. */
.of-aviso > span,
.of-eleccion h3, .of-eleccion p,
.of-eleccion-opcion > span, .of-eleccion-opcion small {
  overflow-wrap: break-word;
  min-width: 0;
}

/* Etiquetas cortas del marco ("EN DESARROLLO", "· inactivo"): en UNA
   línea, siempre — el corte en cualquier punto es solo para texto libre.
   Explícito aunque hoy no hereden `anywhere`: que no dependa de dónde
   quede anidada la etiqueta mañana. */
.of-etiqueta-desarrollo, .of-etiqueta-corta {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* ===== Layout: lateral + centro ===== */
.of-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--of-alto-superior));
}
.of-centro {
  flex: 1;
  min-width: 0;
}

/* ===== Barra lateral ===== */
.of-lateral {
  position: sticky;
  top: var(--of-alto-superior);
  flex-shrink: 0;
  width: var(--of-ancho-lateral);
  height: calc(100vh - var(--of-alto-superior));
  overflow-y: auto;
  background: var(--hs-side-bg);
  border-right: 1px solid var(--hs-side-active);
  padding: 14px 10px 24px;
  font-size: 0.9rem;
}
.of-layout.of-lateral-oculta .of-lateral { display: none; }
.of-grupo + .of-grupo { margin-top: 14px; }
.of-grupo-titulo {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--hs-side-muted);
  padding: 0 10px 4px;
}
.of-lateral ul { list-style: none; margin: 0; padding: 0; }
.of-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--hs-side-text);
  background: transparent;
  border: none;
  border-radius: var(--hs-radio-control);
  padding: 7px 10px;
  line-height: 1.3;
}
/* ===== Íconos =====
   LA REGLA: un ícono se gana el lugar solo si es MÁS RÁPIDO que la palabra,
   o si la palabra no entra. En un botón que ya dice "Guardar", el disquete
   no agrega nada: resta. Cuatro botones de acción con cuatro iconitos al
   lado son ruido, no ayuda. Por eso son pocos: Salir y plegar la lateral
   (en pantalla angosta no hay lugar para la palabra), el aviso, desplegar un
   ítem, Maps (el botón no tiene texto), Eliminar (la única acción de la fila
   que destruye algo: se distingue de un vistazo) y los cuatro estudios.
   Antes de agregar uno: esta regla. Los dibuja shared/js/oficina-marco.js
   (ICONOS_OFICINA), una sola familia de línea: ni emojis (los dibuja el
   sistema, distintos en cada equipo) ni glifos de texto como ☰ o ✕ (los
   dibuja la fuente, con otro grosor). Lo vigila
   tests/navegador/sin-emojis-en-la-oficina.js. */
.of-icono { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -0.25em; }
/* El otro tamaño de la familia: el ícono SOLO, cuando es el elemento y no
   tiene texto al lado (ver _spriteIconosOficina). No hay un tercero. */
.of-icono.of-icono-solo { width: 24px; height: 24px; }

button.of-item { cursor: pointer; font-weight: 600; }
button.of-item:hover { background: var(--hs-side-active); }
button.of-item:focus-visible { outline: 2px solid var(--hs-side-mark); outline-offset: 1px; }
.of-flecha { margin-left: auto; font-size: 0.75rem; transition: transform 0.15s; }
button.of-item[aria-expanded="true"] .of-flecha { transform: rotate(90deg); }
.of-lateral ul.of-sub { padding-left: 12px; border-left: 2px solid var(--hs-side-active); margin: 2px 0 4px 16px; }

a.of-item { text-decoration: none; font-weight: 600; }
a.of-item:hover { background: var(--hs-side-active); }
a.of-item:focus-visible { outline: 2px solid var(--hs-side-mark); outline-offset: 1px; }
/* El ítem de la página actual: fondo, texto blanco y la barrita a la
   izquierda (border-left, no un pseudo-elemento: no se pierde al plegar). */
.of-lateral a.of-item[aria-current="page"] {
  background: var(--hs-side-active);
  color: var(--hs-surface);
  border-left: 4px solid var(--hs-side-mark);
  padding-left: 6px;
}
.of-lateral ul.of-lateral-nav { display: none; border-bottom: 1px solid var(--hs-side-active); padding-bottom: 8px; margin-bottom: 12px; }

/* En desarrollo: visible, marcado, sin forma de entrar (es un <span>). */
.of-item.of-en-desarrollo {
  color: var(--hs-side-muted);
  cursor: not-allowed;
  font-weight: 400;
}
.of-etiqueta-desarrollo {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--hs-side-muted);
  border: 1px dashed var(--hs-side-muted);
  border-radius: var(--hs-radio-tarjeta);
  padding: 1px 6px;
}

/* ===== Elección de establecimiento al abrir una tarea ===== */
.of-eleccion-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--hs-velo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.of-eleccion {
  background: var(--hs-surface);
  border-radius: var(--hs-radio-tarjeta);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: var(--hs-sombra-modal);
  color: var(--hs-ink);
}
.of-eleccion h3 { font-size: 1.05rem; color: var(--hs-ink); margin-bottom: 4px; }
.of-eleccion p { font-size: 0.85rem; margin-bottom: 10px; }
.of-eleccion-subtitulo {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hs-muted);
  margin: 12px 0 6px;
}
.of-eleccion-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  color: var(--hs-ink);
  background: var(--hs-surface);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radio-control);
  padding: 9px 12px;
  margin-bottom: 6px;
  cursor: pointer;
}
.of-eleccion-opcion:hover { border-color: var(--hs-accent); background: var(--hs-ground); }
.of-eleccion-opcion.of-inactivo { color: var(--hs-muted); border-style: dashed; }
.of-eleccion-opcion small { margin-left: auto; color: var(--hs-muted); font-size: 0.75rem; }
.of-eleccion-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.of-boton {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--hs-radio-control);
  cursor: pointer;
  border: 1px solid var(--hs-line);
  background: var(--hs-surface);
  color: var(--hs-accent);
}
.of-boton.of-primario {
  background: var(--hs-accent);
  border-color: var(--hs-accent);
  color: var(--hs-accent-ink);
  min-height: var(--hs-alto-toque);
}
.of-boton.of-primario:hover { background: var(--hs-accent-hover); border-color: var(--hs-accent-hover); }

/* ===== Pantalla angosta: la lateral se pliega (versión mínima) =====
   Plegada por defecto; el botón ☰ la abre ENCIMA del centro, sin
   empujarlo. Nada del marco produce scroll horizontal. */
@media (max-width: 900px) {
  .of-marca strong { display: none; }
  .of-cliente label { display: none; }
  .of-cliente select { max-width: 150px; }
  .of-lateral {
    display: none;
    position: fixed;
    left: 0;
    top: var(--of-alto-superior);
    z-index: 45;
    box-shadow: var(--hs-sombra-flotante);
  }
  .of-layout.of-lateral-abierta .of-lateral { display: block; }
}
/* Muy angosta (teléfono, tablet vertical chica): lo que sale de la barra
   superior es la navegación (pasa al tope de la lateral), NUNCA el
   cliente activo, que toma todo el espacio libre. */
@media (max-width: 560px) {
  .of-superior { gap: 8px; }
  .of-nav { display: none; }
  .of-lateral ul.of-lateral-nav { display: block; }
  .of-salir { padding: 8px; }
  .of-salir .of-texto-salir { display: none; }
  .of-marca img { height: 30px; padding: 2px 5px; }
  .of-cliente { flex: 1; padding: 3px; }
  .of-cliente select { flex: 1; width: 100%; max-width: none; }
}