.armazon { display: flex; min-height: calc(100vh - var(--alto-marca)); background: var(--fondo); }

/* --- Marca de ambiente ------------------------------------------------------
   Arriba de todo y fija, fuera del riel y de la barra para que ninguno la tape.
   Los altos que miden la ventana le restan --alto-marca. */
:root:has(.marca-de-ambiente) { --alto-marca: 1.75rem; }
/* Como en la portada: el carril apartado queda fuera de la franja y se ve como
   una raya blanca a su derecha. Sin carril, la barra aparece solo cuando hay
   que desplazarse. */
html:has(.marca-de-ambiente) { scrollbar-gutter: auto; }
.marca-de-ambiente {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  height: var(--alto-marca);
  background: var(--ambiente); color: #fff;
  font-size: var(--texto-menor); font-weight: 600; letter-spacing: 0.02em;
}

/* Sobre el azul del riel el anillo de foco tiene que ser claro. */
.riel :focus-visible { outline-color: #fff; }

.riel {
  flex: none;
  display: flex; flex-direction: column;
  position: sticky; top: var(--alto-marca);
  height: calc(100vh - var(--alto-marca));
  width: var(--ancho-riel);
  background: var(--azul-apec);
  color: #fff;
  transition: width .18s ease;
}

.riel-cabeza {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  height: var(--alto-barra);
  padding: 0 1rem;
}

.marca-riel { display: flex; align-items: center; justify-content: center; min-width: 0; }
.marca-riel img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; }

/* El nombre de la aplicación, bajo el logo: distingue una app de otra. */
.nombre-app {
  flex: none;
  margin-top: -0.25rem;
  padding: 0 1rem 0.5rem;
  text-align: center;
  font-size: var(--texto-base); font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255,255,255,.85);
}

.riel-destinos {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
  padding: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.22) transparent;
}

.riel-titulo {
  padding: 0.75rem 0.75rem 0.5rem;
  font-size: var(--texto-menor); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.64);
}

.destino {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  font-size: var(--texto-base); font-weight: 500;
  color: rgba(255,255,255,.68);
  text-decoration: none;
}
.destino:hover { color: #fff; background: rgba(255,255,255,.09); text-decoration: none; }
.destino svg { flex: none; width: 20px; height: 20px; }

/* La barra a la izquierda distingue al elegido cuando el riel va contraído. */
.destino.elegido { font-weight: 600; color: #fff; background: rgba(255,255,255,.13); }
.destino.elegido::before {
  content: "";
  position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--acento);
}

.riel-pie {
  flex: none;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem;
  font-size: var(--texto-menor);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.1);
}
.credito-riel { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; min-width: 0; }
.credito-riel img { display: block; height: 13px; width: auto; flex: none; object-fit: contain; }

.columna-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra-superior {
  flex: none;
  display: flex; align-items: center; gap: 1rem;
  height: var(--alto-barra);
  padding: 0 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--linea);
  position: sticky; top: var(--alto-marca); z-index: 20;
}

