/* ═══ XAMOX · Estilos con soporte de tema dinámico por nicho ═══ */
:root{
  /* Galáctico por defecto (pre-auth) */
  --g-bg: #030b1f;
  --g-bg2: #0a1429;
  --g-bg3: #132244;
  --g-p: #25d9ff;
  --g-a: #7f49ff;
  --g-t: #e6f1ff;
  --g-m: #8ea5c9;
  /* Nicho (se sobreescriben via JS) */
  --nt-bg: #030b1f;
  --nt-bg2: #0a1429;
  --nt-bg3: #132244;
  --nt-primary: #25d9ff;
  --nt-accent: #7f49ff;
  --nt-text: #e6f1ff;
  --nt-muted: #8ea5c9;
  --nt-font: 'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: var(--nt-font);
  background: var(--nt-bg);
  color: var(--nt-text);
  overflow: hidden;
  transition: background .6s, color .3s;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:.95rem;outline:none}

/* Starfield */
#stars{position:fixed;inset:0;z-index:0;opacity:.35;pointer-events:none}

/* ═══ AUTH ═══ */
.auth-screen{
  position:relative; z-index:2;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(ellipse 800px 600px at 50% 20%, color-mix(in srgb, var(--g-p) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 800px 600px at 80% 80%, color-mix(in srgb, var(--g-a) 18%, transparent), transparent 60%),
    var(--g-bg);
}
.auth-card{
  width:100%; max-width:440px;
  padding:40px 32px;
  background: color-mix(in srgb, var(--g-bg2) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--g-p) 30%, transparent);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.auth-logo{height:56px;display:block;margin:0 auto 22px;filter:drop-shadow(0 0 16px color-mix(in srgb, var(--g-p) 50%, transparent))}
.auth-title{
  font-family:var(--nt-font);
  font-size:1.5rem; font-weight:800;
  text-align:center; letter-spacing:-.01em; color: var(--g-t);
}
.auth-title em{font-style:normal;background:linear-gradient(110deg,var(--g-p),var(--g-a));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-sub{text-align:center;color:var(--g-m);font-size:.9rem;margin:6px 0 26px}

.btn-google{
  width:100%; padding:13px; border-radius:11px;
  background:#fff; color:#1f1f1f; font-weight:600; font-size:.95rem;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition: transform .2s, box-shadow .2s;
}
.btn-google:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3)}

.auth-or{text-align:center;margin:18px 0;position:relative;color:var(--g-m);font-size:.78rem}
.auth-or::before,.auth-or::after{content:"";position:absolute;top:50%;width:40%;height:1px;background:color-mix(in srgb, var(--g-p) 22%, transparent)}
.auth-or::before{left:0} .auth-or::after{right:0}
.auth-or span{background: var(--g-bg2); padding:0 10px; position:relative; z-index:2}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--g-m);font-weight:600;letter-spacing:.02em}
.auth-form input,.auth-form select{
  padding:12px 14px; border-radius:10px;
  background: color-mix(in srgb, var(--g-bg) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--g-p) 25%, transparent);
  color: var(--g-t); font-size:.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus,.auth-form select:focus{
  border-color: var(--g-p);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-p) 20%, transparent);
}
.pwd-meter{display:block;height:4px;background:color-mix(in srgb,var(--g-p) 15%,transparent);border-radius:2px;margin-top:6px;overflow:hidden;position:relative}
.pwd-meter::after{content:"";position:absolute;inset:0;width:var(--s,0%);background:linear-gradient(90deg,#ff6b9b,#ffd166,#6bffcc);transition:width .3s}

.btn-primary{
  padding:13px; border-radius:11px;
  background: linear-gradient(110deg, var(--g-p), var(--g-a));
  color: var(--g-bg); font-weight:800; font-size:.95rem;
  letter-spacing:.02em; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--g-p) 35%, transparent);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px color-mix(in srgb, var(--g-p) 45%, transparent)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}

