/* ============================================================
   Gramor Colombia · Agroeco Monitor v4.0
   Paleta: amarillo #F9E076 · verde osc #2D5016
           marrón #5D4037 · rojo #C62828
   Tipografía: Inter (texto) + Outfit (display)
   ============================================================ */

:root {
  /* Base dark */
  --bg-0: #060b14;
  --bg-1: #0b1220;
  --bg-2: #111a2e;
  --bg-3: #18243d;
  --surface: rgba(17, 26, 46, 0.92);
  --surface-2: rgba(24, 36, 61, 0.6);
  --surface-3: rgba(45, 80, 22, 0.12);
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.28);

  --text-1: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-4: #64748b;

  /* Marca Gramor */
  --gramor-yellow: #F9E076;
  --gramor-yellow-soft: rgba(249, 224, 118, 0.15);
  --gramor-green: #2D5016;
  --gramor-green-bright: #4d8b1f;
  --gramor-brown: #5D4037;
  --gramor-red: #C62828;
  --gramor-muted: #8B9467;

  /* Funcionales */
  --accent-green: #3DDC97;
  --accent-blue: #38bdf8;
  --accent-amber: #fbbf24;
  --accent-red: #f87171;

  /* Sombras y radios */
  /* Sombras en DOS capas: una corta y densa que asienta el elemento, y
     una difusa que da profundidad. Es como se comporta la luz real, y se
     lee como relieve en vez de como un desenfoque pegado encima.
     Antes eran 24px y 50px de desenfoque al 45-60%: mucho drama para una
     interfaz que se mira durante horas. */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 10px rgba(0, 0, 0, 0.20);
  --shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.32), 0 12px 28px rgba(0, 0, 0, 0.34);
  /* El resplandor de color desapareció: es el recurso más reconocible de
     las plantillas genéricas. Se sustituye por una sombra normal. */
  --shadow-glow: 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Radios más contenidos. 12 y 18px daban un aire de app de consumo;
     entre 6 y 12 se lee como herramienta de trabajo, que es lo que es. */
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 12px;

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: 64px;
  --sidebar-w: 220px;
  --panel-w: 420px;
  --view-w: 560px;
}

/* El tema claro se retiró junto con su conmutador: el monitor es oscuro y
   solo oscuro, porque se lee sobre imagen satelital y el fondo oscuro es
   parte de que los índices se distingan. El panel interno
   (panel.gramorcolombia.org) sí es claro, pero es otra aplicación con su
   propia paleta. */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* IMPORTANTE: sin esta regla, cualquier elemento con el atributo
   `hidden` de HTML pero cuya clase defina `display: flex/grid/block`
   (ej. .app-shell, .modal-root, .auth-form) se sigue mostrando. */
[hidden] { display: none !important; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-0);
  color: var(--text-1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5 { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 600; margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--gramor-yellow); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  position: fixed; inset: 0;
  /* Antes eran dos elipses de color al 35% y 25%. Se conserva UNA sola,
     muy tenue, para que el fondo no sea un plano muerto — pero sin que
     la pantalla de entrada parezca un póster. */
  background: radial-gradient(ellipse at 30% 0%, rgba(45, 80, 22, 0.16), transparent 55%),
              var(--bg-0);
  /* OJO CON ESTE CENTRADO.
     Antes decía `align-items: center`, y con un contenedor que desborda
     eso corta el formulario: el sobrante se reparte arriba y abajo, pero
     el navegador no deja desplazarse hacia arriba —scrollTop no puede ser
     negativo— así que parte del contenido queda inalcanzable. En la
     pantalla de registro, que es más alta que la de entrada, el botón de
     «Crear cuenta» quedaba cortado y no había forma de llegar a él.

     Con `flex-start` más `margin: auto` en la tarjeta se consigue lo
     mismo cuando cabe —queda centrada— y se puede desplazar entera
     cuando no cabe. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px;
  z-index: 100;
  overflow: auto;
  overscroll-behavior: contain;
}
/* ============================================================
   CONTRASEÑAS (administración)
   ============================================================ */
.clave-buscar { display: flex; gap: 8px; margin-bottom: 14px; }
.clave-buscar input {
  flex: 1; padding: 9px 12px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text-1); font-size: 13px;
}
.claves-lista { display: flex; flex-direction: column; gap: 8px; }
.clave-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 12px;
}
.clave-item strong { font-size: 13.5px; color: var(--text-1); }
.clave-meta { font-size: 11.5px; color: var(--text-4); margin-top: 2px; }
.clave-estado { font-size: 11.5px; margin-top: 4px; }
/* Quien administra tiene que ver de un vistazo qué le toca hacer: lo
   pendiente pide acción, lo entregado solo espera. */
.clave-estado.est-pendiente { color: var(--accent-amber); }
.clave-estado.est-entregado { color: var(--text-3); }
.clave-estado.est-caducado { color: var(--accent-red); }

.codigo-caja {
  background: var(--bg-2); border: 1px solid var(--gramor-yellow);
  border-radius: var(--radius-sm); padding: 13px 14px; margin: -2px 0 8px;
}
/* Grande, monoespaciado y espaciado: este código se dicta por teléfono
   y se copia a mano en un celular. Que se lea sin dudar es la función. */
.codigo-valor {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 27px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--gramor-yellow); text-align: center;
  padding: 10px 0; user-select: all;
}
.codigo-caja p { font-size: 12px; color: var(--text-2); margin: 0 0 6px; line-height: 1.5; }
.codigo-aviso { color: var(--accent-amber) !important; font-size: 11.5px !important; }

/* --- todas las cuentas --- */
.cuentas-alerta {
  background: rgba(251,191,36,.10);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
}
.cuentas-lista { display: flex; flex-direction: column; gap: 7px; }
.cuenta-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
/* Quien nunca entró se destaca: es el caso que esta lista existe para
   encontrar, y si se pierde entre los demás no sirve de nada. */
.cuenta-item.nunca { border-left-color: var(--accent-amber); }
.cuenta-item strong { font-size: 13px; color: var(--text-1); }
.cuenta-rol {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-4); margin-left: 7px;
}
.cuenta-meta { font-size: 11.5px; color: var(--text-4); margin-top: 2px; }
.cuenta-estado { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.cuenta-estado.mal { color: var(--accent-amber); }
.cuenta-tiene { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }

/* Enlace que en realidad es un botón: acciones que no navegan a ningún
   sitio no deberían ser <a href="#">. */
.enlace-suave {
  display: block; width: 100%;
  background: none; border: 0; padding: 9px 0 0;
  color: var(--text-3); font: inherit; font-size: 12.5px;
  cursor: pointer; text-align: center;
}
.enlace-suave:hover { color: var(--gramor-yellow); }
.enlace-suave:focus-visible { outline: 2px solid var(--gramor-yellow); outline-offset: 2px; border-radius: 4px; }

.aviso-suave {
  background: var(--bg-1);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 6px;
  font-size: 12.5px; color: var(--text-3); line-height: 1.6;
}
/* El mensaje de exito reutiliza el hueco del error: si tuvieran sitios
   distintos, la tarjeta daria un salto al pasar de uno a otro. */
.form-error.form-ok { color: var(--accent-green); }

/* El codigo se lee y se dicta, asi que va en monoespaciada y espaciado:
   distinguir la O del 0 importa cuando alguien lo deletrea por telefono. */
#usar-codigo input[name="codigo"] {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px;
}

/* Campo de contraseña con el botón de ver. El botón va DENTRO del campo,
   así que el relleno derecho del input le hace sitio: sin eso, el texto
   pasaría por debajo del ojo. */
.campo-clave { position: relative; display: flex; }
.campo-clave input { width: 100%; padding-right: 44px !important; }
.ver-clave {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  /* 36x36 de área tocable: por debajo de 24 px es difícil de acertar con
     el pulgar, que es como se va a usar esto en el campo. */
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--text-4); cursor: pointer;
  border-radius: var(--radius-sm);
}
.ver-clave:hover { color: var(--text-2); }
.ver-clave.viendo { color: var(--gramor-yellow); }
.ver-clave:focus-visible { outline: 2px solid var(--gramor-yellow); outline-offset: -2px; }
/* Cuando está mostrando, el ojo se tacha: el icono solo ya no dice si
   la contraseña está a la vista o escondida. */
.ver-clave.viendo::after {
  content: ''; position: absolute;
  width: 22px; height: 2px; background: currentColor;
  transform: rotate(-45deg); border-radius: 2px;
}

.login-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
}
.login-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 460px;
  /* Centra verticalmente cuando sobra sitio y deja desplazar cuando no.
     Es la pareja del `flex-start` de arriba: sin este margen la tarjeta
     se pegaría al borde superior siempre. */
  margin: auto;
  box-shadow: var(--shadow-strong);
  animation: cardIn 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-logo {
  display: flex; justify-content: center;
  margin-bottom: 12px;
}
.login-logo img {
  width: 76px; height: 76px;
  border-radius: 16px;
}
/* Misma jerarquía que el encabezado de la app: el producto primero,
   la organización debajo y el marco de trabajo en versalitas. */
.login-title {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text-1);
  line-height: 1.15;
  margin: 0;
}
.login-org {
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  margin: 6px 0 0;
}
.login-subtitle {
  text-align: center;
  color: var(--text-4);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 7px 0 26px;
}
.login-tabs {
  display: flex;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 20px;
}
.login-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 10px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  transition: var(--transition);
}
.login-tab.active {
  background: var(--gramor-yellow);
  color: var(--gramor-green);
  font-weight: 600;
}
.login-tab:not(.active):hover { color: var(--text-1); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-1);
  outline: none;
  transition: var(--transition);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gramor-yellow);
  box-shadow: 0 0 0 3px var(--gramor-yellow-soft);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-error {
  color: var(--accent-red);
  font-size: 12px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 6px;
}
.login-free-note {
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-3);
}
.login-free-note a {
  display: inline-block;
  color: var(--gramor-yellow);
  text-decoration: underline;
}

.login-footer {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-4);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-block,
.btn-mini,
.tool-btn,
.btn-icon,
.btn-icon-sm,
.btn-link {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-primary {
  background: var(--gramor-yellow);
  color: var(--gramor-green);
  padding: 11px 18px;
  font-weight: 600;
}
.btn-primary:hover {
  /* Un botón amarillo con resplandor amarillo alrededor es decir lo mismo
     dos veces. Basta con aclarar el color. */
  background: #fce98a;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-secondary {
  background: var(--bg-3);
  color: var(--text-1);
  padding: 11px 18px;
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-2); border-color: var(--gramor-yellow); }
.btn-block { width: 100%; }
.btn-mini {
  background: var(--surface-3);
  color: var(--gramor-yellow);
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
}
.btn-mini:hover { background: var(--gramor-yellow-soft); }
.btn-icon {
  background: var(--surface-2);
  color: var(--text-2);
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.btn-icon:hover { color: var(--gramor-yellow); border-color: var(--gramor-yellow); }
.btn-icon-sm {
  background: transparent;
  color: var(--text-3);
  width: 28px; height: 28px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.btn-icon-sm:hover { color: var(--text-1); background: var(--bg-3); }
.btn-link {
  background: transparent;
  color: var(--gramor-yellow);
  padding: 4px 8px;
  font-size: 12px;
}
.btn-link:hover { text-decoration: underline; }
.btn-danger {
  background: var(--gramor-red);
  color: white;
  padding: 10px 16px;
}
.btn-danger:hover { background: #d63838; }

/* ============================================================
   APP SHELL
   ============================================================ */
/* La tercera columna es el muelle del panel de detalle.
   ------------------------------------------------------------
   Vale 0 mientras no haya nada acoplado, así que no cambia nada
   para quien no abre el panel. Cuando el panel se ancla, esta
   columna toma su ancho y el mapa se ENCOGE en vez de quedar
   tapado: es la diferencia entre un panel acoplado y uno que
   simplemente flota encima. El ancho lo escribe el JS al anclar
   y al redimensionar. */
.app-shell {
  --dock-w: 0px;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--dock-w);
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "header header header"
    "sidebar main   dock";
  height: 100vh;
  width: 100vw;
}

/* Header */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
/* ============================================================
   BLOQUE DE MARCA
   ------------------------------------------------------------
   Jerarquía por TAMAÑO, no por decoración. La versión anterior
   usaba mayúsculas + peso 800 + mucho espaciado + un acento de
   color partiendo el nombre en dos: son los recursos de una
   plantilla genérica. Aquí el orden de lectura lo dan el tamaño
   y el tono, que es como se resuelve en tipografía de verdad.
   El espaciado entre letras se reserva para la línea pequeña en
   versalitas, que es donde de verdad hace falta.
   ============================================================ */
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  min-width: 0;
}
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.brand-text h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  /* Tracking ligeramente negativo: a este tamaño junta el texto y lo
     hace ver compuesto, no estirado. */
  letter-spacing: -0.25px;
  color: var(--text-1);
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
}
.brand-org {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.25;
  white-space: nowrap;
}
.brand-tagline {
  margin: 0;
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.85px;
  color: var(--text-4);
  line-height: 1.3;
  white-space: nowrap;
}
.brand:hover .brand-text h1 { color: var(--gramor-yellow); }
.brand-text h1,
.brand-org,
.brand-tagline { transition: color 160ms ease; }
/* No se encoge: si falta sitio, lo cede la marca y el buscador, nunca
   los indicadores de estado. */
