/* =========================================================
   REPROTRONIC LOGIN 2026
   Cargar después de _css/estilo.css
   ========================================================= */

:root{
  --rt-bg:#06111f;
  --rt-bg-2:#0a1728;
  --rt-panel:rgba(8,22,39,.92);
  --rt-panel-2:rgba(14,31,51,.88);
  --rt-border:rgba(255,255,255,.10);
  --rt-text:#f5f7fb;
  --rt-muted:#94a3b8;
  --rt-accent:#ff3847;
  --rt-accent-2:#ff5a65;
  --rt-blue:#2d6cdf;
  --rt-blue-2:#4d8dff;
  --rt-shadow:0 30px 80px rgba(0,0,0,.45);
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--rt-text);
  font:600 15px/1.45 'Open Sans',sans-serif;
  background:
    linear-gradient(rgba(4,14,26,.80),rgba(4,14,26,.86)),
    url("../_img/back/fondo1.jpg") center center / cover fixed !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%,rgba(45,108,223,.15),transparent 32%),
    radial-gradient(circle at 80% 80%,rgba(255,56,71,.10),transparent 28%);
}

.login-wrap{
  width:min(100%,460px);
  min-height:590px;
  margin:0;
  position:relative;
  border:1px solid var(--rt-border);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(10,23,40,.98),rgba(6,17,31,.98));
  box-shadow:var(--rt-shadow);
  backdrop-filter:blur(14px);
  margin-top: 10%;
}

.login-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,56,71,.12),rgba(45,108,223,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:3;
}

.login-html{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  min-height:590px;
  padding:54px 48px 42px;
  background:transparent;
}

.login-html > img{
  display:block;
  width:min(100%,320px) !important;
  margin:0 auto 42px;
  box-shadow:none !important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}

.login-html .tab{
  display:none;
}

.login-form{
  min-height:0;
  position:relative;
  perspective:none;
  transform-style:flat;
}

.login-form .sign-in-htm{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  backface-visibility:visible !important;
}

.login-form .group{
  margin-bottom:22px;
}

.login-form .group .label{
  margin-bottom:8px;
  color:#cbd5e1;
  font-size:12px;
  letter-spacing:.08em;
  font-weight:700;
}

.login-form .group .input{
  width:100%;
  height:52px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  outline:none;
  color:#fff;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}

.login-form .group .input:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}

.login-form .group .input:focus{
  background:rgba(255,255,255,.11);
  border-color:rgba(77,141,255,.75);
  box-shadow:0 0 0 4px rgba(77,141,255,.12);
  transform:translateY(-1px);
}

.login-form .group .input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #172235 inset;
  transition:background-color 9999s ease-out 0s;
}

.login-form .group label[style*="padding-left"]{
  padding-left:0 !important;
  color:var(--rt-muted) !important;
  text-align:center;
  font-size:12px;
  line-height:1.4;
}

.login-form .group label[style*="padding-left"] a{
  color:#7ca7ff;
  transition:color .2s ease;
}

.login-form .group label[style*="padding-left"] a:hover{
  color:#a9c5ff;
}

.login-form .group .button{
  width:100%;
  height:52px;
  margin:18px 0 0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  background:linear-gradient(135deg,var(--rt-blue),var(--rt-blue-2));
  box-shadow:0 12px 28px rgba(45,108,223,.28);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.login-form .group .button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(45,108,223,.38);
  filter:brightness(1.06);
}

.login-form .group .button:active{
  transform:translateY(0);
}

@media (max-width:640px){
  body{
    padding:16px;
    align-items:flex-start;
  }

  .login-wrap{
    margin-top:18px;
    min-height:auto;
    border-radius:18px;
  }

  .login-html{
    min-height:auto;
    padding:40px 24px 30px;
  }

  .login-html > img{
    width:min(100%,270px) !important;
    margin-bottom:34px;
  }
}

@media (max-height:700px) and (min-width:641px){
  body{
    align-items:flex-start;
  }

  .login-wrap{
    margin-top:24px;
  }
}