:root{
  --wificor:#0f766e;
  --wificor2:#0b5f59;
  --txt:#ffffff;
  --muted:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.16);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

body{
  display:flex; align-items:center; justify-content:center;
  background-color:#0e141a;

  /* ⚠️ IMPORTANTE: en móvil “fixed” causa oscurecido/ghosting */
  background-image:url("uploads/FONDO_SISTEMA_LOIGN.jpg");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;

  padding:14px;                 /* ✅ un poco más compacto */
  position:relative;
  overflow:hidden;
}

/* Partículas detrás de TODO */
#fx-particles{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  will-change: transform;
}

/* Velo suave (desktop) */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:1; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 50% 26%,
      rgba(0,0,0,.05),
      rgba(0,0,0,.52)
    );
}

/* Contenedor (sin “card blanco”) */
.card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:500px;             /* ✅ compacto, no aplasta */
  background: transparent;
  border:0;
  padding:0;
  margin:0;
}

.login-box{
  width:100%;
  max-width:440px;             /* ✅ compacto */
  margin:0 auto;
  text-align:center;
}

/* Logo que se note SIEMPRE */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;                     /* ✅ menos gap */
  margin-bottom:8px;           /* ✅ menos margen */
}
.brand .logo-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;            /* ✅ compacto */
  border-radius:14px;
}
.brand .logo-wrap::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:16px;
  background: radial-gradient(140px 90px at 50% 40%, rgba(255,255,255,.14), rgba(255,255,255,0));
  filter: blur(2px);
}
.brand img{
  position:relative;
  width:150px;                 /* ✅ más compacto */
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 16px 34px rgba(0,0,0,.52))
    drop-shadow(0 0 10px rgba(0,0,0,.20));
}
.brand .sub{
  font-size:11px;
  color:rgba(255,255,255,.78);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
  margin-top:2px;
}

/* País + banderas */
.country{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 10px;           /* ✅ menos margen */
}
.country .info{
  font-size:12px;
  color:rgba(255,255,255,.82);
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
  white-space:nowrap;
}
.flags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.flagbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:20px;     /* ✅ compacto */
  border:1px solid rgba(255,255,255,.20);
  border-radius:7px;
  padding:0;
  background: rgba(255,255,255,.08);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.flagbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.flagbtn img{ width:100%; height:auto; border-radius:6px; display:block; }
.flagbtn.active{ outline:2px solid rgba(15,118,110,.95); outline-offset:1px; }

/* Errores */
.alert{
  max-width:440px;
  margin:8px auto 10px;
  border:1px solid rgba(255,90,90,.35);
  background: rgba(120,0,0,.22);
  color:#fff;
  padding:9px 11px;
  border-radius:10px;
  font-size:12.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  text-align:left;
}

/* Form */
.form{
  width:100%;
  max-width:440px;
  margin:0 auto;
  display:grid;
  gap:10px;                    /* ✅ menos gap */
  text-align:left;
}

/* Inputs “claros” */
.input{
  width:100%;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  padding:11px 14px;           /* ✅ compacto */
  font-size:14px;

  background: rgba(255,255,255,.92);
  color:#0b1220;
  outline:none;

  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.input::placeholder{ color: rgba(15,23,42,.55); }
.input:focus{
  border-color: rgba(15,118,110,.75);
  box-shadow: 0 0 0 3px rgba(15,118,110,.16), 0 10px 26px rgba(0,0,0,.16);
}

/* ✅ SELECT: MISMO TAMAÑO que .input (evita “gordo”) */
select.input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  height:42px;                 /* ✅ clave: altura fija */
  line-height:42px;            /* ✅ texto centrado */
  padding-top:0;
  padding-bottom:0;

  /* flecha */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,18,32,.55) 50%),
    linear-gradient(135deg, rgba(11,18,32,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}
select.input option{ color:#111; }

/* Hint del selector (si lo usas en el view) */
.role-hint{
  margin-top:4px;
  font-size:11.5px;
  opacity:.82;
  font-weight:800;
  text-align:left;
  color: rgba(255,255,255,.78);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* Links */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
}
.row a{ color: rgba(200,255,245,.98); text-decoration:none; font-weight:800; }
.row a:hover{ text-decoration:underline; }
input[type="checkbox"]{ accent-color: var(--wificor); transform: translateY(1px); }

/* Botón verde neto */
.btn{
  width:100%;
  border:0;
  border-radius:6px;
  padding:11px 14px;           /* ✅ compacto */
  font-weight:900;
  letter-spacing:.04em;
  font-size:14px;              /* ✅ compacto */
  background: var(--wificor);
  color:#fff;
  cursor:pointer;
  box-shadow: 0 16px 36px rgba(15,118,110,.22), 0 10px 26px rgba(0,0,0,.16);
}
.btn:hover{ background: var(--wificor2); }
.btn:active{ transform: translateY(1px); }

/* Footer + mini loader */
.footer-wrap{
  width:100%;
  max-width:440px;
  margin:12px auto 0;
  text-align:left;
  color: rgba(255,255,255,.68);
  font-size:11.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.footer-wrap .recover-mini{
  margin:10px 0 8px;
  display:block;
  color: rgba(200,255,245,.98);
  text-decoration:none;
  font-weight:700;
}
.footer-wrap .recover-mini:hover{ text-decoration:underline; }

.mini-loader{
  margin-top:7px;
  height:3px;
  width:110px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  overflow:hidden;
  position:relative;
  opacity:0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
}
body.is-loading .mini-loader{
  opacity:1;
  transform: translateY(0);
}
.mini-loader::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(15,118,110,0) 0%, rgba(15,118,110,.95) 45%, rgba(15,118,110,0) 100%);
  transform: translateX(-120%);
  animation: miniLoad 0.78s linear infinite;
}
@keyframes miniLoad{ to{ transform: translateX(120%); } }

/* FAB SOPORTE */
.wf-fab{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wf-fab a{
  width:48px; height:48px;     /* ✅ compacto */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(10,14,18,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  text-decoration:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.wf-fab a:hover{
  transform: translateY(-1px);
  background: rgba(10,14,18,.58);
  border-color: rgba(255,255,255,.26);
}
.wf-fab svg{ width:21px; height:21px; display:block; }

.wf-fab .wf-fab-wa{
  background: rgba(15,118,110,.38);
  border-color: rgba(15,118,110,.55);
}
.wf-fab .wf-fab-wa:hover{ background: rgba(15,118,110,.52); }

.wf-fab .wf-fab-fb{
  background: rgba(24,119,242,.32);
  border-color: rgba(24,119,242,.55);
}
.wf-fab .wf-fab-fb:hover{ background: rgba(24,119,242,.46); }

/* FIX MÓVIL */
@media (max-width:520px){
  .login-box{ max-width:360px; }
  .brand img{ width:140px; }
  .form, .footer-wrap{ max-width:360px; }

  /* clave: scroll en móvil */
  body{ background-attachment: scroll; }

  body::before{
    background:
      radial-gradient(820px 520px at 50% 22%,
        rgba(0,0,0,.04),
        rgba(0,0,0,.40)
      );
  }

  .wf-fab{ right:12px; bottom:12px; }

  /* en móvil el select puede verse “alto” por font-smoothing, se fuerza */
  select.input{ height:40px; line-height:40px; }
}

/* iOS/Safari: fuerza scroll (evita bugs de fixed) */
@supports (-webkit-touch-callout: none){
  body{ background-attachment: scroll; }
}