/* ═══════════════════════════════════════════════════════════
   El Carmen de Salteras — Repertorio (fase F)
   ───────────────────────────────────────────────────────────
   El listado con búsqueda y filtros, y la ficha de obra. Lo común está
   en rediseno.css. Medidas: ~/Diseños/ElCarmen/rediseno/reglas.md.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   LISTADO · barra de búsqueda
   ═══════════════════════════════════════════════════════════ */

.rd-rep .rd-bus {
  display: grid;
  grid-template-columns: 1fr 320px 200px;
  gap: 16px;
}

.rd-rep .rd-cmp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--rd-linea-oro);
  border-radius: 4px;
  background: var(--rd-pergamino);
  font: 400 16px/1.2 var(--rd-sans);
  color: var(--rd-tinta-500);
}
.rd-rep .rd-cmp .rd-ic { color: var(--rd-oro-700); }
.rd-rep .rd-cmp:focus-within { outline: 2px solid var(--rd-oro-600); outline-offset: 2px; }

.rd-rep .rd-cmp--q { cursor: text; }
.rd-rep .rd-bus .rd-cmp.rd-cmp--q input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  font: 400 16px/1.2 var(--rd-sans);
  color: var(--rd-pardo-900);
  appearance: none;
}
.rd-rep .rd-cmp--q input::placeholder { color: var(--rd-tinta-500); opacity: 1; }
.rd-rep .rd-cmp--q input::-webkit-search-cancel-button { display: none; }

.rd-rep .rd-cmp--sel { justify-content: space-between; cursor: pointer; }
.rd-rep .rd-cmp-v { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.rd-rep .rd-cmp-v small {
  font: 700 11px/1.15 var(--rd-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rd-oro-texto);
}
.rd-rep .rd-cmp-v b {
  overflow: hidden;
  font: 600 15px/1.15 var(--rd-sans);
  color: var(--rd-pardo-900);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El desplegable de verdad cubre la caja entera, invisible: se pulsa
   la caja y se abre el del sistema. */
.rd-rep .rd-cmp--sel select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font: 400 16px/1.2 var(--rd-sans);
}

/* Con filtro puesto: borde oro-600 más 1 px interior, y el aspa en lugar
   de la flecha. */
.rd-rep .rd-cmp.rd-act { border-color: var(--rd-oro-600); box-shadow: inset 0 0 0 1px var(--rd-oro-600); }
.rd-rep .rd-cmp-x {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  color: var(--rd-oro-700);
}


/* ═══════════════════════════════════════════════════════════
   LISTADO · recuento y filas
   ═══════════════════════════════════════════════════════════ */

.rd-rep .rd-res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rd-linea-oro);
}
.rd-rep .rd-res p { font: 400 16px/21px var(--rd-sans); color: var(--rd-tinta-700); }
.rd-rep .rd-res p b { font-weight: 700; color: var(--rd-pardo-900); }
.rd-rep .rd-res a {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 15px/20px var(--rd-sans);
  color: var(--rd-oro-texto);
  white-space: nowrap;
}

.rd-rep .rd-ls-h,
.rd-rep .rd-ob {
  display: grid;
  grid-template-columns: 1fr 480px 96px 24px;
  align-items: center;
  gap: 32px;
}

.rd-rep .rd-ls-h {
  padding: 20px 0 12px;
  font: 700 12px/16px var(--rd-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rd-oro-texto);
}
.rd-rep .rd-ls-h span:nth-child(3) { text-align: right; }

.rd-rep .rd-ob {
  height: 72px;
  border-top: 1px solid var(--rd-linea-oro-suave);
}
.rd-rep .rd-obras li:last-child .rd-ob { border-bottom: 1px solid var(--rd-linea-oro-suave); }

/* En 1440 título y autores son celdas de la rejilla; en el móvil, un
   bloque. */
.rd-rep .rd-ob-c { display: contents; }

.rd-rep .rd-ob-t {
  font: 600 22px/1.15 var(--rd-serif);
  color: var(--rd-pardo-900);
}
.rd-rep .rd-ob-a { font: 400 16px/1.3 var(--rd-sans); color: var(--rd-tinta-700); }
.rd-rep .rd-ob-y {
  text-align: right;
  font: 600 16px/1.3 var(--rd-sans);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--rd-pardo-700);
}
.rd-rep .rd-ob-y--no { font-weight: 500; color: var(--rd-tinta-500); }
.rd-rep .rd-ob-f { color: var(--rd-oro-600); }

.rd-rep .rd-vacio { padding: 48px 0 0; font: 400 19px/1.55 var(--rd-sans); color: var(--rd-cuerpo); }


/* ═══════════════════════════════════════════════════════════
   FICHA
   ═══════════════════════════════════════════════════════════ */

