/* ==========================================================================
   BioWay - Directorio de empresas (directorio.php)

   Las clases .company-* las genera directory-script.js desde Firestore.
   Estan aqui porque el script solo escribe markup, no estilos. Renombrar
   cualquiera de ellas deja las tarjetas sin formato.
   ========================================================================== */

/* ── Cabecera de pagina: version reducida del hero, para paginas interiores ── */
.cabecera-pagina{position:relative;overflow:hidden;background:var(--papel);
  padding:150px 5vw 0}
.cabecera-pagina .contenedor{position:relative;z-index:1;max-width:1200px;margin:0 auto;
  padding-bottom:56px}
.cabecera-pagina h1{margin:18px 0 16px}
.cabecera-pagina .lede{max-width:620px}
.cabecera-pagina .onda-suave{position:relative;z-index:1}

/* ── Filtros ── */
.directorio{padding:0 5vw 84px}
.directorio .contenedor{max-width:1200px;margin:0 auto}
.filtros{margin-top:-18px;position:relative;z-index:2;background:#fff;
  border:1px solid #E4F1E7;border-radius:22px;padding:22px;
  box-shadow:0 14px 34px rgba(13,69,44,.08)}
.caja-busqueda{position:relative;display:flex;align-items:center}
.caja-busqueda i{position:absolute;left:18px;color:var(--medio);font-size:15px}
.campo-busqueda{width:100%;padding:15px 18px 15px 46px;border:1px solid #DDF0E2;
  border-radius:100px;font:400 15px var(--cuerpo);color:var(--tinta);background:var(--papel-2);
  transition:border-color .2s,box-shadow .2s}
