/*
 * ============================================================================
 *  SHELL — barra superior, barra lateral y área de contenido
 * ============================================================================
 *
 *  Réplica de la geometría de la app actual, medida en producción sobre
 *  https://haulers.kargotools.com/tpl/maritime:
 *
 *    .br-logo               60x60, blanco, radio 15px, arriba a la izquierda
 *    .br-sideleft           fija, 60px colapsada / 230px expandida,
 *                           fondo #041F41, radio 15px, relleno lateral 10px,
 *                           transición 0.2s ease-in-out
 *    .br-mainpanel          margin-left 60px, margin-top 10px
 *    .main-title-container  fondo #041F41, radio 15px, alto mínimo 60px,
 *                           relleno 8px 15px, título #FFC21F a 24px/700
 *    .mainpanel-content     relleno 0 10px 0 18px
 *    .sidebar-label         #FFFFFF, 10px, mayúsculas, interletra 1px
 *    .br-menu-item          alto 40px, relleno 0 10px, 14px/600, interletra 1px
 *    .menu-item-icon        18px de ancho
 *    .menu-item-label       margin-left 15px
 *    .br-menu-sub           fondo rgba(255,255,255,.2), relleno 5px 0 5px 27px,
 *                           radio 0 0 3px 3px
 *    .br-menu-sub .nav-link 13px, relleno 7px 16px, guion indicador a la
 *                           izquierda que se alarga en hover y en la activa
 *
 *  Los valores vienen de la aplicación en producción y no deben "mejorarse":
 *  el requisito es que el operador no note el cambio. Ver la cabecera de
 *  application.css.
 *
 *  ---------------------------------------------------------------------------
 *  MARCADO QUE CONSUME ESTA HOJA (el que emite el shell: layouts/application,
 *  layouts/_topbar y layouts/_sidebar)
 *  ---------------------------------------------------------------------------
 *
 *    body.hn-app  (.hn-app--sin-sesion en la pantalla de ingreso)
 *      a.hn-salto.salto-contenido
 *      header.hn-topbar
 *        a.hn-topbar__marca > span.hn-topbar__marca-sufijo
 *        div.hn-topbar__seccion
 *        div.hn-topbar__user > div.hn-topbar__identidad >
 *              span.hn-topbar__nombre / span.hn-topbar__perfil
 *        form.hn-topbar__form > button.hn-topbar__salir
 *      nav.hn-sidebar
 *        span.hn-sidebar__label                       ("Menú")
 *        div.hn-sidebar__menu
 *          p.hn-sidebar__vacio
 *          details.hn-sidebar__grupo
 *            summary.hn-group(.hn-group--activo)
 *              svg.hn-group__icon
 *              span.hn-group__label
 *              span.hn-group__arrow
 *            ul.hn-sub > li.hn-sub__item >
 *                  a.hn-sub__link(.hn-sub__link--activo)
 *                | span.hn-sub__link.hn-sub__link--pendiente >
 *                      span.hn-sub__marca
 *                | form.hn-sub__form > button.hn-sub__link.hn-sub__link--accion
 *        div.hn-sidebar__pie
 *          span.hn-group.hn-group--pendiente
 *          details.hn-sidebar__grupo …
 *      main#contenido.hn-content  (.hn-content--centrado sin sesión)
 *        div.hn-flash-zona > p.hn-flash(.hn-flash--exito|--aviso|--error)
 *
 *  El armazón es una rejilla sobre el propio <body>: la barra superior ocupa
 *  la fila 1 completa, la barra lateral la columna 1 de la fila 2 y el
 *  contenido la columna 2. La colocación es automática y sigue el orden del
 *  documento, así que no hay coordenadas escritas a mano que se rompan si el
 *  shell cambia de orden. El enlace de salto y la barra de progreso de Turbo
 *  están fuera de flujo y no cuentan como celdas.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * Armazón
 *
 * El contenido desplaza dentro de su celda, no el documento: así el ancho de
 * una grilla no llega nunca al body (requisito) y la barra superior y la
 * lateral quedan siempre a la vista, como hoy.
 * --------------------------------------------------------------------------- */

