/* httpdocs/public/assets/css/login.css — mismo diseño del login de descubre (Golden Para todos) */
  :root{
    --bg-0: #07101c;
    --bg-1: #0b1828;
    --card: #0f1d2f;
    --card-2: #0c1828;
    --line: rgba(255,255,255,0.08);
    --line-2: rgba(255,255,255,0.12);
    --gold: #F5C842;
    --gold-2: #ffd966;
    --gold-dk: #e9b52c;
    --violet: #7b6cf6;
    --white: #f2f5fa;
    --muted: #93a1b5;
    --muted-2: #5f6d82;
    --error: #ff7b7b;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{ height:100%; }
  body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(ellipse at 15% 0%, rgba(245,200,66,0.07) 0%, transparent 45%),
      radial-gradient(ellipse at 50% 50%, #0f1f33 0%, var(--bg-1) 45%, var(--bg-0) 100%);
    background-color:var(--bg-0);
    background-attachment:fixed;
    font-family:'DM Sans', sans-serif;
    color:var(--white);
    overflow-x:hidden;
    position:relative;
  }

  /* ── Fondo: grilla tenue + anillo + constelación ── */
  .bg-grid{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  }
  .bg-ring{
    position:fixed; z-index:0; pointer-events:none;
    top:50%; left:50%;
    width:min(1000px, 140vw); aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow: inset 0 0 120px rgba(255,255,255,0.015);
  }
  .bg-ring::after{
    content:""; position:absolute; inset:18%;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.035);
  }
  #constelacion{ position:fixed; inset:0; z-index:0; pointer-events:none; }

  /* ── Tarjeta ── */
  .wrap{
    position:relative; z-index:2;
    width:100%; max-width:380px;
    padding:40px 16px;
  }
  .card{
    background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border:1px solid rgba(245,200,66,0.16);
    border-radius:18px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
    overflow:hidden;
  }

  .card-head{
    position:relative;
    display:flex; flex-direction:column; align-items:center;
    padding:30px 24px 22px;
    border-bottom:1px solid var(--line);
    text-align:center;
  }
  .card-head::before{
    content:""; position:absolute; top:-60px; left:50%;
    width:220px; height:180px; transform:translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(245,200,66,0.16) 0%, transparent 70%);
    pointer-events:none;
  }
  .logo{
    position:relative;
    display:block;
    width:150px; height:auto;
    filter: drop-shadow(0 0 1px rgba(160,150,255,0.55)) drop-shadow(0 0 14px rgba(123,108,246,0.45)) drop-shadow(0 0 22px rgba(245,200,66,0.15));
  }
  .badge{
    position:relative;
    display:inline-flex; align-items:center; gap:8px;
    margin-top:16px;
    padding:6px 13px;
    border:1px solid var(--line-2);
    border-radius:999px;
    background: rgba(255,255,255,0.035);
    font-family:'Sora', sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:#dfe5ee;
  }
  .badge i{
    width:6px; height:6px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 8px var(--gold);
  }

  .card-body{ padding:26px 24px 26px; }

  form{ display:none; flex-direction:column; gap:16px; }
  form.active{ display:flex; }

  .panel-title{
    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:20px;
    text-align:center;
    color:#fff;
  }
  .panel-sub{
    font-size:12.5px;
    line-height:1.55;
    color:var(--muted);
    text-align:center;
    margin-top:-8px;
    margin-bottom:4px;
  }

  .field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
  .field label{
    font-family:'Sora', sans-serif;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.9px;
    text-transform:uppercase;
    color:#e3e8ef;
  }
  .input{ position:relative; display:flex; align-items:center; }
  .input > svg{
    position:absolute; left:13px;
    width:15px; height:15px;
    color:var(--muted-2);
    pointer-events:none;
    transition: color .2s ease;
  }
  .input input{
    width:100%; min-width:0;
    height:42px;
    padding:0 14px 0 38px;
    background: rgba(255,255,255,0.035);
    border:1px solid var(--line-2);
    border-radius:10px;
    color:var(--white);
    font-family:'DM Sans', sans-serif;
    font-size:14px;
    outline:none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .input.no-ico input{ padding-left:14px; }
  .input.has-eye input{ padding-right:42px; }
  .input input::placeholder{ color:var(--muted-2); }
  .input input:focus{
    border-color: rgba(245,200,66,0.7);
    background: rgba(245,200,66,0.04);
    box-shadow: 0 0 0 3px rgba(245,200,66,0.12);
  }
  .input:focus-within > svg{ color:var(--gold); }
  .eye{
    position:absolute; right:6px;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:8px;
    color:var(--muted); cursor:pointer;
  }
  .eye svg{ width:16px; height:16px; }
  .eye:hover{ color:var(--white); background:rgba(255,255,255,0.05); }
  .eye.on{ color:var(--gold); }

  .field-hint{ font-size:11px; color:var(--muted); line-height:1.45; }
  .field-hint b{ color:#d7dde6; }

  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0; }

  .section-label{
    font-family:'Sora', sans-serif;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gold);
    display:flex; align-items:center; gap:10px;
    margin-bottom:-4px;
  }
  .section-label::after{ content:""; flex:1; height:1px; background:var(--line); }

  .extra-row{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    font-size:12.5px; color:var(--muted);
    margin-top:-4px;
  }
  .checkbox-line{ display:flex; align-items:center; gap:8px; cursor:pointer; }
  .checkbox-line input{ accent-color:var(--gold); }
  .extra-row a, .link-back a, .switch a{ color:var(--gold); text-decoration:none; font-weight:600; }
  .extra-row a:hover, .link-back a:hover, .switch a:hover{ text-decoration:underline; }

  .btn-primary{
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:44px;
    margin-top:4px;
    border:none;
    border-radius:10px;
    background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-dk) 100%);
    color:#14171f;
    font-family:'Sora', sans-serif;
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    box-shadow: 0 10px 28px rgba(245,200,66,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .btn-primary .arr{ transition: transform .18s ease; }
  .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(245,200,66,0.38), inset 0 1px 0 rgba(255,255,255,0.45); }
  .btn-primary:hover .arr{ transform: translateX(3px); }
  .btn-primary:active{ transform: translateY(0); filter:brightness(.97); }
  .btn-primary:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

  .switch, .link-back{
    text-align:center;
    font-size:12.5px;
    color:var(--muted);
  }

  .error-msg{
    display:none;
    background: rgba(255,107,107,0.09);
    border:1px solid rgba(255,107,107,0.32);
    color:var(--error);
    font-size:12.5px;
    line-height:1.45;
    padding:10px 12px;
    border-radius:10px;
    margin-bottom:16px;
  }
  .ok-msg{
    background: rgba(56,217,169,0.09);
    border:1px solid rgba(56,217,169,0.32);
    color:#63e6be;
    font-size:12.5px;
    line-height:1.5;
    padding:10px 12px;
    border-radius:10px;
    margin-bottom:16px;
  }

  .footer-note{
    text-align:center;
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
    margin-top:20px;
    padding:0 10px;
  }
  .footer-note b{ color:var(--gold); font-weight:600; }

  @media (max-width:420px){
    .wrap{ padding:24px 12px; }
    .card-head{ padding:26px 18px 20px; }
    .card-body{ padding:22px 18px; }
    .logo{ width:130px; }
  }
  @media (max-width:360px){
    .row-2{ grid-template-columns:1fr; }
    .extra-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  }
  @media (prefers-reduced-motion: reduce){
    #constelacion{ display:none; }
  }

  /* ───── Extras de Biblioteca Golden (pantallas del alumno) ───── */
  .wrap.ancho{ max-width:420px; }
  .doc-chip{ display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px;
    background:rgba(255,255,255,0.03); border:1px solid var(--line-2); text-align:left; }
  .doc-chip .ico{ width:38px; height:38px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:rgba(245,200,66,0.12); color:var(--gold); }
  .doc-chip .ico svg{ width:18px; height:18px; }
  .doc-chip .t{ font-family:'Sora',sans-serif; font-weight:700; font-size:13.5px; color:#fff; line-height:1.35; }
  .doc-chip .s{ font-size:12px; color:var(--muted); margin-top:2px; }
  .input.codigo input{ font-family:'Sora',sans-serif; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; font-size:15px; }
  .estado-ico{ width:62px; height:62px; margin:0 auto 4px; border-radius:18px; display:flex; align-items:center; justify-content:center; }
  .estado-ico svg{ width:28px; height:28px; }
  .estado-ico.bloqueo{ background:rgba(255,123,123,0.12); color:var(--error); border:1px solid rgba(255,123,123,0.25); }
  .estado-ico.espera{ background:rgba(245,200,66,0.12); color:var(--gold); border:1px solid rgba(245,200,66,0.25); }
  .estado-ico.aviso{ background:rgba(147,161,181,0.12); color:var(--muted); border:1px solid rgba(147,161,181,0.25); }
  .mensaje{ font-size:13.5px; line-height:1.6; color:#c9d3e0; text-align:center; }
  .btn-link{ background:none; border:none; color:var(--gold); font:600 12.5px 'DM Sans',sans-serif; cursor:pointer; width:100%; text-align:center; }
  .btn-link:hover{ text-decoration:underline; }
  .error-msg.visible{ display:block; }