.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.user-pill {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.user-pill strong { color: var(--gramor-yellow); }

/* Sidebar nav */
.sidebar-nav {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  z-index: 9;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.nav-btn {
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  transition: var(--transition);
  text-align: left;
}
.nav-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
  transform: translateX(2px);
}
.nav-btn.active {
  background: var(--gramor-yellow-soft);
  color: var(--gramor-yellow);
  border-left: 3px solid var(--gramor-yellow);
  padding-left: 9px;
}
.nav-btn span { font-size: 13px; }

/* Sidebar Weather Widget (Bottom Left of Sidebar - visible ONLY when predio detail is loaded) */
.sidebar-weather-widget {
  margin-top: auto;
  background: linear-gradient(165deg, rgba(17, 26, 46, 0.96), rgba(11, 18, 32, 0.98));
  border: 1px solid rgba(249, 224, 118, 0.35);
  border-radius: var(--radius);
  padding: 10px 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 200ms ease;
  flex-shrink: 0;
}

.sidebar-weather-widget:hover {
  border-color: rgba(249, 224, 118, 0.55);
}

.sw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  gap: 4px;
}

.sw-title {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--gramor-yellow);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sw-predio-badge {
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(30, 58, 95, 0.65);
  border: 1px solid rgba(59, 130, 246, 0.4);
  padding: 2px 5px;
  border-radius: 6px;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.6), rgba(15, 39, 68, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 10px;
  padding: 8px 10px;
}

.sw-current-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sw-cur-icon {
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  flex-shrink: 0;
}
.sw-cur-icon .sw-weather-icon { width: 26px; height: 26px; color: var(--gramor-yellow); }

.sw-cur-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sw-cur-temp {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.sw-cur-desc {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-strip-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: -3px;
}

.sw-source {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 8.5px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  padding-top: 5px;
  line-height: 1.3;
  white-space: nowrap;
}

.sw-cur-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 10.5px;
  font-weight: 700;
  color: #93c5fd;
  line-height: 1.3;
  white-space: nowrap;
}

.sw-days-strip {
  display: flex;
  gap: 4px;
  justify-content: space-between;
  padding-bottom: 2px;
}

.sw-day-card {
  /* flex-basis 0 + min-width 0 para que las 4 tarjetas se repartan el
     ancho disponible de la barra lateral sin desbordarla. */
  flex: 1 1 0;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 2px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 150ms ease;
}

.sw-day-card:hover {
  border-color: var(--gramor-yellow);
  transform: translateY(-1px);
}

.sw-day-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}

.sw-day-ico {
  font-size: 19px;
  line-height: 1.1;
  margin: 1px 0;
  display: flex;
  justify-content: center;
}
.sw-day-ico .sw-weather-icon { width: 16px; height: 16px; color: var(--gramor-yellow); }

.sw-day-temp {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-1);
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.sw-day-min {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
}

.sw-day-precip {
  font-size: 9px;
  color: #60a5fa;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
 * Panel de impacto (rol comprador) — esquina inferior izquierda
 * del sidebar, visible al abrir el detalle de un proyecto.
 * ============================================================ */
.impacto-widget {
  margin-top: auto;
  background: linear-gradient(165deg, rgba(17, 34, 26, 0.96), rgba(11, 24, 18, 0.98));
  border: 1px solid rgba(61, 220, 151, 0.35);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 200ms ease;
  flex-shrink: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.impacto-widget:hover { border-color: rgba(61, 220, 151, 0.55); }

.impacto-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.impacto-title {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent-green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.impacto-stat {
  background: rgba(61, 220, 151, 0.08);
  border: 1px solid rgba(61, 220, 151, 0.28);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
}
.impacto-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}
.impacto-stat-label {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.5;
}

.impacto-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.impacto-practicas {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.impacto-practica-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.35;
}
.impacto-practica-item svg {
  width: 13px;
  height: 13px;
  color: var(--accent-green);
  flex-shrink: 0;
  margin-top: 1px;
}

.impacto-mensaje {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.impacto-mensaje p { margin: 0 0 10px; }
.impacto-mensaje p:last-child { margin-bottom: 0; }

/* Main map area */
.app-main {
  grid-area: main;
  position: relative;
  overflow: hidden;
}
#map {
  position: absolute; inset: 0;
  background: var(--bg-1);
  z-index: 1;
}
.leaflet-container { background: var(--bg-1); font-family: 'Inter', sans-serif; }
.leaflet-control-attribution {
  background: rgba(11, 18, 32, 0.7) !important;
  color: var(--text-3) !important;
  font-size: 10px;
}
.leaflet-bar a {
  background: var(--surface) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}
.leaflet-bar a:hover { background: var(--bg-3) !important; }

/* Map toolbar */
.map-toolbar {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-soft);
  z-index: 5;
}
.tool-btn {
  background: transparent;
  color: var(--text-2);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
}
.tool-btn:hover {
  background: var(--bg-3);
  color: var(--gramor-yellow);
}
.tool-btn.active {
  background: var(--gramor-yellow);
  color: var(--gramor-green);
}

/* Layer pills (floating left) */
.layer-buttons-floating {
  position: absolute;
  top: 76px; left: 14px;
  display: flex; flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.layer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.layer-pill:hover { border-color: var(--gramor-yellow); color: var(--text-1); }
.layer-pill.active {
  background: var(--gramor-yellow-soft);
  border-color: var(--gramor-yellow);
  color: var(--gramor-yellow);
}
.pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-4);
}
.pill-dot.sat { background: #38bdf8; }
.pill-dot.ndvi { background: #3DDC97; }
.pill-dot.moisture { background: #60a5fa; }
.pill-dot.carbon { background: #84cc16; }
.pill-dot.lst { background: #f87171; }
.pill-dot.contour { background: #fbbf24; }

/* Drawing hint */
.drawing-hint {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  background: var(--gramor-yellow);
  color: var(--gramor-green);
  padding: 10px 16px;
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-strong);
  z-index: 6;
  animation: pulse 1.5s ease-in-out infinite;
}
/* Sigue llamando la atención mientras se dibuja un predio, pero con una
   respiración sutil de opacidad en vez de un halo amarillo que crece y
   encoge. Cumple la misma función sin gritar. */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}
.drawing-hint .btn-link { color: var(--gramor-green); text-decoration: underline; }

/* ============================================================
   FLOATING PANELS
   ============================================================ */
.floating-panel {
  position: absolute;
  top: calc(var(--header-h) + 14px);
  bottom: 14px;
  width: var(--panel-w);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  z-index: 8;
  animation: panelIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.panel-left {
  left: calc(var(--sidebar-w) + 14px);
  animation-name: panelInLeft;
}
@keyframes panelInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.panel-right {
  right: 14px;
}
.view-panel { width: var(--view-w); }
.detail-panel { width: var(--view-w); }

/* ============================================================
   PANEL DE DETALLE: acoplable, movible y plegable
   ------------------------------------------------------------
   El panel ocupaba media pantalla y tapaba el mapa. Ahora puede
   acoplarse a la derecha (como siempre), abajo, o arrastrarse a
   donde el usuario quiera. La preferencia se guarda y se respeta
   entre sesiones.
   ============================================================ */
.panel-header-title { min-width: 0; }
.panel-header-title h3,
.panel-header-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El encabezado es el asa para arrastrar */
#detail-panel-header { cursor: grab; user-select: none; touch-action: none; }
#detail-panel-header:active { cursor: grabbing; }
/* ...pero los botones siguen siendo botones */
#detail-panel-header button { cursor: pointer; }

.btn-panel-ctl {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: 7px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 140ms ease;
  flex-shrink: 0;
}
.btn-panel-ctl svg { width: 14px; height: 14px; }
.btn-panel-ctl:hover { color: var(--gramor-yellow); border-color: var(--gramor-yellow); }
.btn-panel-ctl.active { color: var(--gramor-yellow); border-color: var(--gramor-yellow); background: var(--gramor-yellow-soft); }

/* --- Acoplado a la derecha: ocupa su columna y no tapa el mapa ---
   ------------------------------------------------------------------
   Antes este modo seguía siendo flotante: `position: absolute` con 14px
   de aire por los cuatro lados, esquinas redondeadas y sombra. Se veía
   bien y costaba caro: el aire y el radio se comen unos milímetros por
   cada lado, y sobre todo el panel TAPABA el mapa, así que la parte de
   la finca que quedaba debajo no se podía ni ver ni pinchar.

   Al pasar a ser celda de la rejilla, el mapa se encoge hasta donde
   empieza el panel. Se pierde ancho de mapa —el mismo que antes quedaba
   oculto— pero todo lo que queda es utilizable. El borde izquierdo es la
   única separación que hace falta.

   El modo libre sigue siendo flotante, que es para lo que sirve. */
.detail-panel.panel-dock-derecha {
  position: relative;
  grid-area: dock;
  top: auto; right: auto; bottom: auto; left: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--border-strong);
  box-shadow: none;
  animation: none;
  z-index: 6;
}

/* El asa de ancho se pega al borde izquierdo, que ahora es el que mueve
   la frontera entre el mapa y el panel. */
.detail-panel.panel-dock-derecha .panel-resize-w {
  left: -3px;
  right: auto;
}

/* Plegado y acoplado a la derecha: la columna se estrecha a la barra de
   título en vez de dejar una franja vacía a lo alto de la pantalla. */
.detail-panel.panel-dock-derecha.panel-plegado {
  height: auto;
  align-self: start;
}

/* --- Acoplado abajo: deja el mapa despejado arriba --- */
.detail-panel.panel-dock-abajo {
  top: auto;
  bottom: 14px;
  left: calc(var(--sidebar-w) + 14px);
  right: 14px;
  width: auto;
  height: 42vh;
  min-height: 200px;
  animation-name: panelInAbajo;
}
@keyframes panelInAbajo {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Libre: posicionado por arrastre (left/top en línea) --- */
.detail-panel.panel-libre {
  right: auto;
  bottom: auto;
  height: 62vh;
  min-height: 200px;
  animation: none;
}

/* --- Plegado: solo queda la barra de título --- */
.detail-panel.panel-plegado {
  height: auto;
  min-height: 0;
}
/* Cuando está acoplado abajo, el ancla es `bottom`, así que no se toca.
   En los demás modos el ancla es `top` y hay que soltar `bottom` para
   que el panel encoja hasta la altura del encabezado. */
.detail-panel.panel-plegado:not(.panel-dock-abajo) {
  bottom: auto;
}
.detail-panel.panel-plegado .detail-tabs,
.detail-panel.panel-plegado #detail-panel-body {
  display: none;
}
.detail-panel.panel-plegado #btn-panel-plegar svg { transform: rotate(180deg); }

/* --- Asas para cambiar el tamaño --- */
.panel-resize {
  position: absolute;
  z-index: 6;
  background: transparent;
  transition: background 140ms ease;
}
.panel-resize::after {
  content: '';
  position: absolute;
  background: var(--border-strong);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.panel-resize:hover::after { opacity: 1; }

/* Asa vertical (borde izquierdo): cambia el ANCHO */
.panel-resize-w {
  left: -3px; top: 0; bottom: 0; width: 9px;
  cursor: ew-resize;
}
.panel-resize-w::after { left: 3px; top: 50%; margin-top: -22px; width: 3px; height: 44px; }

/* Asa horizontal (borde superior): cambia el ALTO */
.panel-resize-h {
  top: -3px; left: 0; right: 0; height: 9px;
  cursor: ns-resize;
}
.panel-resize-h::after { top: 3px; left: 50%; margin-left: -22px; height: 3px; width: 44px; }

/* Cada asa solo aparece donde tiene sentido:
   - acoplado a la derecha -> solo ancho (el alto lo fijan top y bottom)
   - acoplado abajo        -> solo alto  (el ancho lo fijan left y right)
   - libre                 -> las dos */
.detail-panel.panel-dock-abajo .panel-resize-w { display: none; }
.detail-panel:not(.panel-dock-abajo):not(.panel-libre) .panel-resize-h { display: none; }
/* Plegado no hay nada que redimensionar */
.detail-panel.panel-plegado .panel-resize { display: none; }

.detail-panel.panel-redimensionando {
  animation: none;
  transition: none;
  user-select: none;
}
.detail-panel.panel-redimensionando .panel-resize::after { opacity: 1; }

/* Mientras se arrastra: sin animación y por encima de todo */
.detail-panel.panel-arrastrando {
  animation: none;
  transition: none;
  z-index: 20;
  opacity: 0.96;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.panel-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}
.panel-header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-3);
}
.panel-actions { display: flex; gap: 6px; align-items: center; }
.btn-close-panel {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 22px;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 6px;
  line-height: 1;
  transition: var(--transition);
}
.btn-close-panel:hover { color: var(--text-1); background: var(--bg-3); }

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

/* Detail tabs */
.detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0 8px;
  /* Antes era flex-wrap: wrap, y con 9 pestañas se partía en DOS filas,
     robándole al mapa una franja entera de alto. Ahora es una sola fila
     que se desliza en horizontal cuando el panel es angosto. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  overscroll-behavior-x: contain;
}
.detail-tabs::-webkit-scrollbar { height: 4px; }
.detail-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.detail-tabs::-webkit-scrollbar-track { background: transparent; }
.detail-tab {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 12px 12px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.detail-tab:hover { color: var(--text-1); }
.detail-tab.active {
  color: var(--gramor-yellow);
  border-bottom-color: var(--gramor-yellow);
}

/* Pestaña especial CO2xIA — se destaca a propósito del resto (píldora con
   degradado) para que se note que es una función distinta, no un tab más. */
/* Compensación, en el encabezado del panel.
   ------------------------------------------------------------
   Salió de la barra de pestañas a propósito. Era la undécima de once en
   una fila que se desliza: en un panel angosto había que arrastrar hasta
   el final para descubrir que existía, y es la única que trae dinero a
   la finca. El encabezado no se desliza nunca, así que desde aquí está
   siempre visible, se mire la pestaña que se mire.

   Se separa de los botones de ventana con una línea fina: son cosas
   distintas —esto abre contenido, aquellos mueven el panel— y conviene
   que se lea así. */
.btn-compensacion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(61, 220, 151, 0.45);
  background: rgba(61, 220, 151, 0.10);
  color: var(--accent-green);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 140ms ease;
}
.btn-compensacion svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-compensacion:hover {
  background: rgba(61, 220, 151, 0.18);
  border-color: var(--accent-green);
}
.btn-compensacion.active {
  background: var(--accent-green);
  border-color: var(--accent-green);
  color: var(--gramor-green);
}
.panel-actions-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}

/* En un panel muy angosto el texto sobra: el icono y el color ya lo
   identifican, y lo que no puede perderse es el botón entero.
   ------------------------------------------------------------------
   Se aplica al panel acoplado —donde el ancho lo fija la columna— y
   también en tabletas, donde el panel es estrecho aunque no esté
   acoplado. En móvil NO hace falta: allí se ocultan los cuatro botones
   de ventana y sobra sitio para la palabra. */
@media (max-width: 1280px) {
  .detail-panel.panel-dock-derecha .btn-compensacion span { display: none; }
  .detail-panel.panel-dock-derecha .btn-compensacion { padding: 5px 8px; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .detail-panel .btn-compensacion span { display: none; }
  .detail-panel .btn-compensacion { padding: 5px 8px; }
}

.detail-tab-co2xia {
  margin: 6px 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  /* Sigue destacando del resto, pero por contención: un fondo sólido muy
     tenue y un borde real. El degradado doble con borde luminoso y el
     resplandor verde al pasar el cursor eran puro adorno.

     Dos capas y no una: el verde translúcido va ENCIMA de un color
     opaco. Al quedar fija sobre una barra que se desliza, un fondo
     semitransparente dejaba ver las otras pestañas pasando por debajo y
     el texto se volvía ilegible. */
  background:
    linear-gradient(rgba(61, 220, 151, 0.10), rgba(61, 220, 151, 0.10)),
    var(--surface-2);
  border-color: rgba(61, 220, 151, 0.45);
  color: var(--accent-green);
  font-weight: 600;
  text-align: center;
  font-size: 10.5px;
  white-space: nowrap;
}
.detail-tab-co2xia .co2xia-x { color: inherit; }
.detail-tab-co2xia:hover {
  /* Mismo motivo que arriba: capa translúcida sobre fondo opaco. */
  background:
    linear-gradient(rgba(61, 220, 151, 0.16), rgba(61, 220, 151, 0.16)),
    var(--surface-2);
  border-color: var(--accent-green);
}
.detail-tab-co2xia.active {
  color: var(--gramor-green);
  background: var(--accent-green);
  border-color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}
.detail-tab-co2xia.active .co2xia-x { color: var(--gramor-green); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-4);
}
.empty-state svg {
  margin-bottom: 12px;
  opacity: 0.5;
}
.empty-state p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
}
.empty-state span {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

/* ============================================================
   PREDIOS LIST (left panel)
   ============================================================ */
.predio-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.predio-item:hover {
  border-color: var(--gramor-yellow);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.predio-item.active {
  border-color: var(--gramor-yellow);
  background: var(--gramor-yellow-soft);
}
.predio-item-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
}
.predio-item-name {
  font-weight: 600;
  color: var(--text-1);
  font-size: 14px;
}
.predio-item-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.predio-item-meta span {
  display: inline-flex; align-items: center; gap: 3px;
}
.predio-item-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   DASHBOARD VIEW
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.kpi-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--gramor-yellow);
  opacity: 0.6;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.kpi-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  line-height: 1.1;
}
.kpi-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}
.kpi-sub.positive { color: var(--accent-green); }
.kpi-sub.negative { color: var(--accent-red); }

