:root{
    --navy:#000080;
    --navy-deep:#040022;
    --purple:#9400d3;
    --green:#89f336;
    --ink:#eef0ff;
    --ink-dim:#a8adcf;
    --line:rgba(238,240,255,0.12);
    --card:rgba(238,240,255,0.03);
    --danger:#ff6b6b;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:var(--navy-deep);
    color:var(--ink);
    font-family:'Inter 18pt',sans-serif;
    min-height:100vh;
    display:flex;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Special Gothic Expanded',sans-serif;font-weight:700;letter-spacing:-0.02em;}

  .side{
    flex:1;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:3rem;
    background:radial-gradient(circle at 20% 10%, rgba(148,0,211,0.35), transparent 55%),
               radial-gradient(circle at 80% 90%, rgba(137,243,54,0.14), transparent 55%),
               var(--navy-deep);
    overflow:hidden;
    min-height:100vh;
  }
  .logo{font-family:'Special Gothic Expanded',sans-serif;font-weight:800;font-size:1.3rem;position:relative;z-index:2;}
  .logo span{color:var(--green);}

  .meld-wrap{
    width:220px;height:220px;
    position:absolute;
    top:38%;left:50%;
    transform:translate(-50%,-50%);
    filter:url(#goo);
  }
  .blob{
    position:absolute;
    border-radius:50%;
    opacity:.9;
    will-change:transform;
    animation:float 10s ease-in-out infinite;
  }
  .blob.b1{width:130px;height:130px;background:#3a3ad9;top:10px;left:10px;}
  .blob.b2{width:130px;height:130px;background:var(--purple);top:50px;right:0;animation-delay:-3.3s;}
  .blob.b3{width:130px;height:130px;background:var(--green);bottom:0;left:50px;animation-delay:-6.6s;}
  @keyframes float{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(12px,-16px) scale(1.06);}
    66%{transform:translate(-14px,12px) scale(.95);}
  }

  .side-copy{position:relative;z-index:2;max-width:34ch;}
  .side-copy h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:0.8rem;}
  .side-copy p{color:var(--ink-dim);font-size:0.95rem;}
  .side-footer{position:relative;z-index:2;color:var(--ink-dim);font-size:0.78rem;font-family:'Inter 18pt',sans-serif;}

  .form-side{
    width:480px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2.5rem 2rem;
    background:rgba(238,240,255,0.015);
    border-left:1px solid var(--line);
  }
  .form-box{width:100%;max-width:360px;}

  .switcher{
    display:flex;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:100px;
    padding:4px;
    margin-bottom:2.2rem;
    width:100%;
  }
  .switcher button{
    flex:1 1 0;
    min-width:0;
    padding:0.6rem 0.5rem;
    border:none;background:transparent;
    color:var(--ink-dim);
    font-family:'Inter 18pt',sans-serif;
    font-size:0.88rem;font-weight:600;
    border-radius:100px;
    cursor:pointer;
    transition:background .2s, color .2s;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .switcher button.active{background:var(--green);color:var(--navy-deep);}
  .switcher button:disabled{opacity:0.6;cursor:not-allowed;}

  .form-box h1{font-size:1.5rem;margin-bottom:0.4rem;}
  .form-box .sub{color:var(--ink-dim);font-size:0.9rem;margin-bottom:1.8rem;}

  .field{margin-bottom:1.1rem;}
  .field label{
    display:block;
    font-size:0.8rem;
    color:var(--ink-dim);
    margin-bottom:0.4rem;
    font-family:'Inter 18pt',sans-serif;
  }
  .field input, .field select{
    width:100%;
    padding:0.75rem 0.9rem;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--ink);
    font-family:'Inter 18pt',sans-serif;
    font-size:0.92rem;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
  }
  .field input::placeholder{color:#6b6f92;}
  .field input:focus, .field select:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(137,243,54,0.15);
  }

  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.8rem;
  }

  .role-select{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;}
  .role-opt{
    border:1px solid var(--line);
    border-radius:10px;
    padding:0.6rem 0.4rem;
    text-align:center;
    font-size:0.76rem;
    color:var(--ink-dim);
    cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
  }
  .role-opt.selected{border-color:var(--purple);color:var(--ink);background:rgba(148,0,211,0.15);}

  .row-between{display:flex;justify-content:space-between;align-items:center;font-size:0.82rem;margin-bottom:1.5rem;}
  .row-between a{color:var(--green);text-decoration:none;}
  .row-between a:hover{text-decoration:underline;}
  .checkbox-line{display:flex;align-items:center;gap:0.5rem;color:var(--ink-dim);}
  .checkbox-line input{width:auto;}

  .btn-submit{
    width:100%;
    padding:0.85rem;
    border:none;
    border-radius:10px;
    background:var(--green);
    color:var(--navy-deep);
    font-weight:700;
    font-size:0.95rem;
    cursor:pointer;
    transition:transform .2s, box-shadow .2s;
  }
  .btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(137,243,54,0.25);}
  .btn-submit:disabled{opacity:0.6;cursor:not-allowed;}

  .divider{
    display:flex;align-items:center;gap:0.8rem;
    margin:1.6rem 0;
    color:var(--ink-dim);
    font-size:0.78rem;
  }
  .divider::before, .divider::after{content:"";flex:1;height:1px;background:var(--line);}

  .btn-alt{
    width:100%;
    padding:0.7rem;
    border:1px solid var(--line);
    border-radius:10px;
    background:transparent;
    color:var(--ink);
    font-size:0.88rem;
    display:flex;align-items:center;justify-content:center;gap:0.6rem;
    cursor:pointer;
    transition:border-color .2s, opacity .2s;
  }
  .btn-alt:hover{border-color:var(--purple);}
  .btn-alt:disabled{opacity:0.7;cursor:default;}

  .spinner-google{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid var(--line);
    border-top-color:var(--green);
    animation:spin-google 0.7s linear infinite;
    flex-shrink:0;
  }
  @keyframes spin-google{to{transform:rotate(360deg);}}

  .switch-line{text-align:center;margin-top:1.6rem;font-size:0.85rem;color:var(--ink-dim);}
  .switch-line a{color:var(--green);text-decoration:none;font-weight:600;cursor:pointer;}