.rd-rep .rd-fo-h { padding-top: 56px; }
.rd-rep .rd-fo-h .rd-h1 { font-size: 88px; }
.rd-rep .rd-fo-h .rd-fil { margin-bottom: 0; }

/* La fila de datos: k celdas iguales a lo ancho de la página. */
.rd-rep .rd-strip {
  display: grid;
  grid-template-columns: repeat(var(--k), minmax(0, 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--rd-linea-oro);
  border-bottom: 1px solid var(--rd-linea-oro-suave);
}
.rd-rep .rd-strip > div { min-width: 0; padding: 28px 32px 28px 0; }
.rd-rep .rd-strip > div + div { padding-left: 32px; border-left: 1px solid var(--rd-linea-oro-suave); }

.rd-rep .rd-dt-k {
  font: 700 12px/16px var(--rd-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rd-oro-texto);
}
.rd-rep .rd-dt-v {
  margin-top: 10px;
  font: 600 22px/1.25 var(--rd-serif);
  color: var(--rd-pardo-900);
}
.rd-rep .rd-dt-v small {
  display: block;
  margin-top: 4px;
  font: 500 15px/1.25 var(--rd-sans);
  color: var(--rd-tinta-700);
}

/* El texto libre de la obra, debajo de la fila de datos. */
.rd-rep .rd-obra-texto { margin-top: 56px; }

/* Escuchar */
.rd-rep .rd-escu { padding-top: 96px; }
.rd-rep .rd-bl-h { padding-bottom: 20px; border-bottom: 1px solid var(--rd-linea-oro); }

.rd-rep .rd-es {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  height: 88px;
  border-bottom: 1px solid var(--rd-linea-oro-suave);
}
.rd-rep .rd-es-d { font: 600 22px/1.2 var(--rd-serif); color: var(--rd-pardo-900); }
.rd-rep .rd-es-d small {
  display: block;
  margin-top: 4px;
  font: 600 14px/1.2 var(--rd-sans);
  color: var(--rd-tinta-500);
}
.rd-rep .rd-es .rd-chs { gap: 8px; }
.rd-rep .rd-es .rd-ch { height: 36px; padding: 0 14px; font-size: 13px; }

/* Dónde suena */
.rd-rep .rd-suena { padding-top: 96px; }


/* ═══════════════════════════════════════════════════════════
   MENOS DE 1024 · las filas del listado, como a 390
   ───────────────────────────────────────────────────────────
   Las columnas de 1440 (título, 480 de autores, 96 de año) no caben por
   debajo de 1024: la fila pasa a título con autores debajo y el año a la
   derecha, sin flecha y sin cabecera de columnas.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {
  .rd-rep .rd-bus { grid-template-columns: 1fr 200px; }
  .rd-rep .rd-bus .rd-cmp--q { grid-column: 1 / 3; }

  .rd-rep .rd-ls-h { display: none; }

  .rd-rep .rd-ob {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 16px;
    height: auto;
    padding: 16px 0;
  }
  .rd-rep .rd-ob-c { display: block; min-width: 0; }
  .rd-rep .rd-ob-t { display: block; font-size: 19px; }
  .rd-rep .rd-ob-a { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; }
  .rd-rep .rd-ob-y { padding-top: 4px; font-size: 15px; }
  .rd-rep .rd-sin, .rd-rep .rd-ob-f { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   MENOS DE 768 · las medidas de 390
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  .rd-rep .rd-bus { grid-template-columns: 1fr 104px; gap: 12px; }
  .rd-rep .rd-bus .rd-cmp--q { grid-column: 1 / 3; }
  .rd-rep .rd-cmp { height: 52px; padding: 0 16px; }
  .rd-rep .rd-cmp-v b { font-size: 14px; }

  .rd-rep .rd-res { margin-top: 24px; }
  .rd-rep .rd-res p, .rd-rep .rd-res a { font-size: 14px; line-height: 19px; }

  .rd-rep .rd-fo-h { padding-top: 32px; }
  .rd-rep .rd-fo-h .rd-h1 { font-size: 46px; }

  .rd-rep .rd-strip { display: block; margin-top: 40px; }
  .rd-rep .rd-strip > div { padding: 18px 0; }
  .rd-rep .rd-strip > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rd-linea-oro-suave); }
  .rd-rep .rd-dt-v { margin-top: 6px; font-size: 20px; }

  .rd-rep .rd-obra-texto { margin-top: 40px; }

  .rd-rep .rd-escu { padding-top: 56px; }
  .rd-rep .rd-es { grid-template-columns: 1fr; gap: 12px; height: auto; padding: 18px 0; }
  .rd-rep .rd-es-d { font-size: 20px; }

  .rd-rep .rd-suena { padding-top: 56px; }
}