/* ==========================================================================
   DASHBOARD.CSS
   --------------------------------------------------------------------------
   Estilos del layout general del Dashboard Principal.
   Está organizado por SECCIONES para que sea fácil de encontrar cada parte:

     1. Reset básico y estilos globales
     2. Estructura general (sidebar + contenido)
     3. Sidebar (menú lateral)
     4. Topbar (barra superior)
     5. Tarjetas KPI
     6. Gráficos
     7. Mapa productivo (Bloque > Banco > Sección)
     8. Panel de alertas
     9. Responsive (tablet y móvil / PDA)

   Filosofía "Mobile First": escribimos primero el estilo para pantallas
   pequeñas, y usamos "media queries" para AGREGAR estilos cuando la
   pantalla es más grande (tablet, luego desktop). Así el sitio funciona
   bien en cualquier dispositivo, incluyendo un PDA Android en el campo.
   ========================================================================== */

/* -------------------- 1. RESET BÁSICO Y ESTILOS GLOBALES -------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Así el padding no rompe los anchos que definimos */
}

body {
  font-family: var(--fuente-texto);
  background-color: var(--fondo-general);
  color: var(--texto-principal);
  line-height: 1.5;
}

h1, h2, h3, .cifra-kpi {
  font-family: var(--fuente-titulos);
  font-weight: 600;
}

/* -------------------- 2. ESTRUCTURA GENERAL -------------------- */

.app-layout {
  display: flex;           /* sidebar y contenido lado a lado */
  min-height: 100vh;
}

.contenido-principal {
  flex: 1;                 /* ocupa todo el espacio restante */
  display: flex;
  flex-direction: column;
  min-width: 0;            /* evita que el contenido "empuje" el layout */
}

/* -------------------- 3. SIDEBAR -------------------- */

.sidebar {
  width: var(--ancho-sidebar);
  background-color: var(--fondo-sidebar);
  color: var(--texto-claro);
  display: flex;
  flex-direction: column;
  position: fixed;         /* en móvil, el sidebar se "esconde" fuera de pantalla */
  top: 0;
  left: -100%;
  height: 100vh;
  z-index: 100;
  transition: left 0.25s ease; /* animación suave al abrir/cerrar en móvil */
}

/* Cuando el body tiene la clase "sidebar-abierto", el menú se muestra */
body.sidebar-abierto .sidebar {
  left: 0;
}

.sidebar__logo {
  padding: var(--espaciado-lg);
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Ícono circular real de SB Talee (recortado del logo oficial, fondo transparente) */
.sidebar__logo-img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.sidebar__logo-texto {
  white-space: nowrap;
}

.sidebar__menu {
  list-style: none;
  padding: var(--espaciado-md) 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--espaciado-lg);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.15s ease;
}

.sidebar__item a:hover,
.sidebar__item.activo a {
  background-color: rgba(255,255,255,0.1);
  color: var(--texto-claro);
}

/* Fondo oscuro semitransparente detrás del sidebar cuando está abierto en móvil */
.overlay-sidebar {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 90;
}

body.sidebar-abierto .overlay-sidebar {
  display: block;
}

/* -------------------- 4. TOPBAR -------------------- */

.topbar {
  height: var(--alto-topbar);
  background-color: var(--fondo-tarjeta);
  border-bottom: 1px solid var(--borde-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--espaciado-lg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar__btn-menu {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--texto-principal);
}

.topbar__acciones {
  display: flex;
  align-items: center;
  gap: var(--espaciado-md);
}

.topbar__usuario {
  font-size: 14px;
  color: var(--texto-secundario);
}

.badge-alertas {
  position: relative;
}

.badge-alertas__contador {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--color-critico);
  color: var(--texto-claro);
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 5px;
}

/* NUEVO en la Fase 2: botón de cerrar sesión */
.topbar__btn-cerrar-sesion {
  background: none;
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  padding: 12px 16px; /* antes 6px 12px — área táctil ~44px para tablet/celular */
  font-size: 12px;
  color: var(--texto-secundario);
  cursor: pointer;
  font-family: var(--fuente-texto);
}