.hn-app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-height: 100dvh;
}

.hn-app:has(.hn-sidebar) {
  grid-template-columns: var(--hn-barra-carril) minmax(0, 1fr);
}

.hn-topbar {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * Barra superior
 * (equivale a .main-title-container: marino, radio 15px, título en ámbar)
 * --------------------------------------------------------------------------- */

.hn-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) 15px;
  min-height: var(--hn-alto-cabecera);
  margin: 10px;
  padding: 8px 15px;
  border-radius: var(--hn-radio-grande);
  background: var(--hn-marino);
  box-shadow: var(--hn-sombra);
  color: var(--hn-blanco);
}

.hn-topbar__marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-2);
  color: var(--hn-ambar);
  font-size: var(--hn-texto-xl);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.hn-topbar__marca:hover,
.hn-topbar__marca:focus-visible {
  color: var(--hn-ambar);
  text-decoration: none;
}

.hn-topbar__marca-sufijo {
  color: var(--hn-blanco);
  font-size: var(--hn-etiqueta-barra);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hn-topbar__seccion {
  min-width: 0;
  color: var(--hn-blanco);
  font-size: var(--hn-texto-menu);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hn-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-left: auto;
  min-width: 0;
}

.hn-topbar__identidad {
  display: grid;
  justify-items: end;
  min-width: 0;
  line-height: 1.2;
}

.hn-topbar__nombre {
  color: var(--hn-blanco);
  font-size: var(--hn-texto-menu);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hn-topbar__perfil {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--hn-texto-grilla);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El formulario de un solo botón no debe aportar caja ni margen. */
.hn-topbar__form {
  display: contents;
}

/* Botón de salida: el .btn-light de producción sobre el marino. */
.hn-topbar__salir {
  padding: 4px 12px;
  border-color: var(--hn-campo-borde);
  background: var(--hn-boton-claro);
  color: #111111;
  font-size: var(--hn-texto-menu);
  white-space: nowrap;
}

.hn-topbar__salir:hover {
  background: #e2e6ea;
  border-color: var(--hn-campo-borde);
  color: #111111;
  filter: none;
}

/* Insignia de última actualización (#update-last en producción: naranja,
   12px/700, radio 3px). */
.hn-topbar__insignia {
  padding: 2px 7px 3px;
  border-radius: var(--hn-radio);
  background: var(--hn-naranja);
  color: var(--hn-blanco);
  font-size: var(--hn-texto-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Barra lateral
 *
 * Colapsada mide 60px y sólo muestra los iconos; al pasar el cursor crece a
 * 230px. Crece por encima del contenido y no lo empuja: el ancho de la celda
 * de la rejilla sigue siendo 60px y la barra la desborda, igual que hoy, donde
 * .br-mainpanel conserva su margen mientras la barra se expande.
 * --------------------------------------------------------------------------- */

.hn-sidebar {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: var(--hn-barra-colapsada);
  /* Riel flotante con 10px de separación, como hoy (.br-sideleft margin 10px).
     El carril de la rejilla reserva 70px: 60 del riel más esa separación. */
  margin: 10px 0 10px 10px;
  padding: 0 10px;
  border-radius: var(--hn-radio-grande);
  background: var(--hn-marino);
  box-shadow: var(--hn-sombra);
  /* Vertical cuando el menú no cabe; horizontal nunca. */
  overflow: hidden auto;
  overscroll-behavior: contain;
  transition: width var(--hn-transicion);
}

/* `:focus-within` acompaña al hover: sin él, el menú expandido sería
   inalcanzable para quien navega con teclado. */
.hn-sidebar:hover,
.hn-sidebar:focus-within {
  width: var(--hn-barra-expandida);
}

@media (prefers-reduced-motion: reduce) {
  .hn-sidebar,
  .hn-group,
  .hn-group__arrow,
  .hn-sub__link,
  .hn-sub__link::before {
    transition: none;
  }
}

/* Etiqueta "MENÚ": blanca, 10px, mayúsculas. Con la barra colapsada queda
   invisible pero conserva su espacio, igual que hoy (visibility, no display). */
.hn-sidebar__label {
  display: block;
  flex: none;
  margin: 20px 0 8px;
  padding: 0 10px;
  color: var(--hn-blanco);
  font-family: var(--hn-fuente-etiqueta);
  font-size: var(--hn-etiqueta-barra);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hn-sidebar:not(:hover, :focus-within) .hn-sidebar__label {
  visibility: hidden;
}

.hn-sidebar__menu {
  flex: 0 1 auto;
  min-width: 0;
}

.hn-sidebar__vacio {
  padding: var(--esp-2) 10px;
  color: var(--hn-blanco);
  font-size: var(--hn-texto-grilla);
}

.hn-sidebar:not(:hover, :focus-within) .hn-sidebar__vacio {
  visibility: hidden;
}

/* Pie de la barra (Notificaciones, Usuarios): pegado abajo, como hoy
   (.bottom-menu-opts { margin-top: auto }). */
.hn-sidebar__pie {
  margin-top: auto;
  margin-bottom: 10px;
  padding-top: var(--esp-3);
}

.hn-sidebar__grupo {
  display: block;
}

/* ---------------------------------------------------------------------------
 * Fila de grupo
 * (.br-menu-item + .br-menu-link: 40px de alto, blanco a 14px/600)
 * --------------------------------------------------------------------------- */

.hn-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: var(--hn-alto-fila-menu);
  padding: 0 10px;
  border-radius: 2px;
  color: var(--hn-blanco);
  font-size: var(--hn-texto-menu);
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  /* <summary> es un elemento de lista en todos los navegadores: sin esto
     aparece el triángulo del desplegable. */
  list-style: none;
  transition: background-color var(--hn-transicion);
}

.hn-group::-webkit-details-marker,
.hn-group::marker {
  display: none;
  content: "";
}

.hn-group:hover,
.hn-group:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--hn-blanco);
  text-decoration: none;
}

/* Grupo que contiene la pantalla abierta: sólo cambia el color del texto y el
   fondo sigue transparente, igual que .br-menu-link.active hoy. */
.hn-group--activo {
  background-color: transparent;
  color: var(--hn-ambar);
}

/* Notificaciones: en la app actual es un enlace sin destino. Se atenúa y se
   marca como no disponible; no se pinta en rojo ni se tacha, porque no es un
   error sino algo que todavía no está. */
.hn-group--pendiente {
  opacity: 0.45;
  cursor: not-allowed;
}

.hn-group--pendiente:hover {
  background-color: transparent;
}

/* Ranura del icono: 18px de ancho, como .menu-item-icon hoy. El shell emite
   un <svg> con trazo `currentColor`, así que hereda el color de la fila. */
.hn-group__icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: block;
}

/* Texto del grupo: invisible con la barra colapsada, igual que hoy. */
.hn-group__label {
  /* En produccion la etiqueta del grupo es blanca a 14px y solo los subenlaces
     son ambar. Sin declararlo aqui heredaba el ambar y los dos niveles del menu
     se veian iguales. Medido en la aplicacion actual. */
  color: var(--hn-blanco, #ffffff);
  margin-left: 15px;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En la fila de grupo no cabe la marca "pendiente" sin comerse el nombre: la
   fila mide 40px de alto y 230px de ancho, y el nombre es lo que el operador
   busca. La atenuación y el title ya dicen que la pantalla no está. */
.hn-group > .hn-sub__marca {
  display: none;
}

.hn-sidebar:not(:hover, :focus-within) .hn-group__label,
.hn-sidebar:not(:hover, :focus-within) .hn-group__arrow,
.hn-sidebar:not(:hover, :focus-within) .hn-sub__marca {
  visibility: hidden;
}

/* Chevron del desplegable: apunta a la derecha cerrado y abajo abierto. */
.hn-group__arrow {
  flex: none;
  margin-left: var(--esp-2);
  font-size: var(--hn-texto-base);
  line-height: 1;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform var(--hn-transicion);
}

.hn-sidebar__grupo[open] > .hn-group > .hn-group__arrow {
  transform: rotate(90deg);
}

/* ---------------------------------------------------------------------------
 * Subenlaces
 * --------------------------------------------------------------------------- */

.hn-sub {
  margin: 0;
  padding: 5px 0 5px 27px;
  border-radius: 0 0 3px 3px;
  background-color: rgba(255, 255, 255, 0.2);
  list-style: none;
}

/* Con la barra colapsada el submenú desaparece por completo: si sólo se
   ocultara, el riel de iconos quedaría separado por huecos vacíos. Con la
   barra expandida no se fuerza `display`, de modo que el <details> cerrado
   siga cerrado. */
.hn-sidebar:not(:hover, :focus-within) .hn-sub {
  display: none;
}

.hn-sub__item {
  margin: 0;
}

/* El botón de "Salir" es un submit dentro de un formulario: debe leerse igual
   que un subenlace, no como un botón. */
.hn-sub__form {
  display: contents;
}

.hn-sub__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  padding: 7px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hn-ambar);
  font-family: inherit;
  font-size: var(--hn-texto-grilla);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--hn-transicion);
}

