/*
  Recursos: la portada (/recursos/), el Glosario y los Atajos.
  Usa los tokens de /comun/taller.css. Blanco y negro, como una ficha técnica: líneas finas,
  atajos en IBM Plex Mono. La nota verde petróleo queda en la barra (sección activa) y en un
  único detalle por página: el término enlazado que se está leyendo (Glosario) y la marca de
  las acciones que tiene el Estudio de diseño (Atajos). Los filtros activos van en tinta.
*/

/* ---------- Controles comunes: buscador y filtros ---------- */
.r-controles {
  display: grid;
  gap: 14px;
  padding-block: 20px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  margin-bottom: 8px;
}

.r-buscador { display: grid; gap: 6px; max-width: 520px; }
.r-buscador label { font: 12.5px var(--mono); color: var(--secundario); }
.r-buscador input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.3 var(--letra);
}
.r-buscador input:hover { border-color: var(--secundario); }
.r-buscador input:focus-visible { outline-offset: 0; border-color: var(--tinta); }

.r-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.r-filtros legend { float: left; margin-right: 6px; padding: 5px 0; font: 12.5px var(--mono); color: var(--secundario); }
.r-filtro {
  padding: 5px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 400 14px/1.3 var(--letra);
  cursor: pointer;
}
.r-filtro:hover { border-color: var(--tinta); }
.r-filtro[aria-pressed="true"] { background: var(--boton); border-color: var(--boton); color: var(--boton-texto); }

.r-fila-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.r-casilla { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.r-casilla input { width: 16px; height: 16px; margin: 0; accent-color: var(--tinta); }

.r-recuento { font: 12.5px var(--mono); color: var(--secundario); }
.r-vacio { padding: 32px 0; color: var(--secundario); }
.r-vacio[hidden] { display: none; }

.r-otras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 56px 0 72px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-size: 15px;
}

/* ---------- Glosario ---------- */
.g-letras { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 12px 0 0; list-style: none; font: 13px var(--mono); }
.g-letras a, .g-letras span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: var(--radio); }
.g-letras a { text-decoration: none; }
.g-letras a:hover { background: var(--superficie); }
.g-letras span { color: var(--linea); }

.g-letra { scroll-margin-top: 16px; }
.g-letra[hidden] { display: none; }
.g-letra h2 {
  padding: 36px 0 8px;
  font: 400 13px var(--mono);
  letter-spacing: 0.08em;
  color: var(--secundario);
  border-bottom: 1px solid var(--linea);
}

.g-lista { margin: 0; }
.g-termino {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 4px 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
  scroll-margin-top: 16px;
}
.g-termino[hidden] { display: none; }
.g-termino dt { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; }
.g-termino dt a { text-decoration: none; }
.g-termino dt a:hover { text-decoration: underline; }
.g-termino dd { margin: 0; display: grid; gap: 6px; max-width: 68ch; }
.g-meta { font-size: 13.5px; color: var(--secundario); }
.g-meta a { color: var(--tinta); }
.g-categoria { font: 12px var(--mono); }

/* El término al que lleva un enlace: la nota de color de la página. */
.g-termino:target { box-shadow: inset 3px 0 0 var(--acento); padding-left: 16px; }
.g-termino:target dt a { color: var(--acento); }

