/* design-system.css — BellaFlor, Fase 3.
   Dirección: tablero de operaciones con precisión botánica. Fraunces (serif, carácter propio)
   para títulos y cifras grandes; IBM Plex Sans para interfaz; IBM Plex Mono para tablas y
   números — alinea columnas, da lectura de "manifiesto de despacho". Fondo tipo papel, no
   blanco plano; el teal de marca de DatosX como acento principal, terracota como acento cálido
   secundario, verdes/ámbar muy desaturados para estado (nunca semáforo puro).

   2026-10-02: colores de la empresa, pedido de Bellaflor. Verde oliva #6A730A y crema #FFFCE9,
   medidos sobre sus logos. El oliva exacto va en el menú (--nav-bg), donde se apoya el logo
   crema; para texto y botones se usa un oliva más oscuro (--brand-deep) que se lee mejor.
*/

@import url('/fonts/fonts.css');

:root {
  /* — superficies — */
  --paper:        #FAF8E8;
  --paper-raised: #FFFEF7;
  --paper-sunken: #F1EFD6;
  --line:         #E2DFC0;
  --line-strong:  #C9C597;

  /* — texto — */
  --ink:          #2A341C;
  --ink-soft:     #464A36;
  --muted:        #74725A;
  --on-brand:     #FFFCE9;

  /* — marca — */
  --brand:        #6A730A;
  --brand-deep:   #4B5206;
  --brand-soft:   #ECEED0;
  --nav-bg:       #6A730A;
  --sky:          #FFFCE9;
  --rust:         #B0532F;
  --rust-deep:    #8A3F22;
  --rust-soft:    #F3E1D4;

  /* — estado (desaturado, no semáforo) — */
  --moss:         #4C7A52;
  --moss-soft:    #E4EEE1;
  --amber:        #B4832C;
  --amber-soft:   #F3E9D3;
  --clay:         #A6432E;
  --clay-soft:    #F3DFD8;
  --slate:        #5C6670;
  --slate-soft:   #E7E9EA;

  /* — tipografía — */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body:    'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — forma — */
  --radius-sm: 5px;
  --radius:    9px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(23,36,30,.04), 0 8px 24px -12px rgba(23,36,30,.14);
  --shadow-pop:  0 4px 10px rgba(23,36,30,.06), 0 20px 44px -16px rgba(23,36,30,.22);

  --nav-w: 248px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0;
}

a { color: var(--brand); }

/* Números: monoespaciada, tabular — la misma cifra siempre ocupa el mismo ancho, para que
   una columna de tallos o un KPI no "tiemble" al cambiar de valor. */
.num, .kpi-value, td.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Textura de fondo sutil — una trama de líneas finísima, como papel de ingeniería,
   apenas perceptible, para que el fondo no quede como un rectángulo de color plano. ── */
.paper-texture {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
}

/* ── Botones ── */
.btn {
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .55rem 1.05rem;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-rust { background: var(--rust); color: var(--on-brand); }
.btn-rust:hover { background: var(--rust-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Tarjetas ── */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ── Insignias de estado ── */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .22rem .6rem; border-radius: 999px;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-moss  { background: var(--moss-soft);  color: var(--moss); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-clay  { background: var(--clay-soft);  color: var(--clay); }
.badge-slate { background: var(--slate-soft); color: var(--slate); }
.badge-brand { background: var(--brand-soft); color: var(--brand-deep); }

/* ── Campos ── */
input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
  font-family: var(--f-body);
  font-size: .85rem;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
  color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ── Tablas ── */
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th {
  text-align: left; font-family: var(--f-body); font-weight: 600; font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: .55rem .7rem; border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; background: var(--paper-raised);
}
th.num, td.num { text-align: right; }
td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
tbody tr:hover { background: var(--paper-sunken); }

/* ── Multi-select reusable ── */
.msel { position: relative; }
.msel-btn {
  font-family: var(--f-body); font-size: .8rem; font-weight: 500;
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .45rem .75rem; cursor: pointer; color: var(--ink-soft); white-space: nowrap;
}
.msel-btn:hover { border-color: var(--brand); }
.msel-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; max-height: 280px;
  overflow-y: auto; background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: .6rem;
}
.msel-panel.hidden { display: none; }
.msel-buscar { display: block; width: 100%; box-sizing: border-box; margin-bottom: .45rem; padding: .35rem .55rem; font-size: .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font-family: inherit; }
.msel-buscar:focus { outline: none; border-color: var(--brand); }
.msel-buscar[hidden], .msel-options label[hidden] { display: none; }
.msel-actions { display: flex; gap: .6rem; padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
.msel-actions button { border: none; background: none; color: var(--brand); font-size: .72rem; font-weight: 600; cursor: pointer; padding: 0; }
.msel-options label { display: flex; align-items: center; gap: .5rem; font-size: .8rem; padding: .3rem .2rem; border-radius: 4px; cursor: pointer; }
.msel-options label:hover { background: var(--paper-sunken); }

/* ── Utilidades de layout ── */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.chart-box { min-height: 260px; }

@media (max-width: 720px) {
  body { font-size: 14px; }
}