/* Login SHAOXI Alertas. Se carga después de app.css y solo en el login.
   Usa el prefijo lg- para no chocar con las reglas .login-* que aún usa registro.blade.php. */

.lg-body{--lg-display:'Sora','Plus Jakarta Sans',system-ui,sans-serif;margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--surface);color:var(--ink);font-family:var(--font)}

/* ---------- Panel de marca (siempre oscuro) ---------- */
.lg-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding:2.5rem clamp(2rem,5vw,4.5rem);color:#e8f1f7;background:radial-gradient(720px 420px at 0 0,rgba(34,211,238,.16),transparent 65%),#06121c}
.lg-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../img/circuito.svg") right -300px bottom -240px/820px no-repeat;pointer-events:none}

.lg-top{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.lg-tag{display:none;margin:0;color:#8fa6b8;font-size:.85rem}
.lg-lockup{display:inline-flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none;align-self:flex-start;border-radius:10px}
.lg-lockup img{height:48px;width:auto;display:block}
.lg-lockup span{font:800 1.35rem/1 'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em}
.lg-lockup span+span{font-weight:300;opacity:.8;margin-left:-.35rem}

.lg-hero h1{margin:0 0 1rem;max-width:19ch;font-family:var(--lg-display);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.lg-hero-body>p{margin:0;max-width:44ch;color:#8fa6b8;font-size:1.05rem;line-height:1.55}

/* Ejemplo de semáforo: el momento memorable de la pantalla */
.lg-demo{margin-top:2.25rem;max-width:470px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.04);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lg-demo-head{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;font-size:.85rem;font-weight:600;color:#cfdbe6}
.lg-demo-head small{font-size:.75rem;font-weight:500;color:#8fa6b8}
.lg-demo ul{list-style:none;margin:0;padding:0}
.lg-demo li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;padding:.85rem 1rem;border-top:1px solid rgba(255,255,255,.07)}
.lg-demo b{display:block;font-size:.92rem;font-weight:700;color:#fff}
.lg-demo li small{display:block;font-size:.8rem;color:#8fa6b8;margin-top:.1rem}
.lg-dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.lg-pill{font-size:.78rem;font-weight:700;padding:.28rem .65rem;border-radius:99px;color:var(--c);background:var(--cs);white-space:nowrap}
.lg-demo .is-urgent{--c:#ff7066;--cs:rgba(255,112,102,.14)}
.lg-demo .is-soon{--c:#ffb454;--cs:rgba(255,180,84,.14)}
.lg-demo .is-ok{--c:#4fd18b;--cs:rgba(79,209,139,.14)}

.lg-hero-foot{display:flex;align-items:center;gap:.6rem;max-width:46ch;font-size:.85rem;line-height:1.45;color:#8fa6b8}
.lg-hero-foot .ico{width:18px;height:18px;flex:none;color:#22d3ee}

/* Una sola secuencia al cargar: las filas entran y la urgente late tres veces */
@keyframes lg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lg-pulse{from{box-shadow:0 0 0 0 rgba(255,112,102,.55)}to{box-shadow:0 0 0 12px rgba(255,112,102,0)}}
.lg-demo li{animation:lg-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i,0)*.14s)}
.lg-demo .is-urgent .lg-dot{animation:lg-pulse 1.6s ease-out 1.1s 3}
@media (prefers-reduced-motion:reduce){.lg-demo li,.lg-demo .is-urgent .lg-dot{animation:none}}

/* ---------- Formulario ---------- */
.lg-main{position:relative;display:grid;align-content:center;justify-items:center;padding:2.5rem 1.5rem;background:var(--surface)}
.lg-form{width:100%;max-width:380px}
.lg-form h2{text-align:center;margin:0 0 .5rem;font-family:var(--lg-display);font-size:1.6rem;font-weight:700;line-height:1.2;letter-spacing:-.025em}
.lg-sub{margin:0 0 1.75rem;color:var(--muted);font-size:.95rem;text-align:center}

/* 16px evita el zoom automático de iOS al enfocar un campo */
.lg-form .form-control{min-height:48px;border-radius:12px;font-size:16px}
.lg-form .btn-primary{min-height:48px;border-radius:12px;font-size:1rem;font-weight:700}
.lg-hint{display:flex;align-items:center;gap:.4rem;margin:.45rem 0 0;color:var(--warning);font-size:.82rem}
.lg-hint[hidden]{display:none}
.lg-hint .ico{width:15px;height:15px;flex:none}
.lg-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.lg-label-row .form-label{margin-bottom:.35rem}
.lg-label-row a{font-size:.85rem;font-weight:700}
.lg-volver{display:inline-flex;align-items:center;gap:.35rem;margin:0 0 1.5rem;color:var(--muted);font-size:.9rem;font-weight:600;text-decoration:none}
.lg-volver:hover{color:var(--ink)}
.lg-volver .ico{width:16px;height:16px}
.lg-icono{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:1.25rem}
.lg-icono .ico{width:26px;height:26px}
.lg-icono--ok{background:var(--brand-soft);color:var(--brand)}
.lg-form .btn.w-100{display:flex;align-items:center;justify-content:center;text-decoration:none}
.lg-alt{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
.lg-alt a{display:block;margin-top:.3rem;font-weight:600}
.lg-form a:focus-visible,.lg-volver:focus-visible,.lg-lockup:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.lg-lockup:focus-visible{outline-color:#22d3ee}

/* Logo dentro del formulario (escritorio). En celular el logo ya va arriba en el panel de marca. */
.lg-brand{display:flex;flex-direction:column;align-items:center;margin:0 auto 1.75rem;text-decoration:none;color:var(--ink);border-radius:12px}
.lg-brand img{display:block;width:auto;height:92px;margin:0 auto .65rem;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(6,18,28,.22))}
[data-theme=dark] .lg-brand img{filter:drop-shadow(0 0 8px rgba(34,211,238,.30))}
.lg-brand-w1{font:800 1.9rem/1 'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em}
.lg-brand-w2{font:300 .9rem/1 'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.42em;text-transform:uppercase;margin-top:.5rem;padding-left:.42em}
.lg-brand:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.lg-install{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1.25rem auto 0;padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:600 .85rem/1 var(--font);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.lg-install[hidden]{display:none}
.lg-install .ico{width:16px;height:16px;flex:none}
.lg-install:hover,.lg-install:focus-visible{border-color:var(--brand);color:var(--brand);background:rgba(16,185,129,.06)}
.lg-install:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.lg-foot{display:flex;justify-content:center;align-items:center;gap:.4rem;flex-wrap:wrap;margin:2rem 0 0;font-size:.78rem;color:var(--muted);text-align:center}
.lg-foot img{height:18px;width:auto;display:block}
.lg-foot b{font-weight:600}

.lg-theme{position:fixed;top:calc(1rem + var(--sat));right:1rem;z-index:5}

/* ---------- Celular y tablet angosta ---------- */
@media (max-width:860px){
  .lg-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lg-hero{padding:calc(1.4rem + var(--sat)) 1.25rem 5.7rem;gap:0;text-align:center;background:linear-gradient(180deg,#0b2233 0%,#06121c 100%)}
  .lg-hero::before,.lg-hero-body,.lg-hero-foot{display:none}
  .lg-top{align-items:center;gap:.7rem}
  /* En celular el cubo va en una placa clara que cruza el borde entre la cabecera y el formulario */
  .lg-lockup{flex-direction:column;align-self:center;gap:.5rem}
  .lg-lockup img{display:none}
  .lg-lockup span{font-size:1.75rem}
  .lg-lockup span+span{margin:0;padding-left:.42em;font-size:.8rem;letter-spacing:.42em;text-transform:uppercase;opacity:.85}
  .lg-tag{display:block}
  .lg-main{margin-top:-1.75rem;border-radius:28px 28px 0 0;align-content:start;padding:calc(44px + 1.1rem) 1.25rem calc(2rem + var(--sab));box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  .lg-brand{position:absolute;top:-44px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:auto;height:auto;margin:0;border-radius:0;background:none;box-shadow:none}
  .lg-brand img{height:84px;margin:0;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 6px 12px rgba(0,0,0,.35))}
  .lg-brand-w1,.lg-brand-w2{display:none}
  [data-theme=dark] .lg-brand img{filter:drop-shadow(0 0 10px rgba(34,211,238,.45)) drop-shadow(0 6px 12px rgba(0,0,0,.45))}
  .lg-form h2{font-size:1.4rem}
  .lg-theme{color:#e8f1f7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
}

/* ---------- Adaptación a cualquier pantalla ---------- */
/* Celulares muy angostos */
@media (max-width:360px){
  .lg-hero{padding-left:1rem;padding-right:1rem}
  .lg-main{padding-left:1rem;padding-right:1rem}
  .lg-form h2{font-size:1.25rem}
  .lg-sub{margin-bottom:1.25rem;font-size:.9rem}
}
/* Tablet vertical: formulario un poco más ancho y cabecera más grande */
@media (min-width:600px) and (max-width:860px){
  .lg-form{max-width:440px}
  .lg-hero{padding-bottom:6.8rem}
  .lg-main{padding-top:calc(52px + 1.25rem)}
  .lg-brand{top:-60px}
  .lg-brand img{height:100px}
}
/* Celulares y tablets de poca altura: cabecera compacta para que el formulario se vea sin scroll */
@media (max-width:860px) and (max-height:700px){
  .lg-hero{padding-top:calc(.9rem + var(--sat));padding-bottom:4.8rem}
  .lg-lockup{gap:.35rem}
  .lg-lockup span{font-size:1.4rem}
  .lg-top{gap:.45rem}
  .lg-tag{font-size:.8rem}
  .lg-main{padding-top:calc(36px + .9rem)}
  .lg-brand{top:-44px}
  .lg-brand img{height:68px}
}
/* Celular horizontal */
@media (max-width:960px) and (max-height:520px){
  .lg-hero{padding:calc(.6rem + var(--sat)) max(1rem,env(safe-area-inset-right)) 3.6rem max(1rem,env(safe-area-inset-left))}
  .lg-top{flex-direction:row;justify-content:center}
  .lg-lockup{flex-direction:row;gap:.6rem}
  .lg-lockup span{font-size:1.1rem}
  .lg-lockup span+span{font-size:.68rem;padding-left:0}
  .lg-tag{display:none}
  .lg-main{margin-top:-1.2rem;padding-top:calc(28px + .7rem)}
  .lg-brand{top:-34px}
  .lg-brand img{height:54px}
  .lg-form h2{font-size:1.2rem}
  .lg-sub{margin-bottom:1rem}
}
/* Laptops de poca altura (escritorio): menos aire y sin la tarjeta de ejemplo */
@media (min-width:861px) and (max-height:780px){
  .lg-hero{padding-top:1.5rem;padding-bottom:1.5rem;gap:1.25rem}
  .lg-hero h1{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.6rem}
  .lg-main{padding-top:1.25rem;padding-bottom:1.25rem}
  .lg-brand{margin-bottom:1.1rem}
  .lg-brand img{height:68px}
    .lg-sub{margin-bottom:1.1rem}
}
@media (min-width:861px) and (max-height:700px){ .lg-demo{display:none} }
/* Monitores grandes */
@media (min-width:1700px){
  .lg-form{max-width:430px}
  .lg-hero h1{font-size:3.2rem}
  .lg-hero-body>p{font-size:1.15rem}
}

/* App instalada en PC con superposición de controles de ventana */
@media (display-mode:window-controls-overlay){.lg-theme{top:calc(1rem + var(--tb-h))}}