.presentado-body {
  min-height: 100vh;
  background: var(--superficie-base);
  position: relative;
}

.presentado-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 8%, rgba(255, 106, 0, 0.12), transparent 58%),
    radial-gradient(circle at 90% 18%, rgba(12, 12, 12, 0.25), transparent 62%),
    radial-gradient(circle at 60% 95%, rgba(255, 128, 0, 0.08), transparent 60%);
  pointer-events: none;
  animation: deriva-ambiente 32s ease-in-out infinite;
}

.presentado-marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.presentado-marca__logo {
  width: 38px;
  height: 38px;
  border-radius: var(--radio-lg);
  background: color-mix(in srgb, var(--superficie-elevada) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 70%, transparent);
  box-shadow: var(--sombra-xs);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.presentado-marca__logo img {
  width: 70%;
  height: auto;
}

.presentado-marca__texto {
  display: grid;
  gap: 2px;
}

.presentado-marca__titulo {
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuente-seminegrita);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letra-amplio);
}

.presentado-marca__subtitulo {
  font-size: var(--texto-xxs);
  color: var(--texto-terciario);
}

.presentado-tema {
  position: fixed;
  top: var(--espacio-4);
  right: var(--espacio-4);
  z-index: var(--z-fijo);
}

.presentado-login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--espacio-4);
  padding: var(--espacio-5) var(--espacio-4);
}

.presentado-login__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.presentado-login__panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.presentado-login__tarjeta {
  width: min(480px, 100%);
  padding: var(--espacio-6);
  display: grid;
  gap: var(--espacio-5);
  position: relative;
  overflow: hidden;
}

.presentado-login__tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(255, 106, 0, 0.2), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.presentado-login__tarjeta > * {
  position: relative;
  z-index: 1;
}

.presentado-login__eyebrow {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letra-mas-amplio);
  color: var(--color-primario-600);
  font-weight: var(--peso-fuente-seminegrita);
}

.presentado-login__titulo h1 {
  font-size: var(--texto-xl);
  margin-bottom: var(--espacio-1);
}

.presentado-login__formulario {
  display: grid;
  gap: var(--espacio-4);
}

.presentado-login__contrasena {
  position: relative;
}

.presentado-login__contrasena .entrada {
  padding-right: 54px;
}

.presentado-login__ver {
  position: absolute;
  right: var(--espacio-2);
  top: 50%;
  transform: translateY(-50%);
}

.presentado-login__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espacio-3);
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

.presentado-login__firma {
  font-weight: var(--peso-fuente-seminegrita);
  letter-spacing: var(--espaciado-letra-amplio);
}

.presentado-app {
  min-height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-2) var(--espacio-3);
}

.presentado-app__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-lg);
  background: color-mix(in srgb, var(--vidrio-fondo) 82%, transparent);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: var(--vidrio-fondo-difuso);
  -webkit-backdrop-filter: var(--vidrio-fondo-difuso);
  box-shadow: var(--sombra-sm);
  position: sticky;
  top: var(--espacio-2);
  z-index: var(--z-pegajoso);
}

.presentado-app__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
}

.presentado-app__acciones .boton {
  --btn-height: 44px;
  --btn-padding-x: var(--espacio-2);
  --btn-border-radius: var(--radio-md);
}

.presentado-app__origenes-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
}

.presentado-app__contenido {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  min-height: 0;
  overflow: hidden;
}

.presentado-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 55%, transparent);
  background: color-mix(in srgb, var(--color-primario-500) 22%, var(--superficie-hundida));
  color: var(--color-primario-700);
  display: grid;
  place-items: center;
  font-weight: var(--peso-fuente-negrita);
  box-shadow: var(--sombra-sm);
  transition: transform var(--duracion-rapida) var(--aceleracion-salida),
    box-shadow var(--duracion-rapida) var(--aceleracion-salida);
}

.presentado-avatar:active,
.presentado-avatar--activo {
  transform: scale(0.95);
  box-shadow: var(--sombra-xs);
}

.presentado-avatar__inicial {
  font-size: var(--texto-sm);
}

.presentado-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xxs);
  color: var(--texto-terciario);
}

.presentado-estado__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-exito-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-exito-500) 25%, transparent);
}

.presentado-estado[data-estado='sync'] .presentado-estado__dot {
  background: var(--color-advertencia-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-advertencia-500) 25%, transparent);
}

.presentado-estado[data-estado='cargando'] .presentado-estado__dot {
  background: var(--color-informacion-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-informacion-500) 25%, transparent);
  animation: pulso 1.2s ease-in-out infinite;
}

.presentado-estado[data-estado='error'] .presentado-estado__dot {
  background: var(--color-error-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error-500) 25%, transparent);
}

.presentado-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-superposicion);
  display: none;
}

.presentado-panel--visible {
  display: block;
}

.presentado-panel--abierto {
  display: block;
}

.presentado-panel__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duracion-normal) var(--aceleracion-salida);
}

.presentado-panel--abierto .presentado-panel__fondo {
  opacity: 1;
}

.presentado-panel__contenido {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--superficie-elevada) 96%, transparent);
  border-top-left-radius: var(--radio-2xl);
  border-top-right-radius: var(--radio-2xl);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 80%, transparent);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.24);
  padding: var(--espacio-4);
  display: grid;
  gap: var(--espacio-4);
  transform: translateY(calc(100% + var(--panel-offset, 0px)));
  opacity: 1;
  transition: transform var(--duracion-normal) var(--aceleracion-salida);
  will-change: transform, opacity;
}

.presentado-panel--abierto .presentado-panel__contenido {
  transform: translateY(var(--panel-offset, 0px));
}

.presentado-panel--arrastrando .presentado-panel__contenido {
  transition: none;
}

.presentado-panel__grabber {
  width: 42px;
  height: 4px;
  border-radius: var(--radio-completo);
  background: color-mix(in srgb, var(--borde-sutil) 80%, transparent);
  justify-self: center;
  touch-action: none;
}

.presentado-panel__encabezado {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.presentado-panel__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-primario-500) 55%, transparent);
  background: color-mix(in srgb, var(--color-primario-500) 22%, var(--superficie-hundida));
  color: var(--color-primario-700);
  display: grid;
  place-items: center;
  font-weight: var(--peso-fuente-negrita);
}

.presentado-panel__info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.presentado-panel__nombre {
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuente-seminegrita);
}

.presentado-panel__rol {
  font-size: var(--texto-xs);
  color: var(--texto-terciario);
}

.presentado-panel .presentado-area-fisica {
  padding: var(--espacio-2);
  border-radius: var(--radio-md);
  border: 1px solid color-mix(in srgb, var(--borde-sutil) 75%, transparent);
  background: color-mix(in srgb, var(--superficie-hundida) 64%, transparent);
}

@media (max-width: 480px) {
  .presentado-login {
    padding: var(--espacio-5) var(--espacio-4);
  }

  .presentado-login__tarjeta {
    padding: var(--espacio-5);
  }

  .presentado-app {
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-3);
  }

  .presentado-app__barra {
    padding: var(--espacio-2) var(--espacio-3);
  }

  .presentado-app__acciones {
    margin-left: auto;
  }
}