:root{
      --bg:#f3f4f6;
      --card:#ffffff;
      --text:#2d3748;
      --muted:#6b7280;
      --border:#e5e7eb;
      --green:#28a745;
      --green-600:#218838;
      --orange:#ff7f2a;
      --radius:14px;
      --info:#3abef9;
      --info-600:#26a9e0;
      --ring:#b3eaff;
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:Inter, system-ui, sans-serif;}
    
    .wrap{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
    }
    .card{
      width:100%;
      max-width:680px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:0 10px 24px rgba(17,24,39,.06);
      padding:22px;
    }
    .logo{
      display:flex;
      justify-content:center;
      margin-bottom:20px;
    }
    .logo img{
      max-width:150px; /* 👈 tamaño mediano */
      height:auto;
    }
    .title{
      font-weight:600;
      text-align:center;
      margin-bottom:6px;
    }
    .msg{color:var(--muted);font-size:.95rem;text-align:center;margin-bottom:20px}
    
    .grid{display:grid;gap:16px}
    @media (min-width:700px){.grid{grid-template-columns:1fr 1fr}}
    label{font-size:.95rem;font-weight:600;margin-bottom:6px;display:block}
    .field{
      display:flex;align-items:center;gap:.6rem;
      background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;
      transition:border-color .2s, box-shadow .2s;
    }
    .field:focus-within{border-color:#b4b8bf;box-shadow:0 0 0 3px rgba(52,64,84,.08)}
    .field input{border:0;outline:0;background:transparent;width:100%;font-size:1rem;color:var(--text)}
    .help{color:var(--muted);font-size:.88rem;margin-top:6px}
    .or{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--muted)}
    .or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
    .actions{margin-top:16px;display:flex;gap:12px;align-items:center;justify-content:center}
    .ico{flex:0 0 22px;color:var(--orange)}
    .ico svg{display:block}
    
   .btn{
      appearance:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      cursor:pointer;
      border:1px solid transparent;
      border-radius:var(--radius);
      font:700 1rem/1.1 Inter, system-ui, sans-serif;
      padding:12px 22px;
      transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .03s ease;
      user-select:none;
      text-decoration:none;
    }

    /* Tamaños */
    .btn--sm{ padding:8px 14px; font-size:.9rem; }
    .btn--lg{ padding:14px 24px; font-size:1.05rem; }

    /* Estados comunes */
    .btn:active{ transform:translateY(1px); }
    .btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
    .btn:disabled,
    .btn[aria-disabled="true"]{
      opacity:.6;
      cursor:not-allowed;
      box-shadow:none;
    }

    /* Variantes */
    .btn--primary{
      background:var(--green);
      color:#fff;
      border-color:var(--green);
      box-shadow:0 6px 16px rgba(40,167,69,.25);
    }
    .btn--primary:hover{ background:var(--green-600); }
    .btn--primary:disabled{ background:#cfead8; border-color:#cfead8; }

    .btn--info{
      background:var(--info);
      color:#fff;
      border-color:#1ea8e6;
      box-shadow:0 6px 16px rgba(58,190,249,.25);
    }
    .btn--info:hover{ background:var(--info-600); }
    .btn--info:disabled{ background:#d7effd; border-color:#c9e9fb; }


    .btn--secondary{
      background:gray;
      color:#fff;
      border-color:var(--border);
      box-shadow:0 6px 16px rgba(58,190,249,.25);
    }
    .btn--secondary:hover{ background:rgb(104, 104, 104); }
    .btn--secondary:disabled{ background:#d7effd; border-color:#c9e9fb; }
    /* Opcional: botón “fantasma” por si lo necesitas */
    .btn--ghost{
      background:transparent;
      color:var(--text);
      border-color:var(--border);
    }
    .btn--ghost:hover{ background:#f7f7f9; }