/* Climate & Nature Exchange — estilos propios del visor.
   Se apoyan en estilos.css, que es común a todo el ecosistema. */

/* ------------------------------------------------------------- principio */
.bloque-principio { border-left: 3px solid #4cc9a7; }
.principio {
  font-size: 15px; line-height: 1.42; font-weight: 600;
  color: #d7f6ec; margin: 6px 0 8px;
}

/* ------------------------------------------------------------- índice */
.ocn-caja {
  border: 1px solid #2b3d4d; border-left-width: 4px; border-radius: 8px;
  padding: 12px 14px; text-align: center; background: rgba(255,255,255,.03);
}
.ocn-valor { font-size: 34px; font-weight: 700; line-height: 1.05; }
.ocn-cat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
           color: #9fb3c2; margin-top: 3px; }

/* ------------------------------------------------------------- radar */
.radar { width: 100%; max-width: 300px; display: block; margin: 4px auto 8px; }
.radar-etq { font-size: 8.5px; fill: #9fb3c2; font-family: inherit; }
.radar-pend { fill: #d69a16; font-style: italic; }
.radar-x { font-size: 9px; fill: #d69a16; font-weight: 700; font-family: inherit; }

.sub-lista { margin-top: 4px; }
.sub-fila { display: flex; align-items: center; gap: 7px; padding: 3px 0;
            border-bottom: 1px solid rgba(255,255,255,.05); }
.sub-pip { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.sub-etq { flex: 1; font-size: 12px; }
.sub-val { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; }
.sub-val.pend { color: #d69a16; font-style: italic; font-weight: 500; }

/* ------------------------------------------------------------- listas */
.lista-si, .lista-no, .lista-pend { margin: 4px 0 2px; padding-left: 17px; }
.lista-si li, .lista-no li, .lista-pend li {
  font-size: 12px; line-height: 1.45; margin-bottom: 5px;
}
.lista-si li::marker { color: #4cc9a7; }
.lista-no li::marker { color: #e08a5a; }
.lista-no li { color: #e6c4b0; }
.sub-tit { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
           color: #9fb3c2; margin: 10px 0 3px; }
.nota-sub { font-size: 11px; color: #8fa3b2; margin: 1px 0 7px; line-height: 1.4; }

/* ------------------------------------------------------------- madurez */
.madurez { display: flex; gap: 3px; margin: 4px 0 6px; }
.mad-paso {
  flex: 1; text-align: center; font-size: 10px; padding: 5px 0;
  border-radius: 4px; background: rgba(255,255,255,.05); color: #6d8394;
}
.mad-paso.activo { background: #4cc9a7; color: #06241c; font-weight: 700; }
.mad-etq { font-size: 13px; font-weight: 600; margin: 2px 0 4px; }

/* ------------------------------------------------------------- NbS */
.nbs { border: 1px solid #24333f; border-radius: 6px; margin-bottom: 6px;
       background: rgba(255,255,255,.02); }
.nbs > summary { cursor: pointer; padding: 7px 9px; font-size: 12px;
                 display: flex; justify-content: space-between; gap: 8px; }
.nbs > summary::-webkit-details-marker { display: none; }
.nbs-pert { color: #4cc9a7; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.nbs-cuerpo { padding: 0 9px 9px; font-size: 11.5px; line-height: 1.45; }
.nbs-p { color: #e6c4b0; }
.nbs-ben { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.nbs-b { font-size: 10px; padding: 2px 6px; border-radius: 10px;
         background: rgba(255,255,255,.06); color: #9fb3c2; }
.nbs-b.fuerte { background: rgba(76,201,167,.18); color: #7fe3c6; }
.nbs-meta { font-size: 10.5px; color: #8fa3b2; margin-top: 4px; }

/* ------------------------------------------------------------- barras */
.barra-fila { display: flex; align-items: center; gap: 7px; padding: 3px 0;
              cursor: pointer; }
.barra-fila:hover { background: rgba(255,255,255,.04); }
.barra-etq { flex: 0 0 34%; font-size: 11.5px; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.barra { flex: 1; height: 9px; background: rgba(255,255,255,.07);
         border-radius: 5px; overflow: hidden; }
.barra-rell { height: 100%; border-radius: 5px; }
.barra-val { flex: 0 0 auto; font-size: 10.5px; color: #9fb3c2;
             font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- polígono */
.poly-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#mapa.dibujando { cursor: crosshair; }
#mapa.dibujando .leaflet-interactive { cursor: crosshair; }

/* ------------------------------------------------------------- capas */
.sub-capas { padding: 5px 0 2px 26px; }
.sub-capa { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
            padding: 2px 0; cursor: pointer; }
.mando { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mando label { font-size: 12px; display: flex; align-items: center; gap: 4px;
               cursor: pointer; }

.capa-doc { border: 1px solid #24333f; border-radius: 6px; margin-bottom: 5px; }
.capa-doc > summary { cursor: pointer; padding: 6px 9px; font-size: 11.5px;
                      display: flex; justify-content: space-between; gap: 8px; }
.capa-doc > summary::-webkit-details-marker { display: none; }
.capa-cuerpo { padding: 0 9px 8px; }
.capa-estado { font-size: 9.5px; padding: 1px 7px; border-radius: 9px;
               text-transform: uppercase; letter-spacing: .05em; flex: 0 0 auto; }
.capa-estado.ingerida { background: rgba(76,201,167,.18); color: #7fe3c6; }
.capa-estado.pendiente { background: rgba(214,154,22,.20); color: #f0c060; }
.capa-estado.sin_fuente { background: rgba(224,138,90,.20); color: #f0a878; }

/* ------------------------------------------------------------- cadena */
.cadena { padding-left: 19px; margin: 4px 0; }
.cadena li { font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
.cadena li::marker { color: #4cc9a7; font-weight: 700; }

.afirm { margin: 4px 0; }
.afirm-fila { display: flex; align-items: baseline; gap: 7px; padding: 3px 0;
              font-size: 12px; }
.afirm-ico { flex: 0 0 auto; font-weight: 700; }
.afirm-fila.si .afirm-ico { color: #4cc9a7; }
.afirm-fila.no .afirm-ico { color: #e08a5a; }
.afirm-fila.no { color: #c9a394; }

/* ------------------------------------------------------------- ranking */
.rank-fila { display: flex; align-items: center; gap: 7px; padding: 5px 2px;
             border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; }
.rank-fila:hover { background: rgba(255,255,255,.05); }
.rank-n { flex: 0 0 26px; font-size: 10.5px; color: #6d8394; text-align: right;
          font-variant-numeric: tabular-nums; }
.rank-pip { width: 9px; height: 22px; border-radius: 3px; flex: 0 0 auto; }
.rank-nom { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rank-nom b { font-size: 12px; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.rank-nom small { font-size: 10px; color: #8fa3b2; }
.rank-val { flex: 0 0 auto; font-size: 11.5px; font-weight: 600;
            font-variant-numeric: tabular-nums; }

.dato-flojo .dato-v { color: #e08a5a; }
.descargas { display: flex; flex-wrap: wrap; gap: 7px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .barra-etq { flex-basis: 40%; }
  .ocn-valor { font-size: 30px; }
  .mad-paso { font-size: 9px; padding: 6px 0; }
  .poly-botones .btn { flex: 1 1 46%; min-height: 42px; }
  .mando label { min-height: 40px; }
  .sub-capa { min-height: 38px; }
  .rank-fila { padding: 8px 2px; }
  .nbs > summary { padding: 11px 9px; }
  .capa-doc > summary { padding: 11px 9px; }
}
@media (max-width: 400px) {
  .barra-etq { flex-basis: 100%; }
  .barra-fila { flex-wrap: wrap; }
  .radar { max-width: 100%; }
}