.topbar__btn-cerrar-sesion:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

/* -------------------- CONTENEDOR GENERAL DE LA PÁGINA -------------------- */

.pagina {
  padding: var(--espaciado-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-lg);
}

.pagina__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-secundario);
  padding-left: 14px; /* se alinea con el texto del título, que tiene el mismo espacio por su franja lateral */
  margin-bottom: 4px;
}

/* En cada módulo, el eyebrow toma el acento propio de ese ambiente
   (ver variables.css) — es la única diferencia de color entre
   módulos, todo lo demás de la marca se mantiene igual. */
.pagina-nucleos .pagina__eyebrow { color: var(--acento-nucleos); }
.pagina-cuartofrio .pagina__eyebrow { color: var(--acento-cuartofrio); }

.pagina__titulo {
  font-size: 26px;
  padding-left: 14px;
  border-left: 4px solid var(--color-primario); /* acento de marca: ya no es solo texto negro plano */
}

.pagina__subtitulo {
  font-size: 13px;
  color: var(--texto-secundario);
}

/* -------------------- 5. TARJETAS KPI -------------------- */

.grupo-kpis {
  display: grid;
  grid-template-columns: 1fr;   /* móvil: una columna */
  gap: var(--espaciado-md);
}

.tarjeta-kpi {
  background: var(--fondo-tarjeta);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--espaciado-md) var(--espaciado-lg);
  border-left: 4px solid var(--color-primario); /* franja de color = categoría */
}

.tarjeta-kpi--inventario { border-left-color: var(--color-secundario); }
.tarjeta-kpi--enraizamiento { border-left-color: var(--color-exito); }
.tarjeta-kpi--productividad { border-left-color: var(--color-advertencia); }

.tarjeta-kpi__etiqueta {
  font-size: 12px;
  color: var(--texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cifra-kpi {
  font-size: 26px;
  margin-top: 4px;
}

.cifra-kpi__unidad {
  font-size: 13px;
  color: var(--texto-secundario);
  font-weight: 400;
  margin-left: 4px;
}

/* -------------------- 6. GRÁFICOS -------------------- */

.grupo-graficos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaciado-md);
}

.panel {
  background: var(--fondo-tarjeta);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--espaciado-md) var(--espaciado-lg);
}

/* Firma visual de Cuarto Frío: una línea superior azul acero, como una
   "línea de escarcha" — sutil, pero deja claro en qué ambiente estás
   sin necesitar releer el encabezado de la página. */
.pagina-cuartofrio .panel {
  border-top: 3px solid var(--acento-cuartofrio);
}

.panel__titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: var(--espaciado-md);
}

.panel__contenedor-grafico {
  position: relative;
  height: 260px;
}

/* -------------------- MAPA + RESUMEN DEL BANCO, LADO A LADO -------------------- */
.plano-siembra__contenido {
  display: flex;
  gap: var(--espaciado-lg);
  align-items: flex-start;
  flex-wrap: wrap; /* en pantallas angostas, el resumen baja debajo del mapa */
}

.resumen-banco {
  flex: 1;
  min-width: 320px;
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  padding: var(--espaciado-md);
}

.resumen-banco__titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: var(--espaciado-md);
}

.resumen-banco__general {
  display: flex;
  gap: var(--espaciado-md);
  margin-bottom: var(--espaciado-md);
  padding-bottom: var(--espaciado-md);
  border-bottom: 1px solid var(--borde-suave);
}

.resumen-banco__dato {
  flex: 1;
  text-align: center;
}

.resumen-banco__dato span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-secundario);
  margin-bottom: 2px;
}

.resumen-banco__dato strong {
  font-size: 22px;
  color: var(--texto-principal);
  font-family: var(--fuente-titulos);
}

/* -------------------- 7. MAPA PRODUCTIVO -------------------- */

