/* Estilos para el contenedor de la vista de login/registro */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f4f7;
  font-family: Arial, sans-serif;
}

/* Estilos de la caja del formulario */
.auth-box {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 350px;
  position: relative;
}

/* Estilos del logo */
.logo-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.logo {
  width: 80px;
  height: auto;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10%;
}

/* Encabezados y mensajes */
.app-name {
  color: #333;
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
}

.login-message,
.register-message {
  color: #777;
  font-size: 0.9em;
  margin-top: 5px;
  margin-bottom: 25px;
}

/* Estilos de los campos y etiquetas del formulario */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group .icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #777;
}

.form-group input {
  width: 100%;
  padding: 12px 12px 12px 40px; /* Ajustado para el icono */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
}

/* Estilos de botones */
.primary-button,
.login-button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease;
  margin-bottom: 20px;
}

.primary-button:hover,
.login-button:hover {
  background-color: #0056b3;
}

/* Estilos para el mensaje de error */
.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 0.9em;
}

/* Estilo para el botón deshabilitado */
.login-button:disabled {
  background-color: #a0c3e6;
  cursor: not-allowed;
}

.login-button:hover:disabled {
  background-color: #a0c3e6;
}

/* Estilos para enlaces de navegación */
.register-option,
.login-option {
  margin-top: 15px;
  font-size: 0.9em;
  color: #555;
}