.auth-err{color:#ff6b9b;font-size:.82rem;text-align:center;min-height:1em}
.auth-switch{text-align:center;margin-top:20px;color:var(--g-m);font-size:.84rem}
.auth-switch a{color:var(--g-p);font-weight:600}

/* ═══ APP SHELL ═══ */
#app{
  display:grid; grid-template-columns: 240px 1fr;
  height:100vh; position:relative; z-index:2;
  background: var(--nt-bg);
  background-image:
    radial-gradient(ellipse 1000px 600px at 10% 0%, color-mix(in srgb, var(--nt-primary) 12%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 700px at 90% 100%, color-mix(in srgb, var(--nt-accent) 14%, transparent), transparent 60%);
}

.side{
  background: color-mix(in srgb, var(--nt-bg2) 88%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--nt-primary) 20%, transparent);
  backdrop-filter: blur(16px);
  padding: 18px 14px; display:flex; flex-direction:column; gap:14px;
  overflow-y:auto;
}
.side-logo{text-align:center;padding:8px 0 14px;border-bottom:1px solid color-mix(in srgb, var(--nt-primary) 15%, transparent)}
.side-logo img{height:42px;filter:drop-shadow(0 0 12px color-mix(in srgb, var(--nt-primary) 40%, transparent))}
.side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side-nav a{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  border-radius:10px; font-size:.88rem; font-weight:600;
  color: var(--nt-text); opacity:.75; cursor:pointer;
  border:1px solid transparent; transition: all .2s;
}
.side-nav a:hover{opacity:1; background: color-mix(in srgb, var(--nt-primary) 10%, transparent)}
.side-nav a.on{
  background: linear-gradient(110deg, color-mix(in srgb, var(--nt-primary) 20%, transparent), color-mix(in srgb, var(--nt-accent) 18%, transparent));
  border-color: color-mix(in srgb, var(--nt-primary) 40%, transparent);
  opacity:1; color: var(--nt-text);
}
.side-foot{border-top:1px solid color-mix(in srgb, var(--nt-primary) 15%, transparent);padding-top:12px}
.who{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;margin-bottom:8px}
.who-av{
  width:36px;height:36px;border-radius:50%;
  background: linear-gradient(135deg, var(--nt-primary), var(--nt-accent));
  color: var(--nt-bg); font-weight:800; font-size:.82rem;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
  font-family:var(--nt-font);
}
.who b{display:block;font-size:.84rem;color:var(--nt-text)}
.who small{display:block;font-size:.68rem;color:var(--nt-muted)}
.btn-logout{
  width:100%; padding:9px; border-radius:9px; font-size:.78rem; font-weight:700;
  background: color-mix(in srgb, var(--nt-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 25%, transparent);
  color: var(--nt-muted); transition: all .2s;
}
.btn-logout:hover{color:var(--nt-text); border-color: color-mix(in srgb, var(--nt-primary) 50%, transparent)}

.main{display:flex;flex-direction:column;overflow:hidden}
.top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--nt-primary) 15%, transparent);
  background: color-mix(in srgb, var(--nt-bg2) 50%, transparent);
  backdrop-filter: blur(10px);
}
.top h1{font-family:var(--nt-font);font-size:1.4rem;font-weight:800;color:var(--nt-text);letter-spacing:-.01em}
.badge{
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--nt-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 40%, transparent);
  color: var(--nt-primary); font-size: .72rem; font-weight: 700;
  font-family: var(--nt-font); letter-spacing:.06em;
}

.view{flex:1; overflow-y:auto; padding: 24px}