.error-msg{
    display:none;
    background:rgba(255,107,107,0.1);
    border:1px solid rgba(255,107,107,0.35);
    color:var(--danger);
    font-size:0.82rem;
    padding:0.7rem 0.9rem;
    border-radius:10px;
    margin-bottom:1.2rem;
    word-break:break-word;
  }
  .error-msg.show{display:block;}

  .user-info{
    display:none;
    align-items:center;
    gap:0.8rem;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:0.9rem;
    margin-bottom:1.4rem;
  }
  .user-info.show{display:flex;}
  .user-info img{
    width:46px;height:46px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--green);
    flex-shrink:0;
  }
  .user-meta{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:1;
  }
  .user-meta strong{
    font-size:0.92rem;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .user-meta span{
    font-size:0.78rem;
    color:var(--ink-dim);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .user-actions{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    flex-shrink:0;
  }
  .btn-logout{
    border:1px solid rgba(255,107,107,0.4);
    background:rgba(255,107,107,0.1);
    color:var(--danger);
    font-size:0.76rem;
    font-weight:600;
    padding:0.45rem 0.8rem;
    border-radius:100px;
    cursor:pointer;
    flex-shrink:0;
    transition:background .2s, color .2s;
  }
  .btn-logout:hover{background:var(--danger);color:#fff;}

  .btn-continue-big{
    display:none;
    width:100%;
    padding:0.85rem;
    border:none;
    border-radius:10px;
    background:var(--green);
    color:var(--navy-deep);
    font-weight:700;
    font-size:0.95rem;
    cursor:pointer;
    margin-bottom:1.4rem;
    transition:transform .2s, box-shadow .2s;
  }
  .btn-continue-big.show{display:block;}
  .btn-continue-big:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(137,243,54,0.25);}

  .view{display:none;}
  .view.active{
    display:block;
    animation:viewIn .28s ease both;
  }
  @keyframes viewIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
  }

  @media (max-width:900px){
    .side{display:none;}
    .form-side{width:100%;border-left:none;}
  }

  /* ============================================================
     Adaptación para Android (Capacitor / WebView)
     ============================================================ */
  body.plataforma-android{
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    -webkit-user-select:none;
  }
  body.plataforma-android .side{display:none;}
  body.plataforma-android .form-side{
    width:100%;
    border-left:none;
    padding:calc(2.5rem + env(safe-area-inset-top)) 1.5rem calc(2rem + env(safe-area-inset-bottom));
  }
  body.plataforma-android .form-box{max-width:100%;}
  body.plataforma-android .switcher button{font-size:0.8rem;padding:0.55rem 0.3rem;}
  body.plataforma-android .grid-2{grid-template-columns:1fr;}
  body.plataforma-android .role-select{grid-template-columns:1fr;}
  body.plataforma-android .btn-submit{padding:0.9rem;}
  body.plataforma-android .btn-alt{padding:0.8rem;}
  body.plataforma-android .user-info{flex-wrap:wrap;}
  body.plataforma-android .user-actions{flex-direction:row;width:100%;}
  body.plataforma-android .user-actions .btn-logout{flex:1;}