:root {
  --color-fondo: #f7f3ec;
  --color-papel: #ffffff;
  --color-texto: #2b241c;
  --color-texto-suave: #5c5346;
  --color-primario: #7a2e2e;
  --color-primario-oscuro: #5c2222;
  --color-acento: #b08a3e;
  --color-borde: #e1d9c9;
  --radio: 6px;
  --sombra: 0 2px 8px rgba(43, 36, 28, 0.08);
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Georgia", "Iowan Old Style", "Palatino Linotype", serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.55;
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
  color: #fff;
  padding: 1.75rem 1.25rem;
  box-shadow: var(--sombra);
}

.site-header .contenedor {
  max-width: 1100px;
  margin: 0 auto;
}

.site-header h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-header .subtitulo {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #eddfd0;
  font-family: Arial, Helvetica, sans-serif;
}

.site-header a {
  color: #fff;
}

.modo-embed .site-header {
  display: none;
}

.modo-embed .site-footer-logo {
  display: none;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.pestanas-tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-borde);
  margin-bottom: 1.5rem;
}

.pestanas-tipo .pestana {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
  color: var(--color-texto-suave);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radio) var(--radio) 0 0;
  margin-bottom: -2px;
}

.pestanas-tipo .pestana:hover {
  background: var(--color-fondo);
  text-decoration: none;
  color: var(--color-primario);
}

.pestanas-tipo .pestana.activa {
  background: var(--color-papel);
  border-color: var(--color-borde);
  border-bottom: 2px solid var(--color-papel);
  color: var(--color-primario-oscuro);
  font-weight: 600;
}

.buscador {
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}

.buscador-fila {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.buscador-campo {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.buscador-campo > input,
.buscador-campo > select,
.buscador-campo > .multiselect {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.buscador-campo label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-suave);
}

input[type="text"], input[type="number"], select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: #fff;
  color: var(--color-texto);
}

input[type="text"]:focus, input[type="number"]:focus, select:focus {
  outline: 2px solid var(--color-acento);
  outline-offset: 1px;
}

.campo-q {
  flex: 2 1 320px;
}

/* Desplegable de casillas (usado en el filtro de Periodo de Documentos
   para permitir selección múltiple sin que el campo ocupe más alto que
   el resto de campos del buscador, como pasaría con un <select multiple>). */
.multiselect {
  position: relative;
}

.multiselect-toggle {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: #fff;
  color: var(--color-texto);
  cursor: pointer;
}

.multiselect-toggle:focus {
  outline: 2px solid var(--color-acento);
  outline-offset: 1px;
}

.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.4rem;
}

.multiselect-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  padding: 0.35rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
}

.multiselect-opcion:hover {
  background: var(--color-fondo);
}

.buscador-acciones {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

button, .boton {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-primario);
  color: #fff;
  border: none;
  padding: 0.6rem 1.3rem;
  border-radius: var(--radio);
  font-size: 0.95rem;
  cursor: pointer;
}

button:hover, .boton:hover {
  background: var(--color-primario-oscuro);
  text-decoration: none;
}

.boton-secundario {
  background: transparent;
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
}

.boton-secundario:hover {
  background: #f1e6e0;
  color: var(--color-primario-oscuro);
}

.tipos-rapidos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.chip {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  background: var(--color-papel);
  color: var(--color-texto-suave);
}

.chip.activo {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
}

.chip:hover {
  border-color: var(--color-acento);
  text-decoration: none;
}

.resumen-resultados {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-texto-suave);
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.lista-fondos {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ficha-resumen {
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--sombra);
}

