.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 administrador. */
.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; }
}

/* La ficha de un paciente cabe con menos alto que una lista: lo que se encoge
   son sus partes, y cada una corre por su cuenta. Con las columnas apiladas ya
   no hay partes lado a lado que repartir, y corre la página. Se apilan antes
   que en un teléfono: con el riel abierto, una laptop no les deja ni 400px. */
@media (min-width: 80.0625rem) and (min-height: 600px) {
  .contenido:has(> .ficha-que-cabe) { flex: none; height: calc(100dvh - var(--alto-marca) - var(--alto-barra)); }
  .ficha-que-cabe { flex: 1; min-height: 0; display: flex; flex-direction: column; }
}
/* El inicio igual, pero pide más ancho: sus paneles van lado a lado desde ahí. */
@media (min-width: 75rem) and (min-height: 600px) {
  .contenido:has(> .inicio-que-cabe) { flex: none; height: calc(100dvh - var(--alto-marca) - var(--alto-barra)); }
  .inicio-que-cabe { flex: 1; min-height: 0; display: flex; flex-direction: column; }
}

@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; }