.mapa-productivo {
  overflow-x: auto; /* en pantallas chicas, se puede desplazar horizontalmente */
  padding-bottom: 8px;
}

/* Firma visual de Núcleos: el mapa productivo vive dentro de una
   "bandeja" con textura de puntos muy sutil (evoca la cuadrícula real
   de filas y columnas de un banco de siembra) y un borde cálido, en
   vez de flotar sobre blanco liso como cualquier otro panel. */
.pagina-nucleos .mapa-productivo {
  padding: var(--espaciado-md);
  border-radius: 8px;
  border: 1px solid var(--acento-nucleos-claro);
  background-color: var(--fondo-tarjeta);
  background-image: radial-gradient(var(--acento-nucleos-claro) 1px, transparent 1px);
  background-size: 14px 14px;
}

.mapa-productivo__bloque {
  margin-bottom: var(--espaciado-md);
}

.mapa-productivo__bloque-titulo {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--texto-secundario);
}

/* Envuelve cada banco junto con su título ("Banco 1", "Banco 2"...).
   Es "inline-block" (no "block") a propósito: así los bancos siguen
   acomodándose lado a lado dentro del bloque, igual que antes. */
.banco-contenedor {
  display: inline-block;
  vertical-align: top;
  margin-right: var(--espaciado-md);
}

.banco-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-principal);
  margin-bottom: 4px;
}

/* Cada banco es una fila de 4 columnas (secciones A, B, C, D) x 17 filas */
.banco {
  display: inline-grid;
  grid-template-columns: repeat(4, 16px);
  grid-auto-rows: 16px;
  gap: 2px;
  vertical-align: top;
}

.seccion {
  border-radius: 3px;
  cursor: pointer;
}

/* Colores de estado: se aplican con clases desde JavaScript */
.seccion--disponible { background-color: var(--estado-disponible); }
.seccion--produccion { background-color: var(--estado-produccion); }
.seccion--proximo { background-color: var(--estado-proximo); }
.seccion--mantenimiento { background-color: var(--estado-mantenimiento); }

.leyenda-mapa {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaciado-md);
  margin-top: var(--espaciado-md);
  font-size: 12px;
  color: var(--texto-secundario);
}

.leyenda-mapa__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leyenda-mapa__punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* -------------------- 8. PANEL DE ALERTAS -------------------- */

.lista-alertas {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alerta {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: rgba(0,0,0,0.02);
  border-left: 3px solid var(--texto-secundario);
}

.alerta--info { border-left-color: var(--texto-secundario); }
.alerta--advertencia { border-left-color: var(--color-advertencia); }
.alerta--critica { border-left-color: var(--color-critico); }

.alerta__icono { font-size: 16px; }

.alerta__texto strong {
  display: block;
  font-size: 13px;
}

.alerta__texto span {
  color: var(--texto-secundario);
  font-size: 12px;
}

/* -------------------- 9. RESPONSIVE (TABLET Y DESKTOP) -------------------- */

/* TABLET: a partir de 768px ya cabe una grilla de 2 columnas para KPIs */
@media (min-width: 768px) {
  .grupo-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* DESKTOP: a partir de 1200px mostramos el sidebar siempre visible
   (dejamos de usar el patrón "menú escondido" propio de móvil) */
/* Tablets en horizontal (iPad 1024px, Galaxy Tab 1280px) ya tienen ancho
   de sobra para un sidebar fijo — separado del breakpoint de 1200px de
   abajo (que es sobre DENSIDAD de la grilla, no sobre navegación) para
   no cambiar cómo se ve el resto del Dashboard en este rango de ancho. */
@media (min-width: 1024px) {
  .topbar__btn-menu {
    display: none; /* ya no se necesita el botón hamburguesa */
  }

  .sidebar {
    position: relative;  /* deja de estar flotante */
    left: 0;
  }

  .overlay-sidebar {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .grupo-kpis {
    grid-template-columns: repeat(4, 1fr); /* las 4 categorías en una fila */
  }

  .grupo-graficos {
    grid-template-columns: repeat(2, 1fr); /* 2 gráficos por fila */
  }

  .fila-mapa-alertas {
    display: grid;
    grid-template-columns: 2fr 1fr; /* mapa más ancho que el panel de alertas */
    gap: var(--espaciado-lg);
    align-items: start;
  }
}

/* -------------------- 10. MODAL DE AVISO DE SESIÓN -------------------- */
/* Lo crea session.js cuando faltan 5 minutos para que expire la sesión.
   Se usa en TODAS las páginas protegidas (dashboard, usuarios, etc). */

.modal-sesion {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-sesion__caja {
  background: var(--fondo-tarjeta);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-lg);
  max-width: 340px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Variante para modales con formulario (más ancha, texto a la
   izquierda) — el aviso de sesión sigue usando la caja centrada
   original; esta variante NO le afecta en nada. */
.modal-sesion__caja--formulario {
  max-width: 420px;
  text-align: left;
}

.modal-editar-recoleccion__botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--espaciado-md);
}

.modal-editar-recoleccion__botones .btn-primario {
  width: auto;
  padding: 10px 20px;
}

/* Genérica para modales con formulario que no tienen su propia variante
   (cambio de contraseña obligatorio, restablecer contraseña de un
   usuario, solicitar recuperación desde el login). */
.modal-formulario__botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--espaciado-md);
}

