@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root{
      --bg1:#071a3a;
      --bg2:#0a2a57;
      --card:#050a16cc; /* semi-transparente */
      --card-border:#ffffff1a; 
      --text:#ffffff; /*#eaf0ff*/
      --muted:rgba(255,255,255,.72);
      --line:#ffffff;/*#ffffff33 */
      --accent:#ff3b3b; /* rojo JUL-IA */
      --input-bg:transparent;
      --autofill-bg:#070d1c; /* matches the card so autofilled inputs stay dark */
      --btn-bg:#ffffff;
      --btn-text:#0a2a57;
      --shadow: 0 24px 80px rgba(0,0,0,.45);
      --radius: 22px;
    }

    *{ box-sizing: border-box; }
    body{
      margin:0;
      font-family: "Poppins", sans-serif, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      min-height: 100vh;

      /* Fallback por si NO tienes imagen */
      background: radial-gradient(1200px 800px at 25% 20%, #0b3c73 0%, var(--bg2) 35%, var(--bg1) 100%);
      overflow-x: hidden; /* let short screens (e.g. open keyboard) scroll vertically */
    }

    /* Si tienes imagen de fondo: ponla en el atributo data-bg del body */
    body[data-bg="on"]::before{
      content:"";
      position: fixed;
      inset: 0;
      background: url("/static/LogInBackground.png") center/cover no-repeat;
      filter: saturate(1.05) contrast(1.02);
      transform: scale(1.02);
      z-index: -2;
    }

    /* Capa oscura encima del fondo (imagen o gradiente) */
    body::after{
      content:"";
      position: fixed;
      inset: 0;
      background: radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,.35), rgba(0,0,0,.55));
      z-index: -1;
    }

    .page{
      min-height: 100vh;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .login-card{
      width: min(520px, 92vw);
      padding: 42px 44px 34px;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(3,6,14,.88), rgba(2,4,10,.80));
      border: 1px solid var(--card-border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      position: relative;
      animation: login-card-in .45s ease-out both;
    }
    @keyframes login-card-in{
      from{ opacity: 0; transform: translateY(12px); }
      to{ opacity: 1; transform: none; }
    }

    .brand{
      display:flex;
      justify-content:center;
      margin-bottom: 10px;
    }

    .brand img{
      height: 64px;
      width: auto;
      display:block;
      user-select:none;
    }

    .welcome{
      text-align:center;
      margin: 14px 0 28px;
      color: var(--text);
      letter-spacing: .2px;
    }
    .welcome b{
      font-weight: 600;
    }
    .welcome-light{
      font-weight: 300;
    }

    .only_accent{
        color: var(--accent);
        font-weight: 600;
    }

    .hint{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:center;
      color: var(--muted);
      margin-bottom: 18px;
      font-size: 14px;
    }

    .form{
      display: grid;
      gap: 14px;
    }

    .field{
      position: relative;
    }

    .input{
      width: 100%;
      height: 52px;
      padding: 0 52px 0 18px;
      border-radius: 26px;
      border: 1px solid var(--line);
      outline: none;
      background: var(--input-bg);
      color: var(--text);
      font-size: 16px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .input::placeholder{
      color: rgba(234,240,255,.65);
    }

    .input:focus{
      border-color: rgba(255,255,255,.65);
      box-shadow: 0 0 0 3px rgba(255,59,59,.14);
    }

    .icon-right{
      position:absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,.75);
      pointer-events:none;
      font-size: 18px;
    }

    .check-row{
      display:flex;
      align-items:center;
      gap: 10px;
      width: fit-content;
      margin: 2px 0 0 6px;
      color: var(--muted);
      font-size: 13px;
      cursor: pointer;
      user-select: none;
    }
    .check-row input[type="checkbox"]{
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .check-row:hover{ color: var(--text); }

    /* Invalid credentials */
    .input.is-invalid{
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255,59,59,.18);
    }
    .field.is-shaking{
      animation: login-shake .4s ease;
    }
    @keyframes login-shake{
      0%, 100%{ transform: translateX(0); }
      20%, 60%{ transform: translateX(-6px); }
      40%, 80%{ transform: translateX(6px); }
    }

    .login-btn{
      margin-top: 12px;
      height: 56px;
      border: 1px solid var(--line);
      border-radius: 28px;
      background: var(--btn-bg);
      color: var(--btn-text);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: .2px;
      cursor: pointer;
      transition: transform .06s ease, filter .2s ease;
    }

    .login-btn.is-loading{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: progress;
    }
    .login-btn-spinner{
      width: 18px;
      height: 18px;
      border: 2px solid rgba(10,42,87,.25);
      border-top-color: var(--btn-text);
      border-radius: 50%;
      animation: login-spin .7s linear infinite;
    }
    @keyframes login-spin{
      to{ transform: rotate(360deg); }
    }
    .login-btn:active{ transform: translateY(1px); }
    .login-btn:hover{ filter: brightness(.96); }

    /* Visible keyboard focus */
    .login-btn:focus-visible{
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    .check-row input[type="checkbox"]:focus-visible{
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* Empty-form state reads as inactive */
    .login-btn:disabled{
      background: var(--btn-bg);
      color: var(--btn-text);
      border-color: var(--line);
      opacity: .5;
      filter: none;
    }

    /* Keep browser autofill on the dark glass inputs instead of a white/yellow fill */
    .input:-webkit-autofill,
    .input:-webkit-autofill:hover{
      -webkit-text-fill-color: var(--text);
      caret-color: var(--text);
      -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset;
      transition: background-color 9999s ease-out 0s;
    }
    .input:-webkit-autofill:focus{
      -webkit-text-fill-color: var(--text);
      -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset, 0 0 0 3px rgba(255,59,59,.14);
    }

    /* SweetAlert dialogs themed like the login card */
    .swal2-container.swal2-backdrop-show{
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(2px);
    }
    .swal2-popup.login-swal{
      width: min(420px, 92vw);
      padding: 28px 24px 26px;
      border-radius: var(--radius);
      border: 1px solid var(--card-border);
      background: linear-gradient(180deg, rgba(3,6,14,.96), rgba(2,4,10,.94));
      box-shadow: var(--shadow);
      color: var(--text);
      font-family: inherit;
    }
    .login-swal .swal2-title{
      color: var(--text);
      font-size: 22px;
      font-weight: 600;
    }
    .login-swal .swal2-html-container{
      color: rgba(255,255,255,.8);
      font-size: 15px;
      line-height: 1.5;
    }
    .login-swal-confirm{
      min-width: 140px;
      height: 46px;
      padding: 0 28px;
      border: 1px solid var(--line);
      border-radius: 23px;
      background: var(--btn-bg);
      color: var(--btn-text);
      font: 500 16px "Poppins", sans-serif;
      cursor: pointer;
      transition: filter .2s ease;
    }
    .login-swal-confirm:hover{ filter: brightness(.96); }
    .login-swal-confirm:focus-visible{
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    /* Support floating button */
    .support{
      position: fixed;
      right: 28px;
      bottom: 26px;
      display: grid;
      gap: 8px;
      justify-items: center;
      text-decoration: none;
      color: var(--text);
      z-index: 10;
      user-select:none;
    }
    .support .bubble{
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.35);
      display:grid;
      place-items:center;
      background: rgba(5,10,22,.35);
      backdrop-filter: blur(8px);
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
    }
    .support .label{
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
    }

    /* Mobile tweaks */
    @media (max-width: 420px){
      .login-card{ padding: 34px 22px 26px; }
      .brand img{ height: 54px; }
      .login-btn{ font-size: 17px; }
    }

    @media (prefers-reduced-motion: reduce){
      .login-card,
      .field.is-shaking{ animation: none; }
      .login-btn-spinner{ animation-duration: 1.6s; }
    }