/* static/css/base.css — Variables globales, reset y tipografía OKA Paper */

:root {
  /* Paleta de colores OKA Paper */
  --color-sidebar-bg:     #1a2332;
  --color-sidebar-hover:  #243447;
  --color-sidebar-active: #3d7ab5;
  --color-sidebar-text:   #b8cfe0;
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-section:#7a9ab5;

  --color-app-bg:         #f4f6f9;
  --color-surface:        #ffffff;
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;

  --color-text-primary:   #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted:     #94a3b8;

  --color-accent:         #2a4f7c;
  --color-accent-dark:    #1a3b5e;
  --color-accent-light:   #dde8f5;

  --color-success:        #16a34a;
  --color-success-light:  #dcfce7;
  --color-warning:        #d97706;
  --color-warning-light:  #fef3c7;
  --color-danger:         #dc2626;
  --color-danger-light:   #fee2e2;
  --color-info:           #0891b2;
  --color-info-light:     #e0f2fe;

  /* Espaciado y geometría */
  --sidebar-width: 260px;
  --topbar-height: 60px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  /* Tipografía */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;
}

/* Reset explicito: cubre el margin:8px del user-agent en todos los layouts */
html, body { margin: 0; padding: 0; }

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

html { font-size: 16px; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  background: var(--color-app-bg);
  line-height: 1.5;
}

/* Layout principal ERP */
.erp-body { display: flex; min-height: 100vh; }

.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

.main-content {
  flex: 1;
  padding: 1.5rem 2rem;
  max-width: 1400px;
}

/* Login layout */
.login-body {
  background: var(--color-sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Helpers */
.text-muted { color: var(--color-text-muted); }
.inline-form { display: inline; }

/* Messages */
.messages-container { margin-bottom: 1.25rem; }
.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.5rem;
  font-size: var(--font-size-sm);
}
.alert--success { background: var(--color-success-light); color: var(--color-success); }
.alert--error, .alert--danger { background: var(--color-danger-light); color: var(--color-danger); }
.alert--warning { background: var(--color-warning-light); color: var(--color-warning); }
.alert--info { background: var(--color-info-light); color: var(--color-info); }
.alert-close { background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; }

/* Toast notifications (JS-driven) */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toastIn 0.25s ease;
  pointer-events: none;
}
.toast--success { background: var(--color-success); color: #fff; }
.toast--error   { background: var(--color-danger);  color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
}
.kpi-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.kpi-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-accent); }

/* Responsive */
@media (max-width: 768px) {
  .main-wrapper { margin-left: 0; }
  .main-content { padding: 1rem; }
}



/* === Responsive global layout === */
body { overflow-x: hidden; }

@media (max-width: 1024px) {
  .main-content { padding: 1.25rem; }
}
@media (max-width: 768px) {
  .main-content { padding: 1rem; }
  .page-header { flex-wrap: wrap; }
  .page-title { font-size: var(--font-size-xl); }
}
@media (max-width: 480px) {
  .main-content { padding: 0.75rem 0.625rem; }
  .page-title { font-size: var(--font-size-lg); }
  .page-header { margin-bottom: 1rem; }
}