.hn-sub__icon {
  flex: none;
  width: 13px;
  height: 13px;
  display: block;
}

/* Guion indicador a la izquierda: corto y tenue en reposo, largo y opaco al
   pasar el cursor y en la pantalla abierta. Es el mismo recurso que usa hoy la
   plantilla del menú. */
.hn-sub__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  margin-top: -0.5px;
  width: 5px;
  height: 1px;
  background-color: var(--hn-blanco);
  opacity: 0.5;
  transition: width var(--hn-transicion), left var(--hn-transicion),
    opacity var(--hn-transicion), background-color var(--hn-transicion);
}

.hn-sub__link:hover,
.hn-sub__link:focus-visible {
  background: transparent;
  color: var(--hn-ambar);
  text-decoration: none;
  filter: none;
}

.hn-sub__link:hover::before,
.hn-sub__link:focus-visible::before {
  width: 20px;
  left: -15px;
  opacity: 1;
  background-color: var(--hn-ambar);
}

.hn-sub__link--activo {
  color: var(--hn-ambar);
  font-weight: 600;
}

.hn-sub__link--activo::before {
  width: 20px;
  left: -15px;
  opacity: 1;
  background-color: var(--hn-ambar);
}

/* Pantalla todavía no migrada. Atenuada y marcada como no disponible, sin
   parecer un error. `pointer-events` se deja intacto a propósito para que el
   title siga apareciendo al pasar el cursor. */
