/* HassVision Campo: sistema visual de las 9 pantallas operativas.
   Alcance: todo se aplica dentro de .cx (pantallas de Campo) o con html[data-vista="campo"] (menú y barra superior).
   Investigación no tiene .cx y su vista no cambia.

   Dirección: tablero agronómico sobrio. Bosque para lo que importa (el resultado), salvia para lo que se toca,
   cosecha (ámbar) solo para lo prioritario. Componentes distintos según su función: resultado, franja de indicadores,
   acciones, panel, registro, detalle metodológico y estado vacío. */

/* ------------------------------------------------------------------ tokens */
:root {
  --cx-forest: #203729;      /* bosque: resultados principales, menú */
  --cx-forest-2: #2b4a35;
  --cx-leaf: #3f7034;        /* hoja: texto y acciones (6,0:1 sobre blanco) */
  --cx-leaf-bright: #5e9a4c; /* hoja viva: rellenos de gráficos */
  --cx-sage: #e7efe1;        /* salvia: superficies de trabajo, selección */
  --cx-sage-2: #d4e2c8;
  --cx-ivory: #f6f7f2;       /* marfil: fondo */
  --cx-harvest: #c58c35;     /* cosecha: lo prioritario (relleno, nunca texto chico) */
  --cx-harvest-ink: #7a5216; /* cosecha legible (6,7:1) */
  --cx-harvest-bg: #f8eedc;
  --cx-ink: #1c2a20;
  --cx-muted: #55624f;       /* 6,1:1 */
  --cx-line: #dde3d6;
  --cx-line-2: #c9d2bf;
  --cx-radius: 12px;
  --cx-radius-sm: 8px;
  --cx-space: 1.25rem;
}

/* ------------------------------------------------------------------ marco de Campo: menú, barra superior, fondo */
html[data-vista="campo"] body { background: var(--cx-ivory); }
html[data-vista="campo"] .hv-sidebar,
html[data-vista="campo"] .hv-sidebar.offcanvas-lg { width: 228px; --bs-offcanvas-bg: var(--cx-forest); background: var(--cx-forest) !important; }
html[data-vista="campo"] .hv-brand { padding: 1.3rem 1.1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .07); margin-bottom: .4rem; }
html[data-vista="campo"] .hv-logo { background: var(--cx-leaf-bright); color: var(--cx-forest); }
html[data-vista="campo"] .hv-nav { padding: 0 .55rem .75rem; gap: 2px; }
html[data-vista="campo"] .hv-nav .hv-nav-section { color: #9fb39a; font-size: .75rem; padding: 1.1rem .7rem .35rem; letter-spacing: .01em; }
html[data-vista="campo"] .hv-nav .nav-link { min-height: 40px; padding: .5rem .7rem; font-size: .93rem; color: #d6e1d0; border-radius: 8px; }
html[data-vista="campo"] .hv-nav .nav-link i { color: #8fa889; }
html[data-vista="campo"] .hv-nav .nav-link:hover { background: rgba(255, 255, 255, .06); }
html[data-vista="campo"] .hv-nav .nav-link.active { background: var(--cx-sage); color: var(--cx-forest); font-weight: 700; }
html[data-vista="campo"] .hv-nav .nav-link.active::before { display: none; }
html[data-vista="campo"] .hv-nav .nav-link.active i { color: var(--cx-leaf); }
html[data-vista="campo"] .hv-sidebar-foot { color: #8fa889; }
html[data-vista="campo"] .hv-topbar { background: rgba(246, 247, 242, .94); padding: .85rem 1.75rem; border-bottom-color: var(--cx-line); }
html[data-vista="campo"] .hv-topbar h1 { font-size: 1.55rem; letter-spacing: -.02em; color: var(--cx-ink); }
html[data-vista="campo"] .hv-topbar .hint { display: none; }
.hv-crumb { display: none; }
html[data-vista="campo"] .hv-crumb { display: block; font-size: .8rem; font-weight: 600; color: var(--cx-leaf); margin-bottom: .05rem; }
html[data-vista="campo"] .hv-topbar #hvWorkCampaign { background: var(--cx-sage) !important; color: var(--cx-forest) !important; }
html[data-vista="campo"] .hv-content { padding: 1.5rem 1.75rem 2.5rem; max-width: 1480px; }
html[data-vista="campo"] .hv-bottombar button.active { color: var(--cx-forest); }
html[data-vista="campo"] .hv-bottombar button.active i { background: var(--cx-sage); }
@media (max-width: 991.98px) { html[data-vista="campo"] .hv-content { padding: 1.1rem 1rem 6.5rem; } html[data-vista="campo"] .hv-topbar { padding: .7rem 1rem; } }
@media (max-width: 575.98px) { html[data-vista="campo"] .hv-topbar h1 { font-size: 1.2rem; } html[data-vista="campo"] .hv-crumb { font-size: .72rem; } }

/* ------------------------------------------------------------------ base dentro de Campo */
.cx { --hass: var(--cx-leaf-bright); --hass-dark: var(--cx-forest); --hass-light: var(--cx-sage); --hv-accent: var(--cx-harvest-ink); color: var(--cx-ink); }
.cx h2, .cx-h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--cx-ink); }
.cx h3, .cx-sub { font-size: .9rem; font-weight: 700; margin: 0 0 .4rem; color: var(--cx-ink); }
.cx .hv-muted, .cx .text-secondary { color: var(--cx-muted) !important; }
.cx .btn-hass { --bs-btn-bg: var(--cx-leaf); --bs-btn-border-color: var(--cx-leaf); --bs-btn-hover-bg: var(--cx-forest); --bs-btn-hover-border-color: var(--cx-forest); }
.cx .btn-hass-soft { --bs-btn-bg: var(--cx-sage); --bs-btn-border-color: var(--cx-sage); --bs-btn-color: var(--cx-forest); --bs-btn-hover-bg: var(--cx-sage-2); --bs-btn-hover-border-color: var(--cx-sage-2); }
.cx .hv-chart .grid line, .cx .cl-grid line { stroke: #e6eae1; }
.cx .hv-bars-h .bar { background: #ecefe7; }
.cx .hv-bars-h .bar span { background: var(--cx-leaf-bright); }
.cx .card { border-color: var(--cx-line); border-radius: var(--cx-radius); }
.cx .card > .card-header { border-bottom-color: var(--cx-line); }

/* barra de contexto: filtros a la izquierda, datos y acciones a la derecha */
.cx-context { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.1rem; }
.cx-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cx-field label { font-size: .8rem; font-weight: 600; color: var(--cx-muted); }
.cx-field .form-select, .cx-field .form-control { min-width: 12rem; max-width: 100%; }
.cx-context-meta, .cx-context-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.cx-context-title { display: flex; flex-direction: column; gap: .15rem; }
.cx-meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--cx-muted); }
.cx-meta + .cx-meta::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cx-line-2); margin-right: .2rem; }
.cx-kind { align-self: flex-end; display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; padding: .4rem .7rem; border-radius: 999px; background: var(--cx-sage); color: var(--cx-forest); }
#tab-harvestlog[data-cerrada="1"] .cx-kind { background: #eceee9; color: var(--cx-muted); }

