/* ========================================================================== 
   WIFICOR ADMIN LOGIN · ENTERPRISE 2026
   Diseño oficial WIFICOR: compacto, limpio, responsive y sin dependencias.
   Mantiene los mismos selectores y no altera autenticación, roles, PWA,
   remember, licencia ni Passkeys.
   ========================================================================== */

:root{
  --wfl-accent:#08aeb0;
  --wfl-accent-hover:#078d8f;
  --wfl-accent-soft:rgba(8,174,176,.12);
  --wfl-ink:#263746;
  --wfl-muted:#6d7f8c;
  --wfl-line:#dce4e8;
  --wfl-line-strong:#cbd6dc;
  --wfl-surface:#ffffff;
  --wfl-surface-soft:#f6f8f9;
  --wfl-control-bg:#ffffff;
  --wfl-control-h:40px;
  --wfl-form-w:372px;
  --wfl-radius:3px;
  --wfl-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wfl-bg-position:center center;
}

html{width:100%;min-height:100%;background:#101a24;color-scheme:light;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body.wfl-body{width:100%;min-width:0;min-height:100vh;min-height:100dvh;margin:0;overflow-x:hidden;overflow-y:auto;color:var(--wfl-ink);background:#eef3f5;font-family:var(--wfl-font);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
body.wfl-body.wfl-modal-open{overflow:hidden}
.wfl-body *,.wfl-body *::before,.wfl-body *::after{box-sizing:border-box}
.wfl-body button,.wfl-body input,.wfl-body select{font:inherit}
.wfl-body button,.wfl-body summary,.wfl-body a{-webkit-tap-highlight-color:transparent}
.wfl-body [hidden]{display:none!important}

/* Escena principal -------------------------------------------------------- */
.wfl-shell,.wfl-shell--immersive{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,46vw);width:100%;min-height:100vh;min-height:100dvh;isolation:isolate;background:#eef3f5}
.wfl-hero,.wfl-hero--fullscreen{position:relative;z-index:0;min-width:0;min-height:100vh;min-height:100dvh;overflow:hidden;color:#fff;background:#14212c;pointer-events:none}
.wfl-hero-media,.wfl-hero-shade,.wfl-hero-grid{position:absolute;inset:0}
.wfl-hero-media{z-index:0;overflow:hidden;background:#14212c}
.wfl-hero-image{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--wfl-bg-position);pointer-events:none;user-select:none;-webkit-user-drag:none;backface-visibility:hidden}
.wfl-hero-image--base{z-index:0}
.wfl-hero-image--motion{display:none!important}
.wfl-hero-shade{z-index:1;background:rgba(13,29,41,.66)}
.wfl-hero-grid{display:none}
.wfl-hero-content{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;width:100%;min-height:100vh;min-height:100dvh;padding:clamp(38px,5vw,74px)}
.wfl-brandline{display:flex;align-items:center;gap:13px;margin-bottom:clamp(54px,8vh,88px)}
.wfl-brandmark,.wfl-mobile-logo{display:grid;place-items:center;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.72);border-radius:4px}
.wfl-brandmark{width:52px;height:52px;flex:0 0 52px;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.wfl-brandmark img,.wfl-mobile-logo img{display:block;width:86%;height:86%;object-fit:contain}
.wfl-brand-name{min-width:0;color:#fff;font-size:19px;font-weight:700;line-height:1.12;letter-spacing:-.25px}
.wfl-brand-name small{display:block;margin-top:5px;color:rgba(255,255,255,.72);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:none}
.wfl-brand-sub-mobile{display:none}
.wfl-hero-mark{width:48px;height:3px;margin-bottom:18px;background:var(--wfl-accent);border-radius:1px}
.wfl-hero-title{max-width:580px;margin:0;color:#fff;font-size:clamp(38px,4.2vw,58px);font-weight:700;line-height:1.02;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 4px 22px rgba(0,0,0,.2)}
.wfl-hero-copy{max-width:560px;margin:18px 0 0;color:rgba(255,255,255,.8);font-size:14px;line-height:1.65}

/* Panel derecho ----------------------------------------------------------- */
.wfl-login-panel,.wfl-login-panel--overlay{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;min-height:100dvh;padding:max(26px,env(safe-area-inset-top,0px)) clamp(28px,4vw,54px) max(26px,env(safe-area-inset-bottom,0px));background:#f3f6f7;pointer-events:none}
.wfl-form-shell,.wfl-form-shell--floating{position:relative;width:min(100%,var(--wfl-form-w));margin:auto;padding:0;color:var(--wfl-ink);background:transparent;border:0;border-radius:0;box-shadow:none;pointer-events:auto}
.wfl-mobile-brand{display:none}
.wfl-form-head{display:flex;align-items:center;gap:10px;min-height:38px;margin:0 58px 18px 0}
.wfl-user-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;color:#fff;background:var(--wfl-accent);border:0;border-radius:3px;box-shadow:none}
.wfl-form-title{margin:0;color:var(--wfl-ink);font-size:21px;font-weight:700;line-height:1.08;letter-spacing:-.4px;text-shadow:none}
.wfl-form-subtitle{margin:4px 0 0;color:var(--wfl-muted);font-size:11.5px;font-weight:400}


/* Formulario sin contenedor ------------------------------------------------
   La jerarquía la dan los controles y el espacio, no una tarjeta blanca. */
.wfl-form-shell>form[data-wfl-login-form]{width:100%}
.wfl-form-shell .wfp-login{width:100%}
.wfl-form-shell .wfl-secure-note,.wfl-form-shell .wfl-form-footer,.wfl-form-shell .wfl-legal{max-width:100%}

/* País -------------------------------------------------------------------- */
.wfl-country-corner{position:absolute;top:4px;right:0;z-index:8}
.wfl-country-picker{position:relative}
.wfl-country-picker>summary{list-style:none}
.wfl-country-picker>summary::-webkit-details-marker{display:none}
.wfl-country-badge{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:30px;padding:4px 6px;gap:4px;color:var(--wfl-ink);cursor:pointer;background:#fff;border:1px solid var(--wfl-line);border-radius:3px;box-shadow:none;transition:border-color .15s ease,background-color .15s ease}
.wfl-country-badge:hover,.wfl-country-badge:focus-visible{background:#f7fbfb;border-color:var(--wfl-accent);outline:none}
.wfl-country-badge.is-locked{cursor:default}
.wfl-country-badge-flag{display:block;width:25px;height:17px;flex:0 0 25px;object-fit:cover;border-radius:2px;border:1px solid rgba(38,55,70,.08)}
.wfl-country-badge-globe{color:var(--wfl-muted)}
.wfl-country-badge-chevron,.wfl-country-badge-lock{display:grid;place-items:center;width:14px;height:14px;flex:0 0 14px;color:var(--wfl-accent);background:transparent;border-radius:0}
.wfl-country-picker[open] .wfl-country-badge-chevron{transform:rotate(180deg)}
.wfl-country-menu{position:absolute;top:calc(100% + 7px);right:0;width:238px;padding:10px;background:#fff;border:1px solid var(--wfl-line);border-radius:4px;box-shadow:0 18px 40px rgba(38,55,70,.14);animation:wfl-country-open .14s ease-out}
@keyframes wfl-country-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wfl-country-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;padding:0 1px 8px;border-bottom:1px solid #e8edef}
.wfl-country-menu-head strong{color:var(--wfl-ink);font-size:10.5px;font-weight:600}
.wfl-country-menu-head span{max-width:106px;overflow:hidden;color:var(--wfl-muted);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
.wfl-country-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.wfl-country-option{appearance:none;display:grid;place-items:center;min-height:47px;padding:5px 3px;gap:3px;color:var(--wfl-muted);cursor:pointer;background:#fff;border:1px solid var(--wfl-line);border-radius:3px;font-size:9px;font-weight:600;transition:border-color .14s ease,background-color .14s ease}
.wfl-country-option img{display:block;width:26px;height:17px;object-fit:cover;border-radius:2px}
.wfl-country-option:hover,.wfl-country-option:focus-visible,.wfl-country-option.is-active{border-color:var(--wfl-accent);background:#f2fbfb;outline:none}

/* Campos ------------------------------------------------------------------ */
.wfl-field{margin:0 0 10px}
.wfl-label{display:block;margin:0 0 5px;color:#455a68;font-size:10.5px;font-weight:600;letter-spacing:0;line-height:1.2;text-transform:none;text-shadow:none}
.wfl-control-wrap{position:relative}
.wfl-control-icon{position:absolute;top:50%;left:12px;z-index:2;display:grid;place-items:center;color:#84949f;pointer-events:none;transform:translateY(-50%)}
.wfl-control{appearance:none;display:block;width:100%;height:var(--wfl-control-h);min-height:var(--wfl-control-h);margin:0;padding:0 38px;color:var(--wfl-ink);background:var(--wfl-control-bg);border:1px solid var(--wfl-line-strong);border-radius:var(--wfl-radius);box-shadow:none;font-size:13px;font-weight:400;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.wfl-control::placeholder{color:#9ba8b0;opacity:1}
.wfl-control:hover{border-color:#b8c7ce;background:#fff}
.wfl-control:focus{border-color:var(--wfl-accent);background:#fff;box-shadow:0 0 0 3px var(--wfl-accent-soft)}
select.wfl-control{padding-right:35px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d7f8c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.wfl-password-toggle{appearance:none;position:absolute;top:50%;right:4px;z-index:3;display:grid;place-items:center;width:32px;height:32px;padding:0;color:#84949f;cursor:pointer;background:transparent;border:0;border-radius:3px;transform:translateY(-50%)}
.wfl-password-toggle:hover,.wfl-password-toggle:focus-visible{color:var(--wfl-accent);background:#f0f8f8;outline:none}
.wfl-eye-off{display:none}.wfl-password-toggle[aria-pressed="true"] .wfl-eye-on{display:none}.wfl-password-toggle[aria-pressed="true"] .wfl-eye-off{display:block}
.wfl-hint{margin:5px 0 0;color:#81919b;font-size:10.5px}
.wfl-extras{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:1px 0 12px}
.wfl-remember{display:inline-flex;align-items:center;min-width:0;gap:7px;color:#586b78;cursor:pointer;font-size:11px;font-weight:500}
.wfl-remember input{width:14px;height:14px;flex:0 0 auto;margin:0;accent-color:var(--wfl-accent)}
.wfl-recover{color:var(--wfl-accent-hover);font-size:11px;font-weight:600;text-decoration:none;text-shadow:none}
.wfl-recover:hover,.wfl-recover:focus-visible{color:var(--wfl-accent);text-decoration:underline;outline:none}
.wfl-submit,.wfl-submit--premium{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;min-height:40px;margin:0;padding:0 16px;gap:9px;color:#fff;cursor:pointer;background:var(--wfl-accent);border:1px solid var(--wfl-accent);border-radius:3px;box-shadow:none;font-size:12.5px;font-weight:600;letter-spacing:0;overflow:hidden;transition:background-color .15s ease,border-color .15s ease,opacity .15s ease}
.wfl-submit:hover{background:var(--wfl-accent-hover);border-color:var(--wfl-accent-hover)}
.wfl-submit:active{transform:none}.wfl-submit:focus-visible{outline:3px solid var(--wfl-accent-soft);outline-offset:2px}.wfl-submit:disabled{cursor:wait;opacity:.64}
.wfl-submit-icon{display:grid;place-items:center}.wfl-submit-loader{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:wfl-spin .7s linear infinite}
.wfl-submit.is-loading .wfl-submit-icon{display:none}.wfl-submit.is-loading .wfl-submit-loader{display:block}
@keyframes wfl-spin{to{transform:rotate(360deg)}}
.wfl-secure-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:11px 0 0;color:#81919b;font-size:10.5px;font-weight:400}.wfl-secure-note svg{color:var(--wfl-accent)}
.wfl-form-footer{margin-top:12px;color:#8a99a2;font-size:10px;line-height:1.55;text-align:center}
.wfl-legal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:6px;color:#a0abb1;font-size:9.5px}.wfl-legal a{color:#748792;text-decoration:none}.wfl-legal a:hover,.wfl-legal a:focus-visible{color:var(--wfl-accent-hover);text-decoration:underline;outline:none}.wfl-legal-separator{opacity:.5}

/* Ayuda ------------------------------------------------------------------- */
.wfl-help{position:fixed;right:18px;bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:9px;padding:7px 7px 7px 11px;background:#fff;border:1px solid var(--wfl-line);border-radius:4px;box-shadow:0 10px 30px rgba(38,55,70,.13)}
.wfl-help-copy{display:flex;flex-direction:column;line-height:1.25}.wfl-help-copy strong{color:var(--wfl-ink);font-size:10.5px;font-weight:600}.wfl-help-copy span{color:var(--wfl-muted);font-size:9.5px}
.wfl-whatsapp{display:grid;place-items:center;width:34px;height:34px;color:#fff;background:var(--wfl-accent);border-radius:3px;text-decoration:none;transition:background-color .15s ease}.wfl-whatsapp:hover,.wfl-whatsapp:focus-visible{background:var(--wfl-accent-hover);outline:none}

/* Modales ----------------------------------------------------------------- */
.wfl-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:18px;background:rgba(15,25,34,.58);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease}
.wfl-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.wfl-modal-card{position:relative;width:min(420px,100%);overflow:hidden;background:#fff;border:1px solid var(--wfl-line);border-radius:4px;box-shadow:0 24px 70px rgba(15,25,34,.22);transform:translateY(7px);transition:transform .15s ease}.wfl-modal.is-open .wfl-modal-card{transform:none}
.wfl-modal-close{appearance:none;position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:31px;height:31px;padding:0;color:#73848f;cursor:pointer;background:#f5f7f8;border:1px solid var(--wfl-line);border-radius:3px}.wfl-modal-close:hover,.wfl-modal-close:focus-visible{color:var(--wfl-accent-hover);border-color:var(--wfl-accent);outline:none}
.wfl-modal-body{padding:25px 24px 19px;text-align:center}.wfl-error-chip{display:inline-flex;align-items:center;gap:5px;margin-bottom:12px;padding:4px 7px;color:#a8363f;background:#fff4f5;border:1px solid #efcfd2;border-radius:3px;font-size:9.5px;font-weight:600}.wfl-modal-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;color:var(--wfl-accent);background:#edfafa;border:1px solid #ccebec;border-radius:50%}.wfl-modal-title{margin:0;color:var(--wfl-ink);font-size:18px;font-weight:700}.wfl-modal-text{max-width:330px;margin:7px auto 0;color:var(--wfl-muted);font-size:12px;line-height:1.55}.wfl-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 24px 20px}.wfl-modal-button{appearance:none;height:38px;padding:0 15px;color:#fff;cursor:pointer;background:var(--wfl-accent);border:1px solid var(--wfl-accent);border-radius:3px;font-size:11.5px;font-weight:600}.wfl-modal-button:hover,.wfl-modal-button:focus-visible{background:var(--wfl-accent-hover);border-color:var(--wfl-accent-hover);outline:none}
.wfl-modal--processing .wfl-modal-card{width:min(350px,100%)}.wfl-modal--processing .wfl-modal-body{padding:25px}.wfl-modal--processing .wfl-modal-icon{background:#edfafa}.wfl-spinner{width:24px;height:24px;border:2px solid #ccebec;border-top-color:var(--wfl-accent);border-radius:50%;animation:wfl-spin .7s linear infinite}

/* PWA --------------------------------------------------------------------- */
.wfl-pwa{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:99980;width:min(430px,calc(100% - 28px));padding:12px 40px 12px 12px;background:#fff;border:1px solid var(--wfl-line);border-radius:4px;box-shadow:0 18px 54px rgba(25,43,55,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,14px);transition:opacity .16s ease,visibility .16s ease,transform .16s ease}.wfl-pwa.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.wfl-pwa-close{appearance:none;position:absolute;top:8px;right:8px;display:grid;place-items:center;width:27px;height:27px;padding:0;color:#70828e;cursor:pointer;background:#f4f7f8;border:1px solid var(--wfl-line);border-radius:3px;font-size:17px;line-height:1}.wfl-pwa-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px}.wfl-pwa-logo{display:grid;place-items:center;width:38px;height:38px;overflow:hidden;background:#fff;border:1px solid var(--wfl-line);border-radius:3px}.wfl-pwa-logo img{display:block;width:32px;height:32px;object-fit:contain}.wfl-pwa-info{min-width:0}.wfl-pwa-name{overflow:hidden;color:var(--wfl-ink);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.wfl-pwa-description{margin-top:2px;color:var(--wfl-muted);font-size:10px}.wfl-pwa-description b{color:var(--wfl-accent-hover);font-weight:600}.wfl-pwa-install{appearance:none;height:34px;padding:0 11px;color:#fff;cursor:pointer;background:var(--wfl-accent);border:1px solid var(--wfl-accent);border-radius:3px;font-size:10.5px;font-weight:600}.wfl-pwa-install:hover{background:var(--wfl-accent-hover);border-color:var(--wfl-accent-hover)}.wfl-pwa-message{display:none;margin-top:9px;padding-top:8px;color:var(--wfl-muted);border-top:1px solid #edf1f2;font-size:10px;line-height:1.45}.wfl-pwa-message:not(:empty){display:block}.wfl-pwa-ios{display:none;margin-top:10px;padding-top:9px;border-top:1px solid #edf1f2}.wfl-pwa-ios.is-visible{display:grid;gap:6px}.wfl-pwa-step{display:flex;align-items:center;gap:7px;color:#657782;font-size:10px}.wfl-pwa-number{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;color:#fff;background:var(--wfl-accent);border-radius:50%;font-size:9px;font-weight:600}

/* Tablet ------------------------------------------------------------------ */
@media(max-width:1100px) and (min-width:901px){
  .wfl-shell,.wfl-shell--immersive{grid-template-columns:minmax(0,1fr) 430px}
  .wfl-hero-content{padding:42px}
  .wfl-hero-title{font-size:42px}
  .wfl-hero-copy{font-size:13px}
  .wfl-login-panel,.wfl-login-panel--overlay{padding:26px 28px}
}

/* Móvil / tablet vertical -------------------------------------------------
   V14:
   - fondo/hero fijo 320 px
   - identidad dentro de la imagen
   - sin identidad duplicada dentro del formulario
   - sin banner PWA inferior en móvil
   ----------------------------------------------------------------------- */
@media(max-width:900px){
  html{background:#eef3f5}
  body.wfl-body{background:#eef3f5}

  .wfl-shell,.wfl-shell--immersive{
    display:flex;
    flex-direction:column;
    min-height:100dvh;
    background:#eef3f5;
  }

  .wfl-hero,.wfl-hero--fullscreen{
    position:relative;
    flex:0 0 290px;
    width:100%;
    min-height:290px;
    height:290px;
    pointer-events:none;
  }

  .wfl-hero-image{
    object-position:center center;
  }

  .wfl-hero-shade{
    background:rgba(13,29,41,.50);
  }

  /*
   * En móvil reutilizamos la identidad oficial del HERO.
   * Solo se muestra logo + empresa + Acceso empresarial.
   */
  .wfl-hero-content{
    display:flex;
    justify-content:flex-start;
    min-height:290px;
    height:290px;
    padding:max(22px,env(safe-area-inset-top,0px)) 20px 20px;
  }

  .wfl-brandline{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
  }

  .wfl-brandmark{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:4px;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
  }

  .wfl-brand-name{
    font-size:15px;
    line-height:1.08;
  }

  .wfl-brand-name small{
    margin-top:4px;
    font-size:10px;
    color:rgba(255,255,255,.76);
  }

  .wfl-brand-sub-desktop{display:none}
  .wfl-brand-sub-mobile{display:inline}

  .wfl-hero-mark,
  .wfl-hero-title,
  .wfl-hero-copy{
    display:none!important;
  }

  .wfl-login-panel,.wfl-login-panel--overlay{
    display:block;
    flex:1;
    width:100%;
    min-height:0;
    padding:24px 26px max(24px,env(safe-area-inset-bottom,0px));
    background:#eef3f5;
  }

  .wfl-form-shell,.wfl-form-shell--floating{
    width:min(100%,460px);
    margin:0 auto;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  /*
   * Esta marca antigua estaba duplicando visualmente
   * WIFICOR PERU / Acceso empresarial dentro del formulario.
   */
  .wfl-mobile-brand{
    display:none!important;
  }

  .wfl-form-head{
    gap:10px;
    margin:0 0 16px;
  }

  .wfl-user-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .wfl-form-title{font-size:20px}
  .wfl-form-subtitle{font-size:11px}

  .wfl-country-corner{
    top:4px;
    right:0;
  }

  .wfl-country-menu{right:0}

  .wfl-help{
    position:static;
    width:min(100% - 52px,460px);
    margin:0 auto 18px;
    justify-content:space-between;
  }

  /*
   * PWA móvil: el aviso propio del login permanece disponible.
   * El JS decide si mostrar instalación nativa o instrucciones manuales.
   */
  .wfl-pwa{
    width:min(430px,calc(100% - 24px));
    bottom:max(12px,env(safe-area-inset-bottom,0px));
    padding:11px 38px 11px 11px;
  }

  .wfl-pwa-row{
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:8px;
  }

  .wfl-pwa-logo{
    width:36px;
    height:36px;
  }

  .wfl-pwa-logo img{
    width:30px;
    height:30px;
  }

  .wfl-pwa-install{
    min-width:82px;
    padding:0 10px;
  }
}

@media(max-width:520px){
  .wfl-hero,.wfl-hero--fullscreen{
    flex-basis:290px;
    height:290px;
    min-height:290px;
  }

  .wfl-hero-content{
    height:290px;
    min-height:290px;
    padding:
      max(22px,env(safe-area-inset-top,0px))
      18px
      18px;
  }

  .wfl-brandmark{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .wfl-brand-name{font-size:14px}

  .wfl-login-panel,.wfl-login-panel--overlay{
    padding:22px 18px max(22px,env(safe-area-inset-bottom,0px));
  }

  .wfl-form-shell,.wfl-form-shell--floating{
    width:100%;
    margin:0;
    padding:0;
  }

  .wfl-country-corner{
    top:2px;
    right:0;
  }

  .wfl-form-head{
    gap:9px;
    margin-bottom:15px;
  }

  .wfl-form-title{font-size:19px}
  .wfl-field{margin-bottom:10px}

  .wfl-control{
    height:40px;
    min-height:40px;
    font-size:13px;
  }

  .wfl-extras{
    align-items:center;
    gap:8px;
    margin-bottom:11px;
  }

  .wfl-remember,.wfl-recover{font-size:10.5px}

  .wfl-submit{
    height:40px;
    min-height:40px;
  }

  .wfl-secure-note{margin-top:10px}

  .wfl-form-footer{
    margin-top:11px;
    font-size:9.5px;
  }

  .wfl-legal{
    font-size:9px;
    margin-top:5px;
  }

  .wfl-country-menu{
    width:min(236px,calc(100vw - 36px));
  }

  .wfl-modal{
    align-items:center;
    padding:14px;
  }

  .wfl-modal-card{
    width:100%;
    max-width:410px;
  }

  .wfl-help{
    width:calc(100% - 36px);
    margin-bottom:12px;
  }
}

@media(max-width:370px){
  .wfl-login-panel,.wfl-login-panel--overlay{
    padding-left:14px;
    padding-right:14px;
  }

  .wfl-brand-name{font-size:13px}
  .wfl-form-title{font-size:18px}
  .wfl-form-subtitle{font-size:10.5px}

  .wfl-extras{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:11px;
  }
}

@media(max-height:720px) and (min-width:901px){
  .wfl-form-shell,.wfl-form-shell--floating{padding:0}
  .wfl-form-head{margin-bottom:13px}.wfl-field{margin-bottom:8px}.wfl-extras{margin-bottom:9px}.wfl-secure-note{margin-top:9px}.wfl-form-footer{margin-top:9px}.wfl-legal{margin-top:4px}
  .wfl-brandline{margin-bottom:36px}.wfl-hero-title{font-size:40px}.wfl-hero-copy{margin-top:14px}
}

@media(prefers-reduced-motion:reduce){
  .wfl-modal,.wfl-modal-card,.wfl-pwa,.wfl-country-menu,.wfl-submit,.wfl-whatsapp{transition:none!important;animation:none!important}
  .wfl-spinner,.wfl-submit-loader{animation-duration:1.4s}
}

@media(display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){.wfl-pwa{display:none!important}}

/* ==========================================================================
   WIFICOR ADMIN V16 · AYUDA FLOTANTE
   "¿Necesitas ayuda?" permanece visible al desplazarse.
   ========================================================================== */
.wfl-help{
  position:fixed!important;
  right:16px!important;
  bottom:max(14px,env(safe-area-inset-bottom,0px))!important;
  left:auto!important;
  width:auto!important;
  margin:0!important;
  z-index:80!important;
}

/* Cuando existe un modal abierto, la ayuda no compite visualmente con él. */
.wfl-modal-open .wfl-help{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  .wfl-help{
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
  }
}

@media(max-width:520px){
  .wfl-help{
    right:10px!important;
    bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
    max-width:calc(100vw - 20px)!important;
  }
}