/* FMLABTECH — Login screens (glassmorphism + split layout) */

*,*::before,*::after{box-sizing:border-box}
.login-screen{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  background:linear-gradient(135deg,#a8c0e6 0%,#e8b8c9 50%,#f0d4c0 100%);
  padding:0 24px 32px;
  color:#1f2937;
  -webkit-font-smoothing:antialiased;
}
.login-screen > .login-card{margin:24px auto auto;flex:1 0 auto;align-self:center;width:100%}

/* TOP NAV — transparente, toma el color del fondo */
.login-topbar{
  position:sticky;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 40px;margin:0;width:100%;max-width:none;
  background:#ffffff66;backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid #ffffff88;
  box-shadow:0 4px 18px #0b12200a;
}
@media(max-width:780px){.login-topbar{padding:12px 16px}}
.login-topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0b1220;font-weight:800;letter-spacing:.04em}
.login-topbar__brand img{height:52px;width:auto;transition:transform .25s ease}
.login-topbar__brand:hover img{transform:scale(1.05)}
@media(max-width:780px){.login-topbar__brand img{height:38px}}
.login-topbar__nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.login-topbar__nav a{
  color:#0b1220;text-decoration:none;font-size:20px;font-weight:600;
  padding:12px 20px;border-radius:999px;
  transition:background .28s ease, color .28s ease, transform .15s ease
}
@media(max-width:780px){.login-topbar__nav a{font-size:16px;padding:10px 14px}}
.login-topbar__nav a:hover{
  background:#0b12201a;       /* gris suave (negro 10%) */
  color:#0b1220;
  transform:translateY(-1px);
}
/* CTAs (Clientes / Trabajadores / Admin / Mi panel / Salir) */
.login-topbar__nav a.cta,
.login-topbar__nav a.cta.blue,
.login-topbar__nav a.cta.green{
  background:transparent;color:#0b1220;border:0;backdrop-filter:none;-webkit-backdrop-filter:none
}
.login-topbar__nav a.cta:hover,
.login-topbar__nav a.cta.blue:hover,
.login-topbar__nav a.cta.green:hover{
  background:#0b12201a;color:#0b1220;transform:translateY(-1px)
}
/* Página actual / link seleccionado → fondo oscuro, texto BLANCO */
.login-topbar__nav a.active,
.login-topbar__nav a.cta.active{
  background:#0b1220;color:#fff;
}
.login-topbar__nav a.active:hover,
.login-topbar__nav a.cta.active:hover{
  background:#0b1220;color:#fff;filter:brightness(1.1)
}
.login-topbar__toggle{
  display:none;background:#0b1220;color:#fff;border:0;
  width:38px;height:38px;border-radius:10px;font-size:18px;cursor:pointer
}