/* panel: contenedor de gráficos y tablas */
.cx-panel { background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-radius); margin-bottom: 1rem; min-width: 0; }
.cx-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; padding: .95rem 1.15rem .55rem; }
.cx-panel-meta { font-size: .82rem; color: var(--cx-muted); }
.cx-panel-body { padding: .35rem 1.15rem 1.15rem; }
.cx-panel-body.cx-flush { padding: 0 0 .35rem; }
.cx-flush .table > :not(caption) > * > *:first-child { padding-left: 1.15rem; }
.cx-flush .table > :not(caption) > * > *:last-child { padding-right: 1.15rem; }
.cx-panel-form { background: linear-gradient(#fff, #fff) padding-box; border-top: 3px solid var(--cx-sage-2); }
.cx-scroll { max-height: 24rem; overflow: auto; }
.cx-panel-details > summary { list-style: none; cursor: pointer; padding: .95rem 1.15rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.cx-panel-details > summary::-webkit-details-marker { display: none; }
.cx-panel-details > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--cx-muted); transition: transform .15s; }
.cx-panel-details[open] > summary::after { transform: rotate(180deg); }
.cx-panel-details > .table-responsive { padding: 0 .5rem .5rem; }

/* detalle metodológico: se abre a pedido */
.cx-method { font-size: .875rem; color: var(--cx-muted); margin-top: .5rem; }
.cx-method > summary { cursor: pointer; font-weight: 600; color: var(--cx-leaf); display: inline-flex; align-items: center; gap: .35rem; list-style: none; min-height: 32px; }
.cx-method > summary::-webkit-details-marker { display: none; }
.cx-method > summary::before { content: "\F431"; font-family: "bootstrap-icons"; font-weight: 400; }
.cx-method[open] > summary { margin-bottom: .3rem; }
.cx-method[open] { background: #f9faf6; border-left: 3px solid var(--cx-sage-2); padding: .2rem .8rem .6rem; border-radius: 0 6px 6px 0; }

/* franja de indicadores: un solo bloque con divisiones, no una tarjeta por dato */
.cx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-radius); margin: 0 0 1rem; overflow: hidden; }
.cx-kpis > div { width: auto !important; max-width: none !important; padding: 0 !important; flex: none !important; margin: 0 !important; }
.cx-kpis .hv-kpi { border: 0; border-radius: 0; background: transparent; padding: .95rem 1.2rem; height: 100%; border-left: 1px solid var(--cx-line); }
.cx-kpis > div:first-child .hv-kpi { border-left: 0; }
.cx-kpis .hv-kpi .lbl { font-size: .8rem; color: var(--cx-muted); }
.cx-kpis .hv-kpi .lbl i { color: var(--cx-leaf); }
.cx-kpis .hv-kpi .val { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.cx-kpis .hv-kpi .foot { font-size: .8rem; }
#homeKpis > div:first-child .hv-kpi { background: var(--cx-sage); }
#homeKpis > div:first-child .hv-kpi .val { color: var(--cx-forest); font-size: 2.1rem; }
.cx-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-kpis-2 > div:nth-child(3) .hv-kpi { border-left: 0; }
.cx-kpis-2 > div:nth-child(n+3) .hv-kpi { border-top: 1px solid var(--cx-line); }
@media (max-width: 767.98px) {
  .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-kpis > div:nth-child(3) .hv-kpi { border-left: 0; }
  .cx-kpis > div:nth-child(n+3) .hv-kpi { border-top: 1px solid var(--cx-line); }
  .cx-kpis .hv-kpi { padding: .8rem .9rem; }
  .cx-kpis .hv-kpi .val, #homeKpis > div:first-child .hv-kpi .val { font-size: 1.45rem; }
}

/* tira de resumen: cifras en línea, la primera manda */
.cx-strip { display: flex; flex-wrap: wrap; gap: 0; background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-radius); margin-bottom: 1rem; overflow: hidden; }
.cx-strip-item { padding: .8rem 1.15rem; border-left: 1px solid var(--cx-line); flex: 1 1 9rem; min-width: 0; }
.cx-strip-item:first-child { border-left: 0; }
.cx-strip-item .v { font-size: 1.45rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cx-strip-item .v small { font-size: .9rem; color: var(--cx-muted); font-weight: 500; }
.cx-strip-item .k { font-size: .8rem; color: var(--cx-muted); margin-top: .15rem; display: flex; align-items: center; gap: .3rem; }
.cx-strip-item.lead { background: var(--cx-forest); color: #fff; flex-grow: 1.4; }
.cx-strip-item.lead .k { color: #c4d4bd; }
.cx-strip-item.warn .v { color: var(--cx-harvest-ink); }
@media (max-width: 575.98px) { .cx-strip-item { flex-basis: 45%; border-top: 1px solid var(--cx-line); } .cx-strip-item.lead { flex-basis: 100%; border-top: 0; } }

/* estado vacío con dirección */
.cx-empty { text-align: center; padding: 2rem 1.25rem; max-width: 36rem; margin: .5rem auto; }
.cx-empty > i { font-size: 1.6rem; color: var(--cx-leaf); background: var(--cx-sage); width: 3.2rem; height: 3.2rem; border-radius: 50%; display: inline-grid; place-items: center; margin-bottom: .6rem; }
.cx-empty-title { font-weight: 700; font-size: 1.02rem; }
.cx-empty-text { color: var(--cx-muted); font-size: .9rem; margin-top: .2rem; }
.cx-empty-soft { border: 1px dashed var(--cx-line-2); border-radius: var(--cx-radius); background: #fbfcf9; max-width: none; }

/* etiquetas de tipo de dato */
.cx-tag { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.cx-tag.est { background: var(--cx-harvest-bg); color: var(--cx-harvest-ink); }
.cx-tag.obs { background: #e4ebf1; color: #24425a; }
.cx-tag.val { background: var(--cx-sage); color: var(--cx-forest); }
.cx-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; }
.cx-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.cx-status.ok { color: #2b7a3b; }
.cx-status.off { color: var(--cx-muted); }

/* ------------------------------------------------------------------ resultado principal (Inicio y Predicción) */
.cx-summary, .cx-result { background: var(--cx-forest); color: #fff; border-radius: 14px; padding: 1.4rem 1.6rem 1.2rem; display: grid; gap: .5rem 2rem; }
.cx-eyebrow { font-size: .88rem; font-weight: 600; color: #b9cdb2; }
.cx-date { font-size: clamp(2.2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.cx-summary .count { display: inline-flex; align-items: baseline; gap: .35rem; background: rgba(255, 255, 255, .08); border-radius: 8px; padding: .35rem .7rem; font-weight: 600; color: #e9efe3; }
.cx-summary .count b { font-size: 1.35rem; font-weight: 800; color: #f0c674; }
.cx-summary-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.cx-window { font-size: .92rem; color: #dfe8d9; }
.cx-window b { color: #fff; }
.cx-summary-note { font-size: .85rem; color: #cbd8c4; margin-top: .6rem; max-width: 62ch; }
.cx-how { margin-top: .55rem; font-size: .85rem; color: #cbd8c4; }
.cx-how > summary { cursor: pointer; color: #e9efe3; font-weight: 600; min-height: 28px; display: inline-flex; align-items: center; gap: .35rem; list-style: none; }
.cx-how > summary::-webkit-details-marker { display: none; }
.cx-how > summary::before { content: "\F431"; font-family: "bootstrap-icons"; font-weight: 400; }
.cx-how[open] > div { margin-top: .2rem; max-width: 62ch; }
.cx-summary { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); }
.cx-col { min-width: 0; display: flex; flex-direction: column; }  /* columnas independientes: sin huecos entre paneles de distinto alto */
.cx-summary-main { min-width: 0; }
.cx-summary-phase { align-self: center; }
.cx-summary-line { grid-column: 1 / -1; }
.cx-summary .hv-timeline, .cx-result .hv-timeline { margin-top: .6rem; }
.cx-summary .hv-timeline .track, .cx-result .hv-timeline .track { height: 12px; }
.cx-summary .hv-timeline .mark, .cx-result .hv-timeline .mark { height: 24px; top: -6px; }
.cx-summary .hv-timeline .mark span, .cx-result .hv-timeline .mark span { top: 27px; }
.cx-summary .hv-timeline .ends, .cx-result .hv-timeline .ends { margin-top: 1.7rem; }
.cx-summary .hv-step .dot { background: var(--cx-forest); }
.cx-summary .hv-step.current .dot { background: #f0c674; border-color: #f0c674; color: #3b2a00; }
.cx-result { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); padding: 1.6rem 1.8rem 1.3rem; margin-bottom: 1rem; }
.cx-result-main { min-width: 0; }
.cx-result .cx-date { font-size: clamp(2.5rem, 5vw, 3.8rem); }
.cx-result-range { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem; margin-top: .9rem; font-size: .95rem; color: #dfe8d9; }
.cx-result-range b { color: #fff; font-size: 1.1rem; }
.cx-pm { background: #f0c674; color: #3b2a00; font-weight: 700; border-radius: 999px; padding: .1rem .6rem; font-size: .85rem; }
.cx-result-basis { font-size: .85rem; color: #cbd8c4; margin-top: .55rem; max-width: 64ch; }
.cx-result-compare { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 1rem 1.1rem; align-self: start; }
.cx-compare-k { font-size: .8rem; font-weight: 600; color: #b9cdb2; }
.cx-compare-v { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0; }
.cx-compare-v.cx-compare-empty { color: #9fb39a; font-weight: 600; font-size: 1.15rem; }
.cx-compare-n { font-size: .85rem; color: #dfe8d9; }
.cx-result-line { grid-column: 1 / -1; }
.cx-result-wrap .alert { margin-top: -.4rem; margin-bottom: 1rem; }
@media (max-width: 991.98px) { .cx-summary, .cx-result { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .cx-summary, .cx-result { padding: 1.15rem 1rem 1rem; border-radius: 12px; } }

/* ------------------------------------------------------------------ Inicio */
.cx-home-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.cx-actions { background: #fff; border: 1px solid var(--cx-line); border-top: 4px solid var(--cx-harvest); border-radius: var(--cx-radius); max-height: 30rem; display: flex; flex-direction: column; }
.cx-actions-head { padding: .9rem 1.15rem .3rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.cx-actions-head h2 { font-size: 1.1rem; }
.cx-actions-sub { font-size: .8rem; color: var(--cx-muted); }
.cx-actions-body { padding: 0 1.15rem .4rem; overflow: auto; }
.cx-actions .hv-todo { gap: .7rem; padding: .75rem 0; }
.cx-actions .hv-todo .ico { background: var(--cx-harvest-bg); color: var(--cx-harvest-ink); }
.cx-actions .hv-todo:first-child .txt > b { font-size: 1.02rem; }
.cx-actions .hv-todo .btn-hass-soft { --bs-btn-bg: var(--cx-forest); --bs-btn-border-color: var(--cx-forest); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--cx-leaf); --bs-btn-hover-border-color: var(--cx-leaf); --bs-btn-hover-color: #fff; }
.cx-home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
#tab-home .hv-valves { gap: .5rem; }
#tab-home .hv-valve, #tab-sampling .hv-valve { border-radius: 10px; padding: .65rem .75rem .6rem; box-shadow: none; border: 1px solid var(--cx-line); background: #fff; position: relative; overflow: hidden; }
#tab-home .hv-valve::before, #tab-sampling .hv-valve::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--hv-gris); }
#tab-home .hv-valve.c-verde::before, #tab-sampling .hv-valve.c-verde::before { background: var(--hv-verde); }
#tab-home .hv-valve.c-amarillo::before, #tab-sampling .hv-valve.c-amarillo::before { background: #d39b00; }
#tab-home .hv-valve.c-rojo::before, #tab-sampling .hv-valve.c-rojo::before { background: var(--hv-rojo); }
#tab-home .hv-valve.c-verde, #tab-sampling .hv-valve.c-verde { background: #f1f7ef; }
#tab-home .hv-valve.c-amarillo, #tab-sampling .hv-valve.c-amarillo { background: #fdf7e7; }
#tab-home .hv-valve.c-rojo, #tab-sampling .hv-valve.c-rojo { background: #fcf1f0; }
#tab-home .hv-valve:hover, #tab-sampling .hv-valve:hover { border-color: var(--cx-line-2); }
#tab-home .hv-valve .vname { font-size: 1.25rem; font-weight: 800; }
#tab-home .hv-valve .vstate { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--cx-muted); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: .05rem .5rem; }
#tab-home .hv-valve .vms { font-size: 1.15rem; }
#tab-home .hv-legend { margin-top: .8rem; }
@media (max-width: 1199.98px) { .cx-home-top { grid-template-columns: 1fr; } .cx-actions { max-height: none; } }
@media (max-width: 991.98px) { .cx-home-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { #tab-home .hv-valve .vstate { display: none; } }

/* ------------------------------------------------------------------ Predicción */
.cx-harvest-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.cx-span-all { grid-column: 1 / -1; }
.cx-kpis-quiet { margin-bottom: 1rem; }
#harvestHow .hv-formula { counter-reset: paso; gap: .5rem; align-items: stretch; }
#harvestHow .hv-formula .term { counter-increment: paso; background: #fff; border: 1px solid var(--cx-line); border-radius: 10px; text-align: left; padding: .7rem .8rem .7rem 2.6rem; position: relative; }
#harvestHow .hv-formula .term::before { content: counter(paso); position: absolute; left: .75rem; top: .75rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--cx-sage); color: var(--cx-forest); font-weight: 700; font-size: .8rem; display: grid; place-items: center; }
#harvestHow .hv-formula .term .k { font-size: .78rem; color: var(--cx-muted); }
#harvestHow .hv-formula .term .v { font-size: 1.2rem; }
#harvestHow .hv-formula .term.res { background: var(--cx-forest); border-color: var(--cx-forest); }
#harvestHow .hv-formula .term.res::before { background: #f0c674; color: #3b2a00; }
#harvestHow .hv-formula .term.res .k { color: #c4d4bd; }
#harvestHow .hv-formula .op { color: var(--cx-line-2); font-size: 1.1rem; }
.cx-panel-evidence { background: #fbfcf9; }
.cx-panel-evidence .hv-score { background: #fff; }
@media (max-width: 1199.98px) { .cx-harvest-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  #harvestHow .hv-formula { flex-direction: column; }
  #harvestHow .hv-formula .op { display: none; }
}

/* ------------------------------------------------------------------ Materia seca */
.cx-ms-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 0 1rem; align-items: start; }
#tab-sampling .hv-valve { min-height: 5.4rem; }
#tab-sampling .hv-legend { margin-top: .75rem; }
#smpList > .table-responsive { max-height: 34rem; overflow: auto; }  /* la lista no alarga la página: se recorre en su propio marco */
#smpList thead th { position: sticky; top: 0; z-index: 1; }
#tab-sampling #smpFormCard, #tab-sampling #smpImportCard { border-top: 4px solid var(--cx-leaf); }
@media (max-width: 1199.98px) { .cx-ms-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Registro de cosecha */
.cx-hl-top { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(0, 1.35fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.cx-entry { background: #fff; border: 2px solid var(--cx-leaf); border-radius: 14px; overflow: hidden; }
.cx-entry-head { background: var(--cx-forest); color: #fff; display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; }
.cx-entry-head h2 { color: #fff; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; }
.cx-entry-body { padding: 1rem 1.1rem 1.1rem; }
.cx-save-state { margin-left: auto; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .2rem .65rem; display: inline-flex; align-items: center; gap: .35rem; }
.cx-save-state::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.cx-save-state.ok { background: #d9ecd2; color: #1d5a29; }
.cx-save-state.warn { background: #f7e3b9; color: #5c3d07; }
.cx-save-state.idle { background: rgba(255, 255, 255, .14); color: #e4ece0; }
.cx-save-state.off { background: rgba(255, 255, 255, .14); color: #e4ece0; }
#tab-harvestlog .hl-cell { background: var(--cx-ivory); border-color: var(--cx-line); }
#tab-harvestlog .hl-cell.has { background: var(--cx-sage); border-color: var(--cx-leaf); }
#tab-harvestlog .hl-total { background: var(--cx-sage); border-radius: 10px; }
#tab-harvestlog .hl-total .v { color: var(--cx-forest); font-size: 1.6rem; }
#tab-harvestlog[data-cerrada="1"] .cx-entry { border: 1px dashed var(--cx-line-2); }
#tab-harvestlog[data-cerrada="1"] .cx-entry-head { background: #5d6a58; }
.cx-hl-side { min-width: 0; }
.cx-hl-side .cx-kpis { margin-bottom: 1rem; }
.cx-hl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (max-width: 1199.98px) { .cx-hl-top { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .cx-hl-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Cámara inteligente: captura → análisis → resultados */
.cx-flow { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cx-flow li { display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; border-radius: 10px; background: #fff; border: 1px solid var(--cx-line); color: var(--cx-muted); }
.cx-flow li b { display: block; color: var(--cx-ink); font-size: .95rem; }
.cx-flow li span:not(.cx-flow-n) { font-size: .8rem; }
.cx-flow-n { width: 1.8rem; height: 1.8rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #eef1ea; color: var(--cx-muted); }
#tab-camera[data-fase="espera"] .cx-flow li[data-paso="captura"],
#tab-camera[data-fase="analisis"] .cx-flow li[data-paso="analisis"],
#tab-camera[data-fase="resultados"] .cx-flow li[data-paso="resultados"] { border-color: var(--cx-leaf); background: var(--cx-sage); }
#tab-camera[data-fase="espera"] .cx-flow li[data-paso="captura"] .cx-flow-n,
#tab-camera[data-fase="analisis"] .cx-flow li[data-paso="analisis"] .cx-flow-n,
#tab-camera[data-fase="resultados"] .cx-flow li[data-paso="resultados"] .cx-flow-n { background: var(--cx-forest); color: #fff; }
#tab-camera[data-fase="analisis"] .cx-flow li[data-paso="captura"] .cx-flow-n,
#tab-camera[data-fase="resultados"] .cx-flow li:not([data-paso="resultados"]) .cx-flow-n { background: var(--cx-leaf-bright); color: #fff; }
.cx-cam { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.cx-cam-stage { min-width: 0; }
.cx-cam-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--cx-line); border-radius: 10px; padding: .5rem; margin-bottom: .6rem; }
.cx-cam-bar-gap { flex: 1 1 auto; }
#tab-camera .camera-stage { border-radius: 12px; height: min(62vh, 560px); background: #18221b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#tab-camera #camMessage { border-radius: 8px; }
.cx-cam-tips { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cx-cam-tips li { font-size: .82rem; color: var(--cx-muted); background: #fff; border: 1px solid var(--cx-line); border-radius: 999px; padding: .25rem .65rem; display: inline-flex; align-items: center; gap: .35rem; }
.cx-cam-tips i { color: var(--cx-leaf); }
.cx-cam-settings .cx-form-row { margin-top: .4rem; }
.cx-cam-results { background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-radius); padding: 1rem 1.15rem 1.15rem; min-width: 0; }
.cx-cam-results > .cx-h2 { margin-bottom: .7rem; }
.cx-cam-empty { border: 1px dashed var(--cx-line-2); border-radius: 10px; background: #fbfcf9; padding: 1.6rem 1.2rem; text-align: center; }
.cx-cam-empty > div { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.cx-cam-empty i { font-size: 1.6rem; color: var(--cx-leaf); }
.cx-cam-empty span { font-size: .88rem; color: var(--cx-muted); max-width: 32ch; }
.cx-cam-empty-busy { display: none !important; }
#tab-camera[data-fase="analisis"] .cx-cam-empty-wait { display: none !important; }
#tab-camera[data-fase="analisis"] .cx-cam-empty-busy { display: flex !important; }
#tab-camera[data-fase="resultados"] .cx-cam-empty { display: none; }
#tab-camera:not([data-fase="resultados"]) .cx-cam-data { display: none; }
.cx-group-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--cx-muted); margin: .2rem 0 .45rem; }
.cx-est { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: .9rem; }
.cx-est-card { border: 1px solid var(--cx-line); border-left: 4px solid var(--cx-harvest); border-radius: 10px; padding: .7rem .85rem; font-size: .88rem; }
.cx-est-card h3 { font-size: .82rem; color: var(--cx-muted); margin-bottom: .3rem; }
.cx-est-card .fs-5 { font-size: 1.2rem !important; font-weight: 800 !important; color: var(--cx-ink); }
.cx-obs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cx-obs article { background: var(--cx-ivory); border-radius: 8px; padding: .6rem .7rem; font-size: .82rem; min-width: 0; overflow-wrap: anywhere; }
.cx-obs article h3 { font-size: .78rem; color: var(--cx-muted); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-bottom: .25rem; }
.cx-obs .table { font-size: .78rem; }
.cx-obs article:last-child { grid-column: 1 / -1; }  /* la tabla de color necesita el ancho completo */
.cx-obs .table td { white-space: nowrap; }
.cx-cam-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (max-width: 1199.98px) { .cx-cam { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .cx-cam-lower { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .cx-flow { gap: .3rem; }
  .cx-flow li { padding: .5rem; gap: .4rem; flex-direction: column; text-align: center; }
  .cx-flow li span:not(.cx-flow-n) { display: none; }
  .cx-obs { grid-template-columns: 1fr; }
  #tab-camera .camera-stage { height: 52vh; }
  .cx-cam-bar .btn, .cx-cam-bar .form-select { flex: 1 1 45%; }
  .cx-cam-bar-gap { display: none; }
}

/* ------------------------------------------------------------------ Campaña y lotes */
.cx-field-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr); gap: 1rem; align-items: start; }
.cx-field-side { min-width: 0; }
.cx-field-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
.cx-ndvi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cx-ndvi-map svg { max-height: 30rem; }
.cx-ndvi-map polygon { transition: stroke-width .12s; }
.cx-ndvi-map polygon:hover { stroke: var(--cx-forest); stroke-width: 2; }
.cx-ndvi-map polygon.sel { stroke: var(--cx-forest); stroke-width: 3.5; }
.cx-ndvi-legend { margin-top: .6rem; max-width: 22rem; }
.cx-ndvi-scale { height: 10px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .1); }
.cx-ndvi-ticks { display: flex; justify-content: space-between; font-size: .74rem; color: var(--cx-muted); margin-top: .25rem; line-height: 1.25; }
.cx-ndvi-ticks span:nth-child(2) { text-align: center; }
.cx-ndvi-ticks span:last-child { text-align: right; }
.cx-ndvi-side { background: var(--cx-ivory); border-radius: 10px; padding: .9rem 1rem; min-height: 14rem; }
.cx-ndvi-side .cx-empty { padding: 1.2rem .5rem; }
.cx-lot-head { display: flex; align-items: center; gap: .7rem; }
.cx-lot-name { font-size: 1.3rem; font-weight: 800; }
.cx-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); margin-right: .45rem; vertical-align: middle; }
.cx-swatch.lg { width: 2.2rem; height: 2.2rem; border-radius: 8px; margin: 0; }
.cx-lot-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .8rem 0 .3rem; }
.cx-lot-kpis div { background: #fff; border-radius: 8px; padding: .5rem .65rem; display: flex; flex-direction: column; }
.cx-lot-kpis span { font-size: .75rem; color: var(--cx-muted); }
.cx-lot-kpis b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cx-years { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .3rem; font-size: .8rem; }
.cx-years li { background: #fff; border-radius: 6px; padding: .3rem .5rem; display: flex; justify-content: space-between; gap: .4rem; font-variant-numeric: tabular-nums; }
.cx-ndvi-table tr.sel > * { background: var(--cx-sage) !important; }
.cx-ndvi-table td:first-child { white-space: nowrap; }
@media (max-width: 1199.98px) { .cx-field-grid { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .cx-ndvi, .cx-field-lower { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Reglas y evaluación */
.cx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-bottom: .9rem; }
.cx-filters > input[type="search"] { max-width: 24rem; flex: 1 1 16rem; margin-left: auto; }
.cx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cx-chip { border: 1px solid var(--cx-line-2); background: #fff; color: var(--cx-ink); border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; gap: .35rem; }
.cx-chip span { font-size: .75rem; color: var(--cx-muted); font-weight: 700; }
.cx-chip.on { background: var(--cx-forest); border-color: var(--cx-forest); color: #fff; }
.cx-chip.on span { color: #c4d4bd; }
.cx-rules { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.cx-rule { background: #fff; border: 1px solid var(--cx-line); border-radius: 10px; padding: .75rem .95rem; }
.cx-rule.is-shadow { border-style: dashed; background: #fbfbf8; }
.cx-rule-main { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr) auto auto; gap: .4rem 1rem; align-items: center; }
.cx-rule-id { font-weight: 800; font-size: 1rem; color: var(--cx-forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-rule-id span { font-size: .75rem; color: var(--cx-muted); font-weight: 600; margin-left: .3rem; }
.cx-rule-name { font-weight: 600; min-width: 0; }
.cx-rule-meta { font-size: .8rem; color: var(--cx-muted); font-weight: 400; margin-top: .1rem; }
.cx-rule-tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.cx-rule-more { margin-top: .45rem; }
.cx-rule-more > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--cx-leaf); min-height: 30px; display: inline-flex; align-items: center; }
.cx-rule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; padding: .6rem .2rem .2rem; border-top: 1px solid var(--cx-line); margin-top: .35rem; }
.cx-rule-grid h4 { font-size: .78rem; font-weight: 700; color: var(--cx-muted); margin: 0 0 .3rem; }
.cx-rule-grid code { white-space: normal; }
.cx-rule .kb-form { background: var(--cx-sage); border-radius: 8px; padding: .75rem; margin-top: .6rem; }
.cx-rules-none .cx-empty { border: 1px dashed var(--cx-line-2); border-radius: 10px; }
.cx-kb-lower { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (max-width: 991.98px) {
  .cx-rule-main { grid-template-columns: minmax(0, 1fr) auto; }
  .cx-rule-id { grid-column: 1 / -1; }
  .cx-rule-tags { justify-content: flex-start; grid-column: 1 / -1; }
  .cx-rule-act { grid-column: 1 / -1; justify-self: start; }
  .cx-rule-grid, .cx-kb-lower { grid-template-columns: 1fr; }
  .cx-filters > input[type="search"] { margin-left: 0; max-width: none; }
}

/* ------------------------------------------------------------------ Usuarios */
.cx-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end; }
.cx-form-submit { display: flex; align-items: flex-end; }
.cx-users td { padding-top: .7rem !important; padding-bottom: .7rem !important; }
.cx-person { display: flex; align-items: center; gap: .7rem; }
.cx-person .hv-avatar { background: var(--cx-sage); color: var(--cx-forest); width: 2.3rem; height: 2.3rem; }
.cx-inactive .cx-person { opacity: .6; }
#usersNew .cx-panel { margin-bottom: 1rem; }
@media (max-width: 575.98px) {  /* en el celular cada cuenta es una ficha: persona arriba, rol, estado y acciones abajo */
  .cx-users thead { display: none; }
  .cx-users tr { display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; padding: .8rem .9rem; border-bottom: 1px solid var(--cx-line); }
  .cx-users td { display: block; border: 0 !important; padding: 0 !important; }
  .cx-users td:first-child { grid-column: 1 / -1; }
  .cx-users td:nth-child(2) .form-select { width: 100% !important; }
  .cx-users td:last-child { grid-column: 1 / -1; text-align: left !important; }
}

/* ------------------------------------------------------------------ Clima: consulta por niveles */
.cx-phase { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: -.2rem 0 1rem; }
.cx-phase-label { font-size: .8rem; font-weight: 600; color: var(--cx-muted); margin-right: .2rem; }
.cx-subnav { border-bottom: 1px solid var(--cx-line); margin-bottom: 1.1rem; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.cx-subnav .nav-link { border: 0; background: none; color: var(--cx-muted); font-weight: 600; padding: .65rem .9rem; border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.cx-subnav .nav-link:hover { color: var(--cx-ink); }
.cx-subnav .nav-link.active { color: var(--cx-forest); border-bottom-color: var(--cx-leaf); }
.cx-cl-period { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; margin-bottom: .9rem; font-size: .92rem; }
.cx-cl-period .k { font-size: .8rem; font-weight: 600; color: var(--cx-muted); margin-right: .4rem; }
.cx-cl-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cx-src { font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; }
.cx-src::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; }
.cx-src.obs { background: var(--cx-sage); color: var(--cx-forest); }
.cx-src.obs::before { background: var(--cx-leaf); }
.cx-src.prov { background: var(--cx-harvest-bg); color: var(--cx-harvest-ink); }
.cx-src.prov::before { background: var(--cx-harvest); }
.cx-src.fc { background: #e4ebf1; color: #24425a; }
.cx-src.fc::before { border: 2px dashed #2f6db5; width: .45rem; height: .45rem; }
.cx-src.miss { background: #fbecea; color: #7a2119; }
.cx-src.miss::before { background: var(--hv-rojo); }
.cx-cl-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 1rem; align-items: start; }
.cx-cl-read ul { padding-left: 1.1rem; font-size: .92rem; }
.cx-cl-read ul li { margin-bottom: .3rem; }
.cx-cl-curves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.cx-chart-card { margin-bottom: 0; }
.cx-chart-card .cx-panel-body { padding-top: .9rem; }
#clPreviewCard:not([hidden]) + #clPreviewHint { display: none; }
@media (max-width: 1199.98px) { .cx-cl-curves { grid-template-columns: 1fr 1fr; } }
@media (max-width: 991.98px) { .cx-cl-read, .cx-cl-curves { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .cx-subnav { flex-wrap: wrap; border-bottom: 0; gap: .35rem; }
  .cx-subnav .nav-item { flex: 1 1 45%; }
  .cx-subnav .nav-link { width: 100%; justify-content: center; border: 1px solid var(--cx-line); border-radius: 8px; background: #fff; }
  .cx-subnav .nav-link.active { background: var(--cx-forest); color: #fff; border-color: var(--cx-forest); }
}

/* ------------------------------------------------------------------ celular */
@media (max-width: 575.98px) {
  .cx-context { gap: .6rem; }
  .cx-context > .cx-field { flex: 1 1 100%; }
  .cx-field .form-select, .cx-field .form-control { min-width: 0; width: 100%; }
  .cx-context-meta, .cx-context-actions { margin-left: 0; width: 100%; }
  .cx-context-actions .btn { flex: 1 1 auto; }
  .cx-panel-head { padding: .85rem .9rem .5rem; }
  .cx-panel-body { padding: .3rem .9rem .95rem; }
  .cx-flush .table > :not(caption) > * > *:first-child { padding-left: .9rem; }
  .cx-date { font-size: 2.15rem; }
  .cx-result .cx-date { font-size: 2.4rem; }
  .cx-filters > .cx-field { flex: 1 1 45%; }
}

/* Campo premium: tipografía local, paisaje editorial y contraste de operación. */
@font-face {
  font-family: "Campo Source Sans";
  src: url("vendor/fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0100-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Campo Source Sans";
  src: url("vendor/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
html[data-vista="campo"] {
  --cx-forest: #143325;
  --cx-forest-2: #254935;
  --cx-leaf: #386432;
  --cx-leaf-bright: #598945;
  --cx-sage: #e9efda;
  --cx-sage-2: #d7e3c5;
  --cx-ivory: #f7f7ef;
  --cx-ink: #1a2e22;
  --cx-muted: #506150;
  --cx-line: #dce2d3;
}
html[data-vista="campo"] body { font-family: "Campo Source Sans", system-ui, sans-serif; }
html[data-vista="campo"] .hv-sidebar.offcanvas-lg {
  background: url("campo/surcos.svg") bottom center / 145% auto no-repeat,
    linear-gradient(160deg, #142c21, #203e2c 74%, #152b22) !important;
}
html[data-vista="campo"] .hv-logo { border-radius: 57% 57% 46% 46%; background: #c9d99c; }
html[data-vista="campo"] .hv-crumb[hidden] { display: block !important; }
html[data-vista="campo"] .hv-topbar h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 760; }
html[data-vista="campo"] .hv-content { margin-inline: auto; }
html[data-vista="campo"] .hv-avatar { background: var(--cx-leaf); }
.cx { font-variant-numeric: tabular-nums; }
.cx :is(.cx-panel, .cx-actions, .cx-entry, .cx-cam-results, .cx-kpis, .cx-strip) {
  box-shadow: 0 3px 10px #28371d08;
}
.cx :is(.cx-summary, .cx-result) {
  background: linear-gradient(90deg, #112b20 0%, #143325f5 42%, #1634259c 75%, #17342685),
    url("campo/huerto.svg") right center / cover no-repeat, var(--cx-forest);
}
.cx .cx-result-compare { background: #163625ed; }
.cx .cx-entry-head { background: #183928 url("campo/surcos.svg") right center / auto 180% no-repeat; }
.cx .cx-panel-head { row-gap: .35rem; }
.cx :is(.cx-actions-head, .cx-panel-head) h2 { letter-spacing: -.015em; }
.cx .cx-actions-head { background: linear-gradient(110deg, #edf2de, #fff 80%); }
.cx .cx-ndvi-panel .cx-panel-head {
  background: linear-gradient(90deg, #153325, #173827bc), url("campo/huerto.svg") right 44% / cover;
  border-radius: var(--cx-radius) var(--cx-radius) 0 0;
  padding-bottom: .9rem;
  margin-bottom: .65rem;
}
.cx .cx-ndvi-panel .cx-panel-head :is(h2, .cx-panel-meta) { color: #f2f5e9; }
.cx .cx-ndvi-map svg { background: #eef2e8; border: 1px solid var(--cx-line); border-radius: .65rem; }
.cx .cx-ndvi-map polygon:is(:hover, :focus) { stroke: #172f23; stroke-width: 2.5; }
.cx .camera-stage { background: radial-gradient(ellipse at 50% 60%, #243f31, #14271e 72%); }
.cx .camera-guide { border-color: #e1e8c3; }
.cx #usersCount { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx #usersCount .hv-kpi { border-top: 0; }
.cx #usersCount > div:nth-child(3) .hv-kpi { border-left: 1px solid var(--cx-line); }
.cx :is(button, a, input, select, summary, textarea):focus-visible,
html[data-vista="campo"] :is(.hv-sidebar, .hv-topbar, .hv-bottombar) button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.cx #fieldCertification:not(:empty) { padding: .65rem; background: var(--cx-sage); border-radius: .5rem; }
.cx :is(#phTimeline, #monAlerts) { overflow-wrap: anywhere; }
.cx :is(.cx-field, .cx-ndvi-side, .cx-col, .cx-result-main) { min-width: 0; }
.cx :is(.cx-panel, .cx-actions, .card) { scroll-margin-top: 7rem; }
@media (max-width: 991.98px) {
  .cx .btn, .cx select { min-height: 40px; }
  .cx .cx-summary, .cx .cx-result {
    background-image: linear-gradient(90deg, #112b20, #163425db), url("campo/huerto.svg");
  }
}
@media (max-width: 575.98px) {
  .cx .cx-summary, .cx .cx-result { overflow-wrap: anywhere; }
  .cx #usersCount .hv-kpi { padding-inline: .5rem; }
  .cx #phControls input[type="datetime-local"] { min-width: 0; padding-inline: .35rem; }
  .cx .cx-context .cx-field .form-select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cx *, html[data-vista="campo"] .hv-sidebar * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
.cx :is(.cx-rule-banner, .cx-account-banner) {
  align-items: center;
  min-height: 6rem;
  padding: 1rem 1.25rem;
  border-radius: var(--cx-radius);
  color: #fff;
  background: linear-gradient(90deg, #173729, #173729ed 50%, #17372992),
    url("campo/huerto.svg") right 47% / cover no-repeat, var(--cx-forest);
}
.cx :is(.cx-rule-banner, .cx-account-banner) :is(h2, .cx-panel-meta) { color: #fff; }
.cx .cx-account-banner .btn { background: var(--cx-sage); color: var(--cx-forest); border-color: var(--cx-sage); }
html[data-vista="campo"] .hv-content { width: 100%; min-width: 0; }
.cx .cx-summary { grid-template-columns: minmax(0, 1fr); }
.cx .cx-summary-phase { margin-top: .35rem; }
.cx .cx-summary-phase .hv-steps { max-width: 38rem; }
.cx :is(.cx-cl-read, .cx-cl-curves, .cx-chart-card, .tab-pane) { min-width: 0; }
.cx .cx-cl-period { flex-wrap: wrap; overflow-wrap: anywhere; }
.cx .cx-subnav { flex-wrap: wrap; }
.cx .cx-ms-grid > .cx-panel { align-self: stretch; }
.cx #smpChart .cx-empty { background: url("campo/surcos.svg") center bottom / cover no-repeat; }
.cx .cx-cam-empty { padding: .85rem .75rem; margin-bottom: .75rem; }
#tab-camera[data-fase="espera"] .cx-cam-data { display: block; }
.cx .camera-stage { max-height: 31rem; }
.cx .cx-summary .count { display: block; }
.cx .cx-summary .count b { white-space: nowrap; }
.cx .cx-rule-banner a { color: #eef2c7; text-decoration: underline; }

/* Auditoría final (docs/continuidad_ia/CORRECCIONES_AUDITORIA_FINAL.md): contraste WCAG AA y respaldo sin imágenes.
   El app.css de esta rama pinta .btn-hass con background: var(--hass) (no con --bs-btn-*), y --hass valía #598945
   (4,1:1 con texto blanco). Todo queda limitado a Campo. */
html[data-vista="campo"] .hv-sidebar.offcanvas-lg { background-color: #142c21 !important; }  /* si no carga la textura */
html[data-vista="campo"] .hv-brand .sub { opacity: 1; color: #c9d6c2; }  /* color sólido: la opacidad sobre textura no garantiza contraste */
.cx .btn-hass { background: var(--cx-leaf); border-color: var(--cx-leaf); color: #fff; }       /* 6,9:1 */
.cx .btn-hass:is(:hover, :focus, :active) { background: var(--cx-forest); border-color: var(--cx-forest); color: #fff; }
.cx .text-hass { color: var(--cx-leaf) !important; }  /* app.css la declara con !important */
.cx .text-success { color: #146c43 !important; }
.cx { --bs-link-color: var(--cx-leaf); --bs-link-color-rgb: 56, 100, 50; --bs-link-hover-color: var(--cx-forest); --bs-link-hover-color-rgb: 20, 51, 37; }
.cx .btn-link { --bs-btn-color: var(--cx-leaf); --bs-btn-hover-color: var(--cx-forest); --bs-btn-active-color: var(--cx-forest); }
.cx .cx-photo-credit a { color: var(--cx-leaf); }
.cx { --hv-muted: var(--cx-muted); }                                                           /* #506150: 5,7:1 sobre salvia */
html[data-vista="campo"] .cx-person .hv-avatar { background: var(--cx-sage); color: var(--cx-forest); }
.cx-tag.pend { background: #eceee9; color: var(--cx-muted); }  /* estado no validado: neutro, sin color de éxito */
/* Referencia histórica (campaña sin floración) en Inicio y Predicción: clara y punteada, nunca el bloque oscuro de la
   fecha oficial. Rangos en lugar de una fecha única. Contrastes AA sobre #fbfaf3. */
.cx-ref { background: #fbfaf3; border: 2px dashed #c9b98f; border-radius: 14px; padding: 1.1rem 1.3rem 1.2rem; margin-bottom: 1rem; color: var(--cx-ink); }
.cx-ref-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .9rem; }
.cx-tag.ref { background: #f3e6c8; color: #6b4610; font-size: .8rem; padding: .25rem .65rem; gap: .35rem; }
.cx-ref-camp { font-size: .9rem; font-weight: 600; color: var(--cx-muted); }
.cx-ref-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: stretch; gap: .75rem; }
.cx-ref-item { background: #fff; border: 1px solid var(--cx-line); border-radius: 12px; padding: .85rem 1rem; min-width: 0; }
.cx-ref-item.main { border-color: #c9b98f; box-shadow: inset 4px 0 0 #b58a3c; }
.cx-ref-item .k { font-size: .85rem; font-weight: 700; color: var(--cx-muted); display: flex; align-items: center; gap: .35rem; }
.cx-ref-item .v { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: .3rem 0 .2rem; font-variant-numeric: tabular-nums; }
.cx-ref-item.main .v { color: #5c3d0c; }
.cx-ref-item .n { font-size: .82rem; color: var(--cx-muted); }
.cx-ref-none { font-size: 1rem !important; font-weight: 600 !important; color: var(--cx-muted); }
.cx-ref-arrow { align-self: center; font-size: 1.3rem; color: #9b8a5e; }
.cx-ref-bar { margin: 1rem 0 .3rem; }
.cx-ref-bar .track { position: relative; height: 12px; border-radius: 6px; background: #ece8da; }
.cx-ref-bar .seg { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.cx-ref-bar .seg.fl { background: #9fbf8a; }
.cx-ref-bar .seg.hv { background: #d9b46e; }
.cx-ref-bar .dot { position: absolute; top: -4px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; }
.cx-ref-bar .dot.fl { background: #386432; }
.cx-ref-bar .dot.hv { background: #7a5216; }
.cx-ref-bar .ends { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--cx-muted); margin-top: .35rem; }
.cx-ref-note { font-size: .88rem; color: var(--cx-muted); margin: .7rem 0 .8rem; max-width: 80ch; }
.cx-ref-note b { color: var(--cx-ink); }
.cx-ref-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 767.98px) {
  .cx-ref-grid { grid-template-columns: 1fr; }
  .cx-ref-arrow { transform: rotate(90deg); justify-self: center; }
  .cx-ref-actions .btn { flex: 1 1 auto; }
}
/* Tabla de antecedentes de la referencia (Seguimiento fenológico): la fecha que coincide con la mediana se resalta. */
.cx .ph-ref { border-top: 1px solid var(--cx-line); padding-top: .6rem; scroll-margin-top: 6rem; }
.cx .ph-ref .table { font-size: .86rem; font-variant-numeric: tabular-nums; }
.cx .ph-ref .ph-med { --bs-table-bg-state: #f3e6c8; font-weight: 700; color: #5c3d0c; }
.cx .ph-ref tfoot td, .cx .ph-ref tfoot th { border-bottom: 0; }
@media (max-width: 575.98px) {  /* celular: cada campaña es una ficha con sus datos rotulados, sin desplazar la tabla */
  .cx .ph-ref .table-responsive { overflow: visible; }
  .cx .ph-ref thead { display: none; }
  .cx .ph-ref :is(table, tbody, tfoot, tr) { display: block; width: 100%; }
  .cx .ph-ref tr { border: 1px solid var(--cx-line); border-radius: 10px; margin-bottom: .5rem; padding: .35rem .6rem; background: #fff; }
  .cx .ph-ref tr > * { display: flex; justify-content: space-between; gap: .75rem; border: 0; padding: .2rem 0; text-align: right !important; }
  .cx .ph-ref tbody th { font-size: 1rem; text-align: left !important; }
  .cx .ph-ref td::before { content: attr(data-label); color: var(--cx-muted); font-weight: 600; text-align: left; }
  .cx .ph-ref tfoot tr { background: #fbfaf3; border-color: #c9b98f; }
  .cx .ph-ref tfoot th { display: block; text-align: left !important; font-size: 1rem; }
}
/* Saltar al contenido (WCAG 2.4.1, de rediseno-ui): fuera de la pantalla hasta recibir el foco, en ambas vistas. */
.hv-skip { position: absolute; left: .75rem; top: -8rem; z-index: 3000; background: #fff; color: #143325; padding: .6rem 1rem; border-radius: 8px; font-weight: 600; }
.hv-skip:focus { top: .75rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }  /* sin sombra fuera de foco: no asoma en ninguna vista */
#hvContent:focus { outline: none; }
@media (max-width: 575.98px) {  /* el distintivo de demostración no comprime el título: ocupa su propia franja */
  html[data-vista="campo"] .hv-topbar { flex-wrap: wrap; row-gap: .4rem; }
  html[data-vista="campo"] #hvDemoBadge:not([hidden]) { order: 10; flex: 1 0 100%; padding-block: .35rem; text-align: center; white-space: normal; }
}

/* Fecha según IA: complementaria a la oficial (harvest_ai.py) */
.cx-ai:empty { display: none; }
.cx-ai { border: 1px solid #d6dccd; border-left: 4px solid #5b7d4a; border-radius: 12px; background: #fff; padding: .8rem 1.1rem; margin-bottom: 1rem; }
.cx-ai-head { font-weight: 600; margin-bottom: .4rem; display: flex; align-items: center; gap: .45rem; }
.cx-ai-body { display: grid; grid-template-columns: minmax(10rem, auto) 1fr; gap: .4rem 1.4rem; align-items: start; }
.cx-ai-date { font-size: 1.35rem; font-weight: 600; }
@media (max-width: 640px) { .cx-ai-body { grid-template-columns: 1fr; } }