/* Cards + grids */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:26px}
.kpi{
  padding:18px; border-radius:14px;
  background: color-mix(in srgb, var(--nt-bg2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 20%, transparent);
  backdrop-filter: blur(10px);
}
.kpi b{display:block;font-family:var(--nt-font);font-size:1.6rem;color:var(--nt-primary);line-height:1;margin-bottom:6px}
.kpi span{color:var(--nt-muted);font-size:.8rem;font-weight:500}

.panel{
  padding:20px; border-radius:14px;
  background: color-mix(in srgb, var(--nt-bg2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 20%, transparent);
  backdrop-filter: blur(10px);
  margin-bottom: 18px;
}
.panel h3{font-size:1rem;font-weight:700;margin-bottom:14px;color:var(--nt-text);display:flex;align-items:center;gap:8px}
.panel h3::before{content:"";width:3px;height:15px;background:linear-gradient(180deg,var(--nt-primary),var(--nt-accent));border-radius:2px}

/* Table */
table.list{width:100%;border-collapse:collapse;font-size:.88rem}
table.list th{text-align:left;padding:10px 12px;border-bottom:1px solid color-mix(in srgb, var(--nt-primary) 22%, transparent);color:var(--nt-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-family:var(--nt-font)}
table.list td{padding:12px;border-bottom:1px solid color-mix(in srgb, var(--nt-primary) 10%, transparent)}
table.list tr:hover td{background:color-mix(in srgb, var(--nt-primary) 6%, transparent)}
.tag{
  display:inline-block; padding:3px 9px; border-radius:999px; font-size:.66rem; font-weight:700;
  background: color-mix(in srgb, var(--nt-primary) 18%, transparent);
  color: var(--nt-primary);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 35%, transparent);
}

/* Forms in app */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-row label{display:flex;flex-direction:column;gap:4px;font-size:.76rem;color:var(--nt-muted);font-weight:600}
.form-row input,.form-row select,.form-row textarea{
  padding:10px 12px; border-radius:9px;
  background: color-mix(in srgb, var(--nt-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 20%, transparent);
  color: var(--nt-text);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color: var(--nt-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nt-primary) 18%, transparent);
}
.btn-row{display:flex;gap:10px;margin-top:12px}
.btn-s{
  padding:10px 18px;border-radius:9px;font-size:.85rem;font-weight:700;
  background: linear-gradient(110deg, var(--nt-primary), var(--nt-accent));
  color: var(--nt-bg);
}
.btn-g{
  padding:10px 18px;border-radius:9px;font-size:.85rem;font-weight:600;
  background: color-mix(in srgb, var(--nt-bg) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 30%, transparent);
  color: var(--nt-text);
}

/* Pipeline kanban */
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kanban-col{
  padding:10px; border-radius:11px;
  background: color-mix(in srgb, var(--nt-bg) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 20%, transparent);
  min-height:220px;
}
.kanban-col h4{font-size:.7rem;color:var(--nt-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb, var(--nt-primary) 15%, transparent);font-family:var(--nt-font);font-weight:700}
.card-lead{
  padding:10px; margin-bottom:8px; border-radius:9px;
  background: color-mix(in srgb, var(--nt-bg2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 20%, transparent);
  transition: transform .15s, border-color .2s;
  cursor:pointer;
}
.card-lead:hover{transform:translateX(2px);border-color: color-mix(in srgb, var(--nt-primary) 45%, transparent)}
.card-lead b{display:block;font-size:.82rem;color:var(--nt-text);margin-bottom:3px}
.card-lead small{display:block;font-size:.68rem;color:var(--nt-muted)}
.card-lead .v{display:inline-block;margin-top:6px;padding:2px 7px;border-radius:5px;background:color-mix(in srgb, var(--nt-accent) 25%, transparent);color:var(--nt-accent);font-size:.7rem;font-weight:700;font-family:'JetBrains Mono',monospace}

/* 2FA QR */
.qr-box{text-align:center;padding:20px;background:#fff;border-radius:12px;display:inline-block;margin:14px 0}
.qr-box img{max-width:220px;height:auto;display:block}
.recovery{background:color-mix(in srgb,var(--nt-bg) 60%,transparent);padding:14px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.8}
.recovery code{background:color-mix(in srgb,var(--nt-primary) 15%,transparent);padding:2px 6px;border-radius:4px;color:var(--nt-primary);margin:2px 4px;display:inline-block}

.toast{
  position:fixed; bottom:24px; right:24px; z-index:999;
  padding:14px 20px; border-radius:11px;
  background: color-mix(in srgb, var(--nt-bg2) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 40%, transparent);
  color: var(--nt-text); font-size:.88rem; font-weight:600;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
}
.toast.err{border-color:#ff6b9b}

/* ═══ Modal ═══ */
.xmodal-back{
  position:fixed; inset:0; z-index:1000;
  background: rgba(3,11,31,.75);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation: xmfade .18s ease-out;
}
@keyframes xmfade{from{opacity:0}to{opacity:1}}
@keyframes xmslide{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.xmodal{
  position:relative;
  width:100%; max-width:540px; max-height:90vh; overflow-y:auto;
  padding:32px 28px;
  background: color-mix(in srgb, var(--nt-bg2) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 30%, transparent);
  border-radius:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  backdrop-filter: blur(20px);
  animation: xmslide .22s cubic-bezier(.4,0,.2,1);
}
.xmodal-x{
  position:absolute; top:12px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background: color-mix(in srgb, var(--nt-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nt-primary) 25%, transparent);
  color: var(--nt-muted); font-size:1.2rem; font-weight:400; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: all .18s;
}
.xmodal-x:hover{color: var(--nt-text); border-color: color-mix(in srgb, var(--nt-primary) 55%, transparent)}
.xmodal .form-row{margin-top:4px}

/* Responsive */
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:220px;z-index:100;transform:translateX(-100%);transition:transform .3s}
  .side.open{transform:translateX(0)}
  .form-row{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr;gap:14px}
}

/* Toggle switch para Portal Cliente */
.switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:color-mix(in srgb,var(--nt-muted) 30%,transparent);border-radius:28px;transition:.3s}
.switch .slider::before{content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.switch input:checked+.slider{background:var(--nt-primary)}
.switch input:checked+.slider::before{transform:translateX(24px)}

/* Password reveal toggle */
.pwd-wrap{position:relative;display:block}
.pwd-wrap input{width:100%;padding-right:40px}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:0;cursor:pointer;font-size:18px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;opacity:.65;border-radius:8px;transition:opacity .2s,background .2s;color:var(--g-p)}
.pwd-eye:hover{opacity:1;background:color-mix(in srgb,var(--g-p) 10%,transparent)}
.pwd-eye.on{opacity:1}

/* ═══════════════════════════════════════════════════════
   XAMOX DIGITAL SERVICE · PREMIUM ANIMATIONS & MICROINTERACTIONS
   Diseño ultra-pulido: fades, shimmer, glow, ripple, loading states
   ═══════════════════════════════════════════════════════ */

/* Fade entrada suave para vistas */
@keyframes xFadeUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}
.view > *, .xmodal, .card, .kpi, .kanban-col {
  animation: xFadeUp .45s ease-out backwards;
}
.view > *:nth-child(2){animation-delay:.06s}
.view > *:nth-child(3){animation-delay:.12s}
.view > *:nth-child(4){animation-delay:.18s}
.view > *:nth-child(5){animation-delay:.24s}

/* Glow del botón primario al hover */
.btn-primary, .btn.primary, .auth-submit, .g-btn-primary {
  position:relative;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.btn-primary:hover, .btn.primary:hover, .auth-submit:hover, .g-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--nt-primary) 45%, transparent),
              0 2px 6px color-mix(in srgb, var(--nt-accent) 25%, transparent);
}
.btn-primary:active, .btn.primary:active, .auth-submit:active { transform: scale(.97); }

