/* Barra superior (tema + navegación) y pie legal — compartido entre pantallas */
.barra-superior {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.barra-izquierda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  flex-shrink: 0;
  max-width: 18rem;
}
.barra-version {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted-2, var(--text-muted));
}
.barra-version-num {
  font-weight: 600;
  color: var(--text-primary);
}
.barra-version-estado {
  display: block;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-link);
  cursor: pointer;
  text-align: left;
}
.barra-version-estado:hover {
  text-decoration: underline;
}
.barra-version-estado-nueva {
  font-weight: 600;
}
.barra-version-soporte {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--color-link);
  text-decoration: none;
}
.barra-version-soporte:hover {
  text-decoration: underline;
}
.modal-changelog {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  background: var(--bg-panel);
  color: var(--text-primary);
  max-width: min(36rem, 94vw);
  width: 36rem;
  text-align: left;
}
.modal-changelog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.modal-changelog-caja {
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  text-align: left;
}
.modal-changelog-caja h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  text-align: left;
}
.modal-changelog-lista {
  max-height: 60vh;
  overflow: auto;
  font-size: 0.88rem;
  text-align: left;
}
.modal-changelog-lista article {
  margin-bottom: 1rem;
}
.modal-changelog-lista h3 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  text-align: left;
}
.modal-changelog-lista ul {
  margin: 0;
  padding-left: 1.15rem;
  text-align: justify;
  text-align-last: left;
}
.modal-changelog-lista li {
  text-align: justify;
  text-align-last: left;
}
.modal-changelog-cerrar {
  margin-top: 0.75rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--bg-body);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
}
.barra-volver {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.barra-volver a {
  color: var(--color-link);
  text-decoration: none;
}
.barra-volver a:hover {
  text-decoration: underline;
}
.barra-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}
.barra-tema {
  display: flex;
  justify-content: flex-end;
}
.btn-tema {
  margin-top: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-tema:hover {
  filter: brightness(1.06);
}
.btn-tema-iconos {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.btn-tema svg {
  width: 1.15em;
  height: 1.15em;
  vertical-align: middle;
}
.btn-tema .icono-sol {
  display: none;
}
html.modo-oscuro .btn-tema .icono-luna {
  display: none;
}
html.modo-oscuro .btn-tema .icono-sol {
  display: block;
}
.barra-logout {
  font-size: 0.9rem;
  text-align: right;
}
.barra-logout a,
.barra-logout-btn {
  color: var(--color-link);
  text-decoration: none;
}
.barra-logout a:hover,
.barra-logout-btn:hover {
  text-decoration: underline;
}
.form-logout {
  display: inline;
  margin: 0;
  padding: 0;
}
.barra-logout-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.barra-suscripcion {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted-2, var(--text-muted));
  max-width: 20rem;
}
.barra-suscripcion-cupo {
  padding-left: 0.35rem;
}
.barra-suscripcion-vencida {
  color: var(--color-error, #b00020);
  font-weight: 600;
}
.barra-suscripcion-sin-cupo {
  color: var(--color-warning, #9a6700);
}
.pie-legal {
  margin-top: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-divider, var(--border));
  text-align: right;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted-2, var(--text-muted));
}
.pie-legal-cuerpo {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.pie-legal-version {
  flex: 0 0 auto;
  max-width: 16rem;
  text-align: left;
}
.pie-legal-textos {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
}
.pie-legal p {
  margin: 0 0 0.65rem 0;
  margin-left: auto;
  max-width: 38rem;
  text-align: justify;
}
.pie-legal p:last-child {
  margin-bottom: 0;
}
.pie-desktop-quit {
  margin: 0 0 0.75rem 0;
  margin-left: auto;
  max-width: 38rem;
}
.pie-desktop-quit a {
  font-weight: 600;
  color: var(--color-link);
}
.pie-legal-links {
  text-align: right;
  margin-left: auto;
  max-width: 38rem;
}
.pie-legal-links a {
  font-weight: 600;
}
.pie-legal-ver {
  font-size: 0.78rem;
}
.pie-guia-enlace {
  margin-top: 3rem;
  text-align: right;
  font-size: 0.88rem;
  line-height: 1.45;
}
.pie-guia-enlace p {
  margin: 0 0 0.75rem 0;
  margin-left: auto;
  max-width: 38rem;
}
.pie-guia-enlace a {
  font-weight: 600;
  color: var(--color-link);
}
.dev-link-invisible {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.dev-link-invisible:hover,
.dev-link-invisible:focus,
.dev-link-invisible:active,
.dev-link-invisible:visited {
  color: inherit;
  text-decoration: none;
}
.pie-dev-activo {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.pie-dev-activo a {
  color: var(--color-link);
  text-decoration: none;
}
.carpeta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.btn-peligro {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-error, #b00020);
  background: transparent;
  color: var(--color-error, #b00020);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
}
.btn-peligro:hover {
  background: rgba(176, 0, 32, 0.08);
}
.btn-cancelar-descarga {
  border-color: var(--color-error, #b00020);
  color: var(--color-error, #b00020);
}
.acciones-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.btn-sec {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.88rem;
}
.btn-sec:hover {
  filter: brightness(1.05);
}
.btn-toggle-navegador.activo {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 18%, var(--bg-panel));
  font-weight: 600;
}

/* Isologo y cabecera de página */
.cabecera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 0.9rem;
  margin-bottom: 1.2rem;
}
.cabecera h1 {
  font-size: 1.6rem;
  margin: 0;
  line-height: 1.25;
  flex: 1 1 12rem;
  min-width: 0;
}
.logo-sistema {
  height: 48px;
  width: auto;
  max-width: min(100%, 240px);
  object-fit: contain;
  flex-shrink: 0;
}
.logo-sistema.logo-claro {
  display: block;
}
.logo-sistema.logo-oscuro {
  display: none;
}
html.modo-oscuro .logo-sistema.logo-claro {
  display: none;
}
html.modo-oscuro .logo-sistema.logo-oscuro {
  display: block;
}
.cabecera .isologo-wrap {
  line-height: 0;
  flex-shrink: 0;
}
.cabecera:not(.cabecera--login):not(.cabecera--centrada) .isologo-wrap .logo-sistema {
  height: 48px;
  width: auto;
  max-width: min(240px, 100%);
}
.cabecera--centrada {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 1rem 0 2rem;
  --titulo-fs: clamp(1.5rem, 3.4vw, 2.1rem);
}
.cabecera--centrada h1 {
  flex: none;
  width: 100%;
  font-size: var(--titulo-fs);
  line-height: 1.25;
}
.cabecera--centrada .isologo-wrap {
  width: min(100%, calc(var(--titulo-fs) * 2 * 4.05));
  line-height: 0;
  margin-bottom: 0.65rem;
}
.cabecera--centrada .isologo-wrap .logo-sistema {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}
.cabecera--inicio {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0.15rem 0 1.35rem;
  --titulo-fs: clamp(1.25rem, 2.8vw, 1.65rem);
  --subtitulo-fs: clamp(1rem, 2.2vw, 1.2rem);
  --cabecera-ancho: min(100%, 32rem);
  --logo-ancho: min(100%, 64rem);
}
.cabecera--inicio h1 {
  flex: none;
  width: 100%;
  max-width: var(--cabecera-ancho);
  margin-inline: auto;
  font-size: var(--titulo-fs);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.cabecera--inicio .cabecera-subtitulo {
  flex: none;
  width: 100%;
  max-width: var(--cabecera-ancho);
  margin-inline: auto;
  margin: 0 0 0.5rem;
  font-size: var(--subtitulo-fs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted, #444);
}
.cabecera--inicio .isologo-wrap {
  width: var(--logo-ancho);
  max-width: 100%;
  margin-inline: auto;
  line-height: 0;
  margin-bottom: 0.65rem;
}
.cabecera--inicio .isologo-wrap .logo-sistema {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  margin-inline: auto;
}
.cabecera--login {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0.75rem;
  --titulo-fs: 1.2rem;
  --subtitulo-fs: 0.95rem;
}
.cabecera--login h1 {
  flex: none;
  width: 100%;
  font-size: var(--titulo-fs);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.cabecera--login .cabecera-subtitulo {
  flex: none;
  width: 100%;
  margin: 0 0 0.85rem;
  font-size: var(--subtitulo-fs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted, #444);
}
.cabecera--login .isologo-wrap {
  /* Isologo horizontal: ancho ≈ 2× la tipografía «Iniciar sesión», escalado al aspecto real */
  width: min(100%, calc(var(--titulo-fs) * 2 * 5.4));
  line-height: 0;
  margin-bottom: 0.65rem;
}
.cabecera--login .isologo-wrap .logo-sistema {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}