.hn-sub__link--pendiente,
.hn-sub__link[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.hn-sub__link--pendiente:hover::before,
.hn-sub__link--pendiente:focus-visible::before,
.hn-sub__link[aria-disabled="true"]:hover::before {
  width: 5px;
  left: -5px;
  opacity: 0.5;
  background-color: var(--hn-blanco);
}

/* Marca "pendiente": etiqueta discreta, no una alarma. */
.hn-sub__marca {
  flex: none;
  margin-left: auto;
  padding: 0 5px;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-size: var(--hn-texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Contenido
 * (equivale a .mainpanel-content: relleno 0 10px 0 18px)
 * --------------------------------------------------------------------------- */

.hn-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  /* El eje horizontal se resuelve dentro de cada tabla (ver grids.css), nunca
     aquí y nunca en el body. */
  overflow-x: hidden;
  padding: 0 10px var(--esp-6) 18px;
  color: var(--hn-texto);
}

.hn-content--centrado {
  display: grid;
  place-items: center;
  padding: var(--esp-6) var(--esp-4);
}

/* Cualquier tabla que quede fuera de un contenedor con scroll no debe romper
   el ancho de la página. */
.hn-content > table,
.hn-content > * > table {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Avisos
 * --------------------------------------------------------------------------- */

.hn-flash-zona {
  display: grid;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 var(--esp-4);
}

.hn-flash {
  margin: 0;
  padding: 15px 20px;
  border-radius: var(--hn-radio);
  background: var(--hn-info);
  color: var(--hn-blanco);
}

.hn-flash--exito { background: var(--hn-exito); }
.hn-flash--aviso { background: var(--hn-alerta); }
.hn-flash--error { background: var(--hn-peligro); }

.hn-flash a {
  color: var(--hn-blanco);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Inicio
 *
 * Índice de lo que el perfil tiene habilitado. Pantalla nueva: en la app
 * actual el ingreso lleva directo al panel del perfil. Se viste con la misma
 * paleta para que no se sienta ajena.
 * --------------------------------------------------------------------------- */

.hn-inicio {
  padding-top: var(--esp-4);
}

.hn-inicio__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.hn-inicio__encabezado h1 {
  color: var(--hn-marino);
}

.hn-inicio__bajada {
  max-width: 70ch;
  margin: 0;
  color: var(--texto-suave);
}

.hn-inicio__accion {
  padding: 10px 12px;
  border-radius: var(--hn-radio);
  background: var(--hn-marino);
  color: var(--hn-blanco);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hn-inicio__accion:hover,
.hn-inicio__accion:focus-visible {
  color: var(--hn-blanco);
  text-decoration: none;
  filter: brightness(1.35);
}

.hn-inicio__resumen {
  max-width: 80ch;
  color: var(--texto-suave);
  font-size: var(--hn-texto-menu);
}

.hn-inicio__grupo {
  margin-bottom: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
  background: var(--hn-superficie);
}

.hn-inicio__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  color: var(--hn-marino);
  font-size: var(--hn-texto-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hn-inicio__icono {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
}

.hn-inicio__lista {
  display: grid;
  gap: var(--esp-2) var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-inicio__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2);
}

.hn-inicio__enlace {
  font-size: var(--hn-texto-menu);
  font-weight: 600;
}

.hn-inicio__enlace--activo {
  color: var(--hn-marino);
}

.hn-inicio__enlace--pendiente {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

/* La marca "pendiente" hereda el color del texto; en la barra lateral es ámbar
   y aquí gris, porque el fondo es claro. */
.hn-inicio__enlace--pendiente .hn-sub__marca {
  margin-left: 0;
}

.hn-inicio__nota {
  flex-basis: 100%;
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--hn-texto-grilla);
}

/* ---------------------------------------------------------------------------
 * Ingreso
 * --------------------------------------------------------------------------- */

.sesion {
  width: min(26rem, 100%);
  background: var(--hn-superficie);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio-grande);
  box-shadow: var(--hn-sombra);
  padding: var(--esp-5);
}

.sesion h1 {
  color: var(--hn-marino);
  font-size: var(--hn-texto-xl);
}

.sesion .formulario {
  margin-top: var(--esp-4);
}

.sesion input[type="submit"] {
  width: 100%;
}

.sesion .nota {
  margin: var(--esp-4) 0 0;
}

/* ---------------------------------------------------------------------------
 * Pantallas angostas
 *
 * La app actual esconde la barra lateral bajo 992px y la saca con un botón.
 * Aquí el riel colapsado ocupa 60px y se deja siempre visible: sin JavaScript
 * de apoyo, esconderlo dejaría al operador sin menú.
 * --------------------------------------------------------------------------- */

@media (max-width: 62rem) {
  .hn-topbar {
    margin: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
  }

  .hn-topbar__seccion {
    order: 3;
    flex-basis: 100%;
  }

  .hn-content {
    padding-inline: var(--esp-3);
  }

  /* Expandida, la barra no debe tapar la pantalla completa en un móvil. */
  .hn-sidebar:hover,
  .hn-sidebar:focus-within {
    width: min(var(--hn-barra-expandida), 78vw);
  }
}