/* 1. Variables de tema: configuración global de colores y estilos */
:root {
  --bg-app: #121212;               /* Color de fondo principal */
  --fg-app: #d7d7d7;               /* Color de texto principal */
  --card-bg: #1e1e1e;              /* Fondo de las tarjetas */
  --primary: #ffcc00;              /* Color primario (botones, enlaces) */
  --error: #ff3860;                /* Color para mensajes de error */
  --success: #23d160;              /* Color para mensajes de éxito */
  --border-radius: 12px;           /* Radio de bordes de elementos */
  --shadow: 0 4px 12px rgba(0,0,0,0.5); /* Sombra de contenedores */
}

/* 2. Reset y base: box-sizing y espaciado inicial */
* {
  box-sizing: border-box;          /* Incluye padding/border en ancho/alto */
  margin: 0;                       /* Elimina márgenes por defecto */
  padding: 0;                      /* Elimina padding por defecto */
}
html {
  font-size: 16px;                 /* Tamaño base de fuente */
  background: var(--bg-app);       /* Fondo de la página */
  color: var(--fg-app);            /* Color de texto */
}
body {
  font-family: 'Segoe UI', sans-serif; /* Fuente principal */
  min-height: 100vh;               /* Altura mínima completa */
  display: flex;                   /* Flex para centrar contenido */
  align-items: center;             /* Centrado vertical */
  justify-content: center;         /* Centrado horizontal */
  padding: 1rem;                   /* Espacio interior lateral */
}

/* 3. Contenedor “card”: fondo, padding, sombra y centrado */
.app-card {
  background: var(--card-bg);      /* Fondo de la tarjeta */
  padding: 1.5rem;                 /* Relleno interno */
  border-radius: var(--border-radius); /* Bordes redondeados */
  box-shadow: var(--shadow);       /* Sombra externa */
  width: 100%;                     /* Ancho completo del contenedor padre */
  max-width: 280px;                /* Ancho máximo más estrecho */
  position: relative;              /* Para posicionar elementos absolutos */
}
.app-card h2 {
  margin-bottom: 1rem;             /* Separación debajo del título */
  text-align: center;              /* Centrar texto */
  font-weight: 600;                /* Grosor de fuente semi-negrita */
}

/* 4. Inputs y botones: tamaño, padding y estilo */
.app-card input {
  width: 100%;                     /* Input ocupa todo el ancho */
  padding: 0.5rem 0.75rem;         /* Relleno vertical y horizontal */
  margin-bottom: 0.5rem;           /* Espacio debajo del input */
  border: none;                    /* Sin borde predeterminado */
  border-radius: var(--border-radius); /* Bordes redondeados */
  background: #2a2a2a;             /* Fondo oscuro de input */
  color: var(--fg-app);            /* Color de texto */
  font-size: 0.9rem;               /* Tamaño de fuente ligeramente más pequeño */
}
.app-card input::placeholder {
  color: #999;                     /* Color del texto placeholder */
}
.app-card button {
  width: auto;                     /* Ajuste automático de ancho */
  min-width: 200px;                /* Ancho mínimo */
  padding: 0.5rem;                 /* Relleno interno */
  border: none;                    /* Sin borde */
  border-radius: var(--border-radius); /* Bordes redondeados */
  background: var(--primary);      /* Fondo con color primario */
  color: #000;                     /* Texto en negro */
  font-size: 0.9rem;               /* Tamaño de fuente pequeño */
  cursor: pointer;                 /* Cursor tipo puntero */
  transition: background 0.2s;     /* Transición suave de fondo */
  margin: 0 auto;                  /* Centrar botón */
  display: block;                  /* Mostrar como bloque centrado */
}
.app-card button:hover {
  background: #e6b800;             /* Color de fondo al pasar el mouse */
}

/* 5. Feedback de mensajes: oculto por defecto, estilos de error/éxito */
.feedback {
  display: none;                   /* No visible hasta activarse JS */
  padding: 0.75rem 1rem;           /* Relleno para el mensaje */
  border-radius: var(--border-radius); /* Bordes redondeados */
  margin-bottom: 1rem;             /* Espacio debajo del mensaje */
  font-size: 0.95rem;              /* Tamaño de fuente */
}
.feedback.error {
  background: rgba(255, 56, 96, 0.1); /* Fondo rojo claro */
  color: var(--error);             /* Texto rojo */
}
.feedback.success {
  background: rgba(35, 209, 96, 0.1); /* Fondo verde claro */
  color: var(--success);           /* Texto verde */
}

/* 6. Espaciado interno reducido entre elementos */
.app-card > *:not(:last-child) {
  margin-bottom: 0.75rem;          /* Margen inferior reducido */
}

/* Selector de idioma: posición absoluta dentro de la tarjeta */
.app-card .lang-selector {
  position: absolute;         /* Posición absoluta dentro de la tarjeta */
  top: -2.5rem;               /* Eleva por encima de la tarjeta */
  right: 1rem;                /* Separa del borde derecho */
}

/* Checkbox + label: centrados y espacio ajustado */
.checkbox-wrapper {
  display: flex;                   /* Flex para alinear elementos */
  align-items: center;             /* Centrado vertical */
  justify-content: center;         /* Centrado horizontal */
  gap: 0.5rem;                     /* Espacio entre checkbox y texto */
  margin-bottom: 0.5rem;           /* Espacio debajo del bloque */
}
.checkbox-wrapper input[type="checkbox"] {
  width: 16px;                     /* Tamaño checkbox */
  height: 16px;                    /* Tamaño checkbox */
}
.checkbox-wrapper label {
  margin-top: -0.25rem;            /* Ajuste fino vertical */
  cursor: pointer;                 /* Cursor tipo puntero */
}

/* Icono “ojo”: centrado dentro del campo de contraseña */
.password-wrapper {
  position: relative;              /* Para posicionar el icono */
}
.password-wrapper input.campo-input {
  padding-right: 2.5rem;           /* Espacio interno para el icono */
}
.password-wrapper .toggle-password {
  position: absolute;              /* Posición exacta dentro del parent */
  top: 50%;                        /* Centrado vertical con translate */
  right: 1rem;                     /* Alineado a la derecha del input */
  transform: translateY(-50%);     /* Ajuste fino de centrado vertical */
  cursor: pointer;                 /* Cursor tipo puntero */
  display: flex;                   /* Flex para centrar svg */
  align-items: center;             /* Centrado vertical svg */
}
.password-wrapper .toggle-password svg {
  vertical-align: middle;          /* Evitar desplazamientos del svg */
}

/* Enlaces: color primario y hover */
.app-card a.link,
.app-card a.link-inline {
  color: var(--primary);           /* Color primario */
  text-decoration: none;           /* Sin subrayado */
}
.app-card a.link:hover,
.app-card a.link-inline:hover {
  text-decoration: underline;      /* Subrayado en hover */
}

/* Texto “no tienes cuenta”: estilo del pie de página */
.app-card .texto-login {
  font-size: 0.9rem;               /* Fuente más pequeña */
  margin-top: 1rem;                /* Espacio superior */
}
.app-card .texto-login a {
  font-weight: 500;                /* Negrita media para el enlace */
}
.feedback.error {
  display: block;
  background: rgba(255,56,96,0.1);
  color: var(--error);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}