/* 1. Variables de tema */
:root {
  --bg-app: #121212;          /* Fondo principal de la app */
  --fg-app: #f0f0f0;          /* Texto base */
  --card-bg: #1e1e1e;         /* Fondo de las tarjetas */
  --primary: #ffcc00;         /* Color primario (botón, enlaces) */
  --primary-hover: #e6b800;   /* Hover del botón primario */
  --border-radius: 12px;      /* Radio de bordes global */
  --shadow: 0 4px 12px rgba(0,0,0,0.5); /* Sombra de tarjetas */
  --input-bg: #2a2a2a;        /* Fondo de inputs */
  --placeholder: #999;        /* Color de placeholder */
}

/* 2. Reset y base */
* {
  box-sizing: border-box;     /* Incluye padding/border en width */
  margin: 0;                  /* Elimina márgenes por defecto */
  padding: 0;                 /* Elimina padding por defecto */
}
html {
  font-size: 16px;            /* Tamaño base de la fuente */
  background: var(--bg-app);  /* Fondo general */
  color: var(--fg-app);       /* Color de texto general */
}
body {
  font-family: 'Segoe UI', sans-serif; /* Fuente principal */
  min-height: 100vh;          /* Ocupa al menos la altura de la ventana */
  display: flex;              /* Centrado vertical/horizontal */
  align-items: center;
  justify-content: center;
  padding: 1rem;              /* Espaciado interno */
}

/* 3. Contenedor tipo “card” */
.app-card {
  background: var(--card-bg); /* Fondo de la tarjeta */
  padding: 2rem;              /* Espaciado interno */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  width: 100%;                /* Ocupa todo el ancho disponible */
  max-width: 360px;           /* Ancho máximo en escritorio */
  position: relative;         /* Para posicionar el selector */
  text-align: center;         /* Centra texto por defecto */
}
.app-card h2 {
  margin-bottom: 1rem;        /* Separación inferior del título */
  font-weight: 600;           /* Negrita ligera */
  font-size: 1.5rem;          /* Tamaño de título */
}

/* 4. Selector de idioma */
.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 */
}


/* 5. Campo de email */
.campo {
  margin-bottom: 1rem;        /* Separación entre campos */
}
.campo-input {
  width: 100%;                /* Ocupa todo el ancho del contenedor */
  padding: 0.75rem 1rem;      /* Relleno interno */
  border: none;
  border-radius: var(--border-radius);
  background: var(--input-bg);
  color: var(--fg-app);
  font-size: 1rem;
}
.campo-input::placeholder {
  color: var(--placeholder);  /* Color de placeholder */
}

/* 6. Botón primario */
.btn-primario {
  width: 100%;                /* Ocupa todo el ancho */
  padding: 0.75rem;           /* Altura de 48px aprox. */
  background: var(--primary);
  color: #000;                /* Texto negro para contraste */
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primario:hover {
  background: var(--primary-hover);
}

/* 7. Bloque para botón */
.btn-block {
  display: block;             /* Asegura que sea bloque */
}

/* 8. Mensajes de feedback */
.feedback {
  display: none;              /* Oculto por defecto */
  padding: 0.75rem 1rem;      /* Espaciado interno */
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.feedback.success {
  background: rgba(35, 209, 96, 0.1);
  color: #23d160;
}
.feedback.error {
  background: rgba(255, 56, 96, 0.1);
  color: #ff3860;
}

/* 9. Texto de pie y enlaces */
.texto-login {
  margin-top: 1rem;           /* Separación superior */
  font-size: 0.9rem;
}
.texto-login a,
.app-card a.link-inline {
  color: var(--primary);
  text-decoration: none;
}
.texto-login a:hover,
.app-card a.link-inline:hover {
  text-decoration: underline;
}

/* 10. Media Queries (en responsive.css) */
/*  - max-width 600px: html {font-size:14px;} .app-card {padding:1.5rem;} */
/*  - min-width 768px: .app-card {max-width:480px;} */
/*  - min-width 1024px: .app-card {max-width:600px;} */