.tabla-fondos-wrap {
  overflow-x: auto;
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tabla-fondos {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
}

.tabla-fondos th, .tabla-fondos td {
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: top;
  overflow-wrap: break-word;
}

/* Reparto homogéneo del ancho entre las 4 columnas (Signatura, Título,
   Autor, Fecha/Año), en vez de que el título ocupe todo el espacio
   disponible por ser el texto más largo. */
.tabla-fondos th:nth-child(1), .tabla-fondos td:nth-child(1) { width: 15%; }
.tabla-fondos th:nth-child(2), .tabla-fondos td:nth-child(2) { width: 40%; }
.tabla-fondos th:nth-child(3), .tabla-fondos td:nth-child(3) { width: 28%; }
.tabla-fondos th:nth-child(4), .tabla-fondos td:nth-child(4) { width: 17%; }

/* En "Documentos" hay una columna extra de Sección (Signatura, Sección,
   Título, Autor), así que el reparto de anchos es distinto. */
.tabla-fondos.con-seccion th:nth-child(1), .tabla-fondos.con-seccion td:nth-child(1) { width: 16%; }
.tabla-fondos.con-seccion th:nth-child(2), .tabla-fondos.con-seccion td:nth-child(2) { width: 20%; }
.tabla-fondos.con-seccion th:nth-child(3), .tabla-fondos.con-seccion td:nth-child(3) { width: 39%; }
.tabla-fondos.con-seccion th:nth-child(4), .tabla-fondos.con-seccion td:nth-child(4) { width: 25%; }

/* Documentos: Signatura, Sección, Otras secciones, Título y Autor. */
.tabla-fondos.tabla-documento th:nth-child(1), .tabla-fondos.tabla-documento td:nth-child(1) { width: 14%; }
.tabla-fondos.tabla-documento th:nth-child(2), .tabla-fondos.tabla-documento td:nth-child(2) { width: 18%; }
.tabla-fondos.tabla-documento th:nth-child(3), .tabla-fondos.tabla-documento td:nth-child(3) { width: 18%; }
.tabla-fondos.tabla-documento th:nth-child(4), .tabla-fondos.tabla-documento td:nth-child(4) { width: 32%; }
.tabla-fondos.tabla-documento th:nth-child(5), .tabla-fondos.tabla-documento td:nth-child(5) { width: 18%; }

/* Hemeroteca: Signatura, Publicación, Sección, Fecha y Número. */
.tabla-fondos.tabla-hemeroteca th:nth-child(1), .tabla-fondos.tabla-hemeroteca td:nth-child(1) { width: 16%; }
.tabla-fondos.tabla-hemeroteca th:nth-child(2), .tabla-fondos.tabla-hemeroteca td:nth-child(2) { width: 34%; }
.tabla-fondos.tabla-hemeroteca th:nth-child(3), .tabla-fondos.tabla-hemeroteca td:nth-child(3) { width: 20%; }
.tabla-fondos.tabla-hemeroteca th:nth-child(4), .tabla-fondos.tabla-hemeroteca td:nth-child(4) { width: 18%; }
.tabla-fondos.tabla-hemeroteca th:nth-child(5), .tabla-fondos.tabla-hemeroteca td:nth-child(5) { width: 12%; }

/* Fotografías: Signatura, Tipo, Sección principal, Título, Autor y Fecha. */
.tabla-fondos.tabla-fotografia th:nth-child(1), .tabla-fondos.tabla-fotografia td:nth-child(1) { width: 13%; }
.tabla-fondos.tabla-fotografia th:nth-child(2), .tabla-fondos.tabla-fotografia td:nth-child(2) { width: 12%; }
.tabla-fondos.tabla-fotografia th:nth-child(3), .tabla-fondos.tabla-fotografia td:nth-child(3) { width: 17%; }
.tabla-fondos.tabla-fotografia th:nth-child(4), .tabla-fondos.tabla-fotografia td:nth-child(4) { width: 28%; }
.tabla-fondos.tabla-fotografia th:nth-child(5), .tabla-fondos.tabla-fotografia td:nth-child(5) { width: 18%; }
.tabla-fondos.tabla-fotografia th:nth-child(6), .tabla-fondos.tabla-fotografia td:nth-child(6) { width: 12%; }

.tabla-fondos th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-suave);
  background: var(--color-fondo);
  white-space: nowrap;
}

.tabla-fondos tbody tr:hover {
  background: var(--color-fondo);
}

.icono-ficha {
  display: inline-block;
  font-size: 0.75rem;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 50%;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  vertical-align: middle;
}

.icono-ficha:hover {
  background: var(--color-acento);
  color: #fff;
  border-color: var(--color-acento);
  text-decoration: none;
}

.tabla-fondos td.signatura {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: #a08a5f;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .tabla-fondos th, .tabla-fondos td {
    padding: 0.5rem 0.6rem;
  }
  /* En pantallas pequeñas el reparto fijo por porcentaje deja columnas
     demasiado estrechas; se vuelve al ajuste automático y se mantiene el
     scroll horizontal ya existente en .tabla-fondos-wrap. */
  .tabla-fondos {
    table-layout: auto;
  }
}

.ficha-resumen .etiqueta-tipo, .etiqueta-tipo {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f1e6d8;
  color: var(--color-primario-oscuro);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.ficha-resumen h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.ficha-resumen .meta {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.ficha-resumen .signatura {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: #a08a5f;
}

.paginacion {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.paginacion a, .paginacion span {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  color: var(--color-texto);
  font-size: 0.9rem;
}

.paginacion .actual {
  background: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}

.sin-resultados {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-texto-suave);
}

.ficha-detalle {
  background: var(--color-papel);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 2rem;
}

.ficha-detalle dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0.6rem 1rem;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 1.5rem;
}

.ficha-detalle dt {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ficha-detalle dd {
  margin: 0;
}

.volver {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
}

.site-footer {
  text-align: center;
  padding: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  color: var(--color-texto-suave);
  border-top: 1px solid var(--color-borde);
}

.site-footer-logo {
  display: block;
  width: min(180px, 50vw);
  height: auto;
  margin: 0 auto 0.75rem;
}

@media (max-width: 640px) {
  .ficha-detalle dl {
    grid-template-columns: 1fr;
  }
  .site-header h1 { font-size: 1.3rem; }
}