.register-link,
.login-link {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.register-link:hover,
.login-link:hover {
  text-decoration: underline;
}




/* ------------------------------------------------------------------
 * ESTILOS AÑADIDOS PARA POSICIONAR EL BOTÓN DE RETROCESO
 * ------------------------------------------------------------------ */
.back-link[data-v-b27fada6] {
  position: absolute;
  top: 20px; /* Distancia desde la parte superior */
  left: 20px; /* Distancia desde la izquierda */
  font-size: 1.5em;
  color: var(--primary-color, #4a90e2); /* Utiliza tu color primario */
  transition: color 0.2s;
  z-index: 10; /* Asegura que esté por encima de otros elementos */
}
.back-link[data-v-b27fada6]:hover {
  color: var(--primary-hover-color, #3a7bd5);
}

/* Es posible que necesites asegurar que .auth-box tiene position: relative;
   para que el back-link se posicione correctamente dentro de él. */
.auth-box[data-v-b27fada6] {
  position: relative;
  padding-top: 50px; /* Asegura que el contenido no oculte el botón */
}


/* Estilo para el botón de retroceso */
.back-button[data-v-6547cfe2] {
  position: absolute; /* Posiciona el botón en relación al contenedor padre (.auth-box) */
  top: 20px;
  left: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #555;
  cursor: pointer;
  z-index: 10;
}


.error-container[data-v-685e1922] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f0f4f7;
  height: 100vh;
}
h1[data-v-685e1922] {
  font-size: 5em;
  color: #e74c3c; /* Rojo de error */
  margin-bottom: 0.1em;
}
h2[data-v-685e1922] {
  font-size: 2em;
  margin-bottom: 1em;
}
.btn-primary[data-v-685e1922] {
  display: inline-block;
  padding: 12px 30px;
  background-color: #007bff; /* Azul primario */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
p[data-v-685e1922] {
  margin-bottom: 1.5em;
  font-size: 1.8em;
  color: #000000;
}
/* Estilos para btn-primary deben coincidir con tus estilos globales */


/* ------------------------------------------------------------------ */
/* 🚀 SIDEBAR CON ALTURA COMPLETA - MANTIENDO TU DISEÑO */
/* ------------------------------------------------------------------ */
.sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  /* CLAVE: Altura completa forzada */
  height: 100vh;
  min-height: 100vh;
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  /* CLAVE: Reset completo */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* CLAVE: Flexbox para distribución vertical */
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  /* CLAVE: Evitar desbordamientos */
  overflow: hidden;
}

/* 🚀 Estado Colapsado */
.sidebar.collapsed {
  width: 80px;
}

/* ------------------------------------------------------------------ */
/* ESTRUCTURA FLEXBOX MEJORADA */
/* ------------------------------------------------------------------ */

/* Logo Container - Parte superior fija */
.logo-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px 0;
  /* CLAVE: No se encoge */
  flex-shrink: 0;
  /* CLAVE: Borde inferior como el ejemplo */
  border-bottom: 1px solid #e2e8f0;
  margin: 0 10px 20px 10px;
}
.logo {
  width: 80px;
  height: auto;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10%;
}

/* Botón de toggle */
.menu-toggle-btn {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-toggle-btn:hover {
  background-color: #e9f0f5;
  transform: translateY(-50%) scale(1.05);
}

/* ------------------------------------------------------------------ */
/* NAVEGACIÓN - PARTE QUE SE EXPANDE */
/* ------------------------------------------------------------------ */
.sidebar-nav {
  background-color: transparent;
  padding: 0;
  /* CLAVE: Ocupa todo el espacio disponible */
  flex: 1;
  /* CLAVE: Scroll interno si es necesario */
  overflow-y: auto;
  overflow-x: hidden;
  /* CLAVE: Margen inferior para separar del footer */
  margin-bottom: 10px;
}
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* CLAVE: Flexbox para los items */
  display: flex;
  flex-direction: column;
}
.sidebar-nav li {
  display: block;
  border-radius: 6px;
  margin: 0 10px 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  /* CLAVE: Los items no se encogen */
  flex-shrink: 0;
}
.sidebar-nav li a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #000000;
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  transition: all 0.3s;
  border-radius: 6px;
}
.sidebar-nav li a:hover {
  background-color: #e9f0f5;
  color: #007bff;
}
.sidebar-nav li.active a {
  background-color: #007bff;
  color: #ffffff;
}
.sidebar-nav li a svg {
  margin-right: 10px;
  width: 16px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* SUBMENÚS MEJORADOS */
/* ------------------------------------------------------------------ */
.has-submenu {
  position: relative;
}
.submenu {
  list-style: none;
  padding: 0;
  margin: 5px 0 5px 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 2px solid #007bff;
}
.submenu li {
  padding-left: 0;
  margin: 0 5px 2px 5px;
}
.submenu li a {
  padding-left: 40px;
  font-size: 0.9em;
}
.submenu li a:hover {
  background-color: #e9f0f5;
  color: #007bff;
}
.submenu li.active a {
  background-color: #007bff;
  color: #ffffff;
}
.arrow-icon {
  margin-left: auto;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.arrow-icon.rotated {
  transform: rotate(-180deg);
}

/* ------------------------------------------------------------------ */
/* FOOTER - PARTE INFERIOR FIJA */
/* ------------------------------------------------------------------ */
.sidebar-footer {
  padding: 15px 0;
  border-top: 1px solid #e2e8f0;
  /* CLAVE: Se empuja hacia abajo automáticamente */
  margin-top: auto;
  /* CLAVE: No se encoge */
  flex-shrink: 0;
  background-color: #f8f9fa;
  margin: 0 10px;
}
.sidebar-footer li {
  list-style: none;
  display: block;
  border-radius: 6px;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.sidebar-footer li a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #000000;
  text-decoration: none;
  font-size: 1em;
  font-weight: 500;
  transition: color 0.3s;
}
.sidebar-footer li a:hover {
  background-color: #e9f0f5;
  color: #007bff;
}
.sidebar-footer li.active a {
  color: #000000;
}
.sidebar-footer li a svg {
  margin-right: 10px;
}

/* ------------------------------------------------------------------ */
/* ESTILOS PARA MODO COLAPSADO */
/* ------------------------------------------------------------------ */
.sidebar.collapsed .sidebar-nav span,
.sidebar.collapsed .logo-container .logo,
.sidebar.collapsed .arrow-icon {
  display: none;
}
.sidebar.collapsed .sidebar-nav li a {
  justify-content: center;
  padding: 12px 0;
  margin: 0 8px 5px 8px;
}
.sidebar.collapsed .sidebar-nav li a svg {
  margin-right: 0;
}
.sidebar.collapsed .submenu {
  display: none;
}

/* ------------------------------------------------------------------ */
/* 📱 RESPONSIVIDAD (max-width: 1024px) */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
.menu-toggle-btn {
    display: none;
}
.sidebar {
    transform: translateX(-100%);
    width: 250px !important;
    height: 100vh;
    min-height: 100vh;
}
.sidebar.open-mobile {
    transform: translateX(0);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}
.sidebar.collapsed {
    width: 250px !important;
}
.sidebar.collapsed .sidebar-nav span,
  .sidebar.collapsed .logo-container .logo {
    display: block;
}
.sidebar.collapsed .sidebar-nav li a {
    justify-content: flex-start;
    padding: 12px 20px;
    margin: 0 10px 5px 10px;
}
.sidebar.collapsed .sidebar-nav li a svg {
    margin-right: 10px;
}
.sidebar.collapsed .arrow-icon {
    display: inline-block;
}
}

/* ------------------------------------------------------------------ */
/* SCROLLBAR PERSONALIZADO */
/* ------------------------------------------------------------------ */
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ------------------------------------------------------------------ */
/* RESET PARA ELEMENTOS PADRE */
/* ------------------------------------------------------------------ */

/* Añade esto a tu App.vue o layout principal si es necesario */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  height: 100%;
  min-height: 100vh;
}


