/* Anuarios comerciales de Montejo (1881-1955): páginas "Oficios de Montejo"
   y "Familias y relaciones". Reutiliza los tokens y componentes de
   catalogo.css (--cat-*, .cat-hero, .cat-kpis, .cat-accordion, .cat-eyebrow,
   .cat-text-link) y solo añade lo que no existía: el mapa de presencias, su
   vista móvil sin scroll lateral, las fichas de oficio en rejilla y las
   tarjetas de cruces/hallazgos. Contrastes calculados sobre estas mismas
   variables (ver docs/arca-2.1/ para la auditoría). */

.cat-anuario-notice {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fbf3e2;
  border: 1px solid #e3c78a;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  font-size: .92rem;
  color: #5a4419;
}
.cat-anuario-notice svg { flex: none; width: 22px; height: 22px; margin-top: .15rem; }
.cat-anuario-notice strong { display: block; margin-bottom: .2rem; color: #4a3712; }

/* Mapa de presencias — vista de escritorio: tabla con columna de oficio fija */
.cat-anuario-legend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--cat-ink-soft);
  margin: 0 0 1.1rem;
}
.cat-anuario-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cat-anuario-legend i { width: 14px; height: 14px; border-radius: 3px; display: block; }

.cat-anuario-mapa-outer { position: relative; }
.cat-anuario-mapa-wrap {
  overflow: auto;
  border: 1px solid var(--cat-line);
  border-radius: 10px;
  background: var(--cat-surface);
  padding: 1rem;
  max-height: 70vh;
}
.cat-anuario-mapa {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  font-family: var(--cat-sans);
}
.cat-anuario-mapa th {
  font-size: .92rem;
  font-weight: 700;
  color: var(--cat-blue-deep);
  text-align: center;
  padding: .5rem .35rem;
  border-bottom: 2px solid var(--cat-line);
  white-space: nowrap;
  position: sticky;
  top: -1rem;
  background: var(--cat-surface);
  z-index: 3;
}
.cat-anuario-mapa thead th.rowh { text-align: left; min-width: 210px; font-size: .85rem; color: var(--cat-ink-soft); left: -1rem; z-index: 4; }
.cat-anuario-mapa td { padding: 2px; text-align: center; }
.cat-anuario-mapa tbody th.rowh {
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  padding: .35rem .6rem .35rem 0;
  color: var(--cat-ink);
  white-space: nowrap;
  font-family: var(--cat-serif);
  position: sticky;
  top: auto;
  left: -1rem;
  background: var(--cat-surface);
  z-index: 2;
  border-bottom: none;
  box-shadow: 2px 0 4px rgb(21 37 46 / 6%);
}
.cat-anuario-mapa .cell {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--cat-paper-deep);
  display: block;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  padding: 0;
}
.cat-anuario-mapa .cell.is-presente { background: var(--cat-blue); }
.cat-anuario-mapa .cell:hover, .cat-anuario-mapa .cell:focus-visible { outline: 3px solid var(--cat-blue-deep); }

