:root{
  --ink:#1d3038;
  --muted:#75838a;
  --line:#d9e1e3;
  --accent:#226f73;
  --accent-dark:#18575c;
  --white:#fff;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,
    BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body.mpd-login{
  min-height:100vh;
  overflow:hidden;
  color:var(--ink);
  background:#17272d;
}

/* FOTO REAL DE YASCÓN */

.login-photo{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    url("/assets/login/yascon_login.jpg")
    center 55% / cover no-repeat;
  transform:scale(1.01);
}

.login-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(10,24,30,.82) 0%,
      rgba(12,29,35,.70) 30%,
      rgba(16,35,40,.43) 52%,
      rgba(16,35,40,.13) 72%,
      rgba(10,25,30,.20) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8,20,25,.10),
      rgba(8,20,25,.18) 60%,
      rgba(8,20,25,.52)
    );
}

.login-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  align-items:center;
  gap:55px;
  padding:50px clamp(40px,6vw,92px);
}

/* MARCA Y MENSAJE */

.territory-intro{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  padding:10px 0;
  color:#fff;
}

.brand-row{
  display:flex;
  align-items:center;
  gap:13px;
}

.brand-symbol{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:13px;
  background:rgba(12,31,37,.38);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
  font-size:14px;
  font-weight:850;
  letter-spacing:-.3px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-copy strong{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
}

.brand-copy span{
  font-size:10.5px;
  color:rgba(255,255,255,.66);
}

.territory-message{
  width:min(590px,92%);
  margin:auto 0;
}

.territory-kicker{
  display:block;
  margin-bottom:15px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:2.4px;
  color:rgba(229,240,238,.78);
}

.territory-message h1{
  margin:0;
  max-width:560px;
  font-size:clamp(31px,3vw,45px);
  line-height:1.09;
  letter-spacing:-1.35px;
  font-weight:650;
  text-shadow:0 4px 30px rgba(0,0,0,.25);
}

.territory-message p{
  margin:19px 0 0;
  max-width:510px;
  font-size:15px;
  line-height:1.7;
  color:rgba(242,247,246,.78);
  text-shadow:0 2px 18px rgba(0,0,0,.22);
}

.territory-features{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}

.territory-features span{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(12,29,34,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:10px;
  font-weight:650;
  color:rgba(255,255,255,.87);
}

.territory-foot{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10.5px;
  font-weight:600;
  color:rgba(255,255,255,.65);
}

.secure-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a5d5c9;
  box-shadow:0 0 0 4px rgba(165,213,201,.10);
}

/* TARJETA */

.access-card{
  width:100%;
  max-width:430px;
  justify-self:end;
  padding:40px 39px 22px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:22px;
  background:rgba(255,255,255,.965);
  box-shadow:
    0 30px 75px rgba(5,20,25,.26),
    0 3px 12px rgba(5,20,25,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.access-top{margin-bottom:27px}

.access-kicker{
  display:block;
  margin-bottom:9px;
  color:var(--accent);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:1.8px;
}

.access-card h2{
  margin:0;
  color:#182c35;
  font-size:29px;
  line-height:1.08;
  letter-spacing:-.75px;
  font-weight:720;
}

.access-top p{
  margin:10px 0 0;
  max-width:320px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

/* ERROR */

.login-error{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 18px;
  padding:11px 12px;
  border:1px solid #efd3d3;
  border-radius:11px;
  background:#fff4f4;
  color:#953c43;
  font-size:12px;
  font-weight:650;
}

.login-error svg{
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* FORMULARIO */

form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.field-group label{
  display:block;
  margin-bottom:7px;
  color:#354950;
  font-size:12px;
  font-weight:700;
}

.field-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.field-label-row span{
  margin-bottom:7px;
  color:#9aa4a8;
  font-size:9.5px;
}

.field-shell{position:relative}

.field-shell input{
  width:100%;
  height:52px;
  padding:0 47px 0 44px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:#fff;
  color:#19323c;
  font-size:13.5px;
  font-weight:520;
  box-shadow:0 2px 8px rgba(15,38,46,.025);
  transition:border-color .17s ease,box-shadow .17s ease;
}

.field-shell input::placeholder{
  color:#a1aaae;
  font-weight:430;
}

.field-shell input:focus{
  border-color:#4b8a8c;
  box-shadow:0 0 0 3px rgba(40,111,115,.09);
}

.field-icon{
  position:absolute;
  z-index:2;
  left:15px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  fill:none;
  stroke:#6b7c83;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.password-toggle{
  position:absolute;
  right:11px;
  top:50%;
  width:30px;
  height:30px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#687b82;
  cursor:pointer;
}

.password-toggle:hover{
  background:#eef3f2;
  color:#315e61;
}

.password-toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* BOTÓN PRINCIPAL */

.primary-action{
  width:100%;
  height:52px;
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:12px;
  background:linear-gradient(105deg,#1a565c,#287579);
  color:#fff;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  box-shadow:0 11px 24px rgba(20,75,80,.19);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.primary-action:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 14px 28px rgba(20,75,80,.23);
}

.primary-action:active{transform:translateY(0)}

.primary-action svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* SEGURIDAD */

.access-bottom{
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid #e8edef;
}

.platform-state{
  display:flex;
  align-items:center;
  gap:10px;
}

.state-icon{
  width:33px;
  height:33px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eef5f3;
  color:#47726e;
}

.state-icon svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.platform-state>div{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.platform-state strong{
  color:#46575e;
  font-size:10.5px;
}

.platform-state span:not(.state-icon){
  color:#9aa3a7;
  font-size:9.5px;
}

/* CRÉDITO */

.developer-credit{
  margin-top:22px;
  padding-top:15px;
  border-top:1px solid #edf0f1;
  text-align:center;
  color:#a0a8ac;
  font-size:9px;
}

.developer-credit span{margin:0 4px}

.developer-credit strong{
  color:#707c81;
  font-weight:650;
}

/* TABLET */

@media(max-width:980px){
  body.mpd-login{overflow:auto}

  .login-shell{
    grid-template-columns:1fr;
    gap:0;
    padding:28px;
  }

  .territory-intro{min-height:330px}

  .territory-message{
    margin:50px 0 42px;
  }

  .territory-message h1{
    max-width:540px;
    font-size:37px;
  }

  .territory-foot{display:none}

  .access-card{
    justify-self:center;
    max-width:510px;
    margin:0 auto 28px;
  }

  .login-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(8,24,30,.72),
        rgba(9,26,31,.48) 48%,
        rgba(8,23,28,.57)
      );
  }
}

/* MÓVIL */

@media(max-width:560px){
  .login-photo{background-position:center 46%}

  .login-shell{padding:18px 13px}

  .territory-intro{
    min-height:255px;
    padding:3px 6px;
  }

  .brand-symbol{
    width:42px;
    height:42px;
    border-radius:11px;
    font-size:12px;
  }

  .brand-copy strong{font-size:9.5px}
  .brand-copy span{font-size:8.5px}

  .territory-message{
    width:100%;
    margin:39px 0 28px;
  }

  .territory-kicker{font-size:8.5px}

  .territory-message h1{
    font-size:28px;
    letter-spacing:-.7px;
  }

  .territory-message p{
    margin-top:13px;
    font-size:12.5px;
  }

  .territory-features{display:none}

  .access-card{
    padding:30px 24px 19px;
    border-radius:18px;
  }

  .access-card h2{font-size:26px}

  .field-label-row span{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}

/* Ajuste marca MAPA */
.brand-symbol{
  width:54px;
  font-size:11px;
  letter-spacing:.7px;
}


/* =========================================================
   LOGIN 17.1 · GLASS · YASCÓN
   ========================================================= */

/* Quitamos el contenido promocional de la izquierda */
.territory-message,
.territory-foot{
  display:none !important;
}

/* La marca queda sola arriba */
.territory-intro{
  justify-content:flex-start !important;
}

.brand-row{
  position:relative;
  z-index:5;
}

.brand-symbol{
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(8,23,29,.28);
  box-shadow:
    0 8px 30px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
}

.brand-copy strong{
  color:#fff;
  font-size:12px;
  letter-spacing:1.9px;
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}

.brand-copy span{
  margin-top:3px;
  color:#8ed7d4;
  font-size:11px;
  font-weight:750;
  letter-spacing:1.25px;
}

/* Mantener la fotografía visible pero elegante */
.login-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(6,19,25,.48) 0%,
      rgba(7,22,28,.30) 35%,
      rgba(8,25,30,.13) 63%,
      rgba(8,22,28,.20) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4,14,19,.12) 0%,
      rgba(5,17,22,.08) 50%,
      rgba(4,15,20,.36) 100%
    ) !important;
}


/* =========================================================
   TARJETA GLASS
   ========================================================= */

.access-card{
  position:relative;

  background:
    linear-gradient(
      145deg,
      rgba(30,47,55,.56),
      rgba(25,42,49,.38)
    ) !important;

  border:1px solid rgba(255,255,255,.42) !important;

  box-shadow:
    0 35px 80px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  backdrop-filter:
    blur(20px)
    saturate(115%) !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(115%) !important;

  color:#fff !important;
}


/* Acceso seguro */

.access-kicker{
  color:#55d1d2 !important;
  text-shadow:0 0 18px rgba(61,198,201,.18);
}

.access-card h2{
  color:#fff !important;
  text-shadow:0 2px 18px rgba(0,0,0,.18);
}

.access-top p{
  color:rgba(255,255,255,.72) !important;
}


/* Etiquetas */

.field-group label{
  color:rgba(255,255,255,.92) !important;
}

.field-label-row span{
  color:rgba(255,255,255,.55) !important;
}


/* Inputs transparentes */

.field-shell input{
  background:rgba(8,22,28,.28) !important;

  border:
    1px solid rgba(255,255,255,.43) !important;

  color:#fff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 18px rgba(0,0,0,.05) !important;
}

.field-shell input::placeholder{
  color:rgba(255,255,255,.57) !important;
}

.field-shell input:focus{
  background:rgba(8,23,29,.38) !important;

  border-color:
    rgba(112,218,217,.80) !important;

  box-shadow:
    0 0 0 3px rgba(62,184,185,.14),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}


/* Iconos */

.field-icon{
  stroke:rgba(255,255,255,.73) !important;
}

.password-toggle{
  color:rgba(255,255,255,.72) !important;
}

.password-toggle:hover{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}


/* Botón */

.primary-action{
  background:
    linear-gradient(
      105deg,
      rgba(25,130,137,.94),
      rgba(41,151,156,.94)
    ) !important;

  border:
    1px solid rgba(126,224,224,.34) !important;

  box-shadow:
    0 15px 30px rgba(3,24,29,.24),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  color:#fff !important;
}

.primary-action:hover{
  background:
    linear-gradient(
      105deg,
      rgba(30,143,149,.98),
      rgba(48,163,168,.98)
    ) !important;

  box-shadow:
    0 18px 34px rgba(3,24,29,.29) !important;
}


/* Conexión protegida */

.access-bottom{
  border-top:
    1px solid rgba(255,255,255,.17) !important;
}

.state-icon{
  background:
    rgba(72,177,173,.18) !important;

  color:#bce5df !important;

  border:
    1px solid rgba(137,219,213,.09);
}

.platform-state strong{
  color:rgba(255,255,255,.91) !important;
}

.platform-state span:not(.state-icon){
  color:rgba(255,255,255,.57) !important;
}


/* Crédito */

.developer-credit{
  border-top:
    1px solid rgba(255,255,255,.14) !important;

  color:rgba(255,255,255,.46) !important;
}

.developer-credit strong{
  color:rgba(255,255,255,.75) !important;
}


/* Error sobre vidrio */

.login-error{
  background:rgba(100,28,32,.38) !important;

  border:
    1px solid rgba(255,180,180,.30) !important;

  color:#ffdcdc !important;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:980px){

  .territory-intro{
    min-height:95px !important;
  }

  .login-shell{
    align-content:center;
  }

  .access-card{
    background:
      linear-gradient(
        145deg,
        rgba(24,43,51,.66),
        rgba(22,38,45,.48)
      ) !important;
  }
}

@media(max-width:560px){

  .territory-intro{
    min-height:82px !important;
  }

  .brand-symbol{
    width:46px;
    height:46px;
  }
}