.user-menu-container[data-v-a45b4910] {
  position: relative;
  cursor: pointer;
}
.user-profile[data-v-a45b4910] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: white;
  border: 1px solid #e2e8f0;
  position: relative;
  z-index: 1000;
}
.user-profile[data-v-a45b4910]:hover {
  background-color: #f7fafc;
  border-color: #cbd5e0;
}
.fa-caret-down[data-v-a45b4910] {
  transition: transform 0.3s ease;
  margin-left: 4px;
}
.fa-caret-down.rotated[data-v-a45b4910] {
  transform: rotate(180deg);
}
.user-dropdown[data-v-a45b4910] {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
  overflow: hidden;
  z-index: 1001;
  animation: dropdownFade-a45b4910 0.2s ease;
}
@keyframes dropdownFade-a45b4910 {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.dropdown-item[data-v-a45b4910] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #4a5568;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  width: 100%;
  background: none;
  text-align: left;
  font-size: 14px;
}
.dropdown-item[data-v-a45b4910]:hover {
  background-color: #f7fafc;
  color: #2d3748;
}
.logout-item[data-v-a45b4910] {
  color: #e53e3e;
  font-weight: 500;
}
.logout-item[data-v-a45b4910]:hover {
  background-color: #fed7d7;
  color: #c53030;
}
.dropdown-overlay[data-v-a45b4910] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 999;
  cursor: default;
}
.user-profile svg[data-v-a45b4910],
.dropdown-item svg[data-v-a45b4910] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


.top-bar[data-v-3dce0b97] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  /* 💡 CLAVE: Z-index ajustado a 999 para que esté debajo de Sidebar (1000) */
  z-index: 999;
  height: 72px;
  gap: 20px;
}

