/* EdTech · directorio · CSS extra (requiere css/edutic.css) */

/* Hero: texto + 4 cifras */
.pg-edtech .pg-edtech__hero { grid-template-columns: 1fr 420px; }
.pg-edtech__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-edtech__kpis > div { padding: 18px; background: var(--edu-white); border-radius: var(--edu-radius); }
.pg-edtech__kpis dt { font-size: 2.25rem; }
.pg-edtech__kpis dd { margin: 4px 0 0; font-size: .75rem; color: var(--edu-text); }

/* Filtros: una fila con buscador, categoría y orden; debajo, el resumen con los filtros activos (js/paginas/edtech.js) */
.pg-edtech__filtros { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1rem; }
.pg-edtech__controles { display: flex; align-items: center; gap: .625rem; }
.pg-edtech__select { height: 46px; border-radius: 999px; font-size: .875rem; font-weight: 600; border-color: var(--edu-border); background-color: #fff; flex: 0 1 17rem; min-width: 0; }
.pg-edtech__select--orden { flex-basis: 13rem; }
.pg-edtech__select:focus { border-color: var(--edu-green); box-shadow: 0 0 0 .2rem rgba(128, 179, 39, .18); }
/* Choices.js (selector de categorías) con la piel del portal. Se carga su CSS base antes que este archivo; aquí solo se pisa
   lo visual: caja redonda como el buscador, etiquetas verdes para lo elegido, lista flotante con cantidad por categoría. */
.pg-edtech .pg-edtech__cat { flex: 0 1 26rem; min-width: 0; }
.pg-edtech .choices { margin: 0; font-family: var(--edu-font); font-size: .875rem; }
.pg-edtech .choices__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem 0; min-height: 46px; padding: 4px 14px 4px 16px; background: #fff; border: 1px solid var(--edu-border); border-radius: 23px; transition: border-color .15s, box-shadow .15s; }
.pg-edtech .choices.is-focused .choices__inner, .pg-edtech .choices.is-open .choices__inner { border-color: var(--edu-green); box-shadow: 0 0 0 .2rem rgba(var(--edu-green-rgb), .18); }
.pg-edtech .choices.is-open .choices__inner { border-radius: 23px; }
.pg-edtech .choices[data-type*="select-multiple"] .choices__inner { cursor: text; }
.pg-edtech .choices__list--multiple { display: contents; }
.pg-edtech .choices__input { margin: 0; padding: 4px 0; background: transparent; font-size: .875rem; color: var(--edu-ink); }
.pg-edtech .choices__input::placeholder { color: #64748b; opacity: 1; }
.pg-edtech .choices__placeholder { opacity: 1; color: #64748b; }

/* Lo elegido: etiquetas verdes que se quitan con la ✕ */
.pg-edtech .choices__list--multiple .choices__item { display: inline-flex; align-items: center; gap: .25rem; margin: 2px .375rem 2px 0; padding: .1875rem .25rem .1875rem .625rem; border: 1px solid var(--edu-green-line); border-radius: 999px; background: var(--edu-green-soft); color: var(--edu-green-dark); font-size: .75rem; font-weight: 700; line-height: 1.3; word-break: normal; }
.pg-edtech .choices__list--multiple .choices__item.is-highlighted { background: var(--edu-green-line); border-color: var(--edu-green); }
.pg-edtech .choices[data-type*="select-multiple"] .choices__button { width: 1.25rem; height: 1.25rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234F7A12' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7'/%3E%3C/svg%3E"); background-size: .5625rem; opacity: .75; }
.pg-edtech .choices[data-type*="select-multiple"] .choices__button:hover, .pg-edtech .choices[data-type*="select-multiple"] .choices__button:focus { background-color: rgba(var(--edu-green-rgb), .28); opacity: 1; }
.pg-edtech .choices__list--multiple .pg-edtech__n { display: none; }

/* Lista que se abre: tarjeta flotante con la cantidad de empresas de cada categoría */
.pg-edtech .choices__list--dropdown, .pg-edtech .choices__list[aria-expanded] { z-index: 30; margin-top: 6px; border: 1px solid var(--edu-border); border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .12); overflow: hidden; }
.pg-edtech .choices.is-open .choices__list--dropdown { border-color: var(--edu-green-line); }
.pg-edtech .choices__list--dropdown .choices__list { max-height: 19rem; padding: .375rem; }
.pg-edtech .choices__list--dropdown .choices__item { word-break: normal; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border-radius: 10px; font-size: .875rem; color: var(--edu-text); }
.pg-edtech .choices__list--dropdown .choices__item--selectable::after { display: none; }
.pg-edtech .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--edu-green-soft); color: var(--edu-green-dark); }
.pg-edtech .choices__list--dropdown .choices__item--disabled { opacity: .55; }
.pg-edtech__n { flex: none; font-size: .6875rem; font-weight: 800; padding: .0625rem .4375rem; border-radius: 999px; background: var(--edu-green-soft); color: var(--edu-green-dark); }
.pg-edtech .choices__list--dropdown .is-highlighted .pg-edtech__n { background: #fff; }

.pg-edtech__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; min-height: 1.75rem; font-size: .8125rem; color: var(--edu-text); }
.pg-edtech__pills { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.pg-edtech__pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .625rem; border: 1px solid var(--edu-green-line); border-radius: 999px; background: var(--edu-green-soft); color: var(--edu-green-dark); font-size: .75rem; font-weight: 700; cursor: pointer; }
.pg-edtech__pill:hover { border-color: var(--edu-green); }
.pg-edtech__pill .bi { font-size: .625rem; }
.pg-edtech__resumen .btn-link:disabled { opacity: .45; text-decoration: none; }

/* Grilla de tarjetas */
.pg-edtech__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pg-edtech__grid > [hidden] { display: none; }
.pg-edtech__ph { display: block; height: 260px; }
.pg-edtech__card { gap: 12px; border-radius: 16px; }
.pg-edtech__mono { width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--edu-green-tint); border: 1px solid var(--edu-green-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: var(--edu-green-dark); }
.pg-edtech__name { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--edu-ink); }
.pg-edtech__tag, .pg-edtech__ev { font-size: .6875rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pg-edtech__tag { background: var(--edu-border-2); color: var(--edu-text); }
.pg-edtech__ev { background: var(--edu-green-soft); color: var(--edu-green-dark); }
.pg-edtech__red { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--edu-border-2); }
.pg-edtech__label { font-size: .625rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--edu-muted); }
.pg-edtech__more { font-size: .75rem; font-weight: 700; color: var(--edu-green-dark); }
.pg-edtech__band-t { font-weight: 900; }