.cat-anuario-popup {
  position: absolute;
  z-index: 30;
  background: var(--cat-blue-deep);
  color: #eaf1f5;
  border-radius: 10px;
  padding: .7rem .9rem;
  font-family: var(--cat-sans);
  font-size: .85rem;
  max-width: 280px;
  box-shadow: var(--cat-shadow);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.cat-anuario-popup.is-open { opacity: 1; transform: none; pointer-events: auto; }
.cat-anuario-popup .mp-title { font-family: var(--cat-serif); font-weight: 700; color: #fff; display: block; margin-bottom: .25rem; }

/* Mapa de presencias — vista móvil: selector + lista vertical, sin scroll lateral */
.cat-anuario-mapa-movil { display: none; }
.cat-anuario-mm-controls { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; }
.cat-anuario-mm-modo { display: flex; gap: .4rem; }
.cat-anuario-mm-tab {
  flex: 1;
  font-family: var(--cat-sans);
  font-size: .82rem;
  font-weight: 700;
  padding: .6rem;
  border-radius: 8px;
  border: 1px solid var(--cat-line);
  background: var(--cat-surface);
  color: var(--cat-ink-soft);
}
.cat-anuario-mm-tab.is-active { background: var(--cat-blue); border-color: var(--cat-blue); color: #fff; }
.cat-anuario-mm-controls select,
.cat-anuario-mm-controls input[type=search] { width: 100%; }
/* Antes: select nativo sin estilo propio (borde de 1px casi invisible,
   flecha diminuta del sistema). Se agranda, se le da el azul corporativo
   y una flecha propia dibujada por CSS -- sin sustituir el <select> nativo
   por un componente a medida, para no perder su comportamiento accesible
   (teclado, lector de pantalla) de fabrica. */
.cat-anuario-mm-controls select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 48px;
  padding: .6rem 2.6rem .6rem .9rem;
  border: 2px solid var(--cat-blue-deep);
  border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23173746' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px 15px;
  color: var(--cat-ink);
  font: 700 1rem var(--cat-sans);
}
.cat-anuario-mm-controls select:focus-visible {
  outline: 3px solid #b8863a;
  outline-offset: 1px;
}
/* La lista de opciones del propio desplegable (los <option> al abrirlo):
   el navegador limita cuanto se puede personalizar aqui, pero color, fondo
   y tipografia si los respeta la mayoria. */
.cat-anuario-mm-controls select option {
  background: #fff;
  color: var(--cat-ink);
  font: 700 .95rem var(--cat-sans);
  padding: .5rem .9rem;
}
.cat-anuario-mm-summary { font-size: .85rem; color: var(--cat-ink-soft); margin: 0 0 .7rem; font-weight: 700; }
.cat-anuario-mm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; max-height: 62vh; overflow-y: auto; }
.cat-anuario-mm-row { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .75rem; border-radius: 8px; background: var(--cat-surface); border: 1px solid var(--cat-line); }
.cat-anuario-mm-row.is-empty { opacity: .55; }
.cat-anuario-mm-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; margin-top: .2rem; background: var(--cat-paper-deep); }
.cat-anuario-mm-row.is-present .cat-anuario-mm-dot { background: var(--cat-blue); }
.cat-anuario-mm-key { font-family: var(--cat-sans); font-weight: 700; font-size: .84rem; color: var(--cat-blue-deep); min-width: 3.4em; flex: none; }
.cat-anuario-mm-key--wide { min-width: 9em; }
.cat-anuario-mm-val { font-size: .94rem; line-height: 1.4; }

@media (max-width: 760px) {
  .cat-anuario-mapa-outer { display: none; }
  .cat-anuario-mapa-movil { display: block; }
}

