/* marca.css — el sistema visual de L2 Agro, en variables.
 *
 * Fuente: la guía de diseño "L2 Agro Guía" (proyecto de Claude Design
 * 4af30beb-3d8b-4477-84d8-5e06c292ee77). Si algo de acá contradice a esa guía, gana la guía:
 * este archivo es su traducción a código, no una reinterpretación.
 *
 * Se usa igual desde la app de clientes, el informe web y el panel. Por eso vive en l2/marca/ y
 * no dentro de ninguno de los tres: la marca es una sola.
 *
 *   <link rel="stylesheet" href="../marca/marca.css">
 *
 * Las fuentes (Bitter, Karla, Archivo) se cargan aparte con el <link> de Google Fonts que
 * documenta guia.html — no se importan acá para no forzar una petición de red a quien solo
 * quiera los colores.
 */

:root {
  /* ── Color ────────────────────────────────────────────────────────────────
   * Seis colores y nada más. El esmeralda es el ÚNICO acento: si algo necesita
   * destacarse y ya hay verde en pantalla, se resuelve con jerarquía o espacio,
   * no sumando un color. */
  --l2-base:            #262624;   /* fondo de la aplicación */
  --l2-superficie:      #302f2d;   /* tarjetas y paneles sobre el fondo */
  --l2-neutro-oscuro:   #1b1a18;   /* destaque, avatares, fondos invertidos */
  --l2-esmeralda:       #1FA65E;   /* ÚNICO acento: acción, marca, dato vivo */
  --l2-texto:           #F2F2F3;   /* texto principal */
  --l2-texto-sec:       #98989E;   /* texto secundario */

  /* Grises de apoyo, derivados del secundario. No son colores nuevos: son el
   * mismo gris a distinta distancia del ojo. */
  --l2-texto-ter:       #8E8E93;   /* labels, metadatos, unidades */
  --l2-texto-suave:     #C7C7CC;   /* texto sobre superficie, párrafos largos */
  --l2-linea:           rgba(255, 255, 255, .07);   /* borde de tarjeta */
  --l2-linea-fuerte:    rgba(255, 255, 255, .12);   /* borde de control */

  /* ── Tipografía ───────────────────────────────────────────────────────────
   * Bitter (serif) para títulos y para los DATOS — un rinde, un NDVI, una
   * superficie. Que el número tenga peso tipográfico es parte del mensaje.
   * Karla para todo lo que se lee corrido: cuerpo, labels y botones. */
  --l2-titulo:  'Bitter', Georgia, serif;
  --l2-cuerpo:  'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --l2-marca:   'Archivo', var(--l2-cuerpo);   /* solo el logotipo: 800/900 */

  /* ── Forma ────────────────────────────────────────────────────────────────
   * El radio de marca sale del logo: su esquina inferior derecha está achatada.
   * Eso se reutiliza en paneles y contenedores grandes; las tarjetas comunes
   * llevan el radio parejo de 20px. */
  --l2-r-tarjeta:   20px;
  --l2-r-control:   12px;
  --l2-r-pildora:   999px;
  --l2-r-marca:     20px 20px 6px 20px;   /* la esquina achatada, abajo a la derecha */

  /* ── Elevación ────────────────────────────────────────────────────────────
   * Sombras neutras y discretas. 🔴 Nunca sombras de color ni brillos: la guía
   * lo prohíbe explícitamente para el botón primario, y vale para todo. */
  --l2-sombra-flota: 0 8px 28px rgba(0, 0, 0, .38);

  --l2-espacio:     16px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body.l2 {
  margin: 0;
  background: var(--l2-base);
  color: var(--l2-texto);
  font-family: var(--l2-cuerpo);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.l2 h1, .l2 h2, .l2 h3 { font-family: var(--l2-titulo); margin: 0; letter-spacing: -.02em; }
.l2 h1 { font-size: 30px; font-weight: 700; }
.l2 h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.l2 h3 { font-size: 16px; font-weight: 600; }

/* Un dato es un dato: va en Bitter, no en el tipo de párrafo. */
.l2-dato { font-family: var(--l2-titulo); font-weight: 700; letter-spacing: -.02em;
           font-variant-numeric: tabular-nums; }

/* Label de sección: el único lugar donde se usan mayúsculas. */
.l2-label { font-family: var(--l2-cuerpo); font-size: 10.5px; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase; color: var(--l2-texto-ter); }

/* ── Superficies ──────────────────────────────────────────────────────────── */
.l2-tarjeta {
  background: var(--l2-superficie);
  border: 1px solid var(--l2-linea);
  border-radius: var(--l2-r-tarjeta);
  padding: 18px;
}
/* Contenedor grande: lleva la esquina achatada del logo. Los contenedores chicos NO
 * — a tamaño de tarjeta la asimetría se lee como un error de render, no como marca. */
.l2-panel { border-radius: var(--l2-r-marca); }

/* ── Acción ───────────────────────────────────────────────────────────────── */
.l2-boton {
  font-family: var(--l2-cuerpo); font-size: 15px; font-weight: 600;
  background: var(--l2-esmeralda); color: #fff; border: 0;
  border-radius: var(--l2-r-control); padding: 11px 20px; cursor: pointer;
}
.l2-boton:hover { filter: brightness(1.06); }
.l2-boton--secundario {
  background: transparent; color: var(--l2-texto);
  border: 1px solid var(--l2-linea-fuerte);
}

.l2-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--l2-superficie); border: 1px solid var(--l2-linea);
  border-radius: var(--l2-r-pildora); padding: 6px 13px;
  font-size: 13px; color: var(--l2-texto-suave);
}

