/* PublicLayout (marketing) y AppLayout (sidebar + header de la app). */

.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: var(--texto); text-decoration: none; }
.logo .icono { width: 30px; height: 30px; border-radius: 8px; background: var(--marca); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }

.theme-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--borde); background: var(--bg-elevado); color: var(--texto-suave); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle:hover { color: var(--texto); }

/* ---------- PublicLayout ---------- */
.public-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.public-header .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.public-nav { display: flex; align-items: center; gap: 26px; }
.public-nav a { font-size: 14px; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.public-nav a:hover { color: var(--texto); }
.public-header .acciones { display: flex; align-items: center; gap: 10px; }
.menu-movil-btn { display: none; }

@media (max-width: 860px) {
  .public-nav { display: none; }
  .menu-movil-btn { display: inline-flex; }
}

.public-footer { border-top: 1px solid var(--borde); padding: 40px 0; margin-top: 60px; color: var(--texto-suave); font-size: 13px; }
.public-footer .contenedor { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.public-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.public-footer a { text-decoration: none; color: var(--texto-suave); }
.public-footer a:hover { color: var(--texto); }

/* ---------- AppLayout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 250px; flex: none; background: var(--bg-elevado); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 18px;
  position: sticky; top: 0; height: 100vh;
}
.app-sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.app-sidebar .nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radio-md);
  color: var(--texto-suave); text-decoration: none; font-size: 14px; font-weight: 600;
}
.app-sidebar .nav-item:hover { background: var(--bg-sutil); color: var(--texto); }
.app-sidebar .nav-item.activo { background: var(--marca-suave); color: var(--marca-fuerte); }
.app-sidebar .pie { padding-top: 14px; border-top: 1px solid var(--borde); }

.app-header {
  height: 64px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 0 22px; border-bottom: 1px solid var(--borde); background: var(--bg-elevado);
}
.app-header .medidor-compacto { min-width: 140px; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-content { flex: 1; padding: 26px; max-width: 1400px; width: 100%; margin: 0 auto; }

.menu-usuario { position: relative; }
.menu-usuario .disparador { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: var(--radio-md); }
.menu-usuario .disparador:hover { background: var(--bg-sutil); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--marca); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.menu-usuario .desplegable {
  position: absolute; right: 0; top: calc(100% + 6px); width: 240px; background: var(--bg-elevado);
  border: 1px solid var(--borde); border-radius: var(--radio-md); box-shadow: var(--sombra-md); padding: 10px; z-index: 60;
}
.menu-usuario .desplegable .info { padding: 8px 10px 10px; border-bottom: 1px solid var(--borde); margin-bottom: 8px; }
.menu-usuario .desplegable .nombre { font-weight: 700; font-size: 14px; }
.menu-usuario .desplegable .correo { font-size: 12px; color: var(--texto-tenue); word-break: break-all; }

.menu-movil-toggle { display: none; }
@media (max-width: 900px) {
  .app-sidebar { position: fixed; left: -260px; top: 0; z-index: 80; transition: left .18s; box-shadow: var(--sombra-lg); }
  .app-sidebar.abierto { left: 0; }
  .menu-movil-toggle { display: inline-flex; margin-right: auto; }
  .app-header { justify-content: space-between; }
  .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgb(2 6 23 / 0.5); z-index: 70; }
  .sidebar-scrim.visible { display: block; }
}

.pagina-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.pagina-header h1 { font-size: 22px; font-weight: 800; }
.pagina-header .acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.acceso-restringido { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 80px 20px; }