.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin: 18px 0 10px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Active siembras list */
.siembra-row {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: var(--transition);
}
.siembra-row:hover { border-color: var(--gramor-yellow); }
.siembra-row-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.crop-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--gramor-yellow-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--gramor-yellow);
  flex-shrink: 0;
}
.siembra-row-info { flex: 1; min-width: 0; }
.siembra-row-name { font-weight: 600; color: var(--text-1); font-size: 13px; }
.siembra-row-meta { font-size: 11px; color: var(--text-3); }
.siembra-progress {
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.siembra-progress-bar {
  height: 100%;
  /* En una barra de 4px un degradado de dos colores no se percibe:
     solo ensucia el color. Sólido. */
  background: var(--accent-green);
  transition: width 600ms ease;
}
.siembra-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--text-4);
  margin-top: 4px;
}

/* ============================================================
   METRICS TAB
   ============================================================ */
.badges-row {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.badge-real { background: rgba(61, 220, 151, 0.15); color: var(--accent-green); border: 1px solid rgba(61, 220, 151, 0.4); }
.badge-est { background: rgba(251, 191, 36, 0.15); color: var(--accent-amber); border: 1px solid rgba(251, 191, 36, 0.4); }
/* Ni medido ni estimado: no se pudo consultar. Gris a propósito — el
   ámbar de "estimado" comunica un dato aproximado, y aquí no hay dato. */
.badge-nodata { background: rgba(148, 163, 184, 0.15); color: var(--text-muted, #94a3b8); border: 1px solid rgba(148, 163, 184, 0.4); }

/* ---- Relieve y agua (diseño keyline) ---- */
.relieve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.relieve-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.relieve-stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; }
.relieve-stat-value { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 800; color: var(--text-1); }
.relieve-stat-value small { font-size: 11px; font-weight: 600; color: var(--text-3); }

.relieve-cat {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--surface);
  margin-bottom: 4px;
}
.relieve-cat strong { font-size: 12.5px; color: var(--text-1); display: block; margin-bottom: 4px; }
.relieve-cat p { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0; }
.relieve-cat-moderada { border-left-color: var(--accent-amber); }
.relieve-cat-fuerte { border-left-color: #fb923c; }
.relieve-cat-muy_fuerte { border-left-color: var(--accent-red); }

.relieve-water { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.relieve-water-item { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text-2); }
.relieve-water-bar { height: 7px; border-radius: 4px; min-width: 8px; max-width: 90px; flex-shrink: 0; }

.relieve-kp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #38bdf8;
  border-radius: 10px;
  padding: 10px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.relieve-kp:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.relieve-kp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.relieve-kp-head strong { font-size: 12.5px; color: var(--text-1); }
.relieve-kp-elev { font-size: 11px; font-weight: 700; color: #38bdf8; white-space: nowrap; }
.relieve-kp-msg { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0; }

/* El candidato elegido se marca: sin esto no hay forma de saber desde
   qué punto se va a trazar, y con varios candidatos eso importa. */
.relieve-kp.activo {
  border-color: var(--gramor-yellow);
  border-left-color: var(--gramor-yellow);
  background: var(--gramor-yellow-soft);
}

/* ============================================================
   DISEÑO KEYLINE
   ------------------------------------------------------------
   Los controles van apilados y no en rejilla ancha: el panel puede
   estar acoplado en 300 px y en un teléfono es aún más estrecho.
   Solo la fila de tres números se reparte, porque son cortos.
   ============================================================ */
.kl-diseno { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.kl-campo { display: flex; flex-direction: column; gap: 5px; }
.kl-label { font-size: 11px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.kl-select, .kl-num {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  padding: 8px 10px;
  font-size: 12px;
  width: 100%;
}
.kl-select:focus, .kl-num:focus { outline: 2px solid var(--gramor-yellow); outline-offset: 1px; }
.kl-nota { font-size: 10.5px; color: var(--text-3); line-height: 1.45; margin: 0; }
.kl-campo-doble { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kl-campo-doble .kl-label { display: block; margin-bottom: 4px; }

.kl-resumen { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.kl-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kl-cifras > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.kl-cifras strong { display: block; font-size: 17px; color: var(--gramor-yellow); line-height: 1.1; }
.kl-cifras span { font-size: 10px; color: var(--text-3); line-height: 1.3; display: block; margin-top: 3px; }

.kl-guia { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.kl-guia strong { color: var(--text-1); }

/* El bloque que explica el efecto es lo más importante de la pantalla:
   sin él, doce líneas azules no dicen por qué esto es mejor que sembrar
   en curvas de nivel. */
.kl-efecto {
  background: var(--surface-2);
  border-left: 3px solid #38bdf8;
  border-radius: 0 10px 10px 0;
  padding: 11px 13px;
}
.kl-efecto strong { display: block; font-size: 12px; color: #7dd3fc; margin-bottom: 5px; }
.kl-efecto p { font-size: 11.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 6px; }
.kl-efecto p:last-child { margin-bottom: 0; }
.kl-contraste { color: var(--text-3) !important; font-style: italic; }
.kl-efecto-nulo { border-left-color: var(--text-3); }
.kl-efecto-nulo strong { color: var(--text-2); }

.kl-tabla-wrap { overflow-x: auto; }
.kl-tabla { width: 100%; border-collapse: collapse; font-size: 11px; }
.kl-tabla th {
  text-align: left; font-size: 10px; color: var(--text-3);
  font-weight: 700; padding: 5px 6px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.kl-tabla td { padding: 5px 6px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.kl-num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kl-mas-tendida { color: #7dd3fc; }
.kl-mas-inclinada { color: var(--gramor-yellow); }

.kl-aviso { font-size: 10.5px; color: var(--text-3); line-height: 1.5; margin: 0; }

.relieve-help { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 10px; }
.relieve-empty { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 0; }
.relieve-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }

.relieve-verdict {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--surface);
  margin-bottom: 10px;
}
.relieve-verdict strong { font-size: 13px; color: var(--text-1); display: block; margin-bottom: 4px; }
.relieve-verdict p { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin: 0; }
.relieve-verdict-nivel { border-left-color: #38bdf8; }
.relieve-verdict-keyline { border-left-color: var(--accent-green); }
.relieve-verdict-limite { border-left-color: var(--accent-amber); }
.relieve-verdict-fuerte { border-left-color: var(--accent-red); }

.relieve-profile-stats {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 11px; color: var(--text-3);
  margin-bottom: 8px;
}
.relieve-profile-stats strong { color: var(--text-1); }

.relieve-disclaimer {
  margin-top: 14px;
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.climrisk-summary-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.climrisk-summary-label { font-size: 11.5px; color: var(--text-2); }
.climrisk-summary-value { font-size: 18px; font-weight: 700; }
.climrisk-summary-row {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 11px; color: var(--text-2);
  margin-bottom: 4px;
}
.climrisk-hint {
  font-size: 10.5px; color: var(--text-3);
  margin-bottom: 12px;
}
.climrisk-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.climrisk-zone-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.climrisk-zone-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.climrisk-zone-card.active {
  outline: 2px solid var(--gramor-yellow);
  outline-offset: -1px;
}
.climrisk-zone-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.climrisk-zone-badge {
  padding: 2px 8px; border-radius: 10px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap;
}
.climrisk-zone-msg {
  font-size: 11.5px; color: var(--text-2);
  line-height: 1.5; margin: 0 0 8px;
}
.climrisk-zone-stats {
  display: flex; gap: 12px;
  font-size: 10.5px; color: var(--text-3);
}

.health-score-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
}
.health-score-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.health-score-value {
  font-size: 42px;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  line-height: 1.1;
  margin: 4px 0;
}
.health-score-value.good { color: var(--accent-green); }
.health-score-value.medium { color: var(--accent-amber); }
.health-score-value.bad { color: var(--accent-red); }
.health-score-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.metric-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition);
}
.metric-tile:hover { border-color: var(--gramor-yellow); }
.metric-tile.active {
  border-color: var(--gramor-yellow);
  background: var(--gramor-yellow-soft);
}
.metric-tile-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.metric-tile-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  margin-top: 2px;
}

.chart-container {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
  height: 240px;
  position: relative;
}

.alerts-list { display: flex; flex-direction: column; gap: 6px; }
.alert-item {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  border-left: 3px solid;
}
.alert-item.critico { background: rgba(248, 113, 113, 0.1); border-color: var(--accent-red); color: var(--accent-red); }
.alert-item.alto { background: rgba(251, 146, 60, 0.1); border-color: #fb923c; color: #fb923c; }
.alert-item.medio { background: rgba(251, 191, 36, 0.1); border-color: var(--accent-amber); color: var(--accent-amber); }
.alert-item.ok { background: rgba(61, 220, 151, 0.1); border-color: var(--accent-green); color: var(--accent-green); }
.alert-item strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }

/* ============================================================
   LOTES TAB
   ============================================================ */
.lote-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.lote-item:hover { border-color: var(--gramor-yellow); }
.lote-item.active { border-color: var(--gramor-yellow); background: var(--gramor-yellow-soft); }
.lote-item-head { display: flex; justify-content: space-between; align-items: center; }
.lote-item-name { font-weight: 600; color: var(--text-1); }
.lote-state {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.lote-state.preparacion { background: rgba(148, 163, 184, 0.15); color: var(--text-3); }
.lote-state.activo { background: rgba(61, 220, 151, 0.15); color: var(--accent-green); }
.lote-state.cosecha { background: rgba(249, 224, 118, 0.15); color: var(--gramor-yellow); }
.lote-state.reposo { background: rgba(139, 148, 103, 0.15); color: var(--gramor-muted); }
.lote-item-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* ============================================================
   SIEMBRAS TAB
   ============================================================ */
.siembra-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.siembra-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.siembra-card-title { font-weight: 600; color: var(--text-1); font-size: 14px; }
.siembra-card-scientific { font-size: 11px; color: var(--text-3); font-style: italic; }
.siembra-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
}
.siembra-card-meta b { color: var(--text-2); font-weight: 500; }
.siembra-card-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   FINANZAS TAB / VIEW
   ============================================================ */
.fin-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.fin-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.fin-tile-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fin-tile-value {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  margin-top: 4px;
}
.fin-tile-value.positive { color: var(--accent-green); }
.fin-tile-value.negative { color: var(--accent-red); }

/* ---- Finanzas: barra de herramientas, filtros y paginación ---- */
.fin-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.fin-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Aviso de contexto (monedas mezcladas, resultado de una importación).
   Ámbar: pide atención sin gritar como haría el rojo de un error. */
.fin-aviso {
  background: var(--gramor-yellow-soft);
  border: 1px solid rgba(249, 224, 118, 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 14px;
  font-size: 12px; color: var(--text-2); line-height: 1.5;
}
.fin-aviso-linea { margin-top: 6px; color: var(--text-3); font-size: 11.5px; }

/* Comparación contra el año anterior bajo cada cifra. */
.fin-delta { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; }
.fin-delta.bueno { color: var(--accent-green); }
.fin-delta.malo { color: var(--accent-red); }
.fin-delta.neutro { color: var(--text-4); font-weight: 500; }

.fin-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fin-filtro-input, .fin-filtro-sel {
  background: var(--surface-2); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; font-size: 12px; font-family: inherit;
}
.fin-filtro-input { flex: 1 1 240px; }
.fin-filtro-input:focus, .fin-filtro-sel:focus {
  outline: none; border-color: var(--accent-green);
}
.fin-paginador {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; flex-wrap: wrap;
}
.fin-paginador-info { font-size: 11.5px; color: var(--text-3); margin-right: auto; }

/* Pista bajo un campo de formulario: explica por qué conviene rellenarlo. */
.field-hint {
  display: block; margin-top: 5px;
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
}
.field-hint code {
  background: var(--surface-2); border-radius: 3px;
  padding: 1px 4px; font-size: 11px;
}

/* Previsualización de la importación CSV. */
.csv-errores {
  margin-top: 6px; max-height: 120px; overflow-y: auto;
  font-size: 11px; color: var(--accent-amber);
}
.csv-previa-tabla {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; font-size: 11.5px;
}
.csv-previa-fila {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-2);
}
.csv-previa-fila:last-child { border-bottom: none; }

/* Fila de movimiento editable: tiene que verse que se puede pulsar. */
.tx-row-editable { cursor: pointer; transition: background 0.12s ease; }
.tx-row-editable:hover, .tx-row-editable:focus-visible {
  background: var(--surface-2); outline: none;
}
.tx-row-editable:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-green); }
.tx-editar { opacity: 0; color: var(--text-3); font-size: 13px; padding-left: 8px; transition: opacity 0.12s ease; }
.tx-row-editable:hover .tx-editar, .tx-row-editable:focus-visible .tx-editar { opacity: 1; }

.tx-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.tx-row:last-child { border-bottom: none; }
.tx-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.tx-icon.ingreso { background: rgba(61, 220, 151, 0.15); color: var(--accent-green); }
.tx-icon.gasto { background: rgba(248, 113, 113, 0.15); color: var(--accent-red); }
.tx-icon.perdida { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.tx-info { flex: 1; min-width: 0; }
.tx-desc { font-size: 13px; color: var(--text-1); font-weight: 500; }
.tx-meta { font-size: 11px; color: var(--text-3); }
.tx-amount {
  font-weight: 600;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
}
.tx-amount.ingreso { color: var(--accent-green); }
.tx-amount.gasto { color: var(--accent-red); }
.tx-amount.perdida { color: #fb923c; }

.year-selector {
  display: flex; gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.year-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.year-btn:hover { border-color: var(--gramor-yellow); }
.year-btn.active {
  background: var(--gramor-yellow);
  color: var(--gramor-green);
  border-color: var(--gramor-yellow);
}

/* Importación de geometrías: lista de polígonos encontrados en el
   archivo, para marcar cuáles se guardan. */
.geo-lista {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto;
  margin-bottom: 10px;
}
.geo-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.geo-item:hover { border-color: var(--gramor-yellow); }
.geo-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.geo-item-cuerpo { min-width: 0; }
.geo-item-nombre {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-1);
  overflow-wrap: anywhere;
}
.geo-item-meta { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Registrar rápido: monto + categoría en un toque, nada más.
   Los chips son grandes a propósito -- el objetivo es tocar sin apuntar. */
.gr-tipo-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.gr-tipo-btn {
  flex: 1; padding: 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.gr-tipo-btn.active {
  background: var(--gramor-yellow); color: var(--gramor-green); border-color: var(--gramor-yellow);
}
.gr-hint { font-size: 12px; color: var(--text-3); margin: 14px 0 8px; }
.gr-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.gr-cat-chip {
  padding: 14px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: var(--transition);
}
.gr-cat-chip:hover:not(:disabled) { border-color: var(--gramor-yellow); color: var(--gramor-yellow); }
.gr-cat-chip:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   CALENDARIO VIEW
   ============================================================ */
.cal-event {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.cal-event-date {
  background: var(--gramor-yellow-soft);
  color: var(--gramor-yellow);
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
  min-width: 56px;
  flex-shrink: 0;
}
.cal-event-day { font-size: 18px; font-weight: 700; font-family: 'Outfit', sans-serif; line-height: 1; }
.cal-event-month { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.cal-event-info { flex: 1; }
.cal-event-title { font-weight: 600; color: var(--text-1); font-size: 13px; }
.cal-event-meta { font-size: 11px; color: var(--text-3); }

/* ============================================================
   CONFIG VIEW
   ============================================================ */
.config-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.config-section h4 {
  font-size: 13px;
  color: var(--gramor-yellow);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.config-form { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-root {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  animation: fadeIn 200ms;
}
.modal-content {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-content.modal-lg { max-width: 700px; }
/* El selector de cultivos necesita sitio de verdad: son 92 cultivos en
   15 categorías, y en 500 px acaban en una lista interminable. */
.modal-content.modal-xl { max-width: 1040px; }

/* ============================================================
   COBERTURA DEL SUELO (MSAVI2)
   ============================================================ */
.cobertura-caja {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}
/* Solo se colorea el extremo bajo, que es el que pide mirar el lote.
   Pintar de verde lo alto invitaria a leerlo como una nota, y esto no
   califica a nadie: describe cuanto suelo se ve. */
.cobertura-caja.cob-bajo { border-left-color: var(--accent-amber); }
.cobertura-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cobertura-valor { font-size: 26px; font-weight: 700; color: var(--text-1); line-height: 1.1; }
.cob-bajo .cobertura-valor { color: var(--accent-amber); }
.cobertura-etiqueta { font-size: 11px; color: var(--text-4); margin-top: 2px; }
.cobertura-nivel {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-2); white-space: nowrap;
}
.cob-bajo .cobertura-nivel { background: rgba(251, 191, 36, 0.14); color: var(--accent-amber); }

/* Barras y no linea: cada punto es una pasada del satelite y entre una
   y otra no se sabe nada. */
.cobertura-grafico {
  display: flex; align-items: flex-end; gap: 3px;
  height: 40px; border-bottom: 1px solid var(--border);
}
.cobertura-barra {
  flex: 1 1 auto; min-width: 3px;
  background: var(--gramor-muted); opacity: 0.85;
  border-radius: 2px 2px 0 0;
}
.cobertura-barra:hover { opacity: 1; background: var(--gramor-yellow); }
.cobertura-ejes {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--text-4); margin: 5px 0 10px;
}
.cobertura-caja p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 8px; }
.cobertura-nota { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 0; }

/* ============================================================
   RADAR SENTINEL-1
   ============================================================ */
.radar-intro { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-bottom: 10px; }
.radar-intro strong { color: var(--text-2); }
.radar-aviso {
  background: var(--bg-2); border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 11px;
  font-size: 12px; color: var(--text-2); line-height: 1.55;
}
.radar-serie {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 13px; margin-bottom: 9px;
}
.radar-cabecera {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 10px;
}
.radar-cabecera strong { font-size: 13px; color: var(--text-1); }
.radar-cabecera span { font-size: 11.5px; color: var(--text-4); }

/* Barras y no línea: cada observación es una pasada suelta del satélite,
   y unirlas con una línea sugeriría una continuidad que no hay —entre
   pasada y pasada no se sabe nada. */
.radar-grafico {
  display: flex; align-items: flex-end; gap: 3px;
  height: 46px; padding: 0 1px;
  border-bottom: 1px solid var(--border);
}
.radar-barra {
  flex: 1 1 auto; min-width: 3px;
  background: var(--accent-blue); opacity: 0.75;
  border-radius: 2px 2px 0 0;
}
.radar-barra:hover { opacity: 1; }
.radar-ejes {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--text-4); margin: 5px 0 10px;
}
.radar-datos { list-style: none; margin: 0; padding: 0; }
.radar-datos li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border);
}
.radar-datos li:last-child { border-bottom: 0; }
.radar-datos span { color: var(--text-3); }
.radar-datos strong { color: var(--text-1); white-space: nowrap; }

.radar-limites { margin-top: 10px; }
.radar-limites summary {
  cursor: pointer; font-size: 12px; color: var(--text-3);
  padding: 7px 0;
}
.radar-limites summary:hover { color: var(--gramor-yellow); }
.radar-limites ul { margin: 6px 0 0; padding-left: 18px; }
.radar-limites li {
  font-size: 11.5px; color: var(--text-3);
  line-height: 1.55; margin-bottom: 6px;
}

/* ============================================================
   ENSAYOS COMPARATIVOS
   ============================================================ */
.ensayo-intro { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-bottom: 12px; }
.ensayo-item {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px; margin-bottom: 9px;
}
.ensayo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ensayo-cabecera strong { font-size: 14px; color: var(--text-1); }

.ensayo-lotes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 9px 0; }
.ensayo-lote {
  font-size: 12px; padding: 4px 9px;
  border-radius: 999px; border: 1px solid var(--border-strong);
}
/* El lote con la práctica y el testigo se distinguen a simple vista:
   confundir cuál es cuál invierte la lectura del resultado entero. */
.ensayo-lote.practica { background: var(--gramor-yellow-soft); border-color: var(--gramor-yellow); color: var(--gramor-yellow); }
.ensayo-lote.testigo { background: var(--bg-3); color: var(--text-2); }
.ensayo-vs { font-size: 11px; color: var(--text-4); }

.ensayo-practica { font-size: 12.5px; color: var(--text-2); margin: 0 0 6px; }
.ensayo-meta { font-size: 11.5px; color: var(--text-4); margin: 0 0 9px; line-height: 1.5; }
.ensayo-falta { color: var(--accent-amber); }

.ensayo-resultado { margin-top: 11px; }
.ensayo-veredicto {
  border-left: 3px solid var(--border-strong);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 11px 12px; margin-bottom: 10px;
}
.ensayo-veredicto.v-ok { border-left-color: var(--accent-green); }
.ensayo-veredicto.v-neutro { border-left-color: var(--text-4); }
.ensayo-veredicto strong { display: block; font-size: 13px; color: var(--text-1); margin-bottom: 6px; }
.ensayo-veredicto p { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 0; }

.ensayo-datos { list-style: none; margin: 0 0 10px; padding: 0; }
.ensayo-datos li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border);
}
.ensayo-datos li:last-child { border-bottom: 0; }
.ensayo-datos span { color: var(--text-3); }
.ensayo-datos strong { color: var(--text-1); white-space: nowrap; }

.ensayo-did {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 12px;
}
.ensayo-did > strong { display: block; font-size: 12px; color: var(--gramor-yellow); margin-bottom: 6px; }
.ensayo-did p { font-size: 12px; color: var(--text-2); line-height: 1.55; margin: 0 0 6px; }
.ensayo-nota { font-size: 11.5px; color: var(--text-4); line-height: 1.5; margin: 0; }
.ensayo-aviso {
  background: var(--bg-2); border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-sm); padding: 11px 12px;
  font-size: 12px; color: var(--text-2); line-height: 1.55;
}

/* ============================================================
   HABILITACIÓN DE CONSULTORAS
   ============================================================ */
.consultoras-lista { display: flex; flex-direction: column; gap: 8px; }
.consultora-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.consultora-item strong { font-size: 13.5px; color: var(--text-1); }
.consultora-meta { font-size: 11.5px; color: var(--text-4); margin-top: 3px; line-height: 1.5; }
.consultora-accion { display: flex; align-items: center; gap: 10px; }
.consultora-estado { font-size: 11px; padding: 3px 9px; border-radius: 999px; }
/* Pendiente en ámbar y habilitada en verde: quien administra tiene que
   ver de un vistazo a quién le falta respuesta. */
.consultora-estado.no { background: rgba(251, 191, 36, 0.14); color: var(--accent-amber); }
.consultora-estado.si { background: rgba(61, 220, 151, 0.14); color: var(--accent-green); }

/* --- asignar fincas a una consultora --- */
.asignar-intro { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-bottom: 12px; }
.fincas-lista {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 48vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px;
}
.finca-opcion {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px;
}
.finca-opcion:hover { background: var(--bg-3); }
/* Lo asignado se distingue del resto: quien administra tiene que ver de
   un vistazo qué le está dando a esta persona. */
.finca-opcion.asignada { background: var(--gramor-yellow-soft); }
.finca-opcion input[type="checkbox"] {
  flex: 0 0 auto; width: 15px; height: 15px;
  min-width: 15px; max-width: 15px; margin: 0; padding: 0;
  accent-color: var(--gramor-yellow); cursor: pointer;
}
.finca-nombre { flex: 1 1 auto; min-width: 0; color: var(--text-1); text-align: left; }
.finca-opcion.asignada .finca-nombre { color: var(--gramor-yellow); font-weight: 500; }
.finca-duena { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
.asignar-nota { font-size: 11.5px; color: var(--text-3); margin: 10px 0 0; min-height: 16px; }

/* ============================================================
   A QUÉ FINCA IR PRIMERO
   ============================================================ */
.consultor-aviso {
  background: var(--bg-1);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--text-3); line-height: 1.55;
}
.consultor-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.consultor-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
}
/* El número de orden se ve, pero sin gritar: es una sugerencia de
   reparto, no una clasificación de fincas buenas y malas. */
.consultor-puesto {
  flex: 0 0 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--text-3);
  border-radius: 50%; font-size: 12px; font-weight: 600;
}
.consultor-cuerpo { flex: 1; min-width: 0; }
.consultor-cabecera {
  display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.consultor-cabecera strong { font-size: 14px; color: var(--text-1); }
.consultor-duena { font-size: 12px; color: var(--text-4); }

.consultor-motivos { display: flex; flex-direction: column; gap: 5px; }
.consultor-etiqueta {
  font-size: 12px; line-height: 1.5;
  padding: 5px 9px; border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-strong);
  background: var(--bg-2); color: var(--text-2);
}
/* Lo agronómico y la ceguera se distinguen por color porque significan
   cosas distintas: «puede estar pasando algo» frente a «no lo sabemos». */
.consultor-etiqueta.et-agro { border-left-color: var(--accent-amber); }
.consultor-etiqueta.et-ciego { border-left-color: var(--accent-blue); }

.consultor-nota { font-size: 11.5px; color: var(--text-4); margin: 8px 0 0; line-height: 1.5; }
.consultor-pie {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-4); line-height: 1.55;
}
.consultor-fallo { color: var(--accent-amber); }

/* ============================================================
   AGUA Y SANIDAD
   ============================================================ */
.agro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.agro-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
}
/* El color va en el borde y en la cifra, no en el fondo: una tarjeta
   entera en rojo se lee como alarma, y aquí casi nunca lo es. */
.agro-card.agro-bien { border-left-color: var(--accent-green); }
.agro-card.agro-medio { border-left-color: var(--accent-amber); }
.agro-card.agro-mal { border-left-color: var(--accent-red); }

.agro-card h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3); margin: 0 0 10px;
}
.agro-cifra {
  font-size: 30px; font-weight: 700; color: var(--text-1);
  line-height: 1.1; margin-bottom: 8px;
}
.agro-cifra span {
  font-size: 12px; font-weight: 400; color: var(--text-3);
  margin-left: 5px;
}
.agro-bien .agro-cifra { color: var(--accent-green); }
.agro-medio .agro-cifra { color: var(--accent-amber); }
.agro-mal .agro-cifra { color: var(--accent-red); }

