/* Tokens compartidos por panel.css, portal.css y auth.css — la unica fuente de color y tipografia.
   Direccion B (2026-09-24): Source Sans 3 para texto, Lexend para titulos, verde salvia como unico acento. */
:root {
  --bg: #F5F4F0;
  --surface: #FFFFFF;
  --surface-2: #F0EFEA;
  --line: #E2E3DD;
  --line-strong: #CACDC4;
  --text: #1C2320;
  --text-muted: #5F6862;

  /* Tonos sacados de logo.svg (2026-09-28): verde del degradado del fondo y oro del grano.
     AA: blanco sobre --accent ≈ 6,5:1; --accent sobre --bg ≈ 6:1. */
  --accent: #3A6652;        /* punto medio del degradado #55876F → #244234 */
  --accent-strong: #244234; /* extremo oscuro del logo */
  --accent-on: #FFFFFF;
  --accent-tint: #E3EDE7;   /* aclarado de las lindes #D5E4DB */
  --harvest: #CC9424;       /* oro del grano; solo decorativo (iconos, estrella), nunca texto */

  /* La barra lateral ya no es oscura: mismo neutro que el fondo. */
  --side-bg: var(--bg);
  --side-text: var(--text-muted);
  --side-strong: var(--text);
  --side-muted: var(--text-muted);
  --side-line: var(--line);
  --side-active: var(--accent-tint);

  --ok-fg: #3B6844;
  --ok-tint: #E7F0E8;
  --warn-fg: #8A600E; /* oro oscuro del logo; ≈4,9:1 sobre --warn-tint */
  --warn-tint: #FAF0D8;
  --crit-fg: #A8402C;
  --crit-tint: #FBEAE5;
  --fill-crit: var(--crit-fg);

  --step-1: #D5E4DB;
  --step-2: #9DBDAE;
  --step-3: #55876F;
  --step-4: #3A6652;

  --font-body: "Source Sans 3", "Segoe UI", Arial, system-ui, sans-serif;
  --font-head: "Lexend", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --r: 8px;
}

h1, h2, h3, .brand-name, .who .brand, .auth-brand-name { font-family: var(--font-head); font-weight: 500; letter-spacing: -0.015em; }
.num, .mono, td.num, .tile-value, .price-value, .price-delta { font-variant-numeric: tabular-nums; }

/* Logo (app/static/logo.svg): icono con volumen, mismo archivo que el favicon. */
/* Selector de cultivos (_cultivos.html): común a registro, panel y portal */
.cultivos { border: 0; margin: 0; padding: 0; min-width: 0; }
.cultivos legend { padding: 0; font-family: var(--font-head); font-weight: 500; font-size: 17px; color: var(--text); }
.cultivos-lead { margin: 4px 0 14px; font-size: 14px; color: var(--text-muted); }
.cultivos-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 10px; }
.cultivo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text); text-align: center; cursor: pointer; user-select: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s var(--ease-out); }
.cultivo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cultivo-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); transition: background-color .15s, color .15s; }
.cultivo-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cultivo-nombre { font-weight: 600; font-size: 15px; }
.cultivo-nota { font-size: 12.5px; color: var(--text-muted); }
.cultivo-check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); transition: background-color .15s, border-color .15s; }
.cultivo-check svg { width: 12px; height: 12px; fill: none; stroke: var(--accent-on); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s var(--ease-out); }
.cultivo:has(:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 2px 10px rgb(36 66 52 / .12); }
.cultivo:has(:checked) .cultivo-ico { background: var(--surface); color: var(--accent-strong); }
.cultivo:has(:checked) .cultivo-check { background: var(--accent); border-color: var(--accent); }
.cultivo:has(:checked) .cultivo-check svg { opacity: 1; transform: none; }
.cultivo:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cultivo:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .cultivo:hover { border-color: var(--text-muted); transform: translateY(-1px); } .cultivo:has(:checked):hover { border-color: var(--accent-strong); } }
@media (prefers-reduced-motion: reduce) { .cultivo, .cultivo-check svg { transition: none; } }
.logo { width: 26px; height: 26px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgb(13 31 23 / .22)); }