.spinner-container {
  position: fixed; /* Fija el spinner en el viewport */
  top: 50%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta el centro del elemento */
  z-index: 1050; /* Asegura que est� por encima de otros elementos */
}
:root {
  --adm-bg-main: #1f1343;
  --adm-bg-main-2: #180f35;
  --adm-bg-content: #f8f9fa;
  --adm-bg-footer: #202945;
  --adm-accent: #03a0ed;
  --adm-text-on-dark: rgba(233, 240, 255, 0.9);
  --adm-border-soft: rgba(255, 255, 255, 0.08);
  --adm-surface-hover: rgba(3, 160, 237, 0.16);
  --adm-surface-hover-strong: rgba(3, 160, 237, 0.22);
  --adm-border-accent: rgba(3, 160, 237, 0.5);
  --adm-focus-ring: rgba(3, 160, 237, 0.82);
  --adm-active-indicator: #03a0ed;
}
.spinner-logo {
  width: 150px; /* Ajusta el tama�o del logo */
  height: auto;
  animation: spin 1.5s linear infinite; /* Animaci�n de rotaci�n */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.font-atletico {
  font-family: "AtleticoBold" !important;
  padding-top: 8px;
  font-size: 26px;
  padding-left: -5px;
}

.spt-page-gradient {
    min-height: 100dvh;
    width: 100%;
    background: linear-gradient(360deg, #2CA5FF 0%, #6E52D3 40.39%, #4123AC 93.48%);
    display: grid;
    place-items: center;
    box-sizing: border-box;
}

.bg-login {
    min-height: 100vh;
    width: 100%;
    background-image: url("images/sporteate_splash_login.jpg");
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding: 0px;
    isolation: isolate;
    position: relative;
}

.bg-register {
  min-height: 100vh;
  width: 100%;
  background-image: url("images/sporteate_splash_register.jpg");
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0px;
  isolation: isolate;
  position: relative;
}

.img-sportate-splash {
  min-height: 100vh;
  width: 100vw;
  background-image: url("images/sporteate_splash_login.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex; /* Opcional, si quieres centrar el contenido */
  flex-direction: column;
}

.spt-home-container {
  /* Frame 115 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 16px;
  margin: 5% 0px;  
  gap: 40px;
  position: absolute;
  width: 100%;
  left: calc(50% - 360px / 2 + 1px);
  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Added missing dot for class selector */
.spt-home-section {
  /* Frame 114 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 32px;
  width: 328px;
  height: 210.02px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-section-logo {
  /* Frame 90 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 178px;
  height: 112.02px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.spt-home-section-title {
  /* tu deporte cuando sea */
  width: 178px;
  height: 19px;
  font-family: "Atletico Regular";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #ffffff;
  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}

.spt-home-section-welcome {
  /* Frame 1 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 8px;
  width: 328px;
  height: 67px;
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-section-subtitle {
  /* Hola de nuevo! */
  width: 300px;
  height: 33px;
  /* Mobile/H3/bold */
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 25px;
  line-height: 33px;
  /* identical to box height */
  /* Changed from text-align: right to center for proper centering */
  text-align: center;
  color: #ffffff;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.spt-home-section-p {
  width: 328px;
  height: 26px;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  color: #ffffff;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-formulary {
  /* Frame 117 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 56px;
  width: 328px;
  height: 407px;
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-formulary-input {
  /* Frame 8 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 16px;
  width: auto; /* Cambiar de 328px a auto */
  height: 196px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-formulary-inputText:disabled {
  background-color: #e9ecef; /* Color de fondo gris */
  color: #6c757d; /* Color del texto gris */
  cursor: not-allowed; /* Cambia el cursor a "no permitido" */
  opacity: 0.65; /* Reduce la opacidad para dar un efecto visual */
}

.spt-timepicker {
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: 40px;
  background-color: #ffffff;
  color: #000;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 26px;
  flex: none;
  order: 1;
  align-self: stretch;
  border: none;
  flex-grow: 0;
}
/* Added missing dot for class selector */
.spt-home-formulary-email {
  /* Text Input */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: auto;
  height: 69px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-formulary-label {
  /* Label */
  width: auto;
  height: 21px;
  /* Desktop/Body/medium */
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;

  /* identical to box height */
  color: #ffffff;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-formulary-inputText {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: 40px;
  background-color: #ffffff;
  color: #000;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 26px;
  flex: none;
  order: 1;
  align-self: stretch;
  border: none;
  flex-grow: 0;
}

.spt-home-formulary-textArea{
  width: 100%;
  max-width: 100%;
  min-height: 120px;        /* más alto para texto multilinea */
  padding: 8px 12px;
  background-color: #ffffff;
  color: #000;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 26px;
  border: none;
  resize: vertical;         /* el usuario puede agrandarlo verticalmente */
  font: inherit;            /* hereda la fuente del formulario */
  line-height: 1.4;
  outline: none;
  box-shadow: 0px 0px 0px 1px rgba(0, 140, 255, 0.4),
              0px 4px 24px rgba(0, 0, 0, 0.1);
}
.stp-home-formulary-inputText-sinflex{
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  width: 74%;
  max-width: 100%;
  height: 40px;
  background-color: #ffffff;
  color: #000;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 26px;
  flex: none;
  order: 1;
  align-self: stretch;
  border: none;
  flex-grow: 0;
}
.spt-home-formulary-password {
  /* Frame 7 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 42px;
  width: auto;
  height: auto;
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.spt-password-input-group {
  /* Text Input */
  /* Auto layout */
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: auto;
  height: 69px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Bot�n del ojo */
.spt-password-toggle {
  position: absolute;
  top: 37px; /* Position relative to input field (label height + gap + half input height) */
  right: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* �cono del ojo */
.spt-toggle-icon {
  font-size: 18px;
  color: #666;
}

.spt-password-forgot {
  /* Frame 3 */
  /* Auto layout */
  display: flex;
  flex-direction: row;
  
  padding-top: 50px;
  gap: 8px;
  width: 320px;
  height: 18px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  margin-bottom: 8px;
  justify-content:center;
  padding-top:10px;
}

.spt-home-session {
  /* Frame 9 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 56px;
  width: 328px;
  height: 155px;
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-session-register {
  /* Frame 9 */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  gap: 56px;
  height: 155px;
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.spt-home-session-checkbox {
  /* Checkbox */
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 65px;
  gap: 16px; /* Increased gap between login button and checkbox */
  width: 380px;
  height: auto; /* Changed from fixed height to auto */
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Added missing styles for checkbox container */
.spt-home-session-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px;
  gap: 8px;
  width: 380px;
  height: 18px;
  /* Inside auto layout */
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

/* Added checkbox styles */
.spt-keep-session-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
}

.spt-keep-session-label {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #111827;
  margin: 0;
}

.spt-login-button {
  /* Button */
  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  width: 328px;
  height: 47px;
  background: #3299e5;
  border-radius: 32px;
  border: none; /* Added border none */
  cursor: pointer; /* Added cursor pointer */
  align-self: stretch;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.spt-home-session-create {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px;
  gap: 4px;
  width: 100%;
  height: auto;
  flex: none;
  order: 2;
  flex-grow: 0;
}

.spt-no-account-text {
  width: auto;
  height: 18px;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #111827;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0;
}

.spt-signup-link {
  /* Reg�strate aqu� */
  width: auto;
  height: 18px;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  text-decoration-line: underline;
  color: #111827;
  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}

.spt-inputSelect {
  font-size: 16px;
  border: none; /* Opcional: eliminar el borde */
  border-radius: 26px;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23999' d='M2 5L0 0h4z'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  background-size: 8px; /* Reducir el tama�o de la flecha */
  background-color: #fff;
  width: 100%; /* Ajustar al contenedor padre */
  max-width: 100%; /* Evita que exceda el ancho de la columna */
  box-sizing: border-box;
  height: 40px; /* Igualar la altura */
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);
  padding: 8px 12px;
  gap: 8px;
}

/* Agregando estilos de error para el formulario de login */

/* Estados de error para inputs */
.spt-home-formulary-inputText.error {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
  box-shadow: 0px 4px 24px rgba(220, 53, 69, 0.2);
}

.spt-home-formulary-inputText.error:focus {
  outline: 2px solid rgba(220, 53, 69, 0.5);
  outline-offset: 2px;
}

/* Mensajes de error */
.spt-error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: "DM Sans";
  font-size: 12px;
  font-weight: 500;
  color: #dc3545;
  line-height: 16px;
}

.spt-error-icon {
  width: 14px;
  height: 14px;
  fill: #dc3545;
  flex-shrink: 0;
}

/* Error general del formulario */
.spt-form-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    font-family: "DM Sans";
    font-size: 14px;
    font-weight: 500;
    color: #721c24;
    margin-top: 12px;
    margin-bottom: 16px;
}

.spt-form-error-icon {
  width: 16px;
  height: 16px;
  fill: #721c24;
  flex-shrink: 0;
}

/* Estado de carga para el bot�n */
.spt-login-button:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

.spt-login-button.loading {
  position: relative;
  color: transparent;
}

.spt-login-button.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spt-spin 1s linear infinite;
}

@keyframes spt-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Labels con estado de error */
.spt-home-formulary-label.error {
  color: #dc3545;
}

/* Hover states para bot�n con errores */
.spt-login-button:hover:not(:disabled) {
  background: #2980d1;
  transform: translateY(-1px);
  box-shadow: 0px 6px 32px rgba(50, 153, 229, 0.3);
}

/* Animaci�n suave para transiciones de error */
.spt-home-formulary-inputText,
.spt-home-formulary-label {
  transition: all 0.2s ease-in-out;
}

.spt-success-message {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: "DM Sans";
  font-size: 12px;
  font-weight: 500;
  color: #28a745;
  line-height: 16px;
}

.spt-success-icon {
  width: 14px;
  height: 14px;
  fill: #28a745;
  flex-shrink: 0;
}

.spt-info {
  --info-size: 18px; /* ajust� tama�o aqu� (p.ej. 22px, 28px) */
  --info-color: #d32f2f; /* rojo del borde y la 'i' */

  width: var(--info-size);
  height: var(--info-size);
  border-radius: 50%;
  border: 2px solid var(--info-color);
  background: #fff;
  color: var(--info-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: calc(var(--info-size) * 0.55);
  line-height: 1;
  margin-left: .4rem; /* espacio respecto al label */
  padding: 0;
  vertical-align: middle;
  cursor: help; /* comunica que hay ayuda */
}

.spt-info:hover {
  background: rgba(211, 47, 47, 0.06);
}

.spt-info:focus {
  outline: 2px solid rgba(211, 47, 47, 0.35);
  outline-offset: 2px;
}

/* Si quisieras tama�os alternativos */
.spt-info.sm {
  --info-size: 22px;
}

.spt-info.lg {
  --info-size: 30px;
}
/************quito las cards cuando es mobile**********************/
@media (max-width: 768px) {
  .card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0px !important;
    padding: 0px !important;
    margin-top: 10px !important;
  }

  .card-body {
    margin: 0px !important;
    padding: 0px !important;
  }

  .card-header {
    display: none !important; /* oculta el header de la card */
  }
}

.desk-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(to top, #2d3552, var(--adm-bg-footer)); /* Fondo de TabBar.css */
}

.desk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  height: 86px;
  background-color: #ffffff;
  padding: 0 24px;
  border-bottom: 1px solid #e8edf5;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo .logo {
  width: 40px;
  height: 40px;
}

.desk-body {
  display: flex;
  flex: 1;
  background-color: #f6f8fc;
}

.brand-title {
  color: var(--adm-accent);
}

.desk-sidebar {
  width: 250px;
  background-color: var(--adm-bg-main); /* Fondo oscuro de TabBar.css */
  padding: 1rem;
  box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.2);
}

.desk-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.desk-sidebar li {
  margin-bottom: 1rem;
}

.desk-sidebar a,
.desk-sidebar button {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6); /* Color de TabBar.css */
  font-size: 1rem;
  display: block;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.desk-sidebar a:hover,
.desk-sidebar button:hover {
  background-color: rgba(3, 160, 237, 0.18);
  color: #ffffff;
}

.desk-content {
  flex: 1;
  overflow-y: auto;
  background-color: var(--adm-bg-content); /* Fondo claro */
  color: #333; /* Texto oscuro */
}

.desk-footer {
  text-align: center;
  padding: 1rem;
  background-color: var(--adm-bg-footer); /* Fondo oscuro */
  color: #ffffff;
}

/* Creando estilos CSS para el sidebar con color #1f1343 */
.sidebar-container {
  display: flex;
}

.sidebar {
  background-color: var(--adm-bg-main);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.sidebar.collapsed {
  width: 80px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  height: 86px; /* Igual que .desk-header */
  padding: 0 24px;
  border-bottom: 1px solid rgba(147, 51, 234, 0.3);
  box-sizing: border-box;
}

.header-toggle-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* O center seg�n tu preferencia */
  width: 100vw; /* Toma todo el ancho de la ventana */
  min-width: 100vw;
  max-width: 100vw;
  position: fixed; /* Opcional: para que quede fijo arriba */
  top: 0;
  left: 0;
  z-index: 1001; /* Asegura que est� por encima del sidebar */
  background-color: var(--adm-bg-main); /* O el color que prefieras */
  padding: 16px 24px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.toggle-button-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background-color: #1f1343;
  border-bottom: 1px solid rgba(147, 51, 234, 0.3);
  width: 100%;
  min-height: 60px;
}

.sidebar-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-logo-text {
  color: #6b46c1;
  font-weight: bold;
  font-size: 20px;
}

.sidebar-title {
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  margin: 0;
}

.sidebar-subtitle {
  font-size: 14px;
  color: var(--adm-text-on-dark);
  margin: 0;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  margin: 0 8px;
  position: relative;
}

.nav-link,
.nav-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--adm-text-on-dark);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  font-size: 16px;
  font-weight: 500;
}

.nav-button-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-link:hover,
.nav-button:hover {
  background-color: rgba(3, 160, 237, 0.18);
}

.nav-button {
  justify-content: space-between;
}

.collapsed .nav-link,
.collapsed .nav-button {
  justify-content: center;
  padding: 12px;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-text {
  font-weight: 500;
}

.collapsed .nav-text {
  display: none;
}

.chevron-icon {
  width: 16px;
  height: 16px;
}

.collapsed .chevron-icon {
  display: none;
}

.submenu {
  margin-left: 32px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.submenu-line {
  position: absolute;
  left: 32px;
  top: 48px;
  bottom: 10px;
  width: 2px;
  height: auto !important;
  background-color: white;
}

.submenu-link {
  display: block;
  padding: 8px 16px;
  color: #ddd6fe;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.submenu-link:hover {
  background-color: rgba(3, 160, 237, 0.18);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(147, 51, 234, 0.3);
}

.toggle-button-container {
  display: flex;
  align-items: flex-start;
}

.toggle-button {
  padding: 8px;
  background-color: var(--adm-bg-main);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: white;
  transition: background-color 0.2s ease;
}

/* Sidebar desktop refresh: mejor contraste, jerarquia y estado activo */
.sidebar {
  width:100%;
  background: #ffffff;
  border-right: 1px solid #e5eaf3;
  box-shadow: 10px 0 28px rgba(15, 23, 42, 0.06);
}

.sidebar-header {
  border-bottom: 1px solid #edf2f8;
  background: #ffffff;
}

.sidebar-nav {
  padding: 16px 0;
}

.sidebar .nav-item {
  margin: 0 12px;
}

.sidebar .nav-link,
.sidebar .nav-button {
  color: #334155;
  border: 1px solid transparent;
  border-radius: 14px;
  min-height: 50px;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-button:hover {
  background-color: #f5f8fc;
  border-color: #d9e4f2;
  color: #0f172a;
}

.sidebar .nav-link.active {
  background: #eef6ff;
  border-color: #bfd8f6;
  color: #1565c0;
  box-shadow: inset 3px 0 0 #3299e5;
}

.sidebar .nav-link:active,
.sidebar .nav-button:active {
  background-color: #edf3fa;
  border-color: #cfe0f3;
  transform: translateY(1px);
}

.sidebar .nav-link:focus-visible,
.sidebar .nav-button:focus-visible,
.sidebar .submenu-link:focus-visible {
  outline: 2px solid var(--adm-focus-ring);
  outline-offset: 2px;
}

.sidebar .submenu-line {
  top: 46px;
  bottom: 10px;
  height: auto !important;
  background: #dbe7f5;
}

.sidebar .submenu-link {
  color: #64748b;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 14px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.sidebar .submenu-link:hover {
  background-color: #f6f9fd;
  border-color: #d9e4f2;
  color: #0f172a;
}

.sidebar .submenu-link.active {
  background-color: #eef6ff;
  border-color: #bfd8f6;
  color: #1565c0;
}

.sidebar .submenu-link:active {
  transform: translateY(1px);
}

.toggle-button {
  border: 1px solid #dbe5f0;
  background-color: #ffffff;
  color: #334155;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.toggle-button:hover {
  background-color: #f5f8fc;
  border-color: #cfe0f3;
}

.toggle-button:active {
  background-color: #edf3fa;
  transform: translateY(1px);
}

.toggle-button:focus-visible {
  outline: 2px solid var(--adm-focus-ring);
  outline-offset: 2px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}


.user-chip-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-chip-logo {
  object-fit: contain;
  background: #ffffff;
  padding: 8px;
}

.user-chip-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--adm-accent);
  color: #fff;
  font-weight: 700;
}

.user-chip-content {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.user-chip-name {
  font-weight: 600;
}

.desk-content .card {
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}


.desk-content .card-header {
  background: #ffffff;
  border-bottom: 1px solid #e6eaf0;
  padding: 0.9rem 1rem 0.7rem;
}

.desk-content .card-body {
  padding: 1rem;
}

.desk-content .table {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.desk-content .table thead th,
.desk-content .admin-table-head th {
  background-color: var(--adm-bg-main);
  color: #ffffff;
  border: 0;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 0.78rem 0.75rem;
  white-space: nowrap;
}

.desk-content .table-responsive {
  border-radius: 12px;
  border: 1px solid #e6eaf0;
  background: #fff;
}

.desk-content .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.desk-content .table tbody td {
  border-color: #ecf1f6;
  padding: 0.72rem 0.75rem;
}

.desk-content .table.table-hover tbody tr:hover {
  background-color: #f5fbff;
}

.admin-action-cell {
  width: 100px;
}

.admin-action-wrap {
  max-width: 100%;
  min-width: 0;
}

.admin-action-item {
  min-width: 0;
}

.admin-action-item .btn {
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-action-item .btn:focus-visible {
  outline: 2px solid var(--adm-focus-ring);
  outline-offset: 2px;
}

.admin-dashboard-page .form-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: #475467;
  margin-bottom: 0.42rem;
}

.admin-dashboard-page .form-select,
.admin-dashboard-page .form-control,
.admin-dashboard-page input[type="text"],
.admin-dashboard-page input[type="date"],
.admin-dashboard-page input[type="time"] {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #d0d5dd;
  background-color: #ffffff;
  color: #101828;
  font-size: 0.9rem;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.admin-dashboard-page .form-select:hover,
.admin-dashboard-page .form-control:hover,
.admin-dashboard-page input[type="text"]:hover,
.admin-dashboard-page input[type="date"]:hover,
.admin-dashboard-page input[type="time"]:hover {
  border-color: #b4bfd0;
}

.admin-dashboard-page .form-select:focus,
.admin-dashboard-page .form-control:focus,
.admin-dashboard-page input[type="text"]:focus,
.admin-dashboard-page input[type="date"]:focus,
.admin-dashboard-page input[type="time"]:focus {
  border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(3, 160, 237, 0.2);
}

.admin-dashboard-page .admin-panel-card .card-header h2 {
  color: #101828;
  font-weight: 700;
}

.admin-dashboard-page .admin-filter-btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.15px;
  border-color: var(--adm-accent);
  background-color: var(--adm-accent);
  box-shadow: 0 6px 14px rgba(3, 160, 237, 0.22);
}

.admin-dashboard-page .admin-filter-btn:hover {
  border-color: #0286c8;
  background-color: #0286c8;
}

.admin-dashboard-page .admin-filter-btn:focus-visible {
  outline: 2px solid var(--adm-focus-ring);
  outline-offset: 2px;
}

.toggle-icon {
  width: 16px;
  height: 16px;
}

.hidden {
  display: none;
}

.topbar-toggle {
  width: 100vw;
  background: var(--adm-bg-main);
  border-bottom: 1px solid rgba(3, 160, 237, 0.45);
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  box-sizing: border-box;
  z-index: 1001;
}

.topbar-toggle-aligned {
  height: 72px; /* Igual que .sidebar-header */
  display: flex;
  align-items: center;
  background: var(--adm-bg-main);
  border-bottom: 1px solid rgba(3, 160, 237, 0.45);
  padding-left: 24px; /* Igual que .sidebar-header */
  padding-right: 24px;
  box-sizing: border-box;
  z-index: 1001;
  /* Para alinear con el sidebar, el ancho debe ser igual o mayor */
  /* Si el sidebar es fijo, puedes usar margin-left */
  margin-left: 0;
}

/** TABLE PARA PROFESORES */
.table-wrapper {
  overflow-x: auto;
  margin-bottom: 16px;
}

.profesores-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

.profesores-table thead {
  background: linear-gradient(to right, #f9fafb, #f1f5f9);
}

.profesores-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
}

.profesores-table .profesores-td {
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #444;
  border-top: 1px solid #e5e7eb;
}

.profesores-table tr:hover {
  background: linear-gradient(to right, #f0f9ff, #e0f2fe);
  transition: background 0.3s ease;
}

.spt-validation-message-container {
  order: 2;
  width: 100%;
  margin-top: 8px; /* Increased from default to give more space */
}

.spt-validation-message {
    min-height: 20px; /* reserva espacio siempre */
    margin-top: 4px;
    font-size: 13px;
    color: #dc3545;
    line-height: 1.4;
    display: block;
}
.spt-home-formulary-password,
.spt-home-formulary-email {
    height: auto !important; /* as� se ajusta al contenido, incluidos errores */
}
.spt-home-formulary-input,
.spt-password-input-group {
    display: flex;
    flex-direction: column;
}
/* Additional spacing for email validation container specifically */
.spt-home-formulary-email + .spt-validation-message-container {
  margin-top: 12px;
  margin-bottom: 16px;
}

/* Ensure password validation has proper spacing from forgot password section */
.spt-password-forgot + .spt-validation-message-container {
  margin-top: 12px;
}


/* 1) WINDOWS: mantener gradiente en el wrapper */
.is-windows .spt-page-gradient {
    background: linear-gradient(360deg, #2CA5FF 0%, #6E52D3 40.39%, #4123AC 93.48%) !important;
}

/* 2) MOBILE: quitar gradiente SIEMPRE (incluso si es Windows) */
@media (max-width: 768px) {
    .spt-page-gradient,
    .is-windows .spt-page-gradient {
        background: none !important;
        padding: 0 !important;
        min-height: 100dvh !important;
    }
}

/* 3) WINDOWS (no m�vil): NO usar cover en .bg-login */
.is-windows .spt-page-gradient .bg-login .bg-register {
    /* tu recuadro Windows sigue igual, pero sin cover */
    background-size: contain !important; /* <- en lugar de cover */
}

/* 4) MOBILE: .bg-login S� usa cover (prioriza en pantallas chicas) */
@media (max-width: 768px) {
    .bg-login,
    .is-windows .spt-page-gradient .bg-login .bg-register{
        background-size: cover !important;
    }
}


/* Overlay que oscurece el fondo */
.sa-overlay {
    position: fixed;
    inset: 0;
    display: none; /* visible solo cuando hay popup */
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px); /* opcional */
    -webkit-backdrop-filter: blur(2px);
    z-index: 5000; /* debajo del modal */
    animation: sa-fade-in 120ms ease-out;
}

.sa-overlay--visible {
    display: block;
}

/* Aseguramos que el modal quede por encima del calendario */
.sa-modal-root.show {
    z-index: 5001;
}

.sa-modal-root.sa-open {
    display: block;
}

/* Opcionales: pulir la caja del modal (sin romper Bootstrap) */
.sa-dialog {
    margin: 1.25rem auto;
    max-width: min(640px, calc(100vw - 2rem));
}

.modal-xl.sa-dialog {
    max-width: min(1140px, calc(100vw - 2rem));
}

.sa-content {
    border-radius: 28px;
    border: 1px solid rgba(219, 227, 239, 0.92);
    background:
        radial-gradient(circle at top right, rgba(80, 98, 245, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.34);
    animation: sa-pop 140ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}

.sa-body {
    max-height: calc(80vh - 120px);
    overflow-y: auto;
}

.sa-content-tall-70 {
    max-height: 70vh;
}

.sa-content-tall-80 {
    max-height: 80vh;
}

.sa-header {
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 1rem;
    border-bottom: 1px solid #e6ebf3;
    background: linear-gradient(135deg, rgba(44, 165, 255, 0.12) 0%, rgba(110, 82, 211, 0.14) 100%);
}

.sa-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.sa-icon-shell {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    flex-shrink: 0;
}

.sa-icon-shell-table {
    background: linear-gradient(135deg, #5b4ba0 0%, #6a58b8 100%);
}

.sa-logo-shell {
    overflow: hidden;
}

.sa-logo-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.sa-title {
    margin: 0;
    font-family: "AtleticoBold", "DM Sans", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.sa-body {
    font-size: .96rem;
    line-height: 1.55;
    color: #344054;
    padding: 1.15rem 1.25rem 1rem;
}

.sa-actions {
    gap: .65rem;
    justify-content: flex-end;
    border-top: 1px solid #e6ebf3;
    padding: 1rem 1.25rem 1.2rem;
}

.sa-btn {
    font-weight: 700;
    border-radius: 999px;
    min-height: 42px;
    padding-inline: 1rem;
}

.sa-btn.btn-primary {
    background: linear-gradient(44deg, #2ca5ff 10%, #5062f5 86%);
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(50, 153, 229, 0.18);
}

.sa-btn.btn-primary:hover {
    background: linear-gradient(135deg, #1f6fb0 0%, #4455db 100%);
    border-color: transparent;
}

.sa-btn-secondary {
    background: #ffffff;
    border-color: rgba(50, 153, 229, 0.36);
    color: #3299e5;
}

.sa-btn:focus-visible,
.sa-close:focus-visible {
    outline: 2px solid var(--adm-focus-ring);
    outline-offset: 2px;
}

.sa-close:hover {
    filter: brightness(0.9);
}

.sa-icon {
    font-size: 1.15rem;
    color: #ffffff;
    vertical-align: middle;
}

.sa-message {
    white-space: pre-line;
}

.sa-body-summary {
    max-height: calc(88vh - 165px);
}

.sa-message-summary {
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 1rem;
    color: #243447;
    overflow-wrap: anywhere;
}

.sa-message-summary .sa-summary-line {
    margin: 0;
}

.sa-message-summary .sa-summary-line + .sa-summary-line {
    margin-top: 0.18rem;
}

.sa-message-summary .sa-summary-line-main {
    font-weight: 700;
    color: #334155;
}

.sa-message-summary .membership-rule-restriction-card {
    margin-top: 0.65rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(50, 153, 229, 0.16);
    border-radius: 14px;
    background: rgba(248, 251, 255, 0.75);
}

.sa-form-stack {
    display: grid;
    gap: 1rem;
}

.sa-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: center;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    background: #e8f7ef;
    color: #207a4b;
    font-weight: 600;
}

.sa-file-chip i {
    font-size: 0.92rem;
}

.sa-table-wrap {
    border: 1px solid #dbe3ef;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.admin-popup-table thead th {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    color: #344054;
    font-weight: 700;
    border-bottom-color: #dbe4f3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8rem;
}

.admin-popup-table tbody td {
    border-color: #ecf1f7;
}

.admin-popup-table tbody tr:hover {
    background: rgba(50, 153, 229, 0.04);
}

/* Tabla de presentismo en popups: contraste de encabezados + tono apenas mas oscuro */
.presentismo-table {
    --bs-table-bg: #f3f7fc;
    --bs-table-striped-bg: #eaf1fa;
    --bs-table-hover-bg: #dde8f6;
    --bs-table-color: #1f2937;
}

.sa-table-wrap .presentismo-table thead th,
.desk-content .sa-table-wrap .presentismo-table thead th {
    background: linear-gradient(180deg, #edf3fb 0%, #e3ebf7 100%);
    color: #2b3a56 !important;
    border-bottom-color: #d0dced;
}

.sa-terms-content {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 0.35rem;
    white-space: pre-line;
}

.sa-actions-split {
    justify-content: space-between;
}

.sa-list-group {
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
}

.sa-list-item {
    border-left: 0;
    border-right: 0;
    padding: 0.9rem 1rem;
    transition: background-color 0.16s ease, transform 0.16s ease;
}

.sa-list-item:hover {
    background: rgba(50, 153, 229, 0.06);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .sa-actions-split {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .sa-actions-split .sa-btn {
        width: 100%;
    }
}

/*Font-size para los iconos de asistencia */
.asistencia-icon{
    font-size:18px;
}

/* Animaciones suaves */
@keyframes sa-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sa-pop {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .sa-dialog {
        margin: 1rem;
    }
}

.admin-404-shell {
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    display: grid;
    place-items: center;
    padding: 18px;
}

.admin-404-card {
    width: min(460px, 100%);
    border-radius: 24px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.14);
    padding: 30px 24px;
    text-align: center;
    display: grid;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.admin-404-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 14% 0%, rgba(44, 165, 255, 0.18), transparent 44%),
        radial-gradient(circle at 86% 0%, rgba(110, 82, 211, 0.2), transparent 50%);
    pointer-events: none;
}

.admin-404-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    margin: 0 auto 2px;
}

.admin-404-code {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    background: linear-gradient(45deg, #2CA5FF 0%, #6E52D3 42%, #4123AC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.admin-404-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.admin-404-text {
    margin: 0;
    font-size: 14px;
    color: #475467;
    line-height: 1.5;
}

.admin-404-actions {
    margin-top: 8px;
    display: grid;
    gap: 10px;
}

.admin-404-btn {
    border-radius: 999px;
    font-weight: 700;
}