.agro-titular { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }

.agro-barra {
  height: 6px; background: var(--bg-3); border-radius: 999px;
  overflow: hidden; margin-bottom: 10px;
}
.agro-barra span { display: block; height: 100%; background: currentColor; border-radius: 999px; }
.agro-bien .agro-barra span { background: var(--accent-green); }
.agro-medio .agro-barra span { background: var(--accent-amber); }
.agro-mal .agro-barra span { background: var(--accent-red); }

.agro-card p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 8px; }
.agro-nota { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
/* Lo que pide ir a mirar el lote se destaca, pero sin gritar. */
.agro-ojo { color: var(--accent-amber); }

.agro-datos { list-style: none; margin: 0 0 10px; padding: 0; }
.agro-datos li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.agro-datos li:last-child { border-bottom: 0; }
.agro-datos span { color: var(--text-3); }
.agro-datos strong { color: var(--text-1); white-space: nowrap; }

.agro-pie {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-4); line-height: 1.55;
}

/* Texto que además es botón: se subraya de puntos para que se note que
   se puede tocar, sin convertirlo en un botón que compita con el título. */
.link-inline {
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  border-bottom: 1px dotted var(--text-4);
}
.link-inline:hover { color: var(--gramor-yellow); border-bottom-color: var(--gramor-yellow); }
.link-inline:focus-visible { outline: 2px solid var(--gramor-yellow); outline-offset: 2px; }