.modal-formulario__botones .btn-primario {
  width: auto;
  padding: 10px 20px;
}

.mensaje-error {
  background: var(--superficie-error-clara);
  color: var(--color-critico);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: var(--espaciado-md);
  display: none;
}

.mensaje-error.visible {
  display: block;
}

.modal-sesion__caja h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--texto-principal);
}

.modal-sesion__caja p {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: var(--espaciado-md);
}

.modal-sesion__caja .btn-primario {
  width: auto;
  padding: 10px 24px;
  background-color: var(--color-primario);
  color: var(--texto-claro);
  border: none;
  border-radius: 8px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  cursor: pointer;
}

/* -------------------- 11. PÁGINA DE USUARIOS (Fase 2) -------------------- */

/* ---- Pestañas ---- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--superficie-clara); /* "riel" del control, para que la pestaña activa resalte de verdad */
  padding: 4px;
  border-radius: 10px;
  margin-bottom: var(--espaciado-md);
}

.pestana-btn {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 13px 18px; /* antes 9px 16px — área táctil ~44px para tablet/celular */
  font-size: 14px;
  font-family: var(--fuente-texto);
  color: var(--texto-secundario);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pestana-btn:hover {
  color: var(--color-primario);
  background: var(--color-primario-tinte-hover);
}

.pestana-btn.activa:hover {
  color: var(--texto-claro); /* al pasar el mouse sobre la ya activa, no debe "apagarse" */
  background: var(--color-primario);
}

.pestana-btn.activa {
  background: var(--color-primario);
  color: var(--texto-claro);
  font-weight: 600;
}

.pestana-panel {
  display: none;
}

.pestana-panel.activo {
  display: block;
}

/* ---- Tablas genéricas (usuarios y auditoría) ---- */
.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-datos th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--borde-suave);
  color: var(--texto-principal);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tabla-datos td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--texto-principal);
}

.tabla-datos-wrap {
  overflow-x: auto; /* para que la tabla no rompa el layout en móvil */
}

/* ---- Etiquetas de estado (activo/inactivo) ---- */
.etiqueta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
}

.etiqueta--activo {
  background: var(--superficie-exito-clara);
  color: var(--color-exito);
}

.etiqueta--inactivo {
  background: var(--superficie-clara);
  color: var(--texto-secundario);
}

/* ---- Etiquetas de ESTADO (mismos 4 colores del mapa productivo) ----
   Antes, todas las etiquetas de estado usaban el mismo verde genérico
   (".etiqueta--activo"), lo que hacía imposible distinguir de un
   vistazo "En producción" de "Próximo a recolección" en tablas como
   Control de Siembras. Ahora cada estado tiene su propio color, igual
   al que ya se usa en el mapa. */
