/* ================================================================
   base.css — Variables de tema, reset y tipografía
   Todas las variables son sobreescribibles desde tenant.css
   ================================================================ */

:root {
  /* --- Marca principal (tenant personaliza estas) --- */
  --brand-primary:      #1a4d8f;
  --brand-primary-dk:   #123669;
  --brand-primary-lt:   #e8f0fb;
  --brand-accent:       #2e7dd1;
  --brand-accent-lt:    #d0e4f7;

  /* --- Superficies --- */
  --bg-app:             #f0f3f8;
  --bg-surface:         #ffffff;
  --bg-sidebar:         #ffffff;
  --bg-nav:             #1a4d8f;
  --bg-hover:           #f4f7fc;
  --bg-selected:        #e8f0fb;
  --bg-overlay:         rgba(15, 20, 45, 0.38);

  /* --- Texto --- */
  --text-primary:       #1a1f36;
  --text-secondary:     #4a5568;
  --text-muted:         #8898aa;
  --text-on-brand:      #ffffff;
  --text-on-brand-dim:  rgba(255,255,255,0.65);

  /* --- Bordes --- */
  --border:             #dde3ee;
  --border-focus:       #2e7dd1;
  --border-strong:      #b0bdd4;

  /* --- Estados de trabajo (semáforo) --- */
  --status-lab:         #16a34a;
  --status-lab-bg:      #dcfce7;
  --status-proof:       #d97706;
  --status-proof-bg:    #fef3c7;
  --status-done:        #dc2626;
  --status-done-bg:     #fee2e2;
  --status-paused:      #6b7280;
  --status-paused-bg:   #f3f4f6;

  /* --- Semánticos --- */
  --color-success:      #16a34a;
  --color-success-bg:   #dcfce7;
  --color-warning:      #d97706;
  --color-warning-bg:   #fef3c7;
  --color-danger:       #dc2626;
  --color-danger-bg:    #fee2e2;
  --color-info:         #2e7dd1;
  --color-info-bg:      #dbeafe;

  /* --- Tipografía --- */
  --font-ui:            'DM Sans', system-ui, sans-serif;
  --font-mono:          'DM Mono', 'Fira Mono', monospace;

  /* --- Forma y espacio --- */
  --radius-xs:          3px;
  --radius-sm:          5px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-full:        9999px;

  /* --- Dimensiones del shell --- */
  --sidebar-w:          240px;
  --nav-h:              52px;

  /* --- Sombras --- */
  --shadow-xs:          0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:          0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:          0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:          0 20px 60px rgba(0,0,0,0.18);

  /* --- Transiciones --- */
  --transition-fast:    0.12s ease;
  --transition-base:    0.18s ease;

  /* --- Z-index layers --- */
  --z-dropdown:         200;
  --z-sidebar:          100;
  --z-navbar:           300;
  --z-modal:            800;
  --z-toast:            1000;
  --z-tooltip:          900;

  /* --- Logo del tenant --- */
  --tenant-logo:        none;
  --tenant-name:        'AlGest';
}

/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-app);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* ----------------------------------------------------------------
   TIPOGRAFÍA BASE
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.2; color: var(--text-primary); }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

p { color: var(--text-secondary); line-height: 1.65; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* ----------------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ----------------------------------------------------------------
   LOADING SCREEN
   ---------------------------------------------------------------- */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  color: var(--text-muted);
  font-size: 13px;
}
.loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
   ANIMACIONES UTILITARIAS
   ---------------------------------------------------------------- */
@keyframes fadeIn   { from { opacity: 0 }                        to { opacity: 1 } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideInR { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: translateX(0) } }
@keyframes fadeOut  { to   { opacity: 0; pointer-events: none } }

.anim-fade-in  { animation: fadeIn  var(--transition-base) both; }
.anim-slide-up { animation: slideUp var(--transition-base) both; }