/* Left Section */
.topbar-left[data-v-3dce0b97] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* 🆕 Botón de Menú Móvil (Hamburguesa) */
.mobile-menu-btn[data-v-3dce0b97] {
  display: none; /* Oculto por defecto en desktop */
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mobile-menu-btn[data-v-3dce0b97]:hover {
  background: #f1f5f9;
  color: #334155;
}
.name[data-v-3dce0b97] {
  display: flex;
  flex-direction: column;
}
.app-name[data-v-3dce0b97] {
  margin: 0;
  color: #1e293b;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.app-subtitle[data-v-3dce0b97] {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 2px;
}

/* Center Section */
/* Aunque tu código tiene topbar-center, search-container es el elemento principal en la plantilla */
/* Ajustamos search-container para que actúe como el centro */
.search-container[data-v-3dce0b97] {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  flex: 1; /* Permite que ocupe el espacio central */
  max-width: 500px;
}
.search-container[data-v-3dce0b97]:focus-within {
  background: white;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-icon[data-v-3dce0b97] {
  color: #94a3b8;
  font-size: 0.9rem;
  margin-right: 12px;
  flex-shrink: 0;
}
.search-input[data-v-3dce0b97] {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  color: #1e293b;
  width: 100%;
  padding: 4px 0;
}
.search-input[data-v-3dce0b97]::-moz-placeholder {
  color: #94a3b8;
}
.search-input[data-v-3dce0b97]::placeholder {
  color: #94a3b8;
}

/* Right Section */
.topbar-right[data-v-3dce0b97] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ... (Otros estilos de acciones y usuario se mantienen) ... */

/* Responsive Design */
@media (max-width: 1024px) {
  /* Mostrar el botón de hamburguesa cuando el sidebar se oculta (breakpoint 1024px) */
.mobile-menu-btn[data-v-3dce0b97] {
    display: flex;
}
}
@media (max-width: 768px) {
.top-bar[data-v-3dce0b97] {
    padding: 12px 16px;
    gap: 12px;
}

  /* Ocultar elementos para ahorrar espacio en móvil */
.topbar-center[data-v-3dce0b97],
  .search-container[data-v-3dce0b97] {
    /* Ocultamos el search-container si es necesario en un breakpoint más pequeño */
    max-width: 100%; /* Si quieres que se muestre, ajústalo */
    /* Si quieres ocultarlo completamente: display: none; */
}
.app-subtitle[data-v-3dce0b97] {
    display: none;
}

  /* Si tu LogOutView incluye info de usuario, asegúrate de que se ajuste bien */

  /* ... (El resto de tus media queries originales se mantienen) ... */
}

/* ... (Tus estilos originales para 480px y Dark mode se mantienen) ... */


/* Estilos Base */
.dashboard-layout[data-v-03a447d9] {
  display: flex;
  min-height: 100vh;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  /* ❌ Quitamos el background-gradient de aquí */
  position: relative;
}

/* Área de Contenido: Base (Sidebar Abierta en Desktop) */
.content-area[data-v-03a447d9] {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* CLAVE 1: Margen inicial (Ancho completo del sidebar) */
  margin-left: 250px;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100vh;
}

/* 🚀 Estilos cuando la Sidebar está Colapsada (Mini-Sidebar) 🚀 */
.dashboard-layout.sidebar-collapsed .content-area[data-v-03a447d9] {
  /* CLAVE 2: Margen reducido (Ancho colapsado del sidebar de 80px) */
  margin-left: 80px;
}

/* CLAVE 3: El fondo gris uniforme y solución de scroll */
.main-content[data-v-03a447d9] {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  /* 💡 Solución 2: Aplicar el fondo gris (o gradiente) aquí */
  background-color: #f8fafc; /* Ejemplo de fondo uniforme, o usa tu gradiente: */
  /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
  min-height: 100%;
}

/* 🆕 Overlay oscuro para cerrar el sidebar en móvil */
.overlay[data-v-03a447d9] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 900; /* Debajo del sidebar (1000) */
  display: none;
}
.dashboard-layout.sidebar-mobile-open .overlay[data-v-03a447d9] {
  display: block;
}

/* 📱 Responsive Design (max-width: 1024px) */
@media (max-width: 1024px) {
  /* En móviles/tabletas, el margen siempre es 0, ya que el sidebar se superpone/oculta */
.content-area[data-v-03a447d9] {
    margin-left: 0 !important; /* Usamos !important por si hay problemas de especificidad */
}
.main-content[data-v-03a447d9] {
    padding: 20px;
}
}

/* ... (Tus estilos de scrollbar se mantienen) ... */
.main-content[data-v-03a447d9]::-webkit-scrollbar {
  width: 6px;
}
.main-content[data-v-03a447d9]::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}
.main-content[data-v-03a447d9]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.main-content[data-v-03a447d9]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Estilos para el contenedor de la vista de login/registro */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f4f7;
  font-family: Arial, sans-serif;
}

/* Estilos de la caja del formulario */
.auth-box {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 350px;
  position: relative;
}

/* Estilos del logo */
.logo-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.logo {
  width: 80px;
  height: auto;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10%;
}

/* Encabezados y mensajes */
.app-name {
  color: #333;
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
}

.login-message,
.register-message {
  color: #777;
  font-size: 0.9em;
  margin-top: 5px;
  margin-bottom: 25px;
}

/* Estilos de los campos y etiquetas del formulario */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group .icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #777;
}

.form-group input {
  width: 100%;
  padding: 12px 12px 12px 40px; /* Ajustado para el icono */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
}

/* Estilos de botones */
.primary-button,
.login-button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease;
  margin-bottom: 20px;
}

.primary-button:hover,
.login-button:hover {
  background-color: #0056b3;
}