/* Shimmer loading para skeletons */
@keyframes xShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.xloading {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nt-muted) 10%, transparent) 0%,
    color-mix(in srgb, var(--nt-primary) 15%, transparent) 50%,
    color-mix(in srgb, var(--nt-muted) 10%, transparent) 100%);
  background-size: 800px 100%;
  animation: xShimmer 1.6s infinite linear;
  border-radius: 8px;
}

/* Pulso sutil para notificaciones */
@keyframes xPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nt-primary) 55%, transparent); }
  50%      { box-shadow: 0 0 0 12px color-mix(in srgb, var(--nt-primary) 0%, transparent); }
}
.pulse-attention { animation: xPulse 2s infinite; }

/* Entrada del toast con bounce */
@keyframes xToastIn {
  0%  { opacity:0; transform: translate(-50%, 30px) scale(.9); }
  60% { opacity:1; transform: translate(-50%, -4px) scale(1.02); }
  100%{ opacity:1; transform: translate(-50%, 0) scale(1); }
}
.toast:not(.hidden){ animation: xToastIn .4s cubic-bezier(.34,1.56,.64,1); }

/* Ripple effect al hacer click en botones */
.btn, button:not(.pwd-eye):not(.xmodal-x) {
  position: relative;
  overflow: hidden;
}
.btn::after, button:not(.pwd-eye):not(.xmodal-x)::after {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%),
    color-mix(in srgb, currentColor 30%, transparent) 0%,
    transparent 50%);
  opacity:0;
  transition: opacity .5s;
  pointer-events:none;
}
.btn.clicked::after, button.clicked::after {
  opacity:1; transition: opacity .6s;
}

