/* Tokens de la dirección visual aprobada.
   diseno/direccion-aprobada/README.md */
:root {
  --fondo-oscuro:  #000E26;
  --azul-corp:     #001E50;
  --accion:        #00B9F2;
  --contenido:     #FFFFFF;
  --neutro:        #F3F6F8;
  --texto:         #0B1933;
  --reacondicionado: #008FA8;
  --recepcion:     #A86B12;
  --urgencia:      #D92532;
  --radio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo-oscuro);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
}

/* El logotipo se referencia SOLO aquí: el día que llegue el SVG, se cambia esta
   línea y nada más.

   La marca oficial es un rectángulo NEGRO con el texto en blanco, y la cabecera
   es azul muy oscuro: puesta directamente encima se convierte en un borrón. Se
   monta sobre una placa blanca con espacio libre alrededor —el README de marca
   pide como mínimo la altura de las mayúsculas— en vez de recolorearla. La marca
   no se toca; lo que cambia es la superficie sobre la que se apoya. */
.placa-marca {
  background: var(--contenido);
  padding: 14px 18px;
  border-radius: var(--radio);
  display: inline-block;
}
.marca {
  width: 306px;          /* la imagen va a x2 para pantallas Retina */
  max-width: 70vw;
  height: auto;
  display: block;
}
.descriptor {
  color: var(--accion);
  letter-spacing: .42em;
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 0 2px;
}

.centro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 28px;
}

.tarjeta {
  background: var(--contenido);
  border-radius: var(--radio);
  padding: 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: #5b6b82; font-size: 14px; margin: 0 0 22px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=email], input[type=password] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfd8e3;
  border-radius: var(--radio);
  font-size: 15px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accion);
  outline-offset: 2px;
}

button {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  border: 0;
  border-radius: var(--radio);
  background: var(--accion);
  color: #002034;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: progress; }

.enlace {
  display: inline-block;
  margin-top: 16px;
  color: var(--azul-corp);
  font-size: 14px;
}

/* Ningún estado depende solo del color: siempre lleva texto e icono. */
.aviso {
  margin-top: 18px;
  padding: 11px 13px;
  border-radius: var(--radio);
  font-size: 14px;
  border-left: 4px solid;
}
.aviso.error { background: #fdeaec; border-color: var(--urgencia); color: #7d1119; }
.aviso.ok    { background: #e6f7fb; border-color: var(--reacondicionado); color: #06525f; }

.condiciones {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
}
.condiciones input { margin-top: 3px; }

.pie { color: #93a4bb; font-size: 12px; text-align: center; }