:root{
  color-scheme:light;
  --bg:#f4f5f1;
  --surface:#fff;
  --surface-muted:#f8faf6;
  --ink:#242a22;
  --muted:#657060;
  --line:#d7ddd2;
  --line-dashed:#d8ddd3;
  --accent:#476342;
  --accent-strong:#31482d;
  --accent-soft:#e8f0e4;
  --pending:#8d6852;
  --shadow:0 8px 24px rgba(30,45,28,.07);
  --radius:5px;
  --control-radius:4px;
  --nav-h:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.46 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.species-page{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
button,input{font:inherit;color:inherit}

/* Header */
header{background:var(--accent-strong);color:#fff}
.header-inner{
  max-width:1100px;
  margin:auto;
  padding:18px 14px;
  text-align:center;
}
.brand{
  margin:0;
  font-size:1.45rem;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.02em;
}

/* Search / state */
.toolbar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(244,245,241,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.toolbar-inner{
  max-width:1100px;
  margin:auto;
  padding:9px 12px 8px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:7px 8px;
}
.species-search{position:relative;min-width:0}
.species-search-input,
.clear-search{
  height:40px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface);
}
.species-search-input{
  width:100%;
  min-width:0;
  padding:0 11px;
  color:var(--ink);
  -webkit-appearance:none;
  appearance:none;
}
.species-search-input::-webkit-search-cancel-button{display:none}
.clear-search{
  width:42px;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--accent-strong);
  font-size:1.05rem;
  font-weight:850;
  cursor:pointer;
}
.clear-search:hover,
.clear-search:focus-visible{background:var(--accent-soft);outline:none}
.species-search-results{
  position:absolute;
  top:calc(100% + 5px);
  left:0;
  right:0;
  z-index:75;
  display:none;
  max-height:min(52vh,420px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface);
  box-shadow:0 14px 36px rgba(25,38,24,.16);
}
.species-search-results.open{display:block}
.species-search-option{
  display:block;
  width:100%;
  padding:10px 11px;
  border:0;
  border-bottom:1px dashed var(--line-dashed);
  background:var(--surface);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.species-search-option:last-child{border-bottom:0}
.species-search-option:hover,
.species-search-option:focus-visible,
.species-search-option.active{background:var(--accent-soft);outline:none}
.species-search-empty{padding:11px;color:var(--muted);font-size:.88rem}
.filter-status{
  grid-column:1/-1;
  margin:0;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.25;
}

/* Main */
main{max-width:1100px;margin:auto;padding:16px 12px 32px}
.page-title{
  margin:0 0 5px;
  color:var(--accent-strong);
  font-size:1.55rem;
  line-height:1.15;
}
.page-lead{margin:0 0 16px;color:var(--muted)}
.species-heading{margin:0 0 14px}
.species-name{
  margin:0;
  color:var(--accent-strong);
  font-size:1.6rem;
  line-height:1.15;
}
.section-panel{display:none}
.section-panel.active{display:block}

/* Data rows */
.data-list{display:grid;gap:0;margin:0}
.data-row{
  display:grid;
  grid-template-columns:minmax(112px,38%) minmax(0,1fr);
  gap:10px;
  padding:8px 0;
  border-bottom:1px dashed #e2e6de;
}
.data-row:last-child{border-bottom:0}
.data-row dt{
  margin:0;
  color:var(--muted);
  font-size:.84rem;
  font-weight:750;
}
.data-row dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pending{color:var(--pending);font-style:italic}
.botanical-name{font-style:italic}

/* Main cards / section headings */
.card,
.section-card,
.index-table{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:none;
}
.section-card-heading{
  margin:0;
  padding:11px 13px;
  border:0;
  border-bottom:1px solid var(--accent-strong);
  background:var(--surface-muted);
  color:var(--accent-strong);
  font-size:1rem;
  font-weight:800;
}
.index-table-heading{
  margin:0;
  padding:11px 13px;
  border:0;
  border-bottom:1px solid var(--accent-strong);
  background:var(--surface-muted);
  color:var(--accent-strong);
  font-size:1rem;
  font-weight:800;
}
.section-card-content{padding:10px 13px 12px;background:var(--surface)}

/* Details at any nested level.
   One dashed separator belongs to the whole row. Summary itself has no border. */
.subsections,
.phase-list{display:grid;gap:0}
.subsection-details,
.phase-details{
  margin:0;
  border:0;
  border-bottom:1px dashed var(--line-dashed);
  border-radius:0;
  background:var(--surface);
  overflow:visible;
  box-shadow:none;
}
.subsection-details:last-child,
.phase-details:last-child{border-bottom:0}
.subsection-details > summary,
.phase-details > summary{
  list-style:none;
  position:relative;
  cursor:pointer;
  padding:10px 46px 10px 12px;
  border:0;
  border-radius:0;
  background:var(--surface);
  color:var(--accent-strong);
  font-weight:800;
}
.subsection-details > summary::-webkit-details-marker,
.phase-details > summary::-webkit-details-marker{display:none}
.subsection-details > summary::after,
.phase-details > summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:11px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface);
  color:var(--accent-strong);
  font-size:1rem;
  line-height:1;
}
.subsection-details[open] > summary::after,
.phase-details[open] > summary::after{content:"−"}
.subsection-content,
.phase-content{padding:6px 12px 8px;background:var(--surface)}

/* A single subsection is the same details component, simply opened by default.
   It receives the neutral outer card border only once. */
.single-auto-open{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.single-auto-open > summary{
  border:0;
  border-bottom:1px solid var(--accent-strong);
  background:var(--surface-muted);
}
.single-auto-open .subsection-content{padding:10px 13px 12px}


[data-tab-root],
.inner-panel,
.subsection-content,
.section-card-content,
.section-card,
.subsection-details,
.single-auto-open{
  min-width:0;
  max-width:100%;
}
[data-tab-root]{
  width:100%;
  overflow:hidden;
}
.inner-panel{
  width:100%;
  overflow:hidden;
}

/* Inner tabs */
.inner-tabs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  margin:0 0 12px;
  padding:0 5px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
}
.inner-tabs::-webkit-scrollbar{display:none}
.inner-tabs button{
  width:max-content;
  min-width:max-content;
  max-width:none;
  position:relative;
  border:0;
  background:var(--surface);
  padding:11px 11px 9px;
  color:var(--muted);
  font-weight:750;
  white-space:nowrap;
  cursor:pointer;
  touch-action:pan-x pan-y;
}
.inner-tabs button.active{color:var(--accent-strong)}
.inner-tabs button.active::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  bottom:0;
  height:3px;
  background:var(--accent);
}
.inner-panel{display:none}
.inner-panel.active{display:block}