@media (max-width: 640px) {
  .g-termino { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Atajos ---------- */
.a-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.a-grupo { margin-top: 36px; }
.a-grupo[hidden] { display: none; }
.a-grupo h2 { font-size: 24px; font-weight: 400; margin-bottom: 8px; }

.a-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.a-tabla th, .a-tabla td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.a-tabla thead th { font: 400 12.5px var(--mono); color: var(--secundario); border-bottom-color: var(--tinta); }
.a-tabla tbody th { font-weight: 400; }
.a-tabla tr[hidden] { display: none; }
.a-tabla col.a-col-accion { width: 44%; }
.a-tabla col.a-col-teclas { width: 28%; }
.a-detalle { display: block; margin-top: 2px; font-size: 13px; color: var(--secundario); }
.a-detalle strong { font-weight: 500; color: var(--tinta); }

.a-teclas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 12.5px var(--mono); }
.a-combinacion { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.a-combinacion kbd { font-size: 12.5px; padding: 1px 6px; background: var(--fondo); }
.a-mas, .a-o { color: var(--secundario); }
.a-gesto { font-family: var(--letra); font-size: 13.5px; }
.a-sin { color: var(--secundario); }

/* Las acciones que también tiene el Estudio de diseño llevan una marca: la nota de color. */
.a-estudio { display: inline-flex; align-items: center; gap: 6px; }
.a-estudio::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.a-leyenda { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--secundario); }
.a-leyenda::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }

/* En el móvil cada fila es una ficha: la acción arriba y las dos columnas debajo, con su nombre. */
@media (max-width: 640px) {
  .a-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .a-tabla, .a-tabla tbody, .a-tabla tr, .a-tabla th, .a-tabla td { display: block; width: 100%; }
  .a-tabla tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .a-tabla tr[hidden] { display: none; }
  .a-tabla th, .a-tabla td { border: 0; padding: 2px 0; }
  .a-tabla td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .a-tabla td::before { content: attr(data-columna); font: 12px var(--mono); color: var(--secundario); }
}

/* ---------- Chuleta impresa: una hoja A4 limpia ---------- */
.a-chuleta-cabecera { display: none; }

@media print {
  @page { size: A4 portrait; margin: 9mm 10mm; }

  .r-atajos { --fondo: #ffffff; --tinta: #000000; --secundario: #555555; --linea: #cfcfcf; --acento: #1f6f66; }
  .r-atajos, .r-atajos body { background: #ffffff; color: #000000; }
  .r-atajos .barra, .r-atajos .saltar, .r-atajos .pie, .r-atajos .r-controles,
  .r-atajos .cabecera, .r-atajos .r-otras, .r-atajos .r-vacio { display: none !important; }
  .r-atajos .contenedor { max-width: none; padding: 0; }

  .a-chuleta-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1.2pt solid #000000;
    font: 8pt var(--letra);
  }
  .a-chuleta-cabecera strong { font-size: 11pt; font-weight: 500; }

  .a-grupos { column-count: 2; column-gap: 6mm; }
  .a-grupo { margin: 0 0 2.2mm; break-inside: auto; }
  .a-grupo h2 { font-size: 7.5pt; font-weight: 500; margin: 0 0 0.6mm; break-after: avoid; text-transform: uppercase; letter-spacing: 0.06em; }
  .a-tabla { font-size: 6.3pt; line-height: 1.15; table-layout: fixed; }
  .a-tabla thead { display: none; }
  .a-grupo:first-child .a-tabla thead { display: table-header-group; }
  .a-tabla thead th { font-size: 5.6pt; padding-block: 0 0.5mm; border-bottom-width: 0.6pt; }
  .a-tabla th, .a-tabla td { padding: 0.35mm 1mm 0.35mm 0; border-bottom-width: 0.3pt; vertical-align: baseline; }
  .a-tabla tr { break-inside: avoid; }
  .a-tabla col.a-col-accion { width: 39%; }
  .a-combinacion { flex-wrap: wrap; white-space: normal; }
  .a-detalle { font-size: 5.3pt; margin-top: 0; line-height: 1.1; }
  .a-detalle.a-nota, .a-detalle.a-cuando { display: none; }
  .a-teclas { flex-wrap: wrap; gap: 0.5px 2px; }
  .a-teclas, .a-combinacion kbd, .a-gesto { font-size: 5.9pt; }
  .a-combinacion kbd { padding: 0 1.5px; border-width: 0.5pt; border-bottom-width: 0.8pt; }
  .a-estudio::before { display: none; }
}