:root{
  /* Corporate Navy (claro) */
  --bg:#f7f7fb; 
  --card:#ffffff; 
  --border:#d1d5db;

  --text:#0f172a; 
  --muted:#475569;

  --input-bg:#ffffff; 
  --input-bd:#d1d5db;

  --primary:#2b3a55; 
  --primary-600:#1f2a44; 
  --primary-700:#192338;

  --focus-ring:0 0 0 3px rgba(43,58,85,.22);
  --shadow:0 8px 18px rgba(17,24,39,.08);

  --radius:12px; 
  --radius-sm:10px;
}

*{ box-sizing:border-box }

html,body{
  height:100%;
  background: var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* Enlaces: negros y sin subrayado */
a{ color:#111827; text-decoration:none }
a:hover{ color:var(--primary-600) }

.wrap{ min-height:100%; display:grid; place-items:center; padding:24px }

/* Tarjeta clara con sombra suave */
.card{
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.brand{ display:grid; place-items:center; padding:26px 26px 0 }
.brand-logo{ width:150px; height:auto; display:block; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(31,42,68,.12)) }

.tabs{ display:flex; gap:8px; padding:14px 18px 0; justify-content:center }
.tab{
  padding:10px 14px; font-weight:700; font-size:14px;
  border:1px solid var(--border);
  color:#111827; background:#fff;
  border-radius:var(--radius-sm);
  transition:border-color .2s, background .2s, color .2s, box-shadow .2s;
  cursor:pointer; user-select:none;
}
.tab:hover{ border-color:#cbd5e1; background:#f3f4f6 }
.tab[aria-selected="true"]{
  background:linear-gradient(180deg, var(--primary), var(--primary-600));
  border-color:transparent; color:#fff; box-shadow:var(--focus-ring); cursor:default
}

.body{ padding:18px 26px 26px }

/* Inputs apilados, un solo tamaño, más contraste */
.field{ margin-top:14px }
.label{
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 8px; font-size:13px; color:var(--muted)
}
.input{
  width:100%;
  padding:12px 14px;
  background:var(--input-bg);
  border:1px solid var(--input-bd);
  color:var(--text);
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  font-size:14px;
}
.input::placeholder{ color:#6b7280 }
.input:focus{ border-color:var(--primary); box-shadow:var(--focus-ring) }
.input-wrap{ position:relative; display:flex; align-items:center }
.toggle-pass{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#6b7280; cursor:pointer; padding:8px; border-radius:8px
}
.toggle-pass:focus{ box-shadow:var(--focus-ring) }

/* Recordarme (switch claro, alineado) */
.row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px }
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; color:var(--muted); font-size:13px; position:relative }
.switch input{ position:absolute; opacity:0; pointer-events:none }
.track{
  width:48px; height:26px;
  background:#e5e7eb; border:1px solid var(--border);
  border-radius:999px; position:relative;
  transition:background .2s, border-color .2s
}
.thumb{
  position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:#6b7280;
  transition:left .18s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.15)
}
.switch input:checked + .track{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  border-color:transparent
}
.switch input:checked + .track .thumb{ left:24px; background:#fff }

/* Botón principal */
.btn{
  width:100%; margin-top:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px;
  font-weight:700; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--primary), var(--primary-600));
  color:#fff; border:0; border-radius:var(--radius-sm);
  cursor:pointer; transition:transform .04s, filter .15s
}
.btn:hover{ filter:brightness(1.03) }
.btn:active{ transform:translateY(1px); background:var(--primary-700) }
.btn:focus{ box-shadow:var(--focus-ring) }

/* Botón Google – claro coherente */
.btn-google{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 14px; margin-top:12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff; color:#0f172a;
  transition:border-color .2s, background .2s, transform .04s
}
.btn-google:hover{ background:#f3f4f6; border-color:#cbd5e1 }
.btn-google:active{ transform:translateY(1px) }
.g-icon{ width:18px; height:18px; display:inline-block }

/* Separador y pie */
.divider{ display:flex; align-items:center; gap:12px; margin:18px 0 4px; color:#374151; font-size:12px }
.divider::before,.divider::after{ content:""; height:1px; flex:1; background:var(--border) }

.foot{
  margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px
}
.copy{ color:var(--muted) }

/* Enlace “Olvidé mi contraseña” negro sin subrayado */
.forgot{
  padding:8px 12px; border-radius:8px;
  border:1px dashed var(--border);
  color:#111827;
  transition:border-color .2s, background .2s, color .2s
}
.forgot:hover{ border-color:var(--primary); background:#f3f4f6; color:#0f172a }

@media (max-width:420px){
  .body{ padding:18px 22px 22px }
  .brand{ padding:22px 22px 0 }
  .brand-logo{ width:140px }
  .foot{ flex-direction:column; align-items:flex-start }
}

.panel{ display:none }
.panel.active{ display:block }