/* ============================================================
   SELECTOR DE CULTIVOS
   Rejilla por categorías, búsqueda y selección múltiple.
   ============================================================ */
/* Bloque de formulario que NO usa `.field`, precisamente para que sus
   reglas de input no alcancen a lo que va dentro. */
.campo-suelto { display: flex; flex-direction: column; gap: 5px; }
.campo-titulo { font-size: 12px; color: var(--text-3); font-weight: 500; }
.campo-titulo small { color: var(--text-4); font-weight: 400; }

.cultivo-picker { display: flex; flex-direction: column; gap: 14px; }

/* --- barra de búsqueda --- */
.cultivo-buscar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
.cultivo-buscar input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 14px;
}
.cultivo-buscar input:focus {
  outline: none;
  border-color: var(--gramor-yellow);
  box-shadow: 0 0 0 3px var(--gramor-yellow-soft);
}
.cultivo-buscar .lupa {
  position: absolute; left: 13px;
  color: var(--text-4); font-size: 15px; pointer-events: none;
}

/* --- fichas de lo ya elegido --- */
.cultivo-elegidos {
  display: flex; flex-wrap: wrap; gap: 7px;
  min-height: 34px;
  padding: 9px 11px;
  background: var(--bg-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  align-items: center;
}
.cultivo-elegidos .vacio { color: var(--text-4); font-size: 12.5px; }
.cultivo-ficha {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-1);
}
/* El principal se distingue a simple vista: es el que manda cuando algún
   cálculo necesita un solo cultivo, así que no puede quedar disimulado
   entre los demás. */
