/* Etapas fenológicas de palto y cítricos: colores tomados de las referencias de campo. */
#phenologyMonitoring .phenology-calendar-event,
#phenologyMonitoring .phenology-calendar-table.is-month .phenology-calendar-cell.phenology-day-active-col .phenology-calendar-event {
  background: var(--phenology-stage-color,#dde9e1) !important;
  border: 1px solid rgba(29,52,37,.48) !important;
  color: #16291b !important;
  box-shadow: 0 1px 3px rgba(20,38,25,.08);
}
#phenologyMonitoring .phenology-calendar-event strong,
#phenologyMonitoring .phenology-calendar-event small,
#phenologyMonitoring .phenology-calendar-table.is-month .phenology-calendar-cell.phenology-day-active-col .phenology-calendar-event strong,
#phenologyMonitoring .phenology-calendar-table.is-month .phenology-calendar-cell.phenology-day-active-col .phenology-calendar-event small { color: #16291b !important; }
#phenologyMonitoring .phenology-calendar-event:focus-visible { outline: 2px solid #153f30; outline-offset: 2px; }
#phenologyMonitoring .phenology-stage-glyph {font-size:1.1em; display:inline-block; margin-right:2px; }
#phenologyMonitoring .phenology-stage-legend {
  margin-top: 8px; border: 1px solid #d0dfd4; background: #f8fbf8;
  border-radius: 8px; padding: 10px 13px; color: #284c39;
}
#phenologyMonitoring .phenology-stage-legend summary {font-size: .85rem; font-weight: 800; cursor: pointer; }
#phenologyMonitoring .phenology-stage-legend-groups {display:grid; gap: 12px; padding-top: 11px; }
#phenologyMonitoring .phenology-stage-legend-groups > div > strong {font-size: .83rem; }
#phenologyMonitoring .phenology-stage-legend-items {display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
#phenologyMonitoring .phenology-stage-legend-item {background:var(--phenology-stage-color); color:#16291b; border:1px solid #506b50; border-radius:6px; padding:4px 7px;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:750;}
#phenologyMonitoring .phenology-stage-legend-item b {font-size: 1rem;}
.phenology-detail .phenology-stage-name {display:inline-flex;gap:6px;align-items:center;color:#16291b;background:var(--phenology-stage-color,#dde9e1);border-radius:7px;border:1px solid #60795e;padding:7px 11px;font-size:1rem;}

/* Gantt: una barra por etapa continua, con fecha inicial y siguiente cambio. */
#phenologyMonitoring .phenology-calendar-table .phenology-gantt-cell,
#phenologyMonitoring .phenology-calendar-table .phenology-gantt-empty {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 49px;
  padding: 3px !important;
  vertical-align: middle;
}
#phenologyMonitoring .phenology-calendar-table .phenology-gantt-empty {
  background: repeating-linear-gradient(135deg,#122119,#122119 9px,#16251c 9px,#16251c 18px);
}
#phenologyMonitoring .phenology-calendar-table .phenology-gantt-cell {
  background: #14251b !important;
}
#phenologyMonitoring .phenology-gantt-cell .phenology-calendar-records {
  display: grid !important;
  gap: 3px !important;
  width: 100%;
}
#phenologyMonitoring .phenology-gantt-event {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 9px !important;
  min-height: 36px;
  width: 100%;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  border-left-width: 4px !important;
}
#phenologyMonitoring .phenology-gantt-event strong {
  display: block !important;
  color: #152e1b !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: unset !important;
  white-space: normal;
}
#phenologyMonitoring .phenology-gantt-event small {
  display: block !important;
  color: #264330 !important;
  font-size: .61rem !important;
  line-height: 1.2 !important;
  white-space: normal;
}
#phenologyMonitoring .phenology-calendar-table.is-year .phenology-gantt-event {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
}
#phenologyMonitoring .phenology-calendar-table.is-month .phenology-day-head {
  min-width: 68px !important;
  width: 68px !important;
}
#phenologyMonitoring .phenology-calendar-table.is-year .phenology-month-head {
  min-width: 118px !important;
  width: 118px !important;
}
@media(max-width:760px){
  #phenologyMonitoring .phenology-gantt-event {min-height:31px;padding:4px 5px!important;}
  #phenologyMonitoring .phenology-gantt-event strong {font-size:.63rem!important;}
  #phenologyMonitoring .phenology-gantt-event small {font-size:.54rem!important;}
}