/* Explorar por oficio */
.cat-anuario-oficios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cat-anuario-oficios-grid > details {
  background: var(--cat-surface);
  border: 1px solid var(--cat-line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.cat-anuario-oficios-grid > details > summary {
  padding: 0;
  font: 700 1.05rem var(--cat-serif);
  color: var(--cat-blue-deep);
}
.cat-anuario-oficios-grid .cat-anuario-badge {
  display: inline-block;
  font-family: var(--cat-sans);
  font-size: .68rem;
  color: var(--cat-blue-deep);
  background: #e6f1fb;
  border-radius: 20px;
  padding: .15rem .55rem;
  margin-top: .35rem;
}
.cat-anuario-people { padding-top: .7rem; border-top: 1px solid var(--cat-line); margin-top: .9rem; max-height: 340px; overflow-y: auto; }
.cat-anuario-prow {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .3rem .3rem;
  border-radius: 6px;
}
.cat-anuario-prow:not(:last-child) { border-bottom: 1px solid #eef1ee; }
.cat-anuario-prow .yr {
  font-family: var(--cat-sans);
  font-size: .7rem;
  font-weight: 700;
  color: var(--cat-blue-deep);
  background: #e6f1fb;
  border-radius: 4px;
  padding: .15rem .4rem;
  min-width: 2.6em;
  text-align: center;
  flex: none;
  margin-top: .05rem;
}
.cat-anuario-prow .pn { font-size: .86rem; line-height: 1.45; }
/* Enlaces a la ficha real de cada persona, directo desde la cronología del
   oficio: antes eran texto plano, sin salida a ningún sitio. */
.cat-anuario-prow .pn a {
  color: var(--cat-blue-deep);
  font-weight: 600;
  text-decoration-thickness: .06em;
}
.cat-anuario-prow .pn a:hover,
.cat-anuario-prow .pn a:focus-visible {
  color: var(--cat-red-deep, #8f1f2d);
}

@media (max-width: 900px) { .cat-anuario-oficios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cat-anuario-oficios-grid { grid-template-columns: 1fr; } }

/* Índice alfabético */
.cat-anuario-azrail { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem 0; margin-bottom: 1.2rem; border-bottom: 1px solid var(--cat-line); }
.cat-anuario-azrail a {
  font-family: var(--cat-sans);
  font-size: .82rem;
  font-weight: 700;
  color: var(--cat-blue-deep);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  text-decoration: none;
}
.cat-anuario-azrail a:hover { background: #e6f1fb; }
.cat-anuario-az-group { border: 1px solid var(--cat-line); border-radius: 10px; margin-bottom: .7rem; background: var(--cat-surface); overflow: hidden; }
.cat-anuario-az-group > summary { display: flex; justify-content: space-between; align-items: baseline; padding: .85rem 1.1rem; font: normal var(--cat2-text-2) var(--cat-sans); }
.cat-anuario-az-group .al { font-family: var(--cat-serif); font-size: 1.35rem; color: var(--cat-blue-deep); }
.cat-anuario-az-group .ac { font-family: var(--cat-sans); font-size: .78rem; color: var(--cat-ink-soft); }
.cat-anuario-az-body { padding: 0 1.1rem 1rem; }

/* Fila de persona del índice alfabético. Rediseño 22/08/2026: antes el
   enlace a la ficha real solo aparecía DESPUÉS de expandir la fila (dentro
   del contenido colapsado), así que el click más natural -- tocar la fila --
   solo la expandía, y el enlace real quedaba escondido debajo de los
   oficios. Confusión real reportada: "lleva a equivocarte de persona o
   dónde hacer clic". Ahora "Ver ficha" vive siempre visible en la propia
   cabecera (nunca hay que expandir para encontrarlo), con su propio fondo
   de botón para que se note que es un destino distinto de "expandir esta
   fila"; el triángulo a la izquierda es el único elemento que insinúa
   "aquí se expande". */
.cat-anuario-persona-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--cat-line);
  padding: 0;
}
.cat-anuario-persona-row:last-child { border-bottom: none; }
/* El botón "Ver ficha" vive FUERA del <details> (como hermano, no dentro
   de <summary> ni de <details>) a propósito, en dos capas:
   1) Un <a> anidado dentro de <summary> no es fiable para lectores de
      pantalla/teclado (regla de accesibilidad "interactive element inside
      summary", detectada por Lighthouse -- ARCA-A11Y-SUMMARY-20260908).
   2) Sacarlo solo del <summary> pero dejarlo dentro del <details> NO
      basta: Chromium envuelve todo el contenido no-summary de un
      <details> cerrado en un pseudo-elemento interno (::details-content)
      con content-visibility:hidden que ningún CSS de autor puede
      deshacer (comprobado en vivo: display:inline-flex !important en el
      <a> no cambiaba su bounding box, seguía siendo 0x0 mientras el
      <details> estaba cerrado). Solo estando fuera del <details> por
      completo el enlace queda siempre visible, igual que antes. */
.cat-anuario-persona-row__details {
  flex: 1 1 auto;
  min-width: 0;
}
.cat-anuario-persona-row__details > summary {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  align-items: center;
  font: normal 1rem var(--cat-serif);
  padding: .65rem .5rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
}
.cat-anuario-persona-row__details > summary::-webkit-details-marker { display: none; }
.cat-anuario-persona-row__details > summary::marker { content: ""; }
.cat-anuario-persona-row__details > summary:hover,
.cat-anuario-persona-row__details > summary:focus-visible {
  background: #eef4fb;
}
/* .is-open la pone anuario-montejo.js al escuchar el evento "toggle" del
   <details> interior (no se puede usar el selector nativo [open] porque
   ya no es el propio .cat-anuario-persona-row el que se abre). */
.cat-anuario-persona-row.is-open {
  margin: .2rem 0;
}
.cat-anuario-persona-row.is-open .cat-anuario-persona-row__details {
  background: #f7fafd;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--cat-line);
}
.cat-anuario-persona-row__toggle {
  flex: none;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--cat-ink-soft);
  transition: transform .15s ease;
}
.cat-anuario-persona-row__details[open] .cat-anuario-persona-row__toggle {
  transform: rotate(90deg);
}
.cat-anuario-persona-row .nm { font-family: var(--cat-serif); font-size: 1.02rem; color: var(--cat-ink); }
.cat-anuario-persona-row .ct { font-family: var(--cat-sans); font-size: .72rem; color: var(--cat-ink-soft); white-space: nowrap; }
.cat-anuario-persona-row__ficha {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin: .3rem .5rem;
  padding: .3rem .7rem;
  border-radius: 20px;
  background: var(--cat-blue-deep);
  color: #fff;
  font-family: var(--cat-sans);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cat-anuario-persona-row__ficha:hover,
.cat-anuario-persona-row__ficha:focus-visible {
  background: var(--cat-red-deep, #8f1f2d);
  color: #fff;
}
.cat-anuario-cargos-list { list-style: none; margin: .1rem .5rem .65rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.cat-anuario-cargos-list li { font-size: .86rem; color: var(--cat-ink-soft); display: flex; gap: .5rem; align-items: baseline; background: #e6f1fb; border-radius: 6px; padding: .4rem .6rem; }
.cat-anuario-cargos-list .cg-oficio { font-family: var(--cat-serif); color: var(--cat-blue-deep); font-weight: 600; flex: none; }
.cat-anuario-cargos-list .cg-oficio a { color: inherit; }

/* Cruces con ARCA / hallazgos de familia: tarjeta compartida por ambas páginas */
.cat-anuario-card {
  background: var(--cat-surface);
  border: 1px solid var(--cat-line);
  border-left: 4px solid var(--cat-blue);
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
}
.cat-anuario-card h3,
.cat-anuario-card--destacado h2 { font-family: var(--cat-serif); font-size: var(--cat2-text-2); margin: 0 0 .4rem; color: var(--cat-blue-deep); }
.cat-anuario-card p { font-size: .9rem; color: var(--cat-ink-soft); margin: 0 0 .6rem; }
.cat-anuario-card .cat-anuario-tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #e6f1fb;
  color: var(--cat-blue-deep);
  border-radius: 20px;
  padding: .15rem .6rem;
  margin-bottom: .5rem;
  font-weight: 700;
}
.cat-anuario-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.cat-anuario-card ul a {
  font-size: .86rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  border-radius: 6px;
  background: #e6f1fb;
  text-decoration: none;
  color: var(--cat-blue-deep);
}
.cat-anuario-card ul a:hover { background: var(--cat-blue); color: #fff; }

/* Página de familias: rejilla de dos columnas para las tarjetas, una en móvil */
.cat-anuario-familias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .cat-anuario-familias-grid { grid-template-columns: 1fr; } }