.etiqueta--estado-disponible {
  background: var(--superficie-info-clara);
  color: var(--estado-disponible);
}

.etiqueta--estado-produccion {
  background: var(--superficie-exito-clara);
  color: var(--estado-produccion);
}

.etiqueta--estado-proximo {
  background: var(--superficie-advertencia-clara);
  color: var(--texto-advertencia);
}

.etiqueta--estado-mantenimiento {
  background: var(--superficie-error-clara);
  color: var(--estado-mantenimiento);
}

.etiqueta--naranja {
  background: var(--superficie-naranja-clara);
  color: var(--color-naranja);
}

/* ---- Matriz de permisos ---- */
.matriz-permisos__modulo {
  font-weight: 600;
  white-space: nowrap;
}

.permiso-punto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 3px;
  background: var(--superficie-clara);
  color: var(--texto-desactivado); /* acción NO permitida: se ve "apagada" */
}

.permiso-punto--activo {
  background: var(--color-primario);
  color: var(--texto-claro); /* acción SÍ permitida: resaltada con el color de marca */
}

.leyenda-permisos {
  font-size: 12px;
  color: var(--texto-secundario);
  margin-top: var(--espaciado-md);
}

/* -------------------- 12. PLANO DE SIEMBRA (Fase 3) -------------------- */

/* Las secciones del mapa ahora se pueden hacer clic (a diferencia de la
   versión de solo lectura del Dashboard) */
.seccion--clicable {
  cursor: pointer;
  transition: transform 0.1s ease;
}

.seccion--clicable:hover {
  transform: scale(1.3);
  outline: 2px solid var(--texto-principal);
}

/* Fondo oscuro detrás del panel lateral */
.overlay-panel {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
}

.overlay-panel.visible {
  display: block;
}

/* Panel lateral (drawer) que se desliza desde la derecha */
.panel-lateral {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 360px;
  height: 100vh;
  background: var(--fondo-tarjeta);
  z-index: 201;
  box-shadow: -2px 0 12px rgba(0,0,0,0.15);
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}

.panel-lateral.abierto {
  right: 0;
}

.panel-lateral__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaciado-lg);
  border-bottom: 1px solid var(--borde-suave);
}

.panel-lateral__cabecera h3 {
  font-size: 16px;
  color: var(--texto-principal);
}

.panel-lateral__btn-cerrar {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--texto-secundario);
}

.panel-lateral__cuerpo {
  padding: var(--espaciado-lg);
  overflow-y: auto;
  flex: 1;
}

/* Reutilizamos ".campo" del login (auth.css) copiando el mismo patrón
   aquí, porque esta página no carga auth.css */
.panel-lateral .campo {
  margin-bottom: var(--espaciado-md);
}

/* ---- Etiquetas de formulario (GENERAL, aplica a TODA la aplicación) ----
   Antes esta regla solo vivía dentro de ".panel-lateral", así que en el
   resto de formularios (Cuarto Frío, Recolección, Plano de Siembra,
   Catálogo de Variedades...) la etiqueta no tenía ningún estilo propio
   y se confundía visualmente con el dato de abajo. Ahora es una sola
   regla, en mayúsculas y en negrita, que resalta en TODOS lados. */
.campo label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-principal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.panel-lateral .campo input,
.panel-lateral .campo select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  font-family: var(--fuente-texto);
  font-size: 13px;
  color: var(--texto-principal);
}

.panel-lateral .campo input:disabled,
.panel-lateral .campo select:disabled {
  background: var(--fondo-general);
  color: var(--texto-secundario);
}

/* ---- Campo tipo checkbox (ej: "¿Es Clon?") ---- */
.campo-checkbox__etiqueta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-principal);
  text-transform: none; /* las etiquetas normales van en mayúsculas; esta es una pregunta, se lee mejor normal */
  font-weight: 500;
  cursor: pointer;
}