/* Estilos para el mensaje de error */
.error-message {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 0.9em;
}

/* Estilo para el botón deshabilitado */
.login-button:disabled {
  background-color: #a0c3e6;
  cursor: not-allowed;
}

.login-button:hover:disabled {
  background-color: #a0c3e6;
}

/* Estilos para enlaces de navegación */
.register-option,
.login-option {
  margin-top: 15px;
  font-size: 0.9em;
  color: #555;
}

.register-link,
.login-link {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.register-link:hover,
.login-link:hover {
  text-decoration: underline;
}

@charset "UTF-8";:root{--el-color-white:#ffffff;--el-color-black:#000000;--el-color-primary-rgb:64,158,255;--el-color-success-rgb:103,194,58;--el-color-warning-rgb:230,162,60;--el-color-danger-rgb:245,108,108;--el-color-error-rgb:245,108,108;--el-color-info-rgb:144,147,153;--el-font-size-extra-large:20px;--el-font-size-large:18px;--el-font-size-medium:16px;--el-font-size-base:14px;--el-font-size-small:13px;--el-font-size-extra-small:12px;--el-font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;--el-font-weight-primary:500;--el-font-line-height-primary:24px;--el-index-normal:1;--el-index-top:1000;--el-index-popper:2000;--el-border-radius-base:4px;--el-border-radius-small:2px;--el-border-radius-round:20px;--el-border-radius-circle:100%;--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-transition-function-ease-in-out-bezier:cubic-bezier(0.645,0.045,0.355,1);--el-transition-function-fast-bezier:cubic-bezier(0.23,1,0.32,1);--el-transition-all:all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);--el-transition-fade:opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);--el-transition-md-fade:transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);--el-transition-fade-linear:opacity var(--el-transition-duration-fast) linear;--el-transition-border:border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);--el-transition-box-shadow:box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);--el-transition-color:color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);--el-component-size-large:40px;--el-component-size:32px;--el-component-size-small:24px}:root{color-scheme:light;--el-color-primary:#409eff;--el-color-primary-light-3:rgb(121,187,255);--el-color-primary-light-5:rgb(160,207,255);--el-color-primary-light-7:rgb(198,226,255);--el-color-primary-light-8:rgb(217,236,255);--el-color-primary-light-9:rgb(236,245,255);--el-color-primary-dark-2:rgb(51,126,204);--el-color-success:#67c23a;--el-color-success-light-3:rgb(149,212,117);--el-color-success-light-5:rgb(179,225,157);--el-color-success-light-7:rgb(209,237,196);--el-color-success-light-8:rgb(225,243,216);--el-color-success-light-9:rgb(240,249,235);--el-color-success-dark-2:rgb(82,155,46);--el-color-warning:#e6a23c;--el-color-warning-light-3:rgb(238,190,119);--el-color-warning-light-5:rgb(243,209,158);--el-color-warning-light-7:rgb(248,227,197);--el-color-warning-light-8:rgb(250,236,216);--el-color-warning-light-9:rgb(253,246,236);--el-color-warning-dark-2:rgb(184,130,48);--el-color-danger:#f56c6c;--el-color-danger-light-3:rgb(248,152,152);--el-color-danger-light-5:rgb(250,182,182);--el-color-danger-light-7:rgb(252,211,211);--el-color-danger-light-8:rgb(253,226,226);--el-color-danger-light-9:rgb(254,240,240);--el-color-danger-dark-2:rgb(196,86,86);--el-color-error:#f56c6c;--el-color-error-light-3:rgb(248,152,152);--el-color-error-light-5:rgb(250,182,182);--el-color-error-light-7:rgb(252,211,211);--el-color-error-light-8:rgb(253,226,226);--el-color-error-light-9:rgb(254,240,240);--el-color-error-dark-2:rgb(196,86,86);--el-color-info:#909399;--el-color-info-light-3:rgb(177,179,184);--el-color-info-light-5:rgb(200,201,204);--el-color-info-light-7:rgb(222,223,224);--el-color-info-light-8:rgb(233,233,235);--el-color-info-light-9:rgb(244,244,245);--el-color-info-dark-2:rgb(115,118,122);--el-bg-color:#ffffff;--el-bg-color-page:#f2f3f5;--el-bg-color-overlay:#ffffff;--el-text-color-primary:#303133;--el-text-color-regular:#606266;--el-text-color-secondary:#909399;--el-text-color-placeholder:#a8abb2;--el-text-color-disabled:#c0c4cc;--el-border-color:#dcdfe6;--el-border-color-light:#e4e7ed;--el-border-color-lighter:#ebeef5;--el-border-color-extra-light:#f2f6fc;--el-border-color-dark:#d4d7de;--el-border-color-darker:#cdd0d6;--el-fill-color:#f0f2f5;--el-fill-color-light:#f5f7fa;--el-fill-color-lighter:#fafafa;--el-fill-color-extra-light:#fafcff;--el-fill-color-dark:#ebedf0;--el-fill-color-darker:#e6e8eb;--el-fill-color-blank:#ffffff;--el-box-shadow:0px 12px 32px 4px rgba(0,0,0,0.04),0px 8px 20px rgba(0,0,0,0.08);--el-box-shadow-light:0px 0px 12px rgba(0,0,0,0.12);--el-box-shadow-lighter:0px 0px 6px rgba(0,0,0,0.12);--el-box-shadow-dark:0px 16px 48px 16px rgba(0,0,0,0.08),0px 12px 32px rgba(0,0,0,0.12),0px 8px 16px -8px rgba(0,0,0,0.16);--el-disabled-bg-color:var(--el-fill-color-light);--el-disabled-text-color:var(--el-text-color-placeholder);--el-disabled-border-color:var(--el-border-color-light);--el-overlay-color:rgba(0,0,0,0.8);--el-overlay-color-light:rgba(0,0,0,0.7);--el-overlay-color-lighter:rgba(0,0,0,0.5);--el-mask-color:rgba(255,255,255,0.9);--el-mask-color-extra-light:rgba(255,255,255,0.3);--el-border-width:1px;--el-border-style:solid;--el-border-color-hover:var(--el-text-color-disabled);--el-border:var(--el-border-width) var(--el-border-style) var(--el-border-color);--el-svg-monochrome-grey:var(--el-border-color)}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:var(--el-transition-fade-linear)}.fade-in-linear-enter-from,.fade-in-linear-leave-to{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:var(--el-transition-fade-linear)}.el-fade-in-linear-enter-from,.el-fade-in-linear-leave-to{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all var(--el-transition-duration) cubic-bezier(.55,0,.1,1)}.el-fade-in-enter-from,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all var(--el-transition-duration) cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter-from,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transform-origin:center top;transition:var(--el-transition-md-fade)}.el-zoom-in-top-enter-active[data-popper-placement^=top],.el-zoom-in-top-leave-active[data-popper-placement^=top]{transform-origin:center bottom}.el-zoom-in-top-enter-from,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transform-origin:center bottom;transition:var(--el-transition-md-fade)}.el-zoom-in-bottom-enter-from,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;transform:scale(1);transform-origin:top left;transition:var(--el-transition-md-fade)}.el-zoom-in-left-enter-from,.el-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:var(--el-transition-duration) height ease-in-out,var(--el-transition-duration) padding-top ease-in-out,var(--el-transition-duration) padding-bottom ease-in-out}.el-collapse-transition-enter-active,.el-collapse-transition-leave-active{transition:var(--el-transition-duration) max-height ease-in-out,var(--el-transition-duration) padding-top ease-in-out,var(--el-transition-duration) padding-bottom ease-in-out}.horizontal-collapse-transition{transition:var(--el-transition-duration) width ease-in-out,var(--el-transition-duration) padding-left ease-in-out,var(--el-transition-duration) padding-right ease-in-out}.el-list-enter-active,.el-list-leave-active{transition:all 1s}.el-list-enter-from,.el-list-leave-to{opacity:0;transform:translateY(-30px)}.el-list-leave-active{position:absolute!important}.el-opacity-transition{transition:opacity var(--el-transition-duration) cubic-bezier(.55,0,.1,1)}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-icon{--color:inherit;align-items:center;display:inline-flex;height:1em;justify-content:center;line-height:1em;position:relative;width:1em;fill:currentColor;color:var(--color);font-size:inherit}.el-icon.is-loading{animation:rotating 2s linear infinite}.el-icon svg{height:1em;width:1em}