/* =============================================================================
   Componentes propios del dominio ORGANISMOS
   -----------------------------------------------------------------------------
   Solo lo específico de organismos: tarjeta de organismo, tarjeta de tipo de
   organismo, navegación del directorio y acción de staff. Todo lo general
   (tokens, hojas, cabecera, marcas, panel de cifras, píldoras, chips de
   métrica, tarjeta de territorio, barra de filtros, responsive común) vive en
   public-components.css, que toda página que use esta hoja carga ANTES.

   Tipo de organismo -> icono -> tono: organismos/tipologia.py (INFO_TIPO).
   ========================================================================== */


/* ---------- Tarjeta de tipo de organismo -------------------------------- */
.mo-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-type-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 72px;
  padding: 12px 12px 12px 14px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 14px;
  box-shadow: var(--mo-card-shadow);
  color: var(--text, #0f172a);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.mo-type-card:hover {
  border-color: color-mix(in srgb, var(--tone) 30%, white);
  box-shadow: var(--mo-card-shadow-hover);
  transform: translateY(-2px);
}

.mo-type-card:focus-visible { outline: none; box-shadow: var(--mo-focus); }

/* Página actual: sin hover de desplazamiento, borde del tono. */
.mo-type-card[aria-current="page"] {
  border-color: var(--tone);
  background: color-mix(in srgb, var(--tone) 5%, white);
}

/* Nombre + recuento = un solo bloque, centrado verticalmente respecto al
   icono y al chevron (la tarjeta ya usa align-items: center). Sin altura
   reservada: un nombre de una línea no deja hueco encima. */
.mo-type-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.mo-type-card__name {
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}

.mo-type-card__count {
  color: var(--muted, #64748b);
  font-size: 12.5px;
  font-weight: 600;
  /* Sin el interlineado heredado (1.6): no deja aire vacío bajo el
     recuento que desplace el centro óptico del bloque hacia arriba. */
  line-height: 1.3;
}

.mo-type-card__arrow {
  display: grid;
  flex: none;
  place-items: center;
  color: #94a3b8;
  transition: color .15s ease, transform .15s ease;
}

.mo-type-card__arrow .mo-icon { width: 16px; height: 16px; }
.mo-type-card:hover .mo-type-card__arrow { color: var(--tone); transform: translateX(2px); }

/* ---------- Acción de staff ----------------------------------------------- */
/* Acción solo para staff (Editar): discreta, icono + nombre accesible. */
.mo-staff-action {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px dashed rgba(15, 23, 42, .2);
  border-radius: 9px;
  background: #fff;
  color: var(--muted, #64748b);
  text-decoration: none;
}

.mo-staff-action .mo-icon { width: 16px; height: 16px; }
.mo-staff-action:hover { border-style: solid; border-color: var(--mo-link); color: var(--mo-link); }
.mo-staff-action:focus-visible { outline: none; box-shadow: var(--mo-focus); }

/* ---------- Tarjeta de organismo --------------------------------------- */
.mo-org-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--mo-card-border);
  border-radius: 16px;
  box-shadow: var(--mo-card-shadow);
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Realce suave de la superficie, SIN desplazamiento ni cursor: la tarjeta
   no es un enlace; lo son el nombre, el tipo, el territorio y las métricas. */
.mo-org-card:hover,
.mo-org-card:focus-within {
  border-color: rgba(30, 99, 255, .22);
  box-shadow: var(--mo-card-shadow-hover);
}

.mo-org-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.mo-org-card__main { flex: 1 1 auto; min-width: 0; }

.mo-org-card__title {
  margin: 0;
  color: var(--text, #0f172a);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.mo-org-card__title a {
  color: inherit;
  text-decoration: none;
}

.mo-org-card__title a:hover { color: var(--mo-link); text-decoration: underline; text-underline-offset: 3px; }
.mo-org-card__title a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }

.mo-org-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 4px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.mo-org-card__meta a {
  color: var(--text-secondary, #3b4356);
  text-decoration: underline;
  text-decoration-color: rgba(59, 67, 86, .3);
  text-underline-offset: 2px;
}

.mo-org-card__meta a:hover { color: var(--mo-link); text-decoration-color: currentColor; }
.mo-org-card__meta a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--mo-focus); }
.mo-org-card__sep { color: #cbd5e1; }

.mo-org-card__badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: var(--text-secondary, #3b4356);
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 2px;
}

.mo-org-card .mo-metrics { margin-top: auto; }

.mo-org-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
}

/* ---------- Página de directorio de organismos --------------------------- */
.mo-directory-nav { margin: var(--mo-section-gap) 0; }
.mo-directory-nav .mo-type-grid + .mo-subheading { margin-top: 24px; }


/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .mo-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .mo-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Icono encima del nombre: no se parte a mitad de palabra. */
  .mo-type-card { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 14px; }
  /* Icono encima: el texto va pegado bajo el icono (arriba), no centrado en
     el espacio sobrante de la fila. */
  .mo-type-card__body { justify-content: flex-start; }
  .mo-type-card > .mo-icon-box { width: 36px; height: 36px; border-radius: 10px; }
  .mo-type-card__arrow { display: none; }
  .mo-type-card__name { font-size: 14px; }
}

@media (max-width: 640px) {
  .mo-org-card { padding: 16px; }
}

@media (max-width: 340px) {
  .mo-type-grid { grid-template-columns: 1fr; }
  .mo-type-card { flex-direction: row; align-items: center; padding: 12px; }
  .mo-type-card__body { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-type-card,
  .mo-type-card__arrow,
  .mo-org-card { transition: none; }
  .mo-type-card:hover,
  .mo-type-card:hover .mo-type-card__arrow { transform: none; }
}