.campo-checkbox__etiqueta input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primario);
  cursor: pointer;
}

.aviso-solo-lectura {
  background: var(--superficie-advertencia-clara);
  color: var(--texto-advertencia);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  margin-bottom: var(--espaciado-md);
}

.panel-lateral__historial-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-principal);
  margin: var(--espaciado-lg) 0 10px;
}

.historial__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size: 12px;
}

.historial__item strong {
  color: var(--texto-principal);
}

.historial__meta {
  color: var(--texto-secundario);
  font-size: 11px;
}

.historial__vacio {
  font-size: 12px;
  color: var(--texto-secundario);
}

/* Botón primario genérico (reutilizable en cualquier página que cargue
   dashboard.css, como nucleos.html) */
.btn-primario {
  width: 100%;
  padding: 11px;
  background-color: var(--color-primario);
  color: var(--texto-claro);
  border: none;
  border-radius: 8px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-primario:hover {
  background-color: var(--color-primario-oscuro);
}

/* -------------------- 13. MÓDULO NÚCLEOS v2 -------------------- */

/* ---- Plano más grande (requisito del documento) ---- */
.mapa-productivo--grande .seccion {
  /* Antes eran 16px; las agrandamos para mejorar la legibilidad */
  width: 26px;
  height: 26px;
}

.mapa-productivo--grande .banco {
  grid-template-columns: repeat(4, 26px);
  grid-auto-rows: 26px;
  gap: 4px;
}

/* Variante exclusiva del Plano de Siembra (Módulo Núcleos): agrega una
   columna a la izquierda para el número de fila. El mapa del Dashboard
   sigue usando ".banco" tal cual, sin esta columna extra, para no
   afectarlo. */
.mapa-productivo--grande .banco.banco--con-encabezados {
  grid-template-columns: 22px repeat(4, 26px);
}

.banco__esquina {
  width: 22px;
  height: 26px;
}

.banco__encabezado-columna,
.banco__encabezado-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-secundario);
}

/* ---- Cabecera del panel con controles a la derecha ---- */
.panel__cabecera-con-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaciado-md);
  margin-bottom: var(--espaciado-md);
}

/* ---- Controles de zoom ---- */
.controles-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-secundario);
}

.controles-zoom button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  background: var(--fondo-tarjeta);
  cursor: pointer;
  font-size: 16px;
  color: var(--texto-principal);
}

.controles-zoom button:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.controles-zoom__reset {
  width: auto !important;
  padding: 0 10px;
  font-size: 12px !important;
}

#etiqueta-zoom {
  min-width: 40px;
  text-align: center;
}

/* ---- Tooltip flotante al pasar el mouse sobre una sección ---- */
.tooltip-seccion {
  display: none;
  position: absolute;
  z-index: 500;
  background: var(--texto-principal);
  color: var(--texto-claro);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none; /* para que el tooltip no "robe" el mouse a la sección */
  max-width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ---- Ficha de solo lectura de una sección sembrada (panel lateral) ---- */
.panel-lateral__estado-vacio {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: var(--espaciado-md);
}

.panel-lateral__ficha {
  margin-bottom: var(--espaciado-md);
}

.panel-lateral__ficha-fila {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde-suave);
  font-size: 13px;
}

.panel-lateral__ficha-fila span {
  color: var(--texto-secundario);
}

.panel-lateral__ficha-fila strong {
  color: var(--texto-principal);
}

/* ---- Variantes del botón primario ---- */
.btn-primario--peligro {
  background-color: var(--color-critico);
}

.btn-primario--peligro:hover {
  background-color: var(--color-primario-oscuro);
}

.btn-primario--secundario {
  background-color: var(--texto-secundario);
}

.btn-primario--secundario:hover {
  background-color: var(--texto-principal);
}

