/* Planta Viva V8 — Biblioteca Viva + protocolos de cuidado específicos */

/* ===== Navegação: Plantas e Horta passam a ser o mesmo núcleo ===== */
.side-group-cultivar{
  padding:10px 8px 12px;
  margin:2px 0 4px;
  border:1px solid color-mix(in srgb,var(--v7-accent) 18%,transparent);
  border-radius:16px;
  background:color-mix(in srgb,var(--v7-accent-soft) 38%,transparent);
}
.side-group-cultivar .side-label{padding-left:8px}
.side-group-cultivar .side-item{padding-right:9px}
.side-item em{
  margin-left:auto;
  min-width:30px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font:700 9px/1 'JetBrains Mono',monospace;
  font-style:normal;
  color:var(--v7-muted);
  background:var(--v7-surface-2);
  border:1px solid var(--v7-border);
}
.side-item.active em{
  color:var(--v7-on-primary);
  border-color:color-mix(in srgb,var(--v7-on-primary) 25%,transparent);
  background:color-mix(in srgb,var(--v7-on-primary) 12%,transparent);
}

.catalog-bridge{
  width:min(1120px,calc(100% - 38px));
  margin:-4px auto 18px;
  padding:6px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  border:1px solid var(--v7-border);
  border-radius:20px;
  background:var(--v7-surface-2);
  box-shadow:var(--v7-shadow);
  position:relative;
  z-index:3;
}
.catalog-bridge-item{
  min-height:76px;
  border:1px solid transparent;
  border-radius:15px;
  padding:12px 15px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  text-align:left;
  background:transparent;
  color:var(--v7-text);
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.catalog-bridge-item:hover{background:var(--v7-surface);transform:translateY(-1px)}
.catalog-bridge-item>span{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--v7-surface);border:1px solid var(--v7-border);font-size:20px;
}
.catalog-bridge-item div{min-width:0;display:flex;flex-direction:column;gap:3px}
.catalog-bridge-item b{font-size:14px;letter-spacing:-.015em}
.catalog-bridge-item small{font-size:10px;line-height:1.35;color:var(--v7-muted)}
.catalog-bridge-item strong{
  min-width:40px;height:27px;padding:0 8px;border-radius:999px;display:grid;place-items:center;
  font:800 10px/1 'JetBrains Mono',monospace;color:var(--v7-muted);background:var(--v7-surface);border:1px solid var(--v7-border)
}
.catalog-bridge-item.active{
  background:var(--v7-primary);
  color:var(--v7-on-primary);
  border-color:var(--v7-primary);
  box-shadow:0 8px 22px color-mix(in srgb,var(--v7-primary) 18%,transparent);
}
.catalog-bridge-item.active>span,.catalog-bridge-item.active strong{
  background:color-mix(in srgb,var(--v7-on-primary) 12%,transparent);
  border-color:color-mix(in srgb,var(--v7-on-primary) 20%,transparent);
  color:var(--v7-on-primary)
}
.catalog-bridge-item.active small{color:color-mix(in srgb,var(--v7-on-primary) 72%,transparent)}
.catalog-subhead{margin-bottom:16px;max-width:780px}
.catalog-subhead h2{font-size:clamp(24px,2.3vw,34px);line-height:1.05;margin:5px 0 8px;color:var(--v7-text)}
.catalog-subhead p{font-size:13px;line-height:1.65;color:var(--v7-muted);margin:0}

.drawer-catalog-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.drawer-catalog-pair .menu-btn{
  min-height:82px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  white-space:normal;line-height:1.25
}
.drawer-catalog-pair .menu-btn small{font-size:9px;color:var(--v7-muted);font-weight:600}