/* Watering phase data */
.phase-content .data-row{grid-template-columns:minmax(92px,26%) minmax(0,1fr)}

/* Temperature table */
.thermal-table{display:grid;gap:0;margin:0}
.thermal-row{
  display:grid;
  grid-template-columns:minmax(150px,30%) minmax(0,1fr);
  gap:12px;
  padding:9px 0;
  border-bottom:1px dashed #e2e6de;
}
.thermal-row:last-child{border-bottom:0}
.thermal-row dt{margin:0;color:var(--muted);font-size:.84rem;font-weight:760}
.thermal-row dd{margin:0;overflow-wrap:anywhere}

/* Contextual tooltips */
.term-tip{
  appearance:none;
  border:0;
  border-bottom:1px dotted currentColor;
  border-radius:0;
  padding:0;
  margin:0;
  background:transparent;
  color:var(--accent-strong);
  font:inherit;
  font-weight:750;
  cursor:pointer;
  vertical-align:baseline;
}
.term-tip:hover,
.term-tip:focus-visible{background:var(--accent-soft);outline:none}
.tooltip-layer{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(31,42,29,.16);
}
.tooltip-layer.open{display:flex}
.tooltip-box{
  position:relative;
  width:min(420px,100%);
  max-height:min(70vh,560px);
  overflow:auto;
  padding:18px 52px 18px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:0 22px 60px rgba(25,38,24,.25);
}
.tooltip-box h3{margin:0 0 7px;color:var(--accent-strong);font-size:1rem}
.tooltip-box p{margin:0}
.tooltip-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface);
  color:var(--accent-strong);
  font-size:1.15rem;
  font-weight:850;
  cursor:pointer;
}
.tooltip-close:hover,
.tooltip-close:focus-visible{background:var(--accent-soft);outline:none}

@media (hover:hover) and (pointer:fine){
  .tooltip-layer{
    inset:0;
    display:none;
    align-items:initial;
    justify-content:initial;
    padding:0;
    background:transparent;
    pointer-events:none;
  }
  .tooltip-layer.open{display:block}
  .tooltip-box{
    position:fixed;
    width:max-content;
    max-width:min(360px,calc(100vw - 24px));
    max-height:none;
    overflow:visible;
    padding:11px 13px;
    border-radius:var(--radius);
    box-shadow:0 10px 28px rgba(25,38,24,.18);
    pointer-events:none;
  }
  .tooltip-box::after{
    content:"";
    position:absolute;
    left:var(--tooltip-arrow-x,50%);
    width:10px;
    height:10px;
    background:var(--surface);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transform:translateX(-50%) rotate(45deg);
  }
  .tooltip-box[data-placement="top"]::after{bottom:-6px}
  .tooltip-box[data-placement="bottom"]::after{top:-6px;transform:translateX(-50%) rotate(225deg)}
  .tooltip-close{display:none}
  .tooltip-box h3{font-size:.92rem;margin-bottom:4px}
  .tooltip-box p{font-size:.86rem}
}

