/* AGRON · Módulo Producción — estilos
 * Sprint Sesión 1, Paso 9a (v4.36)
 *
 * REGLA DE CONVIVENCIA con styles.css:
 * Este archivo contiene SOLO reglas específicas del módulo Producción.
 * Para tabla, inputs, botones y celdas calculadas se REUTILIZAN las clases
 * del sistema aplicándolas directamente al HTML:
 *   - Tabla:             class="ctrl-labor-table"    (styles.css)
 *   - Wrapper scroll:    class="ctrl-table-scroll"   (styles.css)
 *   - Inputs editables:  class="n3-input n3-center"  (styles.css)
 *   - Celdas calc:       class="n3-total"            (styles.css)
 *   - Fila dirty:        class="n3-dirty"            (styles.css)
 *   - Acciones por fila: class="n3-fecha-wrap"
 *                        class="n3-fecha-acciones"
 *                        class="n3-fecha-btn"        (styles.css)
 *   - Botones topbar:    class="btn btn-primary"     (styles.css)
 *
 * Este archivo añade EXCLUSIVAMENTE:
 *   - Shell del módulo: .pr-selector-bar, .pr-tabs, .pr-tab-content, .pr-placeholder
 *   - Toolbar de Cosecha: .pr-toolbar*
 *   - Banner informativo: .pr-banner*
 *   - Estados de fila únicos de Producción (N3 no los tiene):
 *       .pr-row-virtual (fila vacía permanente al final estilo Google Sheets)
 *       .pr-row-nueva   (fila con datos sin guardar aún)
 */

/* ═══════════════════════════════════════════════════════════════
 * SHELL del módulo — selectores + tabs + placeholders
 * ═══════════════════════════════════════════════════════════════ */

.pr-selector-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: #fdfaf6;
  border-bottom: 1px solid #E8DDD0;
  flex-wrap: wrap;
}

.pr-selector-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pr-selector-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9a8f78;
}

