* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rojo: #ed0000;
  --negro: #090909;
  --gris: #4d4d4d;
  --gris-claro: #e5e5e5;
}

body.app-body {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background: var(--negro);
  color: #2b2b2b;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.app-caja {
  background: #fff;
  width: 100%;
  max-width: 380px;
  padding: 44px 36px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.app-caja--ancha { max-width: 480px; }

.app-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 18px;
}

.app-caja h1 {
  font-size: 1.5em;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.app-subtitulo {
  color: var(--gris);
  font-size: 0.85em;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.app-caja form {
  text-align: left;
}

.app-caja label {
  display: block;
  font-weight: 600;
  font-size: 0.85em;
  margin: 16px 0 6px;
}

.app-caja input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
}

.app-caja button,
.app-boton {
  display: inline-block;
  width: 100%;
  margin-top: 26px;
  padding: 13px;
  background: var(--rojo);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.app-caja button:hover,
.app-boton:hover { background: #b50000; }

.app-error {
  background: #fdeaea;
  color: var(--rojo);
  border-left: 4px solid var(--rojo);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9em;
  margin-bottom: 10px;
  text-align: left;
}

.app-exito {
  background: #e6f7ea;
  color: #1a7a34;
  border-left: 4px solid #1a7a34;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9em;
  text-align: left;
}

.app-nota {
  color: var(--gris);
  font-size: 0.9em;
  line-height: 1.5;
  margin-bottom: 10px;
}