.cultivo-ficha.principal {
  background: var(--gramor-yellow-soft);
  border-color: var(--gramor-yellow);
  color: var(--gramor-yellow);
  font-weight: 600;
}
.cultivo-ficha .estrella {
  cursor: pointer; opacity: 0.45; font-size: 12px;
  background: none; border: 0; color: inherit; padding: 0 2px;
}
.cultivo-ficha .estrella:hover { opacity: 1; }
.cultivo-ficha.principal .estrella { opacity: 1; }
.cultivo-ficha .quitar {
  cursor: pointer;
  background: none; border: 0; color: inherit;
  font-size: 15px; line-height: 1; opacity: 0.5; padding: 0 2px;
}
.cultivo-ficha .quitar:hover { opacity: 1; color: var(--accent-red); }

/* --- rejilla de categorías --- */
.cultivo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.cultivo-grupo {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
}
.cultivo-grupo h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gramor-yellow);
  margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
}
.cultivo-grupo h4 .cuenta { color: var(--text-4); font-weight: 400; letter-spacing: 0; }
.cultivo-opcion {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px; color: var(--text-2);
  text-align: left;
}
.cultivo-opcion:hover { background: var(--bg-3); color: var(--text-1); }
/* El texto ocupa el resto de la fila y se alinea a la izquierda. Sin
   esto, cualquier contenedor que reparta el espacio empuja el nombre
   contra el borde derecho y lo separa de su casilla. */
.cultivo-opcion > span {
  flex: 1 1 auto; min-width: 0;
  text-align: left; line-height: 1.35;
}
/* Las casillas se blindan a propósito.
   El selector vive dentro de un formulario, y la regla general
   `.field input { width: 100%; padding: 10px 12px }` se les aplicaba y
   las estiraba a todo el ancho de la columna: la casilla ocupaba la
   fila entera y el nombre del cultivo salía despedido al borde
   derecho, partido en dos líneas. Se veía en la ventana de crear
   predio y no en la de editar, porque solo la primera envuelve el
   selector en un `.field`.
   Fijar aquí tamaño, relleno y ancho hace que el componente se vea
   igual lo metan donde lo metan. */
.cultivo-opcion input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  min-width: 15px; max-width: 15px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--gramor-yellow);
  cursor: pointer;
}
.cultivo-opcion.marcada { color: var(--text-1); font-weight: 500; }
/* Al llegar al tope, lo no marcado se apaga en vez de desaparecer: que se
   vea que sigue ahí y por qué no se puede añadir. */
.cultivo-opcion.bloqueada { opacity: 0.35; cursor: not-allowed; }
.cultivo-opcion.bloqueada:hover { background: none; }

.cultivo-vacio {
  grid-column: 1 / -1;
  text-align: center; padding: 26px 14px;
  color: var(--text-3); font-size: 13px;
}
.cultivo-pie {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-3);
  gap: 12px; flex-wrap: wrap;
}
.cultivo-pie .tope { color: var(--accent-amber); }

@media (max-width: 640px) {
  .cultivo-rejilla { grid-template-columns: 1fr; max-height: 40vh; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-2);
  z-index: 1;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header h3 { font-size: 16px; color: var(--text-1); }
.modal-body { padding: 20px; }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
  background: var(--bg-2);
}
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-info {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
  display: flex; justify-content: space-between;
}
.modal-info strong { color: var(--gramor-yellow); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-3);
  color: var(--text-1);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-strong);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2000;
  max-width: 90vw;
}
.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.success { border-color: var(--accent-green); color: var(--accent-green); }
.toast.error { border-color: var(--accent-red); color: var(--accent-red); }
.toast.info { border-color: var(--accent-blue); color: var(--accent-blue); }

/* ============================================================
   UTILS
   ============================================================ */
.text-muted { color: var(--text-3); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; align-items: center; }
.gap-2 { gap: 8px; }
.flex-wrap { flex-wrap: wrap; }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE (tablet)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 64px; --view-w: 480px; --panel-w: 360px; }
  .nav-btn span { display: none; }
  .nav-btn { justify-content: center; }
  /* Se recorta de abajo hacia arriba, conservando siempre lo más
     identificable: primero cae la línea de versalitas, y solo en
     pantallas muy angostas la organización. */
  .brand-tagline { display: none; }
  .brand-logo { width: 38px; height: 38px; border-radius: 9px; }
  .brand-text h1 { font-size: 14.5px; }
  .brand-org { font-size: 10px; }
  /* La barra lateral colapsa a 64px (solo iconos). Estos dos paneles no
     caben de forma legible ahí — se ocultan en vez de mostrarse
     recortados a una franja ilegible. El !important es necesario porque
     el JS los muestra con style="display:flex" en línea. */
  .sidebar-weather-widget,
  .impacto-widget { display: none !important; }
  /* En pantalla angosta el panel ya ocupa casi todo el ancho: cambiar su
     tamaño o moverlo no aporta nada y solo entorpece el toque. */
  .detail-panel .panel-resize { display: none !important; }
  #detail-panel-header { cursor: default; }
}
@media (max-width: 768px) {
  /* ============================================================
     MÓVIL: los paneles dejan de ser ventanas y pasan a ser pantallas
     ------------------------------------------------------------
     En un teléfono, un panel de 347px sobre una pantalla de 375px no es
     una ventana flotante: es la pantalla entera con 14px de desperdicio
     por cada lado. Y traía dos problemas peores que el desperdicio.

     1. EL FONDO ERA TRANSLÚCIDO. `--surface` es rgba(…, 0.92), un 8% de
        transparencia que en escritorio se lee como un cristal elegante
        sobre el mapa. Con el panel ocupando todo, ese 8% dejaba pasar la
        barra de herramientas y los botones de capas que quedan debajo, y
        el resultado eran tres capas de texto superpuestas e ilegibles.
        Aquí el panel se vuelve opaco: mismo color, sin el alfa.

     2. EL MAPA SEGUÍA MANDANDO SUS CONTROLES. La barra de dibujo y los
        botones de capas se quedaban encima de todo. Controlan un mapa
        que en ese momento no se ve ni se puede tocar, así que solo
        estorban; se ocultan mientras haya un panel abierto y vuelven al
        cerrarlo.
     ============================================================ */
  :root {
    /* Mismo RGB que --surface, sin transparencia. */
    --surface: #111a2e;
  }

  /* El panel arranca DESPUÉS de la barra lateral, no debajo.
     ------------------------------------------------------------
     Llevarlo a left:0 parecía ganar 64px de ancho y no ganaba ninguno:
     la barra se dibuja por encima, así que lo único que cambiaba era que
     el rail tapaba la primera columna de texto. Se leía «board» donde
     decía «Dashboard» y «IOS TOTALES» donde decía «PREDIOS TOTALES».

     Y la barra tiene que quedarse: en este monitor los paneles SON los
     destinos de navegación —Tablero, Finanzas, Comparativa—, así que
     esconderla obligaría a cerrar el panel antes de cada salto. */
  .floating-panel {
    top: var(--header-h);
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    width: auto !important;
    height: auto;
    border-radius: 0;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
  }
  .panel-left { left: var(--sidebar-w); }

  /* El buscador NO entra aquí: vive en el encabezado, no sobre el mapa,
     y sigue siendo útil con un panel abierto. */
  body.panel-abierto .map-toolbar,
  body.panel-abierto .layer-buttons-floating { display: none !important; }

  .kpi-grid, .fin-summary-grid, .metrics-grid { grid-template-columns: 1fr; }
  .map-toolbar { left: 10px; right: 10px; transform: none; justify-content: center; flex-wrap: wrap; }

  /* ============================================================
     ENCABEZADO: cabía, pero aplastando todo
     ------------------------------------------------------------
     No desbordaba —375px de contenido en 375px de barra— porque cada
     pieza cedía ancho hasta lo absurdo: la marca se quedaba en CERO
     píxeles (el logotipo desaparecía del todo) y el buscador en 120,
     donde «Buscar predio, lugar o coordenadas…» se leía «Buscar predi».

     Se reparte a propósito en vez de dejar que el navegador decida:
     el logotipo y los botones no ceden, y el buscador se queda con lo
     que sobre, que es lo correcto porque su texto es prescindible.
     ============================================================ */
  .app-header { padding: 0 10px; gap: 8px; }

  /* La marca deja de encogerse: solo el logotipo, con su tamaño fijo. */
  .brand { flex: 0 0 auto; }
  .brand-text { display: none; }

  /* El buscador: icono en reposo, campo entero al tocarlo.
     ------------------------------------------------------------
     Repartiendo el ancho sobrante se quedaba en 89px, donde solo caben
     la lupa y dos letras: no sirve para escribir ni para leer lo que se
     escribió. Y ocupa sitio permanentemente para algo que se usa un
     momento y se abandona.

     En reposo es un botón redondo de 38px, como la campana. Al recibir
     el foco se estira sobre la barra y se puede escribir de verdad. La
     transición avisa de que la barra cambió, en vez de que algo aparezca
     de golpe encima. */
  #buscador-mapa {
    flex: 0 0 38px;
    min-width: 0;
    transition: flex-basis 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #buscador-mapa:focus-within {
    flex: 1 1 auto;
    min-width: 150px;
  }
  /* El texto de ayuda no cabe en 38px y se veía como un recorte sin
     sentido; reaparece cuando el campo se abre. */
  #buscador-mapa:not(:focus-within) .buscador-input { opacity: 0; }
  #buscador-mapa .buscador-input { transition: opacity 140ms ease; }

  /* La píldora de usuario deja de mostrar el correo.
     El correo es un nodo de texto suelto dentro del span, no un
     elemento, así que no hay nada a lo que apuntar con un selector:
     `.user-pill .user-name` llevaba tiempo aquí sin coincidir con nada.
     Se anula el tamaño del texto del contenedor —que solo afecta a esos
     nodos sueltos— y se le devuelve al nombre, que sí está en <strong>. */
  .user-pill { font-size: 0; padding: 6px 10px; flex: 0 0 auto; max-width: 120px; overflow: hidden; }
  .user-pill strong { font-size: 12px; white-space: nowrap; }

  /* Los controles de ventana del panel sobran en un teléfono.
     ------------------------------------------------------------
     Acoplar a la derecha, acoplar abajo, desanclar y plegar: el JS ya
     los ignora por debajo de 1024px, porque ahí el panel ocupa la
     pantalla y moverlo no significa nada. Pero seguían dibujándose, y
     cuatro botones de 26px más el de compensación dejaban unos 60px
     para el nombre del predio en una barra de 311px.

     Cerrar sí se queda: es la única salida del panel. */
  .detail-panel #btn-dock-derecha,
  .detail-panel #btn-dock-abajo,
  .detail-panel #btn-panel-libre,
  .detail-panel #btn-panel-plegar,
  .detail-panel .panel-actions-sep { display: none; }
}

/* Leaflet draw fixes for dark theme */
.leaflet-draw-toolbar a {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
.leaflet-draw-actions a {
  background-color: var(--bg-3) !important;
  color: var(--text-1) !important;
}
/* ============================================================
   BUSCADOR DEL MAPA
   Sustituye al control de leaflet-control-geocoder: sus estilos se
   quitaron junto con la librería, que ya no se carga.
   ============================================================ */
/* Va en la cabecera, entre la marca y los indicadores de la derecha.
   `position: relative` es lo que ancla el panel de resultados, que se
   despliega por encima del mapa sin empujar la cabecera. */
.buscador {
  position: relative;
  flex: 1 1 340px;
  max-width: 420px;
  min-width: 160px;
  margin: 0 16px;
  font-family: inherit;
  z-index: 20;
}
.buscador-campo {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.buscador-campo:focus-within { border-color: var(--gramor-yellow); }
.buscador-icono { color: var(--text-3); font-size: 15px; flex-shrink: 0; }
.buscador-input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--text-1);
  font-family: inherit; font-size: 13.5px;
  padding: 9px 0;
}
.buscador-input::placeholder { color: var(--text-4); }
/* La X nativa del type=search se sale del tema: se usa la propia. */
.buscador-input::-webkit-search-cancel-button { display: none; }
.buscador-limpiar {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 17px; line-height: 1;
  padding: 2px 4px; flex-shrink: 0;
}
.buscador-limpiar:hover { color: var(--text-1); }