/* ── Handle "L2" ──────────────────────────────────────────────────────────────
 * Va en CADA dato consultable, y al tocarlo abre el popover anclado con el input y
 * las sugerencias. Es la promesa central de la app: cualquier número se puede
 * preguntar ahí mismo. Círculo siempre — es lo que lo distingue de un botón. */
.l2-handle {
  width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--l2-esmeralda); color: #fff; border: 0;
  font-family: var(--l2-marca); font-weight: 900; font-size: 9.5px; letter-spacing: -.02em;
  cursor: pointer; vertical-align: middle;
}

/* Chip de contexto: se muestra sobre la barra cuando se consulta un elemento, para que
 * la persona sepa qué está mirando el asistente antes de preguntar. */
.l2-contexto {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--l2-neutro-oscuro); border: 1px solid var(--l2-linea);
  border-radius: var(--l2-r-pildora); padding: 7px 14px;
  font-size: 12.5px; color: var(--l2-texto-sec);
}
.l2-contexto b { color: var(--l2-texto); font-weight: 600; }

/* ── Navegación 4a ────────────────────────────────────────────────────────────
 * Cápsula flotante con las 4 secciones, y el círculo esmeralda SEPARADO a un costado:
 * el chat no es una sección más, es la forma de hablar con el sistema. Esa separación
 * física es lo que lo comunica. */
.l2-nav { display: flex; align-items: center; gap: 12px; }
.l2-nav__capsula {
  display: flex; align-items: center; gap: 4px;
  background: var(--l2-superficie); border: 1px solid var(--l2-linea);
  border-radius: var(--l2-r-pildora); padding: 6px; box-shadow: var(--l2-sombra-flota);
}
.l2-nav__item {
  border: 0; background: transparent; color: var(--l2-texto-sec); cursor: pointer;
  font-family: var(--l2-cuerpo); font-size: 12px; font-weight: 600;
  border-radius: var(--l2-r-pildora); padding: 8px 14px;
}
.l2-nav__item[aria-current="page"] { background: var(--l2-neutro-oscuro); color: var(--l2-texto); }
.l2-nav__chat {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--l2-esmeralda); color: #fff; border: 0;
  cursor: pointer; box-shadow: var(--l2-sombra-flota);
  font-family: var(--l2-marca); font-weight: 900; font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .l2 *, .l2 *::before, .l2 *::after { transition: none !important; animation: none !important; }
}