/* Index */
.index-intro{margin-bottom:8px}
.index-table{margin-top:12px}
.index-list{
  list-style:none;
  display:block;
  margin:0;
  padding:0;
  background:var(--surface);
}
.index-list li{margin:0;padding:0 12px;border-bottom:1px dashed var(--line-dashed)}
.index-list li:last-child{border-bottom:0}
.index-link{
  display:block;
  padding:10px 2px;
  color:var(--ink);
  text-decoration:none;
  font-weight:400;
}
.index-link:hover,
.index-link:focus-visible{background:var(--accent-soft);outline:none}
.index-name{display:block;color:var(--ink);font-size:inherit;font-weight:400;font-style:normal}

/* Bottom navigation */
.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner{
  max-width:1100px;
  margin:auto;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding-inline:12px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
}
.bottom-nav-inner::-webkit-scrollbar{display:none}
.bottom-nav a{
  flex:1 0 110px;
  min-width:88px;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 11px 7px;
  border-top:3px solid transparent;
  color:var(--muted);
  text-align:center;
  text-decoration:none;
  font-size:.76rem;
  font-weight:760;
}
.bottom-nav a.active{color:var(--accent-strong);border-top-color:var(--accent)}

@media(max-width:560px){
  .thermal-row{grid-template-columns:minmax(110px,38%) minmax(0,1fr);gap:9px}
  .phase-content .data-row{grid-template-columns:minmax(82px,31%) minmax(0,1fr)}
}

@media(min-width:720px){
  .toolbar-inner{padding-inline:20px}
  .bottom-nav-inner{padding-inline:20px}
  main{padding:20px}
  .data-row{grid-template-columns:minmax(190px,30%) minmax(0,1fr)}
}

@media print{
  .toolbar,.bottom-nav,.tooltip-layer{display:none!important}
  body.species-page{padding-bottom:0}
  body{background:#fff}
  .section-panel{display:block!important;margin-bottom:20px}
  .subsection-details{break-inside:avoid}
  .subsection-details > summary::after{display:none}
  .subsection-details:not([open]) .subsection-content{display:block}
}


/* v2.16 · desplazamiento horizontal consistente */
.horizontal-dragging{
  cursor:grabbing!important;
  user-select:none!important;
}
.horizontal-dragging *{
  user-select:none!important;
}
.inner-tabs,
.bottom-nav-inner{
  scroll-behavior:auto;
}

/* v2.17 · protección contra desbordamiento en pantallas muy estrechas */
@media(max-width:360px){
  .data-row,
  .phase-content .data-row,
  .thermal-row{
    grid-template-columns:minmax(0,1fr);
    gap:3px;
  }

  .data-row dt,
  .thermal-row dt{
    font-size:.8rem;
  }

  .data-row dd,
  .thermal-row dd{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .section-card-content,
  .subsection-content{
    min-width:0;
  }
}


/* v2.18 · el gesto de arrastre no interfiere con los clics */
.inner-tabs.is-overflowing,
.bottom-nav-inner.is-overflowing{
  cursor:grab;
}
.inner-tabs.horizontal-dragging,
.bottom-nav-inner.horizontal-dragging{
  cursor:grabbing!important;
}


/* v2.20 · jerarquía editorial de Riego y Manejo del semillero */
.compat-intro{
  margin:4px 0 12px;
  color:var(--muted);
  font-size:.88rem;
}
.compat-species-link{
  color:var(--accent-strong);
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
  font-weight:600;
}
.compat-species-link:hover,
.compat-species-link:focus-visible{
  background:var(--surface-muted);
  outline:none;
}
.compat-separator{color:var(--muted)}
.compat-none{
  color:var(--muted);
  font-style:italic;
}

/* Las ubicaciones de Riego son subsecciones: mismo patrón de details. */
.watering-locations{
  width:100%;
}

/* Las fases dentro de Compatibilidad reutilizan el patrón de fases/desplegables. */
.tray-compatibility .phase-list{
  margin-top:4px;
}
.tray-phase-details .phase-content{
  padding-top:6px;
}

/* Pestañas anidadas: blanco y sin añadir una nueva caja visual. */
.subsection-content > [data-tab-root]{
  width:100%;
}