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

/* 2. Reset y base */
* {
  box-sizing: border-box;          /* Incluye padding en ancho/alto */
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;                 /* Tamaño base de texto */
  background: var(--bg-app);       /* Fondo de página */
  color: var(--fg-app);            /* Color de texto */
}
body {
  font-family: 'Segoe UI', sans-serif;
  min-height: 100vh;               /* Vista completa */
  display: flex;                   /* Centrado global */
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* 3. Contenedor “card”: estilo de la tarjeta */
.app-card {
  background: var(--card-bg);
  padding: 1.5rem;                 /* Relleno interno */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 280px;                /* Ancho máximo */
  position: relative;              /* Para elementos absolutos */
}
.app-card h2 {
  margin-bottom: 1rem;             /* Separación del título */
  text-align: center;
  font-weight: 600;
}

/* 4. Inputs y botones */
.app-card input {
  width: 100%;
  padding: 0.5rem 0.75rem;         /* Más compacto */
  margin-bottom: 0.5rem;
  border: none;
  border-radius: var(--border-radius);
  background: #2a2a2a;
  color: var(--fg-app);
  font-size: 0.9rem;
}
.app-card input::placeholder {
  color: #999;
}
.app-card button {
  width: auto;                     /* Ajuste automático */
  min-width: 200px;                /* Ancho mínimo */
  padding: 0.5rem;
  border: none;
  border-radius: var(--border-radius);
  background: var(--primary);
  color: #000;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0 auto;                  /* Centrado horizontal */
  display: block;
}
.app-card button:hover {
  background: #e6b800;
}

/* 5. Feedback de mensajes */
.feedback {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.feedback.error {
  background: rgba(255, 56, 96, 0.1);
  color: var(--error);
}
.feedback.success {
  background: rgba(35, 209, 96, 0.1);
  color: var(--success);
}

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

/* Selector de idioma 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 (si los necesitas) */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.checkbox-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
.checkbox-wrapper label {
  margin-top: -0.25rem;
  cursor: pointer;
}

/* Icono “ojo” dentro del campo de contraseña */
.password-wrapper {
  position: relative;
}
.password-wrapper input.campo-input {
  padding-right: 2.5rem;
}
.password-wrapper .toggle-password {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.password-wrapper .toggle-password svg {
  vertical-align: middle;
}

/* Enlaces */
.app-card a.link,
.app-card a.link-inline {
  color: var(--primary);
  text-decoration: none;
}
.app-card a.link:hover,
.app-card a.link-inline:hover {
  text-decoration: underline;
}