/* ===========================================================================
   Atlas — CSS principal (mobile-first)
   Tokens heredados del ecosistema IntegraPro
   =========================================================================== */

:root {
  /* Colores marca Atlas */
  --atl-bg:           #0F172A;        /* slate-900 */
  --atl-bg-elev:      #1E293B;        /* slate-800 */
  --atl-fg:           #F8FAFC;        /* slate-50 */
  --atl-fg-mute:      #94A3B8;        /* slate-400 */
  --atl-border:       #334155;        /* slate-700 */

  /* Acentos */
  --atl-primary:      #3B82F6;        /* blue-500 */
  --atl-primary-hov:  #2563EB;
  --atl-success:      #10B981;        /* emerald-500 */
  --atl-warning:      #F59E0B;        /* amber-500 */
  --atl-danger:       #EF4444;        /* red-500 */
  --atl-info:         #06B6D4;        /* cyan-500 */

  /* Estados de activos */
  --atl-disponible:   #10B981;
  --atl-en-uso:       #3B82F6;
  --atl-bloqueado:    #EF4444;
  --atl-mantto:       #F59E0B;
  --atl-baja:         #6B7280;

  /* Tipografía (heredada del ecosistema) */
  --atl-font-display: 'Syne', system-ui, -apple-system, sans-serif;
  --atl-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --atl-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Espaciado base */
  --atl-radius-sm:    6px;
  --atl-radius-md:    10px;
  --atl-radius-lg:    16px;
  --atl-radius-pill:  999px;

  /* Sombras */
  --atl-shadow-sm:    0 1px 2px rgba(0,0,0,.2);
  --atl-shadow-md:    0 4px 12px rgba(0,0,0,.3);
  --atl-shadow-lg:    0 10px 30px rgba(0,0,0,.4);

  /* Layout */
  --atl-topbar-h:     56px;
  --atl-drawer-w:     280px;

  /* Touch */
  --atl-touch-min:    44px;     /* WCAG */
}

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--atl-font-body);
  background: var(--atl-bg);
  color: var(--atl-fg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Regla obligatoria del ecosistema (memoria #16): [hidden] dura */
[hidden] { display: none !important; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a { color: var(--atl-primary); text-decoration: none; }
a:hover { color: var(--atl-primary-hov); }

/* ───────── Tipografía ───────── */
h1, h2, h3, h4 { font-family: var(--atl-font-display); font-weight: 700; margin: 0; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
.text-mute { color: var(--atl-fg-mute); }
.text-mono { font-family: var(--atl-font-mono); }
.text-sm   { font-size: 0.875rem; }
.text-xs   { font-size: 0.75rem; }

/* ───────── Splash ───────── */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--atl-bg);
  gap: 12px;
}
.splash-logo { animation: fade-in .4s ease; }
.splash-title {
  font-family: var(--atl-font-display);
  font-size: 2rem; font-weight: 800;
  letter-spacing: -0.02em;
}
.splash-subtitle {
  font-size: 0.875rem;
  color: var(--atl-fg-mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.splash-loader { display: flex; gap: 6px; margin-top: 16px; }
.splash-loader div {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--atl-primary);
  animation: pulse-dot 1.2s infinite ease-in-out;
}
.splash-loader div:nth-child(2) { animation-delay: 0.15s; }
.splash-loader div:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1.2); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Topbar ───────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center;
  height: var(--atl-topbar-h);
  padding: 0 8px;
  background: var(--atl-bg-elev);
  border-bottom: 1px solid var(--atl-border);
}
.topbar-icon {
  display: flex; align-items: center; justify-content: center;
  width: var(--atl-touch-min); height: var(--atl-touch-min);
  border-radius: var(--atl-radius-md);
  color: var(--atl-fg);
  transition: background .15s;
}
.topbar-icon:hover, .topbar-icon:active { background: rgba(255,255,255,.08); }
.topbar-icon:active { transform: scale(.95); }

.topbar-title {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.topbar-title .brand {
  font-family: var(--atl-font-display);
  font-weight: 700; font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.org-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  background: rgba(255,255,255,.08);
  border-radius: var(--atl-radius-pill);
  font-size: 0.7rem;
  color: var(--atl-fg-mute);
  max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-pill:hover { background: rgba(255,255,255,.12); color: var(--atl-fg); }

/* ───────── App content ───────── */
.app {
  min-height: calc(100vh - var(--atl-topbar-h));
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ───────── Drawer ───────── */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--atl-drawer-w); max-width: 85vw;
  z-index: 200;
  background: var(--atl-bg-elev);
  border-right: 1px solid var(--atl-border);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.drawer[hidden] { display: flex !important; }      /* Override de [hidden] para que la animación funcione */
.drawer.open    { transform: translateX(0); }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s;
}
.drawer-overlay.open { opacity: 1; }
/* Mostramos overlay solo cuando drawer está open */
.drawer-overlay:not(.open) { pointer-events: none; }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--atl-border);
}
.drawer-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-avatar {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--atl-primary);
  border-radius: 50%;
  font-weight: 700; font-size: 1rem;
}
.drawer-nombre {
  font-weight: 600; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.drawer-email {
  font-size: 0.75rem; color: var(--atl-fg-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}

.drawer-nav {
  flex: 1; overflow-y: auto;
  padding: 8px;
}
.drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--atl-radius-md);
  color: var(--atl-fg-mute);
  font-weight: 500; font-size: 0.95rem;
  min-height: var(--atl-touch-min);
  transition: background .15s, color .15s;
}
.drawer-link:hover  { background: rgba(255,255,255,.05); color: var(--atl-fg); }
.drawer-link:active { transform: scale(.98); }
.drawer-link.active {
  background: rgba(59,130,246,.15);
  color: var(--atl-primary);
}
.drawer-icon { font-size: 1.15rem; flex-shrink: 0; }

