/* Pantalla de acceso al entorno de demostración — RIVMAN */

:root {
  --naranja: #F26A1B;
  --naranja-oscuro: #D4550C;
  --carbon: #1A1D21;
  --carbon-claro: #24282E;
  --borde: #343A42;
  --texto: #E8EAED;
  --texto-tenue: #9BA3AD;
  --error: #FF6B5A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--carbon);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(242,106,27,.14), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(242,106,27,.08), transparent 45%);
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.tarjeta-acceso {
  width: 100%;
  max-width: 460px;
  background: var(--carbon-claro);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 36px 34px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* --- Marca --- */
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.marca__logo { flex-shrink: 0; display: flex; }

.marca__texto { display: flex; flex-direction: column; }

.marca__nombre {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.1;
}

.marca__lema {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 3px;
}

/* --- Aviso --- */
.aviso {
  background: rgba(242,106,27,.07);
  border: 1px solid rgba(242,106,27,.28);
  border-left: 3px solid var(--naranja);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13.5px;
  margin-bottom: 26px;
}

.aviso p { margin: 0 0 8px; }

.aviso__titulo {
  font-weight: 700;
  font-size: 14px;
  color: var(--naranja);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.aviso__lista {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.aviso__lista li { margin-bottom: 4px; }

/* --- Formulario --- */
.etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 8px;
}

.campo-pin {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  letter-spacing: 3px;
  color: var(--texto);
  background: #15181C;
  border: 1px solid var(--borde);
  border-radius: 9px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.campo-pin::placeholder {
  color: #5C646E;
  letter-spacing: .5px;
  font-size: 14px;
}

.campo-pin:focus {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(242,106,27,.18);
}

.mensaje-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(255,107,90,.1);
  border: 1px solid rgba(255,107,90,.3);
  border-radius: 8px;
  color: var(--error);
  font-size: 13px;
}

.boton {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  background: var(--naranja);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, transform .06s;
}

.boton:hover:not(:disabled) { background: var(--naranja-oscuro); }
.boton:active:not(:disabled) { transform: translateY(1px); }

.boton:disabled {
  background: #3A4048;
  color: var(--texto-tenue);
  cursor: not-allowed;
}

.nota-pie {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--texto-tenue);
  text-align: center;
  line-height: 1.5;
}

/* --- Pie --- */
.pie-acceso {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

.pie-acceso:empty { display: none; }

@media (max-width: 480px) {
  .tarjeta-acceso { padding: 28px 22px 22px; }
  .marca__nombre { font-size: 22px; }
}