/* SHOP MEGA-MENU CASCADE — Tienda */
.shopmenu{position:relative;display:inline-flex;align-items:center}
.shopmenu__trigger{
  color:#0b1220;text-decoration:none;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;
  transition:background .28s ease, color .28s ease, transform .15s ease;
  cursor:pointer
}
.shopmenu__trigger:hover{background:#0b12201a;transform:translateY(-1px)}
.shopmenu__chevron{font-size:10px;opacity:.7;transition:transform .25s}
.shopmenu:hover .shopmenu__chevron,.shopmenu:focus-within .shopmenu__chevron{transform:rotate(180deg)}

.shopmenu__panel{
  position:absolute;top:calc(100% + 6px);right:0;
  background:#ffffffee;backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid #ffffff88;border-radius:16px;
  box-shadow:0 18px 50px #0002;
  padding:8px;min-width:280px;max-width:920px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:60;
}
.shopmenu:hover > .shopmenu__panel,
.shopmenu:focus-within > .shopmenu__panel{
  opacity:1;visibility:visible;transform:translateY(0)
}

.shopmenu__l1{list-style:none;margin:0;padding:0;max-height:78vh;overflow-y:auto}
.shopmenu__l1::-webkit-scrollbar{width:6px}
.shopmenu__l1::-webkit-scrollbar-thumb{background:#0b122022;border-radius:6px}

.shopmenu__item{position:relative}
.shopmenu__l1-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;border-radius:10px;
  font-size:13px;font-weight:600;color:#0b1220;text-decoration:none;
  transition:background .2s;white-space:nowrap;
}
.shopmenu__l1-link:hover,
.shopmenu__item:hover > .shopmenu__l1-link,
.shopmenu__item:focus-within > .shopmenu__l1-link{background:#0b12200d;color:#0b1220}
.shopmenu__arrow{font-size:14px;opacity:.5;transition:opacity .2s, transform .2s}
.shopmenu__item:hover .shopmenu__arrow{opacity:1;transform:translateX(2px)}

/* Cascada nivel 2 — aparece a la izquierda del panel (porque el panel está pegado a la derecha) */
.shopmenu__l2{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:0;right:100%;
  width:300px;max-height:78vh;overflow-y:auto;
  background:#ffffffee;backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid #ffffff88;border-radius:16px;
  box-shadow:0 18px 50px #0002;
  opacity:0;visibility:hidden;transform:translateX(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  margin-right:6px;
}
.shopmenu__item:hover > .shopmenu__l2,
.shopmenu__item:focus-within > .shopmenu__l2{
  opacity:1;visibility:visible;transform:translateX(0)
}
.shopmenu__l2::-webkit-scrollbar{width:6px}
.shopmenu__l2::-webkit-scrollbar-thumb{background:#0b122022;border-radius:6px}
.shopmenu__l2 li a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:8px;
  font-size:13px;color:#0b1220;text-decoration:none;
  transition:background .2s
}
.shopmenu__l2 li a:hover,
.shopmenu__item--l2:hover > a,
.shopmenu__item--l2:focus-within > a{background:#0b12200d}
.shopmenu__l2-head{
  border-bottom:1px solid #0b122014;margin-bottom:4px;padding-bottom:4px
}
.shopmenu__l2-head a{
  font-weight:700;color:#0b1220 !important;font-size:12px;text-transform:uppercase;letter-spacing:.04em
}

/* Cascada nivel 3 — aparece a la izquierda del nivel 2 */
.shopmenu__l3{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:-8px;right:100%;
  width:300px;max-height:78vh;overflow-y:auto;
  background:#ffffffee;backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid #ffffff88;border-radius:16px;
  box-shadow:0 18px 50px #0002;
  opacity:0;visibility:hidden;transform:translateX(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  margin-right:6px;
}
.shopmenu__item--l2:hover > .shopmenu__l3,
.shopmenu__item--l2:focus-within > .shopmenu__l3{
  opacity:1;visibility:visible;transform:translateX(0)
}
.shopmenu__l3::-webkit-scrollbar{width:6px}
.shopmenu__l3::-webkit-scrollbar-thumb{background:#0b122022;border-radius:6px}
.shopmenu__l3 li a{
  display:block;padding:8px 12px;border-radius:8px;
  font-size:12.5px;color:#0b1220;text-decoration:none;
  transition:background .2s
}
.shopmenu__l3 li a:hover{background:#0b12200d}

/* En pantallas medianas, el nivel 3 abre hacia la DERECHA del nivel 2 para
   evitar que la cascada de 3 paneles salga por el borde izquierdo. */
@media(min-width:781px) and (max-width:1280px){
  .shopmenu__l3{
    right:auto;left:100%;
    margin-right:0;margin-left:6px;
    transform:translateX(-8px);
  }
  .shopmenu__item--l2:hover > .shopmenu__l3,
  .shopmenu__item--l2:focus-within > .shopmenu__l3{
    transform:translateX(0);
  }
}

/* Mobile: el cascada se vuelve acordeón */
@media(max-width:780px){
  .shopmenu{display:block;width:100%}
  .shopmenu__trigger{display:flex;justify-content:center}
  .shopmenu__panel{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;backdrop-filter:none;
    padding:0;min-width:0;max-width:none;
  }
  .shopmenu__l1{max-height:none}
  .shopmenu__l1-link{justify-content:center}
  .shopmenu__arrow{display:none}
  .shopmenu__l2,
  .shopmenu__l3{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;backdrop-filter:none;
    width:auto;max-height:none;margin:0;padding:0 0 8px 16px;
    display:none;
  }
  .shopmenu__item:hover > .shopmenu__l2,
  .shopmenu__item:focus-within > .shopmenu__l2,
  .shopmenu__item.is-open > .shopmenu__l2{display:block}
  .shopmenu__item--l2:hover > .shopmenu__l3,
  .shopmenu__item--l2:focus-within > .shopmenu__l3,
  .shopmenu__item--l2.is-open > .shopmenu__l3{display:block}
}

@media(max-width:780px){
  .login-topbar{flex-wrap:wrap;padding:10px 14px}
  .login-topbar__toggle{display:inline-flex;align-items:center;justify-content:center}
  .login-topbar__nav{
    display:none;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:4px;padding-top:8px;border-top:1px solid #0b122022;margin-top:8px
  }
  .login-topbar.is-open .login-topbar__nav{display:flex}
  .login-topbar__nav a{padding:10px 12px;text-align:center}
}

/* split panel */
.login-card{
  display:grid;grid-template-columns:1fr 1fr;
  width:100%;max-width:1080px;min-height:620px;
  border-radius:28px;overflow:hidden;
  background:#000;
  box-shadow:0 30px 80px #0003, 0 8px 24px #0002;
}

/* left side — big centered logo (black on light bg) */
.login-side{
  position:relative;color:#111;padding:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;
  overflow:hidden;
  background:#ffffff;
}
.login-side__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;
  opacity:.06;
}
.login-side > *{position:relative;z-index:1}

.login-brand{
  display:flex;align-items:center;justify-content:center;
  width:100%;flex:1;min-height:0;
}
.login-brand img{
  display:block;
  width:auto;height:auto;
  max-width:90%;max-height:60vh;
  object-fit:contain;
  filter:none;
}

.login-hero{text-align:center;color:#111}
.login-hero h1{
  font-size:clamp(28px,3.4vw,44px);
  line-height:1;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 12px;
  text-transform:uppercase;
}
.login-hero p.lead{font-size:15px;margin:0 0 6px;font-weight:600;opacity:.85}
.login-hero p.sub{font-size:13px;margin:0 auto;opacity:.7;max-width:42ch;line-height:1.5}

/* right side — glassmorphism form */
.login-panel{
  position:relative;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-left:1px solid #ffffff33;
  padding:60px 48px;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.login-panel::before{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff10 0%, #ffffff05 100%);z-index:0;pointer-events:none
}
.login-panel > *{position:relative;z-index:1}

.login-tag{
  display:inline-block;align-self:flex-start;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:#ffffff44;color:#fff;border:1px solid #ffffff66;
  padding:6px 12px;border-radius:999px;margin-bottom:6px;font-weight:600;
}

.login-panel h2{
  font-size:26px;font-weight:700;margin:0 0 4px;color:#fff;letter-spacing:-.01em
}
.login-panel h2 + p{margin:0 0 6px;font-size:13px;color:#ffffffcc}

.login-field{display:flex;flex-direction:column;gap:6px}
.login-field label{font-size:13px;font-weight:600;color:#fff}
.login-field input{
  width:100%;background:#ffffff;border:0;border-radius:12px;
  padding:14px 16px;font-size:15px;color:#1f2937;
  box-shadow:0 1px 0 #00000010 inset, 0 1px 2px #0001;
  outline:none;transition:box-shadow .2s
}
.login-field input:focus{box-shadow:0 0 0 3px #ffffff55, 0 1px 2px #0001}

.login-row-end{display:flex;justify-content:flex-end;margin-top:4px}
.login-row-end a{font-size:13px;color:#fff;text-decoration:underline;opacity:.9}
.login-row-end a:hover{opacity:1}

.login-submit{
  width:100%;border:0;border-radius:12px;
  padding:14px 16px;font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  box-shadow:0 8px 24px #2563eb55;
  transition:transform .15s, filter .2s, box-shadow .2s
}
.login-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.login-submit:active{transform:translateY(0)}
.login-submit.green{background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 8px 24px #16a34a55}
.login-submit.dark{background:linear-gradient(180deg,#374151,#111827);box-shadow:0 8px 24px #11182755}

.login-divider{
  display:flex;align-items:center;gap:12px;color:#ffffffaa;font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin:4px 0
}
.login-divider::before,.login-divider::after{
  content:"";flex:1;height:1px;background:#ffffff44
}

.login-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:#fff;color:#1f2937;border:0;border-radius:12px;
  padding:12px 16px;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 12px #0001
}
.login-google:hover{background:#f9fafb}
.login-google svg{width:18px;height:18px}

.login-bottom{text-align:center;font-size:13px;color:#ffffffcc;margin-top:6px}
.login-bottom a{color:#fff;font-weight:700;text-decoration:underline}
/* Portales (botones grandes a los 3 logins) */
.login-portals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px
}
.login-portal{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 6px;border:1px solid #ffffff44;border-radius:12px;
  background:#ffffff14;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;text-decoration:none;font-size:12px;font-weight:600;
  transition:background .22s ease, transform .15s ease, border-color .22s
}
.login-portal:hover{background:#ffffff2a;transform:translateY(-2px);border-color:#ffffff88;opacity:1}
.login-portal.active{background:#fff;color:#0b1220;border-color:#fff}
.login-portal__emoji{font-size:22px;line-height:1;margin-bottom:4px}
.login-portal__label{font-size:12px;letter-spacing:.04em;text-transform:uppercase}

.login-alert{
  background:#ffffffcc;color:#7f1d1d;border-left:3px solid #dc2626;
  padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:4px
}
.login-alert.ok{color:#065f46;border-left-color:#16a34a}

/* old floating back button — no longer used (we have full topbar now) */
.login-back{display:none}

/* responsive */
@media(max-width:860px){
  .login-card{grid-template-columns:1fr;max-width:560px}
  .login-side{padding:40px 28px 60px;min-height:240px}
  .login-panel{padding:40px 28px;border-left:0;border-top:1px solid #ffffff33}
  .login-hero h1{font-size:42px}
}
@media(max-width:480px){
  .login-screen{padding:0}
  .login-card{border-radius:0;min-height:100vh}
}