.drawer-section-title {
  padding: 16px 14px 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--atl-fg-mute);
  font-weight: 600;
}

.drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--atl-border);
}
.drawer-version {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--atl-fg-mute);
  text-align: center;
}

/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--atl-touch-min);
  padding: 0 16px;
  border-radius: var(--atl-radius-md);
  background: var(--atl-primary);
  color: white;
  font-weight: 600; font-size: 0.95rem;
  transition: background .15s, transform .1s;
}
.btn:hover  { background: var(--atl-primary-hov); }
.btn:active { transform: scale(.98); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--atl-border);
  color: var(--atl-fg);
}
.btn-ghost:hover { background: rgba(255,255,255,.05); }

.btn-ghost-danger {
  background: transparent;
  border: 1px solid rgba(239,68,68,.4);
  color: var(--atl-danger);
  width: 100%;
}
.btn-ghost-danger:hover { background: rgba(239,68,68,.1); }

.btn-block { width: 100%; }
.btn-lg    { min-height: 56px; font-size: 1rem; padding: 0 24px; }
.btn-xl    { min-height: 72px; font-size: 1.1rem; padding: 0 28px; }

/* ───────── Tarjetas / paneles ───────── */
.card {
  background: var(--atl-bg-elev);
  border: 1px solid var(--atl-border);
  border-radius: var(--atl-radius-lg);
  padding: 16px;
}

/* ───────── Toasts ───────── */
.toast-container {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 9000;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: 92%; max-width: 480px;
}
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  background: var(--atl-bg-elev);
  border: 1px solid var(--atl-border);
  border-radius: var(--atl-radius-md);
  box-shadow: var(--atl-shadow-md);
  font-size: 0.9rem;
  animation: toast-in .25s ease;
}
.toast-success { border-left: 4px solid var(--atl-success); }
.toast-warning { border-left: 4px solid var(--atl-warning); }
.toast-error   { border-left: 4px solid var(--atl-danger); }
.toast-info    { border-left: 4px solid var(--atl-info); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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