/* Hover suave para tarjetas */
.card, .client-card, .list-item {
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover, .client-card:hover, .list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px color-mix(in srgb, #000 25%, transparent);
}

/* Animación específica para el login · ondas sutiles detrás */
.auth-screen::before {
  content:"";
  position: fixed;
  inset: -20% -10% auto auto;
  width: 560px; height: 560px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--nt-primary) 25%, transparent) 0%,
    transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: xAuthFloat 14s ease-in-out infinite;
}
.auth-screen::after {
  content:"";
  position: fixed;
  inset: auto auto -25% -15%;
  width: 620px; height: 620px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--nt-accent) 22%, transparent) 0%,
    transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: xAuthFloat 18s ease-in-out infinite reverse;
}
@keyframes xAuthFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-30px, 40px) scale(1.08); }
  66%      { transform: translate(20px, -30px) scale(.95); }
}
.auth-card { position: relative; z-index: 1; }

/* Logo con leve respiración */
@keyframes xBreathe {
  0%, 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--nt-primary) 30%, transparent)); }
  50%      { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--nt-primary) 55%, transparent)); }
}
.auth-logo { animation: xBreathe 3s ease-in-out infinite; }

/* Inputs al foco · borde animado */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--nt-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nt-primary) 22%, transparent) !important;
  transition: box-shadow .2s, border-color .2s;
}

/* Success check animado */
@keyframes xCheckDraw {
  from { stroke-dashoffset: 40; }
  to   { stroke-dashoffset: 0; }
}
.x-check svg path {
  stroke-dasharray: 40;
  animation: xCheckDraw .5s ease-out forwards;
}

/* Sidebar nav items · subrayado animado */
.nav-item { position: relative; transition: color .2s, background .2s; }
.nav-item::before {
  content:"";
  position:absolute; left:0; top:10%; bottom:10%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--nt-primary);
  transform: scaleY(0);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.nav-item.active::before { transform: scaleY(1); }

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Soporte RTL (árabe, hebreo, persa, urdu) + Fuentes internacionales
   ══════════════════════════════════════════════════════════════════════ */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .side { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,.08); }
html[dir="rtl"] .main { margin-left: 0; margin-right: 220px; }
html[dir="rtl"] .auth-card { text-align: right; }
html[dir="rtl"] .pwd-eye { right: auto; left: 10px; }
html[dir="rtl"] .nav-item { padding-left: 0; padding-right: 16px; }
html[dir="rtl"] .nav-item::before { left: auto; right: 0; }
html[dir="rtl"] .auth-switch a { margin-left: 0; margin-right: 8px; }

/* Selector de idioma - tamaño adaptable */
#xamox-lang-selector { font-family: inherit !important; }
#xamox-lang-selector:hover { border-color: rgba(255,255,255,.3) !important; }
#xamox-lang-selector:focus { outline: 2px solid var(--nt-primary,#6aa4ff); }

/* Ajuste selector idioma en RTL */
html[dir="rtl"] #xamox-lang-selector { right: auto !important; left: 16px !important; }