.pr-selector {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 1px solid #D7C3A0;
  background: #fff;
  color: #1a1a16;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 28px 6px 10px;
  min-width: 200px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><polygon points='0,0 10,0 5,6' fill='%23B88955'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.pr-selector:focus     { outline: none; border-color: #E5B050; }
.pr-selector:disabled  { background-color: #f6f1e8; color: #9a8f78; cursor: not-allowed; }

/* ── Tabs (Cosecha · Packing · Liquidación) ──────────────────── */

.pr-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid #E8DDD0;
  background: #fff;
}

.pr-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #5a4f3a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s;
}

.pr-tab:hover           { color: #1a1a16; }
.pr-tab.active          { color: #E5B050; border-bottom-color: #E5B050; font-weight: 600; }
.pr-tab.disabled        { color: #C8B89A; cursor: default; }
.pr-tab.disabled:hover  { color: #C8B89A; }

.pr-tab-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #D7C3A0;
  color: #1a1a16;
  padding: 2px 6px;
  margin-left: 4px;
}

.pr-tab-content         { display: none; padding: 24px; flex: 1 1 auto; overflow-y: auto; }
.pr-tab-content.active  { display: block; }

/* ── Placeholder (estado vacío sin cultivo/temporada) ────────── */

.pr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: #9a8f78;
  text-align: center;
  gap: 6px;
}

.pr-placeholder > i      { font-size: 48px; margin-bottom: 12px; color: #C8B89A; }
.pr-placeholder > p      { margin: 0; font-size: 16px; font-weight: 500; color: #5a4f3a; }
.pr-placeholder > small  { font-size: 12px; color: #9a8f78; }

/* ── Loading + Error ────────────────────────────────────────── */

.pr-loading { padding: 24px; text-align: center; color: #9a8f78; font-size: 13px; }

.pr-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 24px;
  text-align: center;
  color: #B85555;
  gap: 6px;
}

.pr-error > i      { font-size: 32px; margin-bottom: 8px; }
.pr-error > p      { margin: 0; font-weight: 500; }
.pr-error > small  { color: #9a8f78; font-size: 11px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
 * TAB COSECHA — toolbar, banner y estados de fila únicos
 * (La tabla usa .ctrl-labor-table del sistema, sin overrides acá)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar (cultivo · temporada · contador + botón Guardar) ── */

.pr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 14px 0;
  border-bottom: 1px solid #E8DDD0;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

.pr-toolbar-info     { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pr-toolbar-cultivo  { font-weight: 600; color: #1a1a16; font-size: 14px; }
.pr-toolbar-temp     { color: #5a4f3a; font-weight: 500; }
.pr-toolbar-sep      { color: #C8B89A; }
.pr-toolbar-cnt      { margin-left: 12px; color: #9a8f78; font-size: 12px; font-style: italic; }

/* ── Banner informativo (sin CCs para cultivo, etc.) ─────────── */

.pr-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  border: 1px solid #D7C3A0;
  background: #fdfaf6;
  color: #5a4f3a;
}

.pr-banner > i       { font-size: 16px; flex-shrink: 0; }
.pr-banner-info      { border-left: 3px solid #59AEC3; }

/* v4.39 · Paso 9b — Banner inconsistencia cultivo↔CC
 * Extiende .pr-banner con un botón-link "Ver detalle" y un botón cerrar (X).
 * El botón-link imita el patrón de texto enfatizado del sistema sin crear
 * una clase genérica nueva (scope local al banner). */

.pr-banner-link {
  background: transparent;
  border: none;
  padding: 0 4px;
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #59AEC3;
  text-decoration: underline;
  cursor: pointer;
}

.pr-banner-link:hover { color: #4295aa; }

.pr-banner-close {
  background: transparent;
  border: none;
  padding: 0 6px;
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
  color: #9a8f78;
  cursor: pointer;
  font-family: inherit;
}

.pr-banner-close:hover { color: #1a1a16; }

/* v4.39 · Paso 9b — Botón Filtros en la toolbar
 * Estilo minimalista consistente con las clases del sistema (radius 0).
 * Se activa visualmente cuando hay filtros con selección. */

.pr-btn-filtros {
  background: transparent;
  border: 1px solid #D7C3A0;
  padding: 4px 8px;
  margin-left: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #5a4f3a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.12s, color 0.12s;
}

.pr-btn-filtros:hover {
  border-color: #B88955;
  color: #1a1a16;
}

.pr-btn-filtros.pr-btn-filtros-activo {
  border-color: #E5B050;
  background: #fdfaf6;
  color: #1a1a16;
}

.pr-btn-filtros svg { flex-shrink: 0; }

.pr-filtros-badge {
  background: #E5B050;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 2px;
  border-radius: 0;
}

/* v4.39 · Paso 9b — Fila colapsable de filtros
 * Aparece entre la toolbar y el banner cuando el usuario abre Filtros.
 * Usa fondo levemente distinto (#fafaf7) para diferenciarse visualmente. */

.pr-filtros-row {
  padding: 12px 14px;
  background: #fafaf7;
  border: 1px solid #E8DDD0;
  margin-bottom: 14px;
}

.pr-filtros-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pr-filtros-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pr-filtros-label {
  font-size: 10px;
  font-weight: 600;
  color: #9a8f78;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pr-filtros-limpiar {
  background: transparent;
  border: 1px solid #D7C3A0;
  padding: 0 10px;
  height: 30px;
  font-family: inherit;
  font-size: 12px;
  color: #9a8f78;
  cursor: pointer;
  align-self: flex-end;
  transition: border-color 0.12s, color 0.12s;
}

.pr-filtros-limpiar:hover {
  border-color: #B88955;
  color: #1a1a16;
}

/* ═══════════════════════════════════════════════════════════════
 * ESTADOS DE FILA ÚNICOS DE PRODUCCIÓN
 * N3 no tiene estos estados, por eso se definen acá.
 * Convive con .n3-dirty del sistema aplicada en filas guardadas con cambios.
 * ═══════════════════════════════════════════════════════════════ */

/* Virtual: fila vacía permanente al final — fondo apagado */
.ctrl-labor-table tr.pr-row-virtual td         { background: #fafaf7; }
.ctrl-labor-table tr.pr-row-virtual:hover td   { background: #fafaf7; }

/* Nueva: fila con datos sin guardar — franja izquierda sage */
.ctrl-labor-table tr.pr-row-nueva td:first-child {
  box-shadow: inset 3px 0 0 #AAC9C3;
}

/* ═══════════════════════════════════════════════════════════════
 * COLUMNA ACCIONES — botones siempre visibles a la derecha de Jornales
 * (Antes vivían en celda Fecha con hover-reveal usando .n3-fecha-acciones,
 *  ahora se sacaron a su propia columna con visibilidad permanente.
 *  Reusa .n3-fecha-btn del sistema para la apariencia de cada botón.)
 * ═══════════════════════════════════════════════════════════════ */

.ctrl-labor-table .pr-acciones-cell {
  padding: 6px 4px;
  text-align: center;
}

.ctrl-labor-table .pr-acciones {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

/* Virtual: ocultar las acciones (no hay nada que duplicar/eliminar) */
.ctrl-labor-table tr.pr-row-virtual .pr-acciones {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
 * COLUMNA ESTADO — badge Listo/Pendiente (reusa .badge del sistema)
 * Aparece en la penúltima columna (antes de Acciones). Fila virtual
 * no muestra badge (igual que filas vacías en N3).
 * ═══════════════════════════════════════════════════════════════ */

.ctrl-labor-table .pr-estado-cell {
  padding: 6px 4px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
 * HEADER CLICKEABLE CON SORT (v4.38)
 * Header de Fecha clickeable para alternar orden ascendente/descendente.
 * El ícono ↓/↑ cambia según el estado actual de _prState.ordenFecha.
 * ═══════════════════════════════════════════════════════════════ */

.ctrl-labor-table th.pr-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.ctrl-labor-table th.pr-th-sortable:hover {
  background: var(--sand-light);
}

.ctrl-labor-table .pr-sort-icon {
  display: inline-block;
  margin-left: 2px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
 * CELDAS CALCULADAS (Kg total, Rendimiento) — centrado
 * Override de .n3-total que por default usa text-align:right.
 * En Producción estos valores son de lectura centrada (igual que
 * las columnas editables adyacentes con n3-center).
 * ═══════════════════════════════════════════════════════════════ */

.ctrl-labor-table .n3-total.pr-cell-calc {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
 * NOTAS POR FILA (v4.39)
 * Botón de nota en columna acciones + chips de tags en popup.
 *
 * Diseño:
 *   - Botón inactivo (sin contenido): estilo .n3-fecha-btn del sistema
 *   - Botón activo (tiene notas/tags): fondo dorado + borde dorado,
 *     el ícono se ve en color oscuro sobre dorado
 *   - Chips: rectangulares (radius 0) consistente con el sistema
 *     · Inactivo: fondo blanco, borde arena, texto café
 *     · Activo:   fondo dorado, borde dorado, texto oscuro
 * ═══════════════════════════════════════════════════════════════ */

/* Botón de nota con contenido → fondo dorado suave para señalar */
.ctrl-labor-table .pr-acciones .n3-fecha-btn.pr-nota-activa {
  background: #E5B050;
  border-color: #E5B050;
  color: #1a1a16;
}

.ctrl-labor-table .pr-acciones .n3-fecha-btn.pr-nota-activa:hover {
  background: #D69E3F;
  border-color: #D69E3F;
}

/* Chips de tags en el popup de notas */
.pr-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #D7C3A0;
  background: #fff;
  color: #5a4f3a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.pr-tag-chip:hover {
  border-color: #B88955;
  color: #1a1a16;
}

.pr-tag-chip.active {
  background: #E5B050;
  border-color: #E5B050;
  color: #1a1a16;
}

.pr-tag-chip.active:hover {
  background: #D69E3F;
  border-color: #D69E3F;
}

/* ============================================================
   v4.23 — Scroll fijo del header de tabla
   ============================================================
   El `<thead>` con `position: sticky; top: 0` (definido en
   styles.css .ctrl-labor-table thead tr) solo funciona si hay
   un único contenedor scrollable aislado. Aquí convertimos
   #pr-cosecha-contenido en flex column con altura completa:
     - bloque superior (toolbar + filtros + banners) ocupa lo
       que necesita y NO scrollea
     - .ctrl-table-scroll ocupa el resto y es el único que
       scrollea — el thead sticky pega arriba
   `min-height: 0` es crítico en ambos: sin esto, los hijos
   flex con overflow no respetan el espacio disponible y
   desbordan el contenedor.
*/
#pr-cosecha-contenido {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#pr-cosecha-contenido > .pr-bloque-fijo {
  flex: 0 0 auto;
}

#pr-cosecha-contenido > .ctrl-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
}