.campo-busqueda:focus{outline:none;border-color:var(--medio);
  box-shadow:0 0 0 4px rgba(45,130,89,.12);background:#fff}
.campo-busqueda::placeholder{color:#9DB5A6}

.rejilla-filtros{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
/* `min-width:0` y `max-width:100%`: un <select> toma como ancho mínimo el de
   su opción más larga, y las de ODS son frases enteras. Sin esto, a 768px
   —donde la rejilla todavía es de tres columnas— el select de ODS se salía
   149px de la pantalla y arrastraba toda la página en horizontal.
   Medido con la auditoría por DevTools del 19-ago-2026. */
.filtro{min-width:0;max-width:100%;text-overflow:ellipsis;
  padding:12px 16px;border:1px solid #DDF0E2;border-radius:12px;background:#fff;
  font:500 14px var(--cuerpo);color:var(--texto);cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%232D8259' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.filtro:focus{outline:none;border-color:var(--medio);box-shadow:0 0 0 4px rgba(45,130,89,.12)}

/* ── Rejilla de empresas ── */
.companies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;margin-top:34px}

/* Tarjeta: la escribe directory-script.js */
.companies-grid > *{background:#fff;border:1px solid #E8F2EA;border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.companies-grid > *:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(13,69,44,.12)}

.company-logo-wrapper{height:130px;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--menta-suave),#fff 70%);border-bottom:1px solid #EDF5EF}
.company-logo-wrapper img{max-height:74px;max-width:80%;width:auto;object-fit:contain}
.company-info{padding:20px;flex:1;display:flex;flex-direction:column}
.company-title{font:800 18px var(--display);color:var(--tinta);margin-bottom:8px}
.company-location{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--medio);
  margin-bottom:12px}
.company-description{font-size:14px;color:var(--texto);line-height:1.55;flex:1}

.company-categories,.company-ods{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.category-tag{font:600 11.5px var(--cuerpo);color:var(--primary);background:var(--menta-suave);
  border:1px solid #D9F2E3;border-radius:100px;padding:5px 11px}
.company-ods .category-tag{background:#FFF8E7;border-color:#F5E2B0;color:#8A6512}

.company-footer{padding:16px 20px;border-top:1px solid #EDF5EF;background:var(--papel-2)}
.company-action{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--cuerpo);
  color:var(--primary);text-decoration:none}
.company-action:hover{gap:11px;color:var(--primary-2)}
.company-action i{transition:transform .2s}
.company-action:hover i{transform:translateX(2px)}

/* ── Carga y error ── */
/* Oculto por defecto: el spinner de directorio.php vive fuera de #companiesGrid
   (a diferencia de app.php, donde queda dentro del contenedor que JS reemplaza),
   asi que sin esta regla directory-script.js le alterna la clase `active` sin
   ningun efecto visual y el spinner se queda pegado en pantalla para siempre. */
.loading-spinner{display:none;flex-direction:column;align-items:center;gap:14px;
  padding:56px 0;color:var(--texto);font-size:14px}
.loading-spinner.active{display:flex}
.spinner{width:34px;height:34px;border:3px solid rgba(45,130,89,.2);
  border-top-color:var(--medio);border-radius:50%;animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.error-message{grid-column:1/-1;padding:34px;text-align:center;color:var(--texto);
  background:#fff;border:1px solid #E4F1E7;border-radius:18px}

/* ── Responsive ── */
@media (max-width:1040px){
  .cabecera-pagina{padding-top:130px}
  /* El `minmax(300px,1fr)` de la rejilla sí baja a una columna en 720px,
     pero entre 720 y 1040 seguía pidiendo 300px por columna: con el
     `padding:5vw` de cada lado, a 760px de ancho quedan ~684 útiles y dos
     columnas de 300 más el hueco no caben por poco. */
  .companies-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}
@media (max-width:720px){
  .cabecera-pagina{padding:110px 5vw 0}
  .cabecera-pagina .contenedor{padding-bottom:40px}
  .rejilla-filtros{grid-template-columns:1fr}
  .companies-grid{grid-template-columns:1fr;gap:18px}
  .directorio{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ══════════════════════════════════════════════════════════════════════
   EL DIRECTORIO EN TELÉFONO: UNA LISTA, NO TARJETAS APILADAS (19-ago-2026)

   Medido antes: **493px por empresa** —más de media pantalla cada una— y
   **366px de cabecera** antes de la primera. En una lista de decenas de
   empresas eso significa que buscar es imposible: se ve empresa y media por
   pantallazo y no hay forma de comparar.

   El propósito de esta página es *encontrar* una empresa, no contemplarla.
   Así que en teléfono la tarjeta se vuelve ficha horizontal: el logotipo a
   la izquierda en un recuadro con el radio de marca, el nombre y su ODS a
   la derecha. La descripción y las categorías se retiran —están completas a
   un toque, en `company-detail.php`— y la ubicación pasa al mismo renglón
   del nombre. La identidad se mantiene: mismos colores, mismo radio, misma
   sombra al tocar.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* la cabecera deja de ser un hero: el buscador es lo que se viene a usar */
  .cabecera-pagina{padding:96px 5vw 0}
  .cabecera-pagina .contenedor{padding-bottom:22px}
  .cabecera-pagina h1{margin:10px 0 8px;font-size:clamp(26px,7vw,32px)}
  .cabecera-pagina .lede{display:none}
  .filtros{margin-top:-10px;padding:14px;border-radius:18px}
  .campo-busqueda{padding:13px 16px 13px 42px;font-size:16px}  /* 16px: sin zoom en iOS */

  /* la ficha: fila, no tarjeta */
  .companies-grid{gap:10px}
  .companies-grid > *{
    display:grid;grid-template-columns:64px 1fr;align-items:center;
    gap:14px;padding:12px 14px;border-radius:16px;
  }
  .companies-grid > *:hover{transform:none}
  .companies-grid > *:active{background:var(--menta-suave)}
  .company-logo-wrapper{height:64px;width:64px;padding:8px;border-radius:12px;
    background:var(--papel-2);border:1px solid #EDF5EF}
  .company-logo-wrapper img{max-height:100%;max-width:100%}
  .company-info{padding:0;gap:2px}
  .company-title{font-size:15.5px;margin-bottom:2px;line-height:1.25}
  /* lo que no ayuda a elegir se retira: el detalle está a un toque */
  .company-description,.company-categories{display:none}
  .company-ods{margin-top:2px;gap:5px}
  .company-ods .category-tag{font-size:10.5px;padding:1px 8px}
  /* el pie se funde con la ficha: la ciudad va bajo el nombre */
  .company-footer{grid-column:2;padding:2px 0 0;background:none;border-top:none}
  .company-location{font-size:12px;margin:0}
}