/* ---- Formulario horizontal (Recolección de esquejes) ---- */
.formulario-en-linea {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaciado-md);
  align-items: end;
  margin-bottom: var(--espaciado-lg);
  padding-bottom: var(--espaciado-lg);
  border-bottom: 1px solid var(--borde-suave);
}

.formulario-en-linea .campo input,
.formulario-en-linea .campo select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  font-family: var(--fuente-texto);
  font-size: 13px;
  color: var(--texto-principal);
}

.formulario-en-linea .btn-primario {
  width: auto;
  padding: 10px 20px;
}

/* Tablet en vertical (768-899px, ej. iPad/Galaxy Tab): 2 columnas en vez
   de 1 sola — antes recién pasaba a varias columnas a partir de 900px,
   dejando el formulario apilado (mucho scroll) en ese rango. */
@media (min-width: 700px) {
  .formulario-en-linea {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .formulario-en-linea {
    grid-template-columns: repeat(4, 1fr) auto;
  }
}

/* ---- Botón tipo enlace (usado en la tabla de variedades) ---- */
.enlace-accion {
  background: none;
  border: none;
  color: var(--color-primario);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: var(--fuente-texto);
  white-space: nowrap; /* evita que "Ver / editar" se corte en dos líneas en columnas angostas */
}

.enlace-accion:hover {
  color: var(--color-primario-oscuro);
}

/* -------------------- 16. SUBSECCIONES DENTRO DE UNA PESTAÑA -------------------- */
/* Cuando una pestaña tiene varios bloques seguidos (ej: "Crear nuevo
   tabaco" + "Asignar recolección" + "Tabacos existentes"), antes se
   veían todos pegados con el mismo título plano, sin poder distinguir
   uno de otro de un vistazo. Ahora cada bloque lleva su propio ícono y
   una línea divisoria arriba (menos el primero de la pestaña). */
.subseccion {
  margin-top: var(--espaciado-lg);
  padding-top: var(--espaciado-lg);
  border-top: 1px solid var(--borde-suave);
}

.subseccion:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.subseccion-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 4px;
}

.subseccion-titulo__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--superficie-error-clara); /* valor por defecto: páginas sin módulo propio (Usuarios, Configuración) */
  color: var(--color-primario);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

/* Identidad por módulo: mismo componente, distinto acento según en qué
   ambiente estás (ver variables.css). Configuración usa el rojo de
   marca porque administra catálogos de AMBOS módulos por igual — no
   le pertenece a uno solo. */
.pagina-nucleos .subseccion-titulo__icono {
  background: var(--acento-nucleos-claro);
  color: var(--acento-nucleos);
}

.pagina-cuartofrio .subseccion-titulo__icono {
  background: var(--acento-cuartofrio-claro);
  color: var(--acento-cuartofrio);
}

/* -------------------- 14. COMPONENTE: BUSCADOR AUTOCOMPLETE -------------------- */
/* Ver js/utilidades.js (crearBuscadorAutocomplete) para la lógica.
   Aquí solo vive la apariencia del cuadro de sugerencias. */

.autocomplete-wrapper {
  position: relative; /* para que las sugerencias "floten" justo debajo del campo */
}

.autocomplete-sugerencias {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--fondo-tarjeta);
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.autocomplete-sugerencias.visible {
  display: block;
}

.autocomplete-item {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--texto-principal);
  cursor: pointer;
  border-bottom: 1px solid var(--borde-suave);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item--activo {
  background: var(--fondo-general);
}

.autocomplete-item__meta {
  display: block;
  font-size: 11px;
  color: var(--texto-secundario);
  margin-top: 2px;
}

.autocomplete-item--vacio {
  color: var(--texto-secundario);
  cursor: default;
}

/* -------------------- 15. CREAR BANCO DINÁMICO -------------------- */
.crear-banco {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-md);
  margin-bottom: var(--espaciado-lg);
  background: var(--fondo-general);
}

.crear-banco summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primario);
}

.crear-banco .formulario-en-linea {
  margin-top: var(--espaciado-md);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 4px;
}