.buscador-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden auto;
  max-height: 320px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.buscador-panel[hidden] { display: none; }

.buscador-grupo {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-4);
  padding: 9px 12px 5px;
}
.buscador-opcion {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 8px 12px;
  font-family: inherit;
  border-left: 2px solid transparent;
}
.buscador-opcion:hover,
.buscador-opcion.activa {
  background: var(--bg-3);
  border-left-color: var(--gramor-yellow);
}
.buscador-opcion-icono { font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.buscador-opcion-texto { min-width: 0; flex: 1; }
.buscador-opcion-titulo {
  display: block; font-size: 13px; color: var(--text-1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buscador-opcion-detalle {
  display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buscador-aviso {
  padding: 11px 12px;
  font-size: 12px; color: var(--text-3); line-height: 1.5;
}

/* Cabecera compacta: por debajo de cierto ancho, la marca y los
   indicadores compiten con el buscador. Se recorta lo prescindible —el
   texto "En línea" (el punto de color ya lo dice) y las líneas
   secundarias de la marca— antes que encoger el campo de búsqueda. */
@media (max-width: 1100px) {
  .brand-tagline { display: none; }
  .buscador { margin: 0 10px; }
}
@media (max-width: 860px) {
  .brand-org { display: none; }
  .offline-pill-texto { display: none; }
  .offline-pill { padding: 5px 8px; }
  .user-pill { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 620px) {
  .brand-text { display: none; }
  .buscador { margin: 0 8px; min-width: 120px; }
}

/* ============================================================
   V5 · PRÁCTICAS, BITÁCORA, COMPARATIVA, ONBOARDING
   (añadido en FRONT-V5)
   ============================================================ */

/* --- Prácticas (detail-tab) --- */
.practica-row {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: var(--transition);
}
.practica-row:hover { border-color: var(--gramor-yellow); }
.practica-row-head {
  display: flex; align-items: center; gap: 10px;
}
.practica-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--gramor-yellow-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.practica-row-info { flex: 1; min-width: 0; }
.practica-row-name { font-weight: 600; color: var(--text-1); font-size: 13px; }
.practica-row-meta { font-size: 11px; color: var(--text-3); }
.practica-row-inputs,
.practica-row-cost,
.practica-row-notes {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
  padding-left: 46px;
}
.practica-row-inputs b,
.practica-row-cost b { color: var(--text-1); font-weight: 500; }
.practica-row-notes {
  color: var(--text-3);
  font-style: italic;
}

/* --- Bitácora (vista principal) --- */
.bitacora-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.bitacora-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.bitacora-card:hover { border-color: var(--gramor-yellow); }
.bitacora-card-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--bg-3);
  display: block;
}
.bitacora-card-photo-placeholder {
  width: 100%;
  height: 100px;
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.bitacora-card-body {
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.bitacora-card-title {
  font-weight: 600;
  color: var(--text-1);
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
}
.bitacora-card-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bitacora-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: 10px;
  color: var(--text-3);
  margin-top: auto;
}
.bitacora-card-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.bitacora-tag {
  background: var(--surface-3);
  color: var(--gramor-yellow);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid rgba(249, 224, 118, 0.25);
}
.bitacora-card-actions {
  display: flex; justify-content: flex-end;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.bitacora-photo-preview {
  margin-top: 6px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* --- Comparativa (vista principal) --- */
.comparativa-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.comp-sum-tile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.comp-sum-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.comp-sum-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  line-height: 1.1;
}
.comp-sum-value.positive { color: var(--accent-green); }
.comp-sum-value.negative { color: var(--accent-red); }

.comparativa-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.comparativa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  min-width: 720px;
}
.comparativa-table thead {
  background: var(--bg-3);
}
.comparativa-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-strong);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.comparativa-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  white-space: nowrap;
}
.comparativa-table tbody tr:last-child td { border-bottom: none; }
.comparativa-table tbody tr:hover { background: var(--surface-2); }
.comparativa-table td.positive { color: var(--accent-green); }
.comparativa-table td.negative { color: var(--accent-red); }
.comparativa-table td.roi-high { color: var(--accent-green); font-weight: 600; }
.comparativa-table td.roi-mid  { color: var(--accent-amber); font-weight: 600; }
.comparativa-table td.roi-low  { color: var(--accent-red); font-weight: 600; }

/* --- Onboarding modal --- */
.onb-dots {
  display: flex; gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.onb-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  border: 1px solid var(--border);
  transition: var(--transition);
}
.onb-dot.active {
  background: var(--gramor-yellow);
  color: var(--gramor-green);
  border-color: var(--gramor-yellow);
}
.onb-dot.done {
  background: var(--accent-green);
  color: var(--bg-0);
  border-color: var(--accent-green);
}
.onb-content {
  text-align: center;
  padding: 4px 8px;
}
.onb-icon {
  font-size: 44px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.onb-icon svg { width: 40px; height: 40px; color: var(--gramor-yellow); }
.onb-content h2 {
  font-size: 20px;
  color: var(--text-1);
  margin-bottom: 10px;
  font-family: 'Outfit', sans-serif;
}
.onb-content p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 8px;
}
.onb-list {
  text-align: left;
  margin: 12px auto;
  max-width: 380px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
}
.onb-list li { margin-bottom: 6px; }
.onb-list strong { color: var(--gramor-yellow); }
.onb-terms {
  text-align: left;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
}
.onb-terms p { margin-bottom: 8px; }
.onb-terms strong { color: var(--text-1); }
.onb-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-1);
  margin-top: 8px;
  cursor: pointer;
  justify-content: center;
}
.onb-checkbox input {
  width: 16px; height: 16px;
  accent-color: var(--gramor-yellow);
  cursor: pointer;
}

/* Responsive: comparativa + bitácora en móvil */
@media (max-width: 768px) {
  .comparativa-summary { grid-template-columns: 1fr 1fr; }
  .bitacora-grid { grid-template-columns: 1fr; }
  .comparativa-table { font-size: 10px; }
  .comparativa-table th, .comparativa-table td { padding: 6px 8px; }
}

/* ============================================================
   v5.1 · HEATMAP NDVI / CARBONO
   ============================================================ */
.heatmap-controls {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.heatmap-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gramor-yellow);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.heatmap-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.heatmap-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 200ms;
  text-align: center;
}

.heatmap-btn:hover:not(:disabled) {
  background: var(--bg-3);
  border-color: var(--gramor-yellow);
  color: var(--text-1);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.heatmap-btn.active {
  background: var(--gramor-yellow);
  color: var(--gramor-green);
  border-color: var(--gramor-yellow);
  box-shadow: 0 0 0 2px rgba(249, 224, 118, 0.2);
}

.heatmap-btn.active .heatmap-icon {
  color: var(--gramor-green);
}

.heatmap-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.heatmap-clear {
  background: rgba(198, 40, 40, 0.1);
  border-color: rgba(198, 40, 40, 0.3);
  color: var(--accent-red);
}

.heatmap-clear:hover:not(:disabled) {
  background: var(--accent-red);
  color: white;
  border-color: var(--accent-red);
}

.heatmap-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.icon-ndvi { color: #4ade80; }
.icon-carbon { color: #fbbf24; }
.icon-moisture { color: #38bdf8; }

/* ============================================================
 * CO2xIA — banner del programa de compensación (pestaña Compensación)
 * ============================================================ */
.co2xia-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  /* El borde con degradado enmascarado (la técnica del ::before con
     mask-composite) es de los recursos que más delatan una plantilla.
     Un fondo tenue con un filete a la izquierda comunica lo mismo:
     "esto es una sección distinta", sin el efecto. */
  background: rgba(61, 220, 151, 0.07);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  position: relative;
}
.co2xia-banner-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 220, 151, 0.14);
  border: 1px solid rgba(61, 220, 151, 0.35);
  color: var(--accent-green);
}
.co2xia-banner-icon svg { width: 20px; height: 20px; }

/* Aclaración de alcance del programa. Va siempre junto al banner: si el
   nombre incluye la palabra "compensación", el matiz tiene que estar en el
   mismo golpe de vista, no en una página aparte. Ver GUIA-DE-LENGUAJE.md */
.programa-aclaracion {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-3);
  margin: -6px 0 14px;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.programa-aclaracion strong { color: var(--text-2); font-weight: 600; }

/* Acompañamiento institucional. Se presenta con contención deliberada:
   son organizaciones reales con convenio, y exagerar su respaldo visual
   sugeriría que avalan las cifras satelitales, que no es el caso. */
.acompanamiento {
  margin: 0 0 14px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.acompanamiento-titulo {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.85px;
  color: var(--text-4);
  margin-bottom: 8px;
}
.acompanamiento-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-bottom: 8px;
}
.acompanamiento-org {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}
/* Aviso para predios de acuicultura o pesca. Va arriba, antes que cualquier
   cifra, porque su función es evitar que se lean como dato indicadores que
   sobre agua no significan nada. */
.aviso-acuatico {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 14px;
}
.aviso-acuatico strong {
  display: block;
  font-size: 12.5px;
  color: var(--accent-blue);
  margin-bottom: 4px;
}
.aviso-acuatico p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---- Administración: gestión de predios ---- */
.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.admin-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.admin-tab:hover { color: var(--text-1); }
.admin-tab.active { color: var(--gramor-yellow); border-bottom-color: var(--gramor-yellow); }

.admin-filtros {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-filtros input[type="search"] {
  flex: 1;
  min-width: 200px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  color: var(--text-1);
  font-size: 12.5px;
}
.admin-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2); cursor: pointer;
  white-space: nowrap;
}
.admin-conteo { font-size: 11px; color: var(--text-4); white-space: nowrap; }

.admin-fila {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.admin-fila:hover { border-color: var(--gramor-yellow); transform: translateY(-1px); }
.admin-fila-head {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.admin-fila-head strong { font-size: 13px; color: var(--text-1); }
.admin-fila-meta { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

.admin-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text-3);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.admin-badge-pub { color: var(--accent-green); border-color: rgba(61,220,151,0.4); background: rgba(61,220,151,0.10); }
.admin-badge-ok { color: var(--accent-green); border-color: rgba(61,220,151,0.35); background: transparent; }
.admin-badge-alerta { color: var(--accent-amber); border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.10); }

.admin-detalle .section-title { margin-bottom: 8px; }
.admin-form { display: flex; flex-direction: column; gap: 10px; }

/* ---- Patrocinios: reparto de hectáreas y fincas apoyadas ---- */
.patro-barra {
  height: 5px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.patro-barra span {
  display: block;
  height: 100%;
  background: var(--accent-green);
}
.patro-resumen {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
}
.patro-resumen strong { color: var(--text-1); font-weight: 600; }
.patro-disponible { margin-bottom: 14px; }

.patro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-green);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.patro-card-cerrado {
  border-left-color: var(--border-strong);
  opacity: 0.72;
}
.patro-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.patro-card-head strong { font-size: 13px; color: var(--text-1); }
.patro-ha {
  font-size: 11px; font-weight: 700;
  color: var(--accent-green);
  white-space: nowrap;
}
.patro-card-cerrado .patro-ha { color: var(--text-3); }
.patro-card-meta { font-size: 11px; color: var(--text-3); }
.patro-card-desc {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.5;
}

.acompanamiento-nota {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-4);
}
.co2xia-banner-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.01em;
}
.co2xia-banner-title .co2xia-x {
  color: var(--gramor-yellow);
  font-weight: 800;
}
.co2xia-banner-sub {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.4;
}

.practicas-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.practicas-checklist-item {
  display: flex;
  /* flex-start y no center: varias etiquetas ocupan dos líneas en móvil
     y con `center` la casilla quedaba flotando a media altura del texto. */
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  cursor: pointer;
  padding: 3px 0;
}
.practicas-checklist-item input { width: auto; flex-shrink: 0; margin-top: 2px; }
.practicas-texto { flex: 1; min-width: 0; }
/* El icono de ayuda necesita su propia área táctil. El glifo mide 16 px,
   por debajo del mínimo de 24x24 que pide la WCAG 2.5.8; se amplía a 32
   con relleno y se compensa con margen negativo para no separar las
   filas de la lista. */