@media (max-width: 1199.98px) { .pg-edtech__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) {
  .pg-edtech .pg-edtech__hero { grid-template-columns: 1fr; }
  .pg-edtech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .pg-edtech__controles { flex-wrap: wrap; }
  .pg-edtech__controles .edu-search { flex-basis: 100%; }
  .pg-edtech .pg-edtech__cat, .pg-edtech__select--orden { flex: 1 1 100%; }
  .pg-edtech__tag { white-space: normal; }
}
@media (max-width: 575.98px) { .pg-edtech__grid { grid-template-columns: 1fr; } }

.pg-edtech__mono img { max-width: 80%; max-height: 80%; object-fit: contain; }

.pg-edtech__ev .edu-flag { width: 14px; margin-right: .3em; vertical-align: -1px; }

/* Cabecera de la tarjeta: logo cuadrado grande (la API entrega logos cuadrados) y el nombre a su lado */
.pg-edtech__head { display: flex; align-items: center; gap: 14px; }
.pg-edtech__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--edu-green-line); }
.pg-edtech__logo img { width: 100%; height: 100%; object-fit: contain; }
.pg-edtech__logo b { font-weight: 900; font-size: 1.75rem; color: var(--edu-green-dark); }
.pg-edtech__head .pg-edtech__name { min-width: 0; overflow-wrap: anywhere; }