/* Fuentes chinas y árabes suaves · ya las carga i18n.js dinámicamente */
html[lang="zh-TW"], html[lang="zh"] { letter-spacing: 0; }
html[lang="ar"] { letter-spacing: 0; line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════
   v2.5.3 · HERO IMAGES POR SECTOR (Unsplash)
   La variable --nt-hero-img la inyecta XAMOX_APPLY_THEME() con la URL
   específica del sector (peluquerías, dental, talleres, restaurantes…).
   El diseño degrada con gracia si la imagen no carga: todos los bloques
   tienen un color/gradiente de base del tema por debajo.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shell del app · fondo sutil con hero del sector (opacity baja para que
   las cards y el texto se lean perfectamente) + precarga la imagen.       */
#app::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--nt-hero-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .07;
  pointer-events:none;
  z-index: 0;
  filter: saturate(1.1);
}
#app > *{ position:relative; z-index:1; }

/* Header de la vista · banda visual con el hero del sector.
   Usa box-shadow interno + gradiente oscuro superpuesto para garantizar
   contraste del título en cualquier imagen Unsplash.                     */
.top{
  position: relative;
  min-height: 88px;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--nt-bg2) 92%, transparent) 0%,
      color-mix(in srgb, var(--nt-bg2) 70%, transparent) 45%,
      color-mix(in srgb, var(--nt-bg2) 30%, transparent) 100%),
    var(--nt-hero-img, none),
    color-mix(in srgb, var(--nt-bg2) 50%, transparent);
  background-size: cover, cover, auto;
  background-position: center, center right, center;
  background-repeat: no-repeat;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--nt-primary) 20%, transparent);
}
.top h1{
  text-shadow: 0 2px 12px color-mix(in srgb, var(--nt-bg) 80%, transparent);
  position: relative; z-index: 2;
}
.top .top-r{ position: relative; z-index: 2; }

/* Accent chip del badge (emoji del sector) sobre el hero */
.top .badge{
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--nt-bg) 55%, transparent);
  border-color: color-mix(in srgb, var(--nt-primary) 60%, transparent);
}

/* Pantalla de auth · hero sutil detrás del formulario */
.auth-screen{
  position: relative;
  background:
    radial-gradient(ellipse 800px 500px at 50% 30%, color-mix(in srgb, var(--nt-primary) 18%, transparent), transparent 60%),
    var(--nt-bg);
}
.auth-screen::before{
  content:"";
  position: absolute; inset: 0;
  background-image: var(--nt-hero-img, none);
  background-size: cover; background-position: center;
  opacity: .10;
  pointer-events: none;
  filter: saturate(.9) blur(1px);
}
.auth-card{ position: relative; z-index: 1; }

/* Panels con hero sutil de acento (solo primer panel de cada vista) */
.view > .panel:first-child{
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nt-primary) 8%, transparent),
      transparent 60%),
    color-mix(in srgb, var(--nt-bg2) 70%, transparent);
}

/* Fallback elegante si Unsplash no responde (imagen 0×0 o error de red):
   el --nt-hero-img sigue siendo una URL válida pero el fondo queda en el
   color base del tema sin huecos visibles. No hace falta JS de fallback. */

/* Preconexión ya declarada en index.html a images.unsplash.com */

/* Responsive · en móvil, atenuar aún más el hero para no distraer */
@media (max-width: 720px){
  #app::before{ opacity: .04; }
  .top{ min-height: 72px; }
  .top{
    background-size: cover, cover, auto;
    background-position: center, center, center;
  }
  .auth-screen::before{ opacity: .06; }
}

/* Accesibilidad · si el usuario prefiere menos movimiento o menos datos,
   desactivamos las imágenes de hero para ahorrar ancho de banda.         */
@media (prefers-reduced-data: reduce){
  #app::before, .auth-screen::before{ background-image: none !important; }
  .top{ background-image: none !important; background: color-mix(in srgb, var(--nt-bg2) 70%, transparent) !important; }
}