.practicas-checklist-item .info-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  margin: -8px -8px -8px 0;
}
/* Práctica retirada de la lista pero declarada en su día: se distingue
   sin esconderla. */
.practicas-historica {
  opacity: 0.75;
  border-left: 2px solid var(--border-strong);
  padding-left: 8px;
}

/* Leyenda del heatmap */
.heatmap-legend {
  margin-top: 12px;
  padding: 10px;
  background: var(--bg-1);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.legend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}

.legend-bar {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 4px;
  border: 1px solid rgba(0,0,0,0.2);
}

.legend-bar.ndvi-bar {
  background: linear-gradient(90deg,
    #b45040 0%,
    #d88c4a 15%,
    #f0b450 30%,
    #dcc85a 40%,
    #b4d264 50%,
    #8cc86e 60%,
    #64b464 70%,
    #469650 85%,
    #286e32 100%);
}

.legend-bar.carbon-bar {
  background: linear-gradient(90deg,
    #3c50b4 0%,
    #46a0c8 25%,
    #78c882 50%,
    #b4d25a 75%,
    #dcb446 100%);
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.legend-desc {
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
}

.legend-value {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
}

.legend-value strong {
  color: var(--gramor-yellow);
}

/* Leaflet image overlay z-index */
.leaflet-image-layer.heatmap-overlay {
  z-index: 350 !important;
  filter: saturate(1.1);
}

@media (max-width: 768px) {
  .heatmap-buttons { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .heatmap-btn { padding: 7px 3px; font-size: 10px; }
}

.offline-pill { background: rgba(45, 80, 22, 0.18); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.35); border-radius: 20px; padding: 5px 12px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s ease; user-select: none; }
.offline-pill.offline { background: rgba(230, 81, 0, 0.18); color: #ff9800; border-color: rgba(255, 152, 0, 0.45); }
.offline-pill.syncing { background: rgba(2, 136, 209, 0.18); color: #29b6f6; border-color: rgba(41, 182, 246, 0.45); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }

/* ============================================================
 * Cumplimiento UE — tabla de biomasa histórica (dentro de la app)
 * ============================================================ */
.text-muted-inline { color: var(--text-3); }

.data-table {
  width: 100%;
  font-size: 11px;
  margin-top: 8px;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}
.data-table th {
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.4px;
}

/* ============================================================
 * Informe imprimible (Cumplimiento UE / general)
 * ------------------------------------------------------------
 * #report-view permanece oculto en pantalla; solo se muestra al
 * imprimir (Ctrl+P / Guardar como PDF), con fondo claro y texto
 * oscuro para que quede legible en papel o PDF, distinto del tema
 * oscuro de la app.
 * ============================================================ */
.report-page {
  background: #ffffff;
  color: #111827;
  padding: 24px;
  font-family: 'Inter', system-ui, sans-serif;
}
.report-page h1 { font-size: 18px; margin: 0 0 4px; color: #111827; }
.report-page h2 { font-size: 14px; margin: 20px 0 8px; color: #1f2937; border-bottom: 1px solid #d1d5db; padding-bottom: 4px; }
.report-sub { font-size: 11px; color: #6b7280; margin: 0 0 8px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 8px; }
.report-table th, .report-table td { border: 1px solid #d1d5db; padding: 5px 8px; text-align: left; color: #1f2937; }
.report-table th { background: #f3f4f6; font-weight: 600; }
.report-disclaimer { font-size: 9.5px; color: #6b7280; margin-top: 16px; line-height: 1.5; border-top: 1px solid #d1d5db; padding-top: 8px; }

/* Nota de alcance dentro de un apartado del informe. Va con más peso
   que el descargo del pie: el informe llega a un comprador y lo que
   este apartado NO demuestra tiene que leerse junto al resultado, no
   al final de la página. */
.report-nota {
  font-size: 10px; color: #4b5563; line-height: 1.6;
  background: #fef3c7; border: 1px solid #fcd34d; border-left: 3px solid #d97706;
  border-radius: 3px; padding: 8px 10px; margin: 8px 0 4px;
}
.report-nota strong { color: #92400e; }

@media print {
  body:has(#report-view:not([hidden])) * { visibility: hidden; }
  body:has(#report-view:not([hidden])) #report-view,
  body:has(#report-view:not([hidden])) #report-view * { visibility: visible; }
  #report-view:not([hidden]) {
    display: block !important;
    position: absolute; left: 0; top: 0; width: 100%;
  }
}

/* ============================================================
 * Glosario — ícono ⓘ tocable + popover con explicación en
 * lenguaje sencillo (pensado para uso en celular, en el campo)
 * ============================================================ */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-2);
  font-size: 11px;
  font-style: normal;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  margin: 0 2px;
}
.info-icon:hover, .info-icon:focus {
  background: var(--gramor-yellow);
  color: #1a1a1a;
  outline: none;
}
.glossary-popover {
  position: absolute;
  z-index: 9999;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--gramor-yellow);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.glossary-popover-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gramor-yellow);
  margin-bottom: 6px;
  padding-right: 16px;
}
.glossary-popover-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}
.glossary-popover-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.glossary-popover-close:hover { color: var(--text-1); }

/* ============================================================
 * MARKETPLACE DE COMPENSACIÓN — shell reducido para role="comprador"
 * ------------------------------------------------------------
 * Oculta herramientas de dibujo/edición de predios (no aplican a
 * un comprador, que no crea predios) sin remover nada del DOM.
 * ============================================================ */
body.role-comprador .map-toolbar,
body.role-comprador .layer-buttons-floating {
  display: none;
}

/* ============================================================
   Buzón de avisos (campana de la cabecera)
   ------------------------------------------------------------
   Panel anclado a la campana. Deliberadamente sobrio: el color
   solo aparece en la barra lateral de severidad, porque un buzón
   de avisos con fondos de color se vuelve ilegible en cuanto hay
   más de tres entradas.
   ============================================================ */
.alertas-wrap { position: relative; display: inline-flex; }

.alertas-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gramor-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--bg-1);
}

.alertas-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  /* Valor bajo a propósito. .app-header es un elemento de grid con
     z-index: 10, así que crea su propio contexto de apilamiento y este
     número solo ordena dentro de la cabecera; frente al resto de la app
     el panel vale 10, que ya está por encima del mapa (1), la barra
     lateral (9) y los paneles flotantes (8), y por debajo de los modales
     (1000) y los avisos emergentes (2000), que es lo correcto. Poner
     1200 aquí daba a entender que competía con los modales. */
  z-index: 30;
  overflow: hidden;
}
.alertas-panel[hidden] { display: none; }

.alertas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
}
.alertas-head strong { font-size: 13.5px; color: var(--text-1); }

.btn-link-sm {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link-sm:hover { color: var(--gramor-yellow); }

.alertas-lista { overflow-y: auto; flex: 1 1 auto; }

.alerta-item {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.alerta-item:last-child { border-bottom: none; }
.alerta-item:hover { background: var(--surface-2); }

/* La severidad se lee en una barra de 3px, no en el fondo del item. */
.alerta-sev {
  flex: 0 0 3px;
  border-radius: 2px;
  background: var(--text-4);
}
.alerta-item[data-sev="urgente"] .alerta-sev { background: var(--gramor-red); }
.alerta-item[data-sev="atencion"] .alerta-sev { background: var(--accent-amber); }
.alerta-item[data-sev="info"] .alerta-sev { background: var(--accent-blue); }

.alerta-cuerpo { min-width: 0; flex: 1 1 auto; }
.alerta-titulo {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-2);
  margin: 0 0 3px;
}
.alerta-item.no-leida .alerta-titulo { color: var(--text-1); font-weight: 600; }
.alerta-detalle {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
  margin: 0 0 4px;
}
.alerta-fecha { font-size: 10.5px; color: var(--text-4); }

.alertas-vacio {
  padding: 26px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}

.alertas-nota {
  margin: 0;
  padding: 9px 13px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-4);
}

@media (max-width: 640px) {
  /* En móvil el panel se ancla al borde de la pantalla, no a la campana:
     anclado a la campana se salía por la derecha. */
  .alertas-panel { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; }
}

/* ============================================================
   Visitas de verificación entre pares (expediente SPG)
   ------------------------------------------------------------
   Un expediente se llena en el campo, muchas veces con una mano
   y con sol encima. Por eso: objetivos de toque grandes, una sola
   columna, y el color reservado para el resultado de cada
   criterio, que es el único dato que se busca de un vistazo.
   ============================================================ */

.visitas-intro p { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 8px; }
.visitas-limite {
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
  color: var(--text-3) !important;
  font-size: 11.5px !important;
}
.visitas-vacio { font-size: 12.5px; color: var(--text-3); padding: 14px 0; }

.visitas-lista { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }

.visita-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}
.visita-fila:hover { border-color: var(--border-strong); background: var(--bg-3); }
.visita-fila-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.visita-fila-cuerpo strong { font-size: 12.5px; color: var(--text-1); }
.visita-fila-meta { font-size: 11px; color: var(--text-3); }

.visita-estado {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  white-space: nowrap;
}
.visita-estado-programada { color: var(--accent-blue); border-color: var(--accent-blue); }
.visita-estado-en_curso { color: var(--accent-amber); border-color: var(--accent-amber); }
.visita-estado-cerrada { color: var(--accent-green); border-color: var(--accent-green); }

/* ---------- El expediente ---------- */

.exp-cabecera {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.exp-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.exp-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-datos span { font-size: 10.5px; color: var(--text-4); }
.exp-datos strong { font-size: 12.5px; color: var(--text-1); overflow-wrap: anywhere; }

.exp-sellado {
  margin: 12px 0 0;
  padding: 9px 11px;
  background: var(--surface-3);
  border-left: 2px solid var(--gramor-muted);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.exp-grupo {
  margin: 20px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
}

.exp-criterio {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.exp-criterio:last-child { border-bottom: none; }
.exp-criterio-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.exp-criterio-cab strong { font-size: 13px; color: var(--text-1); }
.exp-ayuda { margin: 3px 0 9px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }

.exp-valor {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  color: var(--text-3);
  white-space: nowrap;
}
.exp-valor-conforme { color: var(--accent-green); border-color: var(--accent-green); }
.exp-valor-a_mejorar { color: var(--accent-amber); border-color: var(--accent-amber); }
.exp-valor-no_conforme { color: var(--accent-red); border-color: var(--accent-red); }
.exp-valor-no_aplica { color: var(--text-4); }

/* Botones grandes: esto se toca con el dedo, de pie, en una ladera. */
.exp-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-opcion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  min-height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--transition);
}
.exp-opcion:hover { border-color: var(--border-strong); }
.exp-opcion input { accent-color: var(--gramor-green-bright); margin: 0; }
.exp-opcion:has(input:checked) {
  border-color: var(--gramor-yellow);
  background: var(--gramor-yellow-soft);
  color: var(--text-1);
}

.exp-nota, .exp-subir input[type="text"], .exp-firmar input {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-1);
  resize: vertical;
}
.exp-nota-leida {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  white-space: pre-wrap;
}

.exp-evidencias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.exp-evidencia {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.exp-evidencia img { display: block; width: 100%; height: 110px; object-fit: cover; }
.exp-evidencia figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-2);
}
.exp-gps { font-size: 10.5px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.exp-gps-sin { font-style: italic; }

.exp-subir { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.exp-subir select {
  padding: 9px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-1);
}

.exp-firmas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.exp-firma {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.exp-firma > span:first-child { font-size: 10.5px; color: var(--text-4); }
.exp-firma strong { font-size: 12.5px; color: var(--text-1); overflow-wrap: anywhere; }
.exp-firma em { font-size: 12px; color: var(--text-4); }

.exp-firmar { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.modal-nota {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-4);
}

/* ---------- Visitas asignadas a mí ---------- */

.asignadas {
  padding: 13px 14px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.asignadas h3 { margin: 0 0 4px; font-size: 13.5px; color: var(--text-1); }
.asignadas-nota { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.asignadas .visita-fila { background: var(--bg-2); }
.asignadas .visita-fila + .visita-fila { margin-top: 7px; }