:root {
  --verde: #2d6a4f;
  --verde-claro: #d8f3dc;
  --gris: #6b7280;
  --borde: #e5e7eb;
  --rojo: #b91c1c;
  --fondo: #f9fafb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: #111827;
}
nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 1.2rem;
  background: var(--verde);
  flex-wrap: wrap;
}
nav a { color: #fff; text-decoration: none; opacity: 0.9; }
nav a:hover { opacity: 1; text-decoration: underline; }
/* Badge de novedades sin leer: puntito al lado del ítem de menú. */
.nav-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  vertical-align: super;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--verde);
}
nav .brand { color: #fff; font-weight: 700; margin-right: 0.5rem; }
nav .right { margin-left: auto; }
/* En desktop el wrapper de links "desaparece": sus <a> son ítems flex del nav
   igual que antes (layout idéntico). El toggle/hamburguesa solo existen en mobile. */
.nav-links { display: contents; }
.nav-toggle, .nav-burger { display: none; }
main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.2rem; }
h1 { font-size: 1.4rem; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
/* Envolver una tabla en <div class="tabla-scroll"> para que scrollee sola cuando
   es más ancha que el contenido (la tabla llena el ancho si es angosta). */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.5rem; }
th { background: var(--verde-claro); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
tr:hover td { background: #f3f4f6; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.negativo { color: var(--rojo); }
.positivo { color: var(--verde); }
a { color: var(--verde); }
.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--verde-claro);
  color: var(--verde);
}
.badge.pendiente { background: #fef3c7; color: #92400e; }
.cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.card {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  min-width: 180px;
}
.card .valor { font-size: 1.5rem; font-weight: 700; }
.card .label { color: var(--gris); font-size: 0.85rem; }
.card .label.label-destacado { font-size: 1.05rem; font-weight: 600; color: #374151; }

/* Estado de la orden: pill prominente con color por estado. */
.estado-pill { display: inline-block; vertical-align: middle; margin-left: 0.5rem;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.22rem 0.75rem; border-radius: 999px; }
.estado-pill.estado-recibida { background: #e5e7eb; color: #374151; }
.estado-pill.estado-ejecutada { background: #fef3c7; color: #92400e; }
.estado-pill.estado-facturada { background: #dbeafe; color: #1e40af; }
.estado-pill.estado-cobrada { background: var(--verde-claro); color: var(--verde); }
.estado-pill.estado-anulada { background: #fee2e2; color: #991b1b; }
/* Acción de revertir: link sutil, no un botón protagonista. */
button.link-sutil { background: none; border: 0; padding: 0; margin: 0 0 0.6rem;
  color: var(--gris); font: inherit; font-size: 0.85rem; cursor: pointer; }
button.link-sutil:hover { color: var(--verde); text-decoration: underline; filter: none; }
/* Lista clave-valor (genealogía, fichas): etiqueta a la izq, valor a la der.
   Anda igual en desktop y mobile sin depender del transform de tablas. */
.kv { border: 1px solid var(--borde); border-radius: 10px; background: #fff; overflow: hidden; max-width: 480px; }
.kv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--borde); }
.kv-row:last-child { border-bottom: 0; }
.kv-k { color: var(--gris); font-weight: 600; white-space: nowrap; }
.kv-v { text-align: right; }

/* Dashboard: novedades y alertas. */
.novedades { list-style: none; padding: 0; margin: 0.5rem 0 1.3rem; }
.novedades li { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.4rem 0.1rem;
  border-bottom: 1px solid var(--borde); }
.novedades li:last-child { border-bottom: 0; }
.nov-icono { font-size: 1rem; }
.nov-cuando { margin-left: auto; color: var(--gris); font-size: 0.82rem; white-space: nowrap; padding-left: 0.5rem; }
/* No leídas: fondo suave, borde de acento y pill "nuevo". */
.novedades li.nov-nueva { background: #f0fdf4; border-left: 3px solid var(--verde);
  padding-left: 0.55rem; border-radius: 0 6px 6px 0; }
.novedades li.nov-nueva a { font-weight: 600; }
.nov-badge { background: var(--verde); color: #fff; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 0.08rem 0.4rem; border-radius: 999px; }
.nov-count { font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--verde);
  padding: 0.12rem 0.55rem; border-radius: 999px; vertical-align: middle; }
.alertas { margin: 0.5rem 0 1.3rem; }
.alerta-item { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; font-size: 0.92rem; }
.alerta-item a { color: #991b1b; font-weight: 700; }
.alerta-item.amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alerta-item.amber a { color: #92400e; }
.alerta-item .det { display: block; font-weight: 400; color: #6b7280; font-size: 0.85rem; margin-top: 2px; }

form.inline { display: inline; }
input, select, textarea {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
}
textarea { width: 100%; }
label { display: block; margin: 0.7rem 0 0.2rem; font-size: 0.88rem; color: var(--gris); }
button {
  font: inherit;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--verde);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.secundario { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
button.chico { padding: 0.2rem 0.6rem; font-size: 0.82rem; }
.error {
  background: #fee2e2;
  color: var(--rojo);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin: 0.8rem 0;
}
.aviso {
  background: #fef3c7;
  color: #92400e;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin: 0.8rem 0;
}
.aviso a { color: #92400e; text-decoration: underline; }
.timeline { list-style: none; padding: 0; margin: 0.6rem 0; border-left: 2px solid var(--borde); }
.timeline li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem 0.45rem 1rem;
  margin-left: -1px;
  border-bottom: 1px solid var(--borde);
}
.timeline li:last-child { border-bottom: none; }
.tl-icono { font-size: 1.1rem; line-height: 1; }
.tl-fecha { color: var(--gris); font-size: 0.85rem; white-space: nowrap; min-width: 76px; }
.tl-cuerpo { flex: 1; }
.tl-borrar { margin-left: auto; }
.ok {
  background: var(--verde-claro);
  color: var(--verde);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin: 0.8rem 0;
}
.form-caja {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  max-width: 640px;
}
.fila { display: flex; gap: 1rem; flex-wrap: wrap; }
.fila > div { flex: 1; min-width: 160px; }
.acciones { margin-top: 1.1rem; display: flex; gap: 0.6rem; align-items: center; }
.login-caja { max-width: 360px; margin: 4rem auto; }

/* ── Portada de bienvenida (login) ────────────────────────────────────────── */
body.portada {
  min-height: 100vh;
  background-color: var(--verde);
  background-image:
    linear-gradient(rgba(20, 40, 30, 0.28), rgba(20, 40, 30, 0.5)),
    url("/static/img/portada.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.portada main {
  max-width: none;
  margin: 0;
  padding: 1.5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portada-card {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  padding: 2rem 2.2rem 2.2rem;
  width: 92%;
  max-width: 380px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.portada-brand { font-size: 1.7rem; font-weight: 800; color: var(--verde); }
.portada-sub { color: var(--gris); margin: 0.2rem 0 1.2rem; }
.portada-card label { text-align: left; }
.portada-card input { width: 100%; }
.portada-card button { width: 100%; padding: 0.6rem; font-size: 1.02rem; }
.mov-pendiente {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 0.9rem;
}
.mov-pendiente .desc { font-weight: 600; }
.monto-clasif { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mov-pendiente .meta { color: var(--gris); font-size: 0.85rem; margin-bottom: 0.5rem; }
.filtros { margin: 0.8rem 0; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--borde);
}
.subnav a {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  color: var(--verde);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}
.subnav a:hover { background: var(--verde-claro); }
.subnav a.activo { background: var(--verde); color: #fff; }
.bal-ok { color: var(--verde); font-weight: 600; }
.bal-medio { color: #92400e; font-weight: 600; }
.bal-deficit { color: var(--rojo); font-weight: 700; }
.bal-fija { color: var(--gris); }
.pill { display:inline-block; padding:0.05rem 0.5rem; border-radius:999px; font-size:0.75rem; }
.pill.ok { background: var(--verde-claro); color: var(--verde); }
.pill.medio { background: #fef3c7; color: #92400e; }
.pill.deficit { background: #fee2e2; color: var(--rojo); }
.pill.fija { background: #e5e7eb; color: var(--gris); }
.resumen-cultivo {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: var(--verde-claro);
  border-radius: 8px;
}
.resumen-cultivo .resumen-head { font-weight: 600; margin-bottom: 0.5rem; }
.balance-tabla {
  border-collapse: collapse;
  width: 100%;
  max-width: 620px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.balance-tabla th, .balance-tabla td {
  padding: 0.35rem 0.6rem;
  text-align: right;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: transparent;
}
.balance-tabla tr:last-child td { border-bottom: 0; }
.balance-tabla th {
  color: var(--gris);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  background: #f3f4f6;
}
.balance-tabla td.rot { text-align: left; color: var(--gris); font-size: 0.85rem; white-space: nowrap; }
.balance-tabla tr:hover td { background: transparent; }
.balance-tabla .fila-var td { background: #fafafa; }
.balance-tabla .val-pos { color: var(--verde); font-weight: 600; }
.balance-tabla .val-neg { color: var(--rojo); font-weight: 600; }
.balance-tabla .val-zero { color: #9ca3af; }
.bal-mobile, .bal-mobile-nota { display: none; }  /* versión transpuesta: solo en mobile */

/* ── Formulario de facturación AFIP ───────────────────────────────────────── */
.fact-form label { display: block; margin: 0.6rem 0 0.25rem; font-size: 0.82rem; font-weight: 600; color: #374151; }
.fact-form label:first-child { margin-top: 0; }
.fact-form select, .fact-form input, .fact-form textarea { box-sizing: border-box; width: 100%; }
.fact-caja { max-width: none; width: 100%; }
.fact-titulo { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.9rem; }
.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem 0.9rem; }
.fact-row label { margin-top: 0; }
@media (max-width: 640px) { .fact-row { grid-template-columns: 1fr; } }

/* Cuadro de precio propuesto según labor (gasoil) */
.gas-box { background: #f6fdf9; border: 1px solid #bbf7d0; border-radius: 10px; padding: 0.9rem 1rem; margin: 0.9rem 0; }
.gas-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; color: #14532d; }
.gas-y { background: #dcfce7; color: #166534; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; letter-spacing: 0.02em; }
.gas-grid { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 1rem; align-items: stretch; margin-top: 0.8rem; }
@media (max-width: 640px) { .gas-grid { grid-template-columns: 1fr; } }
.gas-box label { margin: 0 0 0.25rem; color: #166534; }
.gas-ref { font-size: 0.82rem; color: var(--gris); line-height: 1.55; background: #fff; border: 1px solid var(--borde); border-left: 3px solid #4ade80; border-radius: 8px; padding: 0.55rem 0.75rem; display: flex; flex-direction: column; justify-content: center; }
.gas-ref-t { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; font-weight: 700; color: #16a34a; margin-bottom: 0.15rem; }
.gas-ref b { color: #374151; }
.gas-calc { margin-top: 0.85rem; padding: 0.55rem 0.75rem; background: #fff; border: 1px dashed #86efac; border-radius: 8px; font-size: 0.9rem; color: #166534; }
.gas-calc:empty { display: none; }
.gas-calc b { color: #14532d; }

/* Precio sugerido de la labor (referencia real × índice). El precio manda; la
   explicación queda en letra chica debajo. */
.sug-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0.9rem 0; }
.sug-main { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.sug-cap { font-size: 0.78rem; font-weight: 700; color: #166534; text-transform: uppercase; letter-spacing: 0.04em; }
.sug-precio { font-size: 2.1rem; font-weight: 800; color: var(--verde); line-height: 1; }
.sug-ha { font-size: 1rem; font-weight: 600; color: var(--gris); margin-left: 0.1rem; }
.sug-expl { margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px dashed #bbf7d0; font-size: 0.82rem; color: var(--gris); line-height: 1.55; }
.sug-expl b { color: #374151; }

/* Resumen del total al pie del form */
.fact-total { margin-top: 1rem; padding: 0.7rem 0.95rem; background: var(--verde-claro); border-radius: 8px; font-size: 0.92rem; color: var(--verde); }
.fact-total:empty { display: none; }
.fact-total b { font-size: 1.05rem; }

/* Aviso de "generando factura" mientras AFIP responde (tarda varios segundos) */
.fact-loading { display: none; align-items: center; gap: 0.6rem; margin-top: 0.9rem;
  padding: 0.75rem 0.95rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  color: #1e40af; font-size: 0.92rem; font-weight: 600; }
.fact-loading.show { display: flex; }
.fact-loading .sub { font-weight: 400; color: #3b82f6; font-size: 0.82rem; }
.fact-spin { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 3px solid #bfdbfe; border-top-color: #1e40af; animation: fact-rot 0.7s linear infinite; }
@keyframes fact-rot { to { transform: rotate(360deg); } }
button[disabled] { opacity: 0.7; cursor: progress; }

/* ── Fertilizantes (config) ───────────────────────────────────────────────── */
.fert-card {
  background: #fff; border: 1px solid var(--borde); border-radius: 12px;
  padding: 1rem 1.2rem; margin-bottom: 0.9rem; max-width: 900px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.fert-head {
  font-weight: 700; font-size: 1.05rem; color: var(--verde);
  padding-bottom: 0.5rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--borde);
}
.fert-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0.7rem; margin-bottom: 0.8rem;
}
.fert-nut, .fert-nota {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.72rem; color: var(--gris); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.fert-nut input, .fert-nota input {
  width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums;
  text-transform: none; font-weight: 400;
}
.fert-nut input { text-align: center; }
.fert-nota { margin-bottom: 0.9rem; }
.fert-acc { display: flex; align-items: center; gap: 0.6rem; }
.fert-del {
  margin-left: auto; background: transparent; color: var(--rojo);
  border: 1px solid var(--borde); font-weight: 600;
}
.fert-del:hover { background: #fef2f2; border-color: #fecaca; }
@media (max-width: 640px) {
  .fert-grid { grid-template-columns: repeat(3, 1fr); }
  .fert-card { padding: 0.8rem 0.9rem; }
}

/* ── Resumen por negocio (Análisis) ───────────────────────────────────────── */
#resumen-negocios { margin-bottom: 2rem; max-width: 720px; }
.rn-card {
  border: 1px solid var(--borde); border-radius: 12px; background: #fff;
  padding: 0.5rem 0.9rem; margin-bottom: 0.8rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.rn-titulo {
  font-weight: 700; font-size: 1.02rem; padding: 0.3rem 0 0.4rem;
  border-bottom: 2px solid var(--verde); margin-bottom: 0.3rem; color: var(--verde);
}
.rn-lado { border-bottom: 1px solid var(--borde); }
.rn-lado > summary, .rn-grupo > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 0.5rem; padding: 0.5rem 0.2rem;
}
.rn-lado > summary::-webkit-details-marker,
.rn-grupo > summary::-webkit-details-marker { display: none; }
.rn-lado > summary::before, .rn-grupo > summary::before {
  content: "▸"; color: var(--gris); font-size: 0.75rem; width: 0.9rem;
  display: inline-block; transition: transform 0.12s;
}
.rn-lado[open] > summary::before, .rn-grupo[open] > summary::before { transform: rotate(90deg); }
.rn-lado-nom { font-weight: 600; }
.rn-monto { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.rn-body { padding: 0 0 0.4rem 1.1rem; }
.rn-grupo { border-bottom: 1px dashed var(--borde); }
.rn-grupo:last-child { border-bottom: 0; }
.rn-grupo-nom { font-weight: 500; }
.rn-neg-pref { color: var(--verde); font-weight: 600; }
.rn-cats { padding: 0 0 0.3rem 1.3rem; }
.rn-cat {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.28rem 0.2rem;
  border-bottom: 1px solid #f1f2f4; font-size: 0.92rem;
}
.rn-cat:last-child { border-bottom: 0; }
.rn-suelta { padding-left: 1.1rem; }
.rn-resultado {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 700;
  padding: 0.55rem 0.2rem 0.3rem; margin-top: 0.2rem;
  border-top: 2px solid var(--borde);
}
.rn-subtotal {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 700;
  padding: 0.5rem 0.5rem; margin: 0.15rem 0 0.35rem;
  border-top: 2px solid var(--borde); background: #f3f6f4;
  border-radius: 0 0 6px 6px; text-transform: uppercase;
  font-size: 0.9rem; letter-spacing: 0.02em;
}
.rn-plano { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.2rem; }
.rn-sinclasif {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--borde);
}
.rn-sinclasif > a { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.rn-sinclasif .rn-lado-nom { font-weight: 600; }
.rn-sc-hint { font-size: 0.75rem; color: var(--gris); }
.rn-excluidas {
  border: 1px dashed var(--borde); border-radius: 10px; background: #fafafa;
  padding: 0.6rem 0.9rem; margin-top: 0.3rem;
}
.rn-excluidas-tit { font-weight: 700; color: var(--gris); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.rn-excluidas-nota { color: var(--gris); font-size: 0.8rem; margin: 0.25rem 0 0.5rem; }
.rn-excluidas .rn-cat { font-size: 0.9rem; }
.rn-excluidas .rn-monto { color: var(--gris); }
.rn-general { border-color: var(--verde); border-width: 2px; }
.rn-monto.positivo { color: var(--verde); }
.rn-monto.negativo { color: var(--rojo); }

/* ── Árbol de Categorías y Reglas ─────────────────────────────────────────── */
#tree { margin-bottom: 2rem; }
.tnode { border: 1px solid var(--borde); border-radius: 10px; background: #fff; margin-bottom: 0.5rem; }
.tnode > summary {
  cursor: pointer; padding: 0.55rem 0.8rem; list-style: none;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.tnode > summary::-webkit-details-marker { display: none; }
.tnode > summary::before {
  content: "▸"; color: var(--gris); font-size: 0.8rem; transition: transform 0.12s;
  display: inline-block; width: 0.8rem;
}
.tnode[open] > summary::before { transform: rotate(90deg); }
.tgrupo { background: var(--verde-claro); border-color: #bfe3cd; }
.tgrupo > summary { font-size: 0.98rem; }
.tgrupo > .tcat { margin: 0.4rem 0.6rem; }
.tcat { border-color: var(--borde); }
.tcat > summary:hover { background: #f9fafb; border-radius: 10px; }
.tcat-nom { font-weight: 600; }
.tmuted { color: var(--gris); font-weight: 400; }
.tmini { font-size: 0.78rem; }
.tcat-body { padding: 0.2rem 0.9rem 0.7rem 1.9rem; }
.tedit {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end;
  padding: 0.5rem 0; margin-bottom: 0.3rem; border-bottom: 1px dashed var(--borde);
}
.tedit .inline { display: flex; flex-direction: column; gap: 0.15rem; }
.tedit label.tmini { color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.tregla { border-bottom: 1px solid #f1f2f4; }
.tregla:last-child { border-bottom: 0; }
.tregla-head { cursor: pointer; padding: 0.35rem 0; display: flex; align-items: baseline; gap: 0.4rem; }
.tregla-head code {
  background: #f3f4f6; padding: 0.1rem 0.4rem; border-radius: 5px; font-size: 0.85rem;
}
.tregla-acc { display: none; gap: 0.6rem 1rem; align-items: end; flex-wrap: wrap; padding: 0.2rem 0 0.5rem; }
.tregla.abierta .tregla-acc { display: flex; }
.tregla-acc .inline { display: flex; flex-direction: column; gap: 0.15rem; }
.tregla-acc label.tmini { color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.pbar {
  position: relative;
  height: 14px;
  background: #dbe4ef;
  border-radius: 7px;
  max-width: 480px;
  margin: 0.3rem 0 0.2rem;
  overflow: hidden;
}
.pbar-fill { height: 100%; background: #3b82f6; border-radius: 7px 0 0 7px; }
.pbar-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: #1e3a8a; }
.pbar-esperado { position: absolute; top: 0; bottom: 0; width: 3px; background: #ea580c; }
.cultivo-titulo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--verde);
  padding: 0.3rem 0.6rem;
  margin: -0.3rem -0.3rem 0.5rem;
  border-left: 4px solid var(--verde);
  background: var(--verde-claro);
  border-radius: 4px;
}

/* Encabezado de sector (Cultivos) + toggle de campañas anteriores */
.sector-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--verde); padding-bottom: 0.3rem; margin-top: 1.6rem;
}
.sector-titulo { border: 0; padding: 0; margin: 0; }
.ver-anteriores {
  font-size: 0.9rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: var(--verde); user-select: none;
}
.ver-anteriores:hover { text-decoration: underline; }
.hist-toggle { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px dashed #e2e6ea; }
.hist[hidden] { display: none; }

/* Cultivos más recientes / anteriores respecto del seleccionado (colapsados) */
.ver-grupo { text-align: center; margin: 0.5rem 0; }
.ver-grupo[hidden] { display: none; }
.ver-grupo a {
  display: inline-block; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  color: var(--verde); user-select: none; padding: 0.35rem 0.9rem;
  border: 1px dashed #cbd5e1; border-radius: 999px; background: #f8fafc;
}
.ver-grupo a:hover { text-decoration: underline; background: #eef6ef; }
.periodo-wrap[hidden] { display: none; }

/* Balance de agua del ciclo (mm de agua útil en el perfil) */
.agua-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0.45rem 0; }
.agua-item { display: flex; flex-direction: column; line-height: 1.15; }
.agua-lbl { font-size: 0.72rem; color: var(--gris); }
.agua-val { font-weight: 700; font-size: 0.95rem; }
.agua-pct { font-size: 0.72rem; color: #0369a1; }
.agua-op { color: var(--gris); font-weight: 700; }
.agua-item.destaca .agua-val { color: #0369a1; }
.agua-bar { height: 8px; background: #e0f2fe; border-radius: 999px; overflow: hidden; margin: 0.35rem 0; }
.agua-bar-fill { height: 100%; background: linear-gradient(90deg, #38bdf8, #0284c7); border-radius: 999px; }
.agua-nota { font-size: 0.75rem; color: var(--gris); }
.co-verdict { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem;
  border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; }
.co-verdict.build { background: #dcfce7; color: #166534; }
.co-verdict.keep { background: #e5e7eb; color: #4b5563; }
.co-verdict.mine { background: #fee2e2; color: #991b1b; }

/* Solapamiento de cultivos en el timeline (siembra aérea / doble cultivo) */
.solap-chip { display: inline-block; background: #eef2ff; color: #4338ca; font-size: 0.72rem;
  font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; margin-left: 0.5rem;
  vertical-align: middle; white-space: nowrap; }
.gantt { margin: 0.55rem 0 0.2rem; }
.gantt-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 0.6rem; margin: 0.22rem 0; font-size: 0.78rem; }
.gantt-row .g-lbl { color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-row .g-lbl.actual { color: #111; font-weight: 700; }
.gbar { position: relative; height: 15px; background: #eef2f6; border-radius: 4px; }
.gfill { position: absolute; top: 0; height: 100%; border-radius: 4px; background: #a7d7a6; }
.gfill.actual { background: var(--verde); }
.gover { position: absolute; top: 0; height: 100%; border-radius: 4px; opacity: 0.85;
  background: repeating-linear-gradient(45deg, #6366f1, #6366f1 5px, #818cf8 5px, #818cf8 10px); }
.gantt-nota { font-size: 0.74rem; color: var(--gris); margin-top: 0.25rem; }
/* Fila "fantasma": evento de otro cultivo durante el solapamiento. */
tr.ev-ghost td { color: #9aa4b2; font-style: italic; }
tr.ev-ghost { background: repeating-linear-gradient(90deg, #fafbfc, #fafbfc 6px, #f4f6f8 6px, #f4f6f8 12px); }
tr.ev-ghost td:first-child { border-left: 3px solid #c7d2fe; }
.pill-solap { display: inline-block; background: #e0e7ff; color: #4338ca; font-size: 0.7rem;
  font-weight: 700; font-style: normal; padding: 0.06rem 0.5rem; border-radius: 999px;
  margin-left: 0.35rem; white-space: nowrap; text-decoration: none; }
.pill-solap:hover { background: #c7d2fe; text-decoration: underline; }

/* ── Mobile (≤640px). No afecta el desktop. ───────────────────────────────── */
@media (max-width: 640px) {
  nav { gap: 0.4rem 0.9rem; padding: 0.6rem 1rem; }
  .nav-burger {
    display: block;
    margin-left: auto;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
  }
  .nav-links { display: none; flex-basis: 100%; flex-direction: column; gap: 0; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 0.6rem 0.2rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
  nav .right { margin-left: 0; }

  main { margin: 1rem auto; padding: 0 0.9rem; }
  h1 { font-size: 1.25rem; }

  /* Formularios: cada campo en su propia línea y a todo el ancho. */
  .fila { gap: 0.6rem; }
  .fila > div { min-width: 100%; flex-basis: 100%; }
  .form-caja { padding: 1rem; max-width: 100%; }
  .form-caja input:not([type="checkbox"]), .form-caja select { width: 100%; }

  /* Selector de subsección: una sola línea deslizable (no 5 líneas apiladas). */
  .subnav { flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; margin-bottom: 0.8rem;
    padding-bottom: 0.45rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { padding: 0.28rem 0.7rem; font-size: 0.86rem; }

  /* Tarjetas KPI: dos por fila y bien compactas (no se comen la pantalla). */
  .cards { gap: 0.5rem; margin: 0.7rem 0; }
  .card { min-width: 0; flex: 1 1 42%; padding: 0.55rem 0.8rem; }
  .card .valor { font-size: 1.25rem; }
  .card .label { font-size: 0.78rem; line-height: 1.2; }

  /* Línea de tiempo / próximas tareas: que la descripción NO quede encajonada en
     una columna angosta. Icono + fecha (+ ×) en la 1ª línea; el cuerpo a todo el ancho. */
  .timeline li { flex-wrap: wrap; row-gap: 0.15rem; }
  .tl-fecha { min-width: 0; }
  .tl-cuerpo { flex: 1 1 100%; order: 5; }

  .balance-tabla, .pbar { max-width: 100%; }
  /* Balance de nutrientes: en mobile mostramos la transpuesta (cabe mejor). */
  .bal-desktop { display: none; }
  .bal-mobile { display: table; width: 100%; }
  .bal-mobile-nota { display: block; }
  .bal-mobile th, .bal-mobile td { padding: 0.4rem 0.3rem; text-align: center; }
  .bal-mobile td.rot { text-align: left; padding-left: 0.2rem; font-size: 0.9rem; color: #111827; }
  .portada-brand { font-size: 1.45rem; }

  /* ── Listas: en mobile cada fila es una tarjeta "Etiqueta: valor" ──────────
     (el desktop queda como tabla; el JS setea data-label leyendo el encabezado). */
  .tabla-scroll { overflow-x: visible; }
  .tabla-scroll table:not(.balance-tabla) { display: block; font-size: 0.95rem; }
  .tabla-scroll table:not(.balance-tabla) thead,
  .tabla-scroll table:not(.balance-tabla) tbody { display: block; }
  .tabla-scroll table:not(.balance-tabla) tr.tr-head { display: none; }
  .tabla-scroll table:not(.balance-tabla) tr {
    display: block;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 0.45rem 0.9rem;
    margin-bottom: 0.7rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  .tabla-scroll table:not(.balance-tabla) tr:hover td { background: transparent; }
  .tabla-scroll table:not(.balance-tabla) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border: 0;
    border-bottom: 1px solid var(--borde);
    white-space: normal;
    text-align: right;
  }
  .tabla-scroll table:not(.balance-tabla) td:last-child { border-bottom: 0; }
  .tabla-scroll table:not(.balance-tabla) td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--gris);
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.15rem;
  }
  /* Celdas "ricas" (contenido con bloques, saltos de línea o texto largo):
     la etiqueta va arriba y el contenido debajo, a todo el ancho y a la izquierda,
     para que no se comprima en una columna angosta. */
  .tabla-scroll table:not(.balance-tabla) td.td-block {
    display: block;
    text-align: left;
    white-space: normal;
  }
  .tabla-scroll table:not(.balance-tabla) td.td-block::before {
    display: block;
    margin-bottom: 0.2rem;
  }
  /* Columnas marcadas con data-nolabel: sin etiqueta, solo el contenido centrado.
     Declarado después de .td-block para que gane el centrado si una celda es ambas. */
  .tabla-scroll table:not(.balance-tabla) td.td-nolabel {
    display: block;
    text-align: center;
    white-space: normal;
  }
  .tabla-scroll table:not(.balance-tabla) td.td-nolabel::before { display: none; }
  /* Filas de ancho completo (colspan): estado vacío o formularios expandibles. */
  .tabla-scroll table:not(.balance-tabla) tr.tr-full { padding: 0.8rem 0.9rem; }
  .tabla-scroll table:not(.balance-tabla) tr.tr-full td {
    display: block; text-align: left; border: 0; padding: 0;
  }
}

/* ── Comparar campañas (tabla reutilizable: página /cultivos/campanas + panel en timeline) ── */
.cc-block{margin-bottom:1.4rem}
.cc-block h2{margin:0 0 0.5rem;font-size:1.1rem}
.cc-tab{width:100%;border-collapse:collapse;font-size:0.88rem}
.cc-tab th,.cc-tab td{border-bottom:1px solid #eef1f4;padding:0.45rem 0.55rem;text-align:center;white-space:nowrap}
.cc-tab th{background:#f6faf7;font-size:0.74rem;color:#334155;text-transform:uppercase;letter-spacing:.02em}
.cc-tab th.grp{background:#eef4f0;font-size:0.72rem;color:#1f3b2a;letter-spacing:.04em}
.cc-tab td.l{text-align:left}
.cc-tab .sep{border-left:2px solid #e3eae5}
.cc-rinde{font-weight:700;font-size:1rem;color:#166534}
.cc-tab td.barcell{min-width:150px;text-align:left}
.cc-bar{display:flex;align-items:center;gap:8px}
.cc-bar .track{position:relative;flex:1;min-width:70px;background:#eef2f4;border-radius:6px;height:16px;overflow:hidden}
.cc-bar .fill{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center}
.cc-bar .fill.green{background:linear-gradient(90deg,#4ade80,#16a34a)}
.cc-bar .fill.blue{background:linear-gradient(90deg,#60a5fa,#3b82f6)}
.cc-bar .binside{color:#fff;font-size:0.66rem;font-weight:700;padding-left:5px;white-space:nowrap}
.cc-bar .barval{font-weight:700;font-size:0.84rem;color:#1f2937;white-space:nowrap;min-width:40px;text-align:left}
.cc-bar .cc-parcial{font-weight:400}
.cc-note{color:var(--gris);font-size:0.82rem;margin:0.3rem 0 0}
.cc-empty{color:var(--gris);background:#f8fafc;border:1px dashed #d7dbe0;border-radius:10px;padding:1rem}
.cc-tab tr.encurso{background:#eff6ff}
.cc-tab tr.encurso td{border-bottom-color:#dbeafe}
.cc-chip{display:inline-block;background:#dbeafe;color:#1e40af;border-radius:20px;padding:1px 8px;font-size:0.72rem;font-weight:700;white-space:nowrap}
.cc-parcial{color:#64748b;font-size:0.7rem;margin-left:3px}
.cc-fecha{font-size:0.82rem}
.cc-head{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;margin-bottom:0.3rem}
.cc-filtro{display:flex;gap:0.4rem;flex-wrap:wrap;margin:0.4rem 0 1.2rem}
.cc-filtro a{border:1px solid #d7dbe0;background:#fff;border-radius:20px;padding:4px 13px;font-size:0.85rem;font-weight:600;color:#475569;text-decoration:none}
.cc-filtro a.on{background:#334155;color:#fff;border-color:#334155}

/* ── Comparar campañas: tira de imágenes NDVI/NDRE al mismo DDS ── */
.cc-imgbox{margin-top:0.8rem;border-top:1px dashed #e6e8ec;padding-top:0.6rem}
.cc-imgsum{cursor:pointer;font-weight:600;color:#334155;font-size:0.92rem}
.cc-imgctrl{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0.7rem 0 0.4rem}
.cc-idx{display:inline-flex;gap:0.3rem}
.cc-idx button{border:1px solid #d7dbe0;background:#fff;border-radius:8px;padding:5px 12px;font-size:0.85rem;font-weight:600;color:#475569;cursor:pointer}
.cc-idx button.on{background:#334155;color:#fff;border-color:#334155}
.cc-ddsctrl{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.85rem;font-weight:600;color:#334155}
.cc-ddsrange{width:180px;max-width:45vw}
.cc-ddsval{min-width:2.2em;text-align:right;color:#1e40af}
.cc-imghint{font-size:0.74rem;color:var(--gris);flex:1 1 200px}
.cc-imgstrip{overflow-x:auto}
.cc-imgrow{display:flex;gap:0.7rem;padding:0.3rem 0 0.5rem}
.cc-imgcard{flex:0 0 auto;width:150px;margin:0;text-align:center}
.cc-imgcard.encurso{outline:2px solid #bfdbfe;outline-offset:2px;border-radius:12px}
.cc-imgcard img{width:150px;height:150px;object-fit:contain;background:#f1f5f9;border:1px solid #e6e8ec;border-radius:10px;display:block}
.cc-imgna{width:150px;height:150px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border:1px dashed #d7dbe0;border-radius:10px;color:var(--gris);font-size:0.8rem;text-align:center;padding:0 0.4rem}
.cc-imgcard figcaption{font-size:0.78rem;color:#334155;margin-top:0.35rem;line-height:1.3}
.cc-imgmeta{color:var(--gris);font-size:0.72rem}

/* Comparar campañas — leyenda de color + valor medio por imagen */
.cc-leg{display:flex;align-items:center;gap:0.5rem;margin:0.2rem 0 0.5rem;font-size:0.76rem;color:var(--gris);max-width:520px}
.cc-leg-lbl{font-weight:600;color:#334155;white-space:nowrap}
.cc-leg-bar{flex:1;height:10px;border-radius:6px;border:1px solid #e2e6ea;min-width:80px}
.cc-leg-min,.cc-leg-max{font-variant-numeric:tabular-nums}
.cc-imgval{font-weight:700;color:#166534;font-size:0.82rem}

/* Balance hídrico de la ventana crítica — suma tipo "almacenero" */
.hbal-ctx{font-size:0.85rem;color:var(--gris);margin:0.15rem 0 0.5rem}
.hbal{border-collapse:collapse;font-size:0.92rem;margin:0.2rem 0 0.4rem;min-width:min(360px,100%)}
.hbal td{padding:0.28rem 0.1rem;border-bottom:1px solid #eef1f4;color:#374151}
.hbal td.v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:1.6rem}
.hbal td.v.neg{color:#b91c1c}
.hbal td.v.pos{color:#166534}
.hbal .s{color:var(--gris);font-weight:400;font-size:0.8rem}
.hbal tr.sub td{border-top:2px solid #cbd2d9;border-bottom:none;padding-top:0.4rem;font-weight:800;color:#1f2937}
.hbal tr.sub td.v{font-size:1.05rem}
.hbal.soft{margin-top:0.55rem}
.hbal.soft td{color:#64748b}
.hbal.soft tr.h td{border:none;font-size:0.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#64748b;padding-bottom:0.1rem}
.hbal.soft tr.sub td{border-top-color:#e2e6ea;color:#334155}
.hid-chip{font-size:0.9rem;font-weight:600;border-radius:8px;padding:0.45rem 0.65rem;margin-top:0.35rem}
.hid-chip.hid-ok{background:#dcfce7;color:#166534}
.hid-chip.hid-medio{background:#fef3c7;color:#92400e}
.hid-chip.hid-deficit{background:#fee2e2;color:#991b1b}
.hid-chip .s{display:block;font-weight:400;font-size:0.8rem;margin-top:0.2rem;opacity:.9}