/* ============================================================
   PdP Cotizador — base.css
   Variables globales, reset, tipografía
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Fondos — tema claro, cómodo para jornadas largas */
  --bg-root:        #f4f5f7;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-raised: #f9fafb;
  --bg-input:       #f0f1f4;
  --bg-hover:       #eceef2;

  /* Bordes */
  --border:         #d8dce3;
  --border-focus:   #a0aec0;
  --border-accent:  #2b65ff;

  /* Texto */
  --text-primary:   #1a202c;
  --text-secondary: #4a5568;
  --text-muted:     #8896a6;
  --text-label:     #64748b;
  --text-inverse:   #ffffff;

  /* Acento */
  --accent:         #2b65ff;
  --accent-dim:     #dbe4ff;
  --accent-glow:    rgba(43, 101, 255, 0.12);

  /* Semánticos */
  --ok:             #16a34a;
  --ok-bg:          rgba(22, 163, 74, 0.08);
  --warn:           #ca8a04;
  --warn-bg:        rgba(202, 138, 4, 0.08);
  --err:            #dc2626;
  --err-bg:         rgba(220, 38, 38, 0.08);
  --info:           #2563eb;
  --info-bg:        rgba(37, 99, 235, 0.08);

  /* Estrategias de producción */
  --strat-digital:  #0891b2;
  --strat-lito:     #7c3aed;
  --strat-best:     #16a34a;

  /* Estados de trabajo */
  --estado-borrador:    #94a3b8;
  --estado-cotizado:    #2563eb;
  --estado-aprobado:    #7c3aed;
  --estado-produccion:  #ca8a04;
  --estado-listo:       #16a34a;
  --estado-entregado:   #64748b;
  --estado-facturado:   #2b65ff;
  --estado-cancelado:   #dc2626;

  /* Tipografía */
  --font-ui:    'IBM Plex Sans', sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* Tamaños de fuente */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   22px;

  /* Espaciado */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* Radios */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  14px;

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow:     0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-accent: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);

  /* Transiciones */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;
  --t-slow:   350ms ease;

  /* Layout */
  --sidebar-w:    380px;
  --topbar-h:     52px;
  --max-content:  1400px;
}

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

html {
  font-size: 13px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-root);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografía ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 500; }
h4 { font-size: var(--text-md); font-weight: 500; }
h5 { font-size: var(--text-base); font-weight: 500; }

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--text-primary); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ── Utilidades de texto ─────────────────────────────────────── */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-md      { font-size: var(--text-md); }
.text-lg      { font-size: var(--text-lg); }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-label     { color: var(--text-label); }
.text-accent    { color: var(--accent); }
.text-ok        { color: var(--ok); }
.text-warn      { color: var(--warn); }
.text-err       { color: var(--err); }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semi    { font-weight: 600; }
.font-mono    { font-family: var(--font-mono); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-root); }
::-webkit-scrollbar-thumb {
  background: #c1c7d0;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #a0a8b4; }

/* ── Selección de texto ─────────────────────────────────────── */
::selection {
  background: var(--accent-dim);
  color: var(--text-primary);
}