/* ===== Reset + Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial;
  line-height: 1.5;
  color: #111827;            /* slate-900 */
  background: #f8fafc;       /* slate-50 */
}
@media (prefers-color-scheme: dark) {
  body { color: #e5e7eb; background: #0b1220; }
}
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
:root { --step: clamp(14px, 0.95rem + 0.15vw, 18px); }
body, input, button, select, textarea { font-size: var(--step); }

/* ===== Shell ===== */
.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card {
  width: 100%; max-width: 440px; background: #fff; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.1); padding: 24px;
}
@media (prefers-color-scheme: dark) {
  .auth-card { background: #0f172a; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
}
.auth-head { text-align: center; margin-bottom: 16px; }
.auth-title { margin: 0 0 4px; font-weight: 800; font-size: clamp(20px, 1.2rem + .4vw, 28px); }
.auth-subtle { margin: 0; color: #6b7280; }
@media (prefers-color-scheme: dark) { .auth-subtle { color: #9ca3af; } }

/* ===== Form ===== */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
label { font-weight: 600; }
.input {
  width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: #fff; color: inherit;
}
.input::placeholder { color: #9ca3af; }
.input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
@media (prefers-color-scheme: dark) {
  .input { background:#0b1020; border-color:#1f2937; }
  .input:focus { border-color:#60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
}

/* Mostrar/Ocultar pass */
.input-row { position: relative; display: grid; }
.toggle-pass {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; color: #374151;
}
.toggle-pass:hover { background: rgba(55,65,81,.08); }
@media (prefers-color-scheme: dark) {
  .toggle-pass { color: #d1d5db; } .toggle-pass:hover { background: rgba(255,255,255,.06); }
}

/* Botones */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; width:100%; border-radius:12px; border:0; cursor:pointer; font-weight:700; }
.btn-primary { background:#2563eb; color:#fff; } .btn-primary:hover { filter:brightness(1.05); }
.btn-ghost { background:transparent; color:#2563eb; } .btn-ghost:hover { background:rgba(37,99,235,.10); }
.btn-danger { background:#dc2626; color:#fff; } .btn-danger:hover { filter:brightness(1.05); }

/* Helper / enlaces */
.helper { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.a { color:#2563eb; text-decoration:none; font-weight:600; }
.a:hover { text-decoration:underline; }

/* Mensajes */
.note { padding:10px 12px; border-radius:10px; font-size:.95em; }
.note-error { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.note-ok { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
@media (prefers-color-scheme: dark) {
  .note-error { background:rgba(239,68,68,.15); color:#fecaca; border-color:#fca5a5; }
  .note-ok { background:rgba(34,197,94,.15); color:#bbf7d0; border-color:#86efac; }
}

/* Listas (clist/info) */
.list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.item {
  padding:14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; display:grid; gap:4px;
}
.item h3 { margin:0; font-size:1.05em; }
.item p { margin:0; color:#6b7280; }
@media (prefers-color-scheme: dark) {
  .item { background:#0b1020; border-color:#1f2937; }
  .item p { color:#9ca3af; }
}

/* Nav superior opcional en clist/info */
.topbar { width:100%; max-width:900px; margin:0 auto 12px; padding:0 8px; display:flex; gap:8px; }
.topbar .spacer { flex:1; }


/* ====== Ajustes responsivos para LOGIN ====== */

/* Evita scroll lateral en pantallas pequeñas */
html, body { overflow-x: hidden; }

/* Logos / imágenes fluidas */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* En tablets y móviles, centramos y damos padding a la tarjeta */
@media (max-width: 992px) {
  .container,
  .row,
  .card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .row.g-0 { gap: 0; }
}

/* Inputs y botones ocupan el 100% del ancho en móvil */
@media (max-width: 640px) {
  form input.form-control,
  form select.form-select,
  form textarea.form-control {
    width: 100%;
  }

  button.btn-tork,
  .btn.btn-tork,
  .btn-user.w-100 {
    width: 100%;
  }
}

/* Si usas .row / .col de Bootstrap, en móviles se apilan */
@media (max-width: 640px) {
  .row { display: block; }
  .col, [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }
}

/* En pantallas muy chicas, reducimos padding de la tarjeta */
@media (max-width: 380px) {
  .card.shadow-lg.o-hidden.border-0.my-5,
  .card {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* ==== Ajuste para inputs en pantallas pequeñas ==== */
@media (max-width: 576px) {
  input.form-control-user,
  .form-control {
    font-size: 1.1rem;       /* texto un poco más grande */
    padding: 0.75rem 1rem;   /* más espacio interno */
    border-radius: 0.5rem;   /* esquinas un poco más redondeadas */
  }

  /* también hacemos crecer el botón */
  .btn-tork, .btn-user {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
  }
}