/*
	CSS
form_bootstrap.css
*/
    :root{
      --bg: #0b1324;         /* fondo degradado (tono oscuro sutil) */
      --card: #ffffff;       /* tarjeta */
      --text: #1f2937;       /* texto */
      --muted: #6b7280;      /* texto secundario */
      --primary: #2563eb;    /* botones/enlaces */
      --primary-700:#1e4fc3; /* hover */
      --border:#e5e7eb;      /* bordes */
      --ring: rgba(37,99,235,.35);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--text);
      background: radial-gradient(1200px 800px at 10% -10%, #1b2a52 0%, transparent 60%),
                  radial-gradient(1200px 800px at 110% 110%, #102045 0%, transparent 50%),
                  var(--bg);
      display:grid; place-items:center; padding:16px;
    }
	/* con el #px se controla el ancho del formulario */
    .wrap{
      width:min(100%, 800px);
    }
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow: 0 20px 40px rgba(0,0,0,.15);
      overflow:hidden;
    }
    .card-header{
      padding:22px 22px 10px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      color:var(--primary); font-weight:700; letter-spacing:.3px;
    }
    .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--primary)}
    .card-body{ padding:22px; }
    .title{ margin:.25rem 0 .5rem; font-size:1.25rem; font-weight:700; }
    .subtitle{ margin:0 0 1rem; color:var(--muted); font-size:.95rem; }

    .field{ margin-bottom:14px; }
    label{ display:block; font-weight:600; margin-bottom:6px; }
    .control{
      position:relative;
    }
    input[type="text"], input[type="password"]{
      width:100%; padding:12px 14px;
      border:1px solid var(--border); border-radius:10px;
      font-size:16px; background:#fff;
      transition: box-shadow .15s, border-color .15s, transform .02s;
    }
    input:focus{
      outline: none; border-color:var(--primary);
      box-shadow: 0 0 0 4px var(--ring);
    }
    .toggle-pass{
      position:absolute; right:10px; top:50%; transform:translateY(-50%);
      border:none; background:transparent; color:var(--muted); cursor:pointer; padding:6px;
      font-size:.9rem;
    }
    .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 4px; }
    .row .remember{ display:flex; align-items:center; gap:8px; color:#374151; }
    .actions{ margin-top:10px; display:grid; gap:10px; }
    .btn{
      border:none; cursor:pointer; padding:12px 14px; border-radius:10px;
      font-weight:700; letter-spacing:.2px; font-size:16px;
    }
    .btn-primary{ background:var(--primary); color:#fff; }
    .btn-primary:hover{ background:var(--primary-700); }
    .help{ text-align:center; font-size:.92rem; color:var(--muted); }
    .help a{ color:var(--primary); text-decoration:none; }
    .help a:hover{ text-decoration:underline; }

    /* responsive tweaks */
    @media (max-width:420px){
      .card{ border-radius:12px; }
      .card-header{ padding:18px 18px 8px; }
      .card-body{ padding:18px; }
    }
    /* modo oscuro opcional según sistema */
    @media (prefers-color-scheme: dark){
      :root{
        --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --border:#1f2a44;
      }
      input[type="text"], input[type="password"]{ background:#0b1324; color:var(--text); border-color:#223154; }
      body{ background: radial-gradient(1100px 700px at 5% -15%, #1d2b53 0%, transparent 60%), radial-gradient(1000px 700px at 120% 120%, #0c1b3f 0%, transparent 50%), #030712; }
    }
    .flash{ background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; padding:10px 12px; border-radius:8px; margin-bottom:12px; }