/* ===========================================================================
   Red de Contactos — estilo base (Fase 0)
   Oscuro por defecto: el grafo de la Fase 1 se lee mucho mejor sobre fondo
   oscuro, y los colores de ambito destacan sin tener que saturarlos.
   =========================================================================== */
:root{
  --fondo:#12151a;
  --panel:#1b1f27;
  --borde:#2a3038;
  --texto:#e8ecf1;
  --suave:#96a0ad;
  --acento:#4FC3F7;
  --error:#ef5350;
  --radio:14px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--fuente);
  -webkit-font-smoothing:antialiased;
}

.centro{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.tarjeta{
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:34px 30px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

.marca{text-align:center;margin-bottom:26px;color:var(--acento)}
.marca h1{margin:12px 0 2px;font-size:26px;letter-spacing:.02em;color:var(--texto)}
.tarjeta h1{margin:0 0 6px;font-size:22px}
.sub{margin:0;color:var(--suave);font-size:14px}

label{display:block;font-size:13px;color:var(--suave);margin-bottom:7px}

input[type=password]{
  width:100%;
  padding:13px 14px;
  font-size:16px;              /* 16px evita que iOS haga zoom al enfocar */
  color:var(--texto);
  background:#0f1216;
  border:1px solid var(--borde);
  border-radius:10px;
  outline:none;
  transition:border-color .15s;
}
input[type=password]:focus{border-color:var(--acento)}

button{
  width:100%;
  margin-top:16px;
  padding:13px;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  color:#08222c;
  background:var(--acento);
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition:filter .15s;
}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}
button.secundario{
  background:transparent;
  color:var(--suave);
  border:1px solid var(--borde);
}

.aviso{
  margin:14px 0 0;
  padding:10px 12px;
  font-size:13.5px;
  color:var(--error);
  background:rgba(239,83,80,.09);
  border:1px solid rgba(239,83,80,.28);
  border-radius:9px;
}

.resumen{list-style:none;margin:20px 0 0;padding:0}
.resumen li{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  font-size:14px;
  border-bottom:1px solid var(--borde);
}
.resumen li:last-child{border-bottom:0}
.resumen b{color:var(--acento);font-variant-numeric:tabular-nums}

.nota{margin:20px 0 0;font-size:13px;color:var(--suave);line-height:1.5}