/* ===== Ficha: cada espécie mostra o que realmente muda ===== */
.care-keypoint{
  margin:15px 0;
  padding:17px 18px 18px;
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--v7-accent-soft) 76%,var(--v7-surface)),var(--v7-surface));
  border:1px solid color-mix(in srgb,var(--v7-accent) 24%,var(--v7-border));
  color:var(--v7-text);
}
.care-keypoint>span{
  display:block;margin-bottom:8px;
  font:700 8px/1.2 'JetBrains Mono',monospace;letter-spacing:.13em;color:var(--v7-accent)
}
.care-keypoint h3{margin:0 0 7px;font-size:19px;line-height:1.15;color:var(--v7-text)}
.care-keypoint p{margin:0;font-size:12px;line-height:1.65;color:var(--v7-muted)}
.care-plan{padding:20px!important}
.care-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:5px}
.care-plan-head h3{margin:4px 0 0!important;font-size:24px!important;letter-spacing:-.035em}
.care-version{
  flex:0 0 auto;padding:5px 8px;border-radius:999px;
  border:1px solid var(--v7-border);background:var(--v7-surface-2);
  font:700 8px/1 'JetBrains Mono',monospace;color:var(--v7-muted)
}
.care-plan .detail-row{padding:12px 0!important;border-color:var(--v7-border)!important}
.care-plan .detail-row>b{
  display:block;margin-bottom:4px!important;
  font:700 8px/1.2 'JetBrains Mono',monospace!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--v7-muted)!important
}
.care-plan .detail-row>p{font-size:12px!important;line-height:1.58!important;color:var(--v7-text)!important;opacity:.88}
.care-calendar{padding:18px 20px!important}
.care-season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px}
.care-season-grid>div{
  min-width:0;padding:12px 10px;border-radius:13px;background:var(--v7-surface-2);border:1px solid var(--v7-border)
}
.care-season-grid small{display:block;margin-bottom:5px;font-size:9px;color:var(--v7-muted)}
.care-season-grid b{font-size:12px;color:var(--v7-text);font-family:'JetBrains Mono',monospace}
.care-season-note{font-size:10px!important;line-height:1.55!important;margin:12px 0 0!important;color:var(--v7-muted)!important}
.care-basis{
  margin:12px 0 16px;padding:13px 15px;border-left:3px solid var(--v7-accent);
  border-radius:0 12px 12px 0;background:var(--v7-surface-2);color:var(--v7-text)
}
.care-basis b{font-size:10px;display:block;margin-bottom:4px}
.care-basis p{font-size:9px;line-height:1.5;color:var(--v7-muted);margin:0}

/* Hero stats agora comportam textos como 18–30 °C sem quebrar feio. */
#modalContent .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
#modalContent .hero-stat{min-width:0}
#modalContent .hero-stat b{font-size:10px!important;line-height:1.35;overflow-wrap:anywhere}

/* O tema deve alcançar também os componentes V8. */
.catalog-bridge,.catalog-bridge-item>span,.catalog-bridge-item strong,
.care-keypoint,.care-plan,.care-calendar,.care-season-grid>div,.care-basis,.drawer-catalog-pair .menu-btn{
  color:var(--v7-text);
  border-color:var(--v7-border)
}
html[data-theme="dark"] .catalog-bridge{box-shadow:0 16px 40px rgba(0,0,0,.24)}
html[data-theme="dark"] .care-keypoint{
  background:linear-gradient(135deg,color-mix(in srgb,var(--v7-accent-soft) 72%,var(--v7-surface)),var(--v7-surface));
}

@media(max-width:760px){
  .catalog-bridge{width:calc(100% - 20px);margin:0 auto 12px;padding:5px;border-radius:16px}
  .catalog-bridge-item{min-height:68px;padding:10px;grid-template-columns:34px minmax(0,1fr);gap:9px}
  .catalog-bridge-item>span{width:34px;height:34px;border-radius:10px;font-size:17px}
  .catalog-bridge-item strong{display:none}
  .catalog-bridge-item b{font-size:12px}
  .catalog-bridge-item small{font-size:8.5px;line-height:1.3}
  .catalog-subhead h2{font-size:24px}
  .catalog-subhead p{font-size:11px}
  #modalContent .hero-stats{grid-template-columns:1fr 1fr!important}
  .care-season-grid{grid-template-columns:1fr 1fr}
  .care-plan{padding:17px!important}
  .care-plan-head h3{font-size:21px!important}
  .care-plan .detail-row>p{font-size:11px!important}
  .care-keypoint{padding:15px}
  .drawer-catalog-pair{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .catalog-bridge-item small{display:none}
  .catalog-bridge-item{min-height:58px}
  .catalog-bridge-item b{font-size:11px}
  .drawer-catalog-pair{grid-template-columns:1fr}
}