.migas { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.625rem; font-size: var(--texto-base); color: var(--gris); }
.migas a { font-weight: 600; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.migas a:hover { color: var(--acento); text-decoration: none; }
.migas .separador { color: var(--linea); }
.migas .actual { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* El relleno vive en variables: la franja de la One Page lo usa para salirse
   hasta los bordes sin repetir las medidas. */
/* Columna para que una pantalla pueda repartirse el alto que sobra. */
.contenido { --contenido-y: 2rem; --contenido-x: 3rem; flex: 1; display: flex; flex-direction: column; padding: var(--contenido-y) var(--contenido-x); background: var(--tarjeta); }

/* Una pantalla puede declarar que cabe en la ventana: entonces la página deja
   de desplazarse y lo que corre es lo suyo, con su encabezado en su lugar. Sale
   del reparto porque con «flex: 1» la base en cero manda sobre el alto. */
/* En un teléfono la barra del navegador entra y sale, y con 100vh la pantalla
   queda más alta que lo que se ve. */
.contenido:has(> .cabe-en-la-ventana) { flex: none; height: calc(100dvh - var(--alto-marca) - var(--alto-barra)); }
.cabe-en-la-ventana { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Dos hamburguesas, una visible a la vez: contraído manda la del riel;
   desplegado, la de la barra superior. */
.boton-hamburguesa {
  flex: none;
  display: flex; flex-direction: column; justify-content: center; gap: 3.5px;
  width: 36px; height: 36px; padding: 0 0.5rem;
  border: 0; border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.boton-hamburguesa:hover { background: var(--fondo); }
.boton-hamburguesa span { display: block; width: 100%; height: 1.6px; border-radius: 2px; background: var(--gris); }
.boton-hamburguesa.en-riel { display: none; }
.boton-hamburguesa.en-riel span { background: #fff; }
.boton-hamburguesa.en-riel:hover { background: rgba(255,255,255,.1); }

.es-riel .riel { width: var(--ancho-riel-contraido); }
.es-riel .riel-cabeza { padding: 0 0.5rem; }
.es-riel .boton-hamburguesa.en-riel { display: flex; }
.es-riel .barra-superior > .boton-hamburguesa:not(.en-riel) { display: none; }
.es-riel .rotulo-riel { display: none; }
.es-riel .marca-riel { display: none; }
.es-riel .destino { justify-content: center; padding-left: 0; padding-right: 0; }

/* Menú de usuario: un popover, sin JavaScript. El navegador lo cierra al
   hacer clic fuera o con Escape, como los paneles de los filtros. */
.menu-usuario { flex: none; anchor-name: --menu-usuario; }

.quien-soy {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.25rem 0.5rem;
  border: 0; border-radius: 8px;
  background: transparent;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.quien-soy:hover { background: var(--fondo); }

.iniciales {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: var(--texto-menor); font-weight: 700;
  background: rgba(19,109,171,.12);
  color: var(--acento);
}
.datos-quien { display: flex; flex-direction: column; line-height: 1.2; }
.datos-quien b { font-size: var(--texto-base); font-weight: 600; color: var(--tinta); }
.datos-quien span { font-size: var(--texto-menor); color: var(--gris); }

.flecha-usuario { width: 16px; height: 16px; color: var(--gris); transition: transform .15s; }
.menu-usuario:has(.tarjeta-usuario:popover-open) .flecha-usuario { transform: rotate(180deg); }

.tarjeta-usuario {
  position: absolute; inset: auto;
  position-anchor: --menu-usuario;
  top: anchor(bottom); right: anchor(right);
  margin: 0.5rem 0 0;
  min-width: 15rem;
  /* Con la lista de roles no cabe en una ventana baja: corre dentro. */
  max-height: calc(100dvh - var(--alto-marca) - var(--alto-barra)); overflow-y: auto;
  padding: 0.375rem 0;
  border: 1px solid var(--linea); border-radius: 8px;
  background: #fff; color: var(--tinta);
  box-shadow: 0 10px 30px rgb(2 24 56 / 0.13);
}
.cabeza-usuario {
  display: flex; flex-direction: column; gap: 0.125rem;
  padding: 0.5rem 0.875rem 0.75rem;
  margin-bottom: 0.375rem;
  border-bottom: 1px solid var(--linea);
}
.cabeza-usuario b { font-size: var(--texto-base); font-weight: 600; color: var(--tinta); }
.cabeza-usuario span { font-size: var(--texto-menor); color: var(--gris); }

.opcion-usuario {
  width: 100%;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border: 0; background: transparent;
  font: inherit; color: var(--tinta);
  text-align: left; text-decoration: none;
  cursor: pointer;
}
.opcion-usuario:hover { background: var(--fondo); text-decoration: none; }
.opcion-usuario svg { flex: none; width: 18px; height: 18px; color: var(--gris); }

/* Lista de roles para verlos como superadmin. */
.cambio-de-rol { padding-bottom: 0.375rem; margin-bottom: 0.375rem; border-bottom: 1px solid var(--linea); }
.titulo-cambio-de-rol {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-size: var(--texto-menor); color: var(--gris);
}
.titulo-cambio-de-rol svg { width: 16px; height: 16px; }
.opcion-rol { padding-left: 1.75rem; }
.opcion-rol.elegido { background: var(--acento-tinte); color: var(--tinta); font-weight: 600; }

/* Tableta: el riel arranca contraído y al abrirlo va encima del contenido.
   Teléfono: vive fuera de la pantalla y lo trae la hamburguesa de la barra. */
.velo-riel { display: none; }

/* Una pantalla deja de caber en la ventana por dos motivos. Sin ancho: con el
   dedo lo que se desplaza es la página, no una caja dentro de ella, y encerrarla
   deja al contenido con una rendija por donde correr. Sin alto: el encabezado,
   los filtros y las tarjetas miden lo mismo en una ventana baja que en una alta,
   así que lo único que puede encogerse es la lista. Por debajo de 800px ya no le
   quedan seis renglones, que es cuando deja de servir de lista. */
@media (max-width: 900px), (max-height: 800px) {
  .contenido:has(> .cabe-en-la-ventana) { flex: 1; height: auto; }
  .cabe-en-la-ventana { display: block; }
}

@media (max-width: 900px) {
  .riel {
    width: var(--ancho-riel-contraido);
    position: fixed; top: var(--alto-marca); bottom: 0; left: 0; z-index: 60; height: auto;
  }
  .armazon { padding-left: var(--ancho-riel-contraido); }
  .rotulo-riel { display: none; }
  .marca-riel { display: none; }
  .boton-hamburguesa.en-riel { display: flex; }
  .barra-superior > .boton-hamburguesa:not(.en-riel) { display: none; }
  .riel-cabeza { padding: 0 0.5rem; }
  .destino { justify-content: center; padding-left: 0; padding-right: 0; }
  .datos-quien { display: none; }

  .menu-abierto .riel { width: var(--ancho-riel); box-shadow: 0 0 40px rgb(2 24 56 / 0.35); }
  .menu-abierto .rotulo-riel { display: block; }
  .menu-abierto .credito-riel { display: flex; }
  .menu-abierto .destino { justify-content: flex-start; padding-left: 0.75rem; padding-right: 0.75rem; }
  .menu-abierto .riel-cabeza { padding: 0 1rem; }
  .menu-abierto .marca-riel { display: flex; }
  .menu-abierto .boton-hamburguesa.en-riel { display: none; }
  .menu-abierto .velo-riel {
    display: block;
    position: fixed; inset: 0; z-index: 50;
    background: rgb(2 24 56 / 0.45);
  }
}

@media (max-width: 640px) {
  .riel { transform: translateX(-100%); transition: transform .18s ease, width .18s ease; }
  .armazon { padding-left: 0; }
  .boton-hamburguesa.en-riel { display: none; }
  .barra-superior > .boton-hamburguesa:not(.en-riel) { display: flex; }
  .menu-abierto .riel { transform: none; }
  .contenido { --contenido-y: 1.25rem; --contenido-x: 1rem; }
}

/* Aviso de Blazor cuando una pantalla falla: lo muestra el propio marco. */
#blazor-error-ui {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: #FBEAE9; color: var(--peligro);
  border-top: 1px solid #E7BDB9;
}
#blazor-error-ui .reload { margin-left: 0.5rem; font-weight: 600; }