/* =========================================
   LOGIN DESKTOP FULL-SVG · WIFICOR (PRO)
   - SVG = fondo completo
   - Card real encima (derecha)
   - Sin fondo viejo, sin glass, sin duplicado
   ========================================= */

*{box-sizing:border-box}
html,body{height:100%}

:root{
  --muted:#64748b;
  --txt:#0b1220;
  --line:rgba(2,6,23,.12);
  --shadow:0 28px 80px rgba(0,0,0,.35);
  --r:26px;
  --h:46px;
  --brand:#4c1d95;
}

body{
  margin:0;
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
  background:transparent;
  color:var(--txt);
  overflow:hidden; /* no scroll en desktop */
}

input,select,button{font-family:inherit !important}

/* =========================
   ESCENA PRINCIPAL
   ========================= */
.wf-login{
  min-height:100vh;
  background:transparent !important;
  padding:0 !important;         /* ✅ elimina bordes blancos */
  position:relative;
}

.wf-shell{
  width:100%;
  height:100vh;
  position:relative;
}

/* =========================
   SVG COMO FONDO COMPLETO
   ========================= */
.wf-promo{
  position:absolute;
  inset:0;
  z-index:0;

  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

.wf-promo::before,
.wf-promo::after{content:none !important; display:none !important;}

.wf-promoHero{
  width:100%;
  height:100%;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

.wf-promoHero > svg{
  width:100%;
  height:100%;
  display:block;
}

/* =========================================================
   FIX DUPLICADO: ocultar SOLO la "card falsa" del SVG
   - No tocamos rings/círculos/hero/router etc.
   - Ocultamos:
     1) rect.shadow (fill negro, opacity .14)
     2) rect.white (card blanca x=610 y=110)
     3) textos "Iniciar sesión" y "Acceso administrativo"
     4) rect.soft/btn del mini-form dentro del SVG (x=640...)
   ========================================================= */
@media (min-width: 901px){
  /* card fake: rect shadow + rect white por posición (son justo los dos después del hero) */
  .wf-promoHero > svg > rect.shadow,
  .wf-promoHero > svg > rect.white{
    display:none !important;
  }

  /* textos del mini-login fake (van al root del svg) */
  .wf-promoHero > svg > text.cardT1,
  .wf-promoHero > svg > text.cardT2,
  .wf-promoHero > svg > text.btnT{
    display:none !important;
  }

  /* inputs/botón fake del mini-login (rect.soft y rect.violet con x=640...) */
  .wf-promoHero > svg > rect.soft,
  .wf-promoHero > svg > rect.violet[x="640"],
  .wf-promoHero > svg > rect.violet[x="656"]{
    display:none !important;
  }
}

/* =========================
   LOGIN REAL ENCIMA (DERECHA)
   ========================= */
.wf-card{
  position:absolute;
  z-index:2;
  top:50%;
  right:5vw;
  transform:translateY(-50%);

  width:min(520px, 92vw);
  border-radius:var(--r);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;

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

/* appbar móvil no aplica en desktop */
.wf-appbar{display:none}

/* =========================
   HEADER CARD
   ========================= */
.wf-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 18px 10px;
  border-bottom:1px solid rgba(2,6,23,.06);
}

.wf-ico{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(180deg,#4c1d95,#3b1680);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px rgba(76,29,149,.28);
}

.wf-title strong{display:block;font-size:16px;font-weight:900;color:var(--txt);line-height:1.1}
.wf-title span{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-top:3px}

/* =========================
   PAÍS / INFO / FLAGS
   ========================= */
.wf-country{padding:12px 18px 0}
.wf-country .info{
  font-size:12px;
  font-weight:900;
  color:#334155;
  line-height:1.45;
}

.wf-flagform{margin-top:10px}
.wf-flags{
  display:flex;
  gap:10px;
  align-items:center;
  overflow:auto;
  padding:10px;
  border-radius:18px;
  background:#f6f7fb;
  border:1px solid rgba(2,6,23,.08);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wf-flags::-webkit-scrollbar{display:none}

.wf-flagbtn{
  width:54px;height:34px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  padding:0;
  overflow:hidden;
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.wf-flagbtn img{width:100%;height:100%;object-fit:cover;display:block}
.wf-flagbtn.active{
  outline:3px solid rgba(76,29,149,.14);
  border-color:rgba(76,29,149,.40);
}

.country-lock-badge{
  margin-left:8px;
  font-size:11px;
  font-weight:900;
  padding:3px 8px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid rgba(76,29,149,.20);
  color:#4c1d95;
}

/* =========================
   ALERT
   ========================= */
.wf-alert{
  margin:12px 18px 0;
  padding:10px 12px;
  border-radius:16px;
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#9f1239;
  font-weight:900;
  font-size:13px;
}

/* =========================
   FORM
   ========================= */
.wf-form{padding:14px 18px 18px}

.wf-input,.wf-select{
  width:100%;
  height:var(--h);
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 14px;
  font-size:14px;
  font-weight:900;
  outline:none;
  margin-top:10px;
}

.wf-input:focus,.wf-select:focus{
  border-color:rgba(76,29,149,.55);
  box-shadow:0 0 0 4px rgba(76,29,149,.14);
}

.wf-role-hint{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-top:6px;
  margin-left:2px;
}

.wf-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 4px 0;
  font-size:13px;
  font-weight:800;
  color:#334155;
}

#recover-link{
  color:#4c1d95;
  text-decoration:none;
  font-weight:900;
}

.wf-btn{
  width:100%;
  height:52px;
  margin-top:14px;
  border:none;
  border-radius:18px;
  background:linear-gradient(180deg,#4c1d95,#3b1680);
  color:#fff;
  font-weight:900;
  letter-spacing:.6px;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 20px 50px rgba(76,29,149,.30);
}
.wf-btn:active{transform:translateY(1px)}

.wf-foot{
  text-align:center;
  padding:12px 0 2px;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}

.wf-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 2px 0;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}

.mini-loader{
  width:18px;height:18px;
  border-radius:999px;
  border:3px solid rgba(76,29,149,.16);
  border-top-color:rgba(76,29,149,.70);
  animation:spin .9s linear infinite;
  display:none;
}
@keyframes spin{to{transform:rotate(360deg)}}










/* ============================
   FIX PRO: SVG como COVER real
   - elimina bordes blancos
   - rellena pantalla completa
   ============================ */
@media (min-width: 901px){

  /* cero “marco” del navegador */
  html, body { height:100%; }
  body { margin:0 !important; background:#4c1d95 !important; } /* fallback */
  .wf-login { padding:0 !important; }

  /* capa fondo */
  .wf-shell { height:100vh !important; width:100% !important; }

  /* SVG full */
  .wf-promo,
  .wf-promoHero{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .wf-promoHero > svg{
    width:100% !important;
    height:100% !important;
    display:block !important;

    /* ✅ esto hace que “llene” como cover */
    preserveAspectRatio: none; /* fallback (no siempre aplica) */
  }

  /* ✅ cover real: estira y recorta sin deformar usando scale */
  .wf-promoHero{
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }
  .wf-promoHero > svg{
    transform: scale(1.08);   /* ajusta 1.03–1.12 si quieres */
    transform-origin:center;
  }

  /* card bien posicionada */
  .wf-card{
    top:50% !important;
    right:4.5vw !important;
    transform:translateY(-50%) !important;
    width:min(520px, 92vw) !important;
  }
}








@media (min-width: 901px){

  /* =========================
     HEADER: icono + títulos más pro
     ========================= */
  .wf-head{
    padding: 16px 18px 10px !important;
    gap: 10px !important;
  }

  .wf-ico{
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  .wf-title strong{
    font-size: 15px !important;
    letter-spacing: .2px;
  }
  .wf-title span{
    font-size: 11.5px !important;
  }

  /* =========================
     INFO país: más compacto
     ========================= */
  .wf-country .info{
    font-size: 11.5px !important;
  }

  /* =========================
     FLAGS: reducir tamaño a NORMAL
     ========================= */
  .wf-flags{
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }

  .wf-flagbtn{
    width: 44px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  .wf-flagbtn.active{
    outline: 2px solid rgba(76,29,149,.14) !important;
  }

  /* evita que “se vean gordas” */
  .wf-flagbtn img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}







@media (min-width: 901px){

  /* =========================
     ICONO = LOGO DINÁMICO (PRO)
     ========================= */
  .wf-ico.wf-ico-logo{
    background: rgba(76,29,149,.12) !important;
    border: 1px solid rgba(76,29,149,.20) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.10) !important;
    overflow: hidden;
    padding: 6px;              /* aire para el logo */
  }

  .wf-ico.wf-ico-logo img{
    width: 100%;
    height: 100%;
    display:block;
    object-fit: contain;       /* ✅ NO se deforma */
    object-position: center;
    border-radius: 10px;
    image-rendering: -webkit-optimize-contrast;
  }

  /* tamaño del bloque del logo */
  .wf-ico{
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  /* =========================
     FLAGS tamaño normal (no gigantes)
     ========================= */
  .wf-flags{
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }

  .wf-flagbtn{
    width: 44px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  .wf-flagbtn.active{
    outline: 2px solid rgba(76,29,149,.16) !important;
    border-color: rgba(76,29,149,.40) !important;
  }
}








@media (min-width:901px){

  /* Contenedor flags más nítido (sin blur ni suavizado raro) */
  .wf-flags{
    background:#fff !important;
    border-color: rgba(2,6,23,.10) !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Tamaño correcto (evita estirar) */
  .wf-flagbtn{
    width: 40px !important;
    height: 26px !important;
    border-radius: 10px !important;
    overflow:hidden;
  }

  /* Forzar nitidez */
  .wf-flagbtn img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;

    /* esto ayuda bastante en Chrome/Edge */
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}














/* =========================================================
   DESKTOP: ICONOS EN INPUTS (sin tocar HTML/PHP)
   - Usuario / Perfil / Password
   - Usa background-image inline SVG
   ========================================================= */
@media (min-width: 901px){

  /* espacio para el icono */
  .wf-input, .wf-select{
    padding-left: 44px !important;
    background-repeat: no-repeat !important;
    background-position: 14px 50% !important;
    background-size: 18px 18px !important;
  }

  /* -------- Usuario -------- */
  #user.wf-input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z'/%3E%3C/svg%3E") !important;
  }
  #user.wf-input:focus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234C1D95' d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z'/%3E%3C/svg%3E") !important;
  }

  /* -------- Perfil (select) -------- */
  #loginRole.wf-select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5ZM4 20a8 8 0 0 1 16 0v1H4Z'/%3E%3C/svg%3E") !important;
  }
  #loginRole.wf-select:focus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234C1D95' d='M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5ZM4 20a8 8 0 0 1 16 0v1H4Z'/%3E%3C/svg%3E") !important;
  }

  /* -------- Password -------- */
  #pass.wf-input{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-7-2a2 2 0 0 1 4 0v2h-4Z'/%3E%3C/svg%3E") !important;
  }
  #pass.wf-input:focus{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234C1D95' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-7-2a2 2 0 0 1 4 0v2h-4Z'/%3E%3C/svg%3E") !important;
  }

  /* opcional: el icono no “tiembla” si el navegador mete un fondo raro */
  .wf-input, .wf-select{ background-color:#fff !important; }
}