/* Estilos propios del directorio, añadidos al diseño entregado.
 *
 * Van en un fichero aparte a propósito: `styles.css` es la hoja que entregó
 * templatesweb y se copia byte a byte (lo comprueba el control S5). Lo que
 * añadimos nosotros vive aquí, para que el diseño original siga intacto y se
 * pueda actualizar sin mezclarse con esto.
 *
 * Todo usa las variables de color del tema, así que funciona igual en los dos
 * directorios.
 */

/* --- Mapa ------------------------------------------------------------- */

.mapa {
  margin: 2rem 0 0;
  border-top: 1px solid var(--linea, #d8d4cc);
  padding-top: 1.25rem;
}

.mapa iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  filter: grayscale(0.15);
}

.mapa .rotulo {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}

/* --- Valoraciones ----------------------------------------------------- */

.resenas {
  margin: 2rem 0 0;
  border-top: 1px solid var(--linea, #d8d4cc);
  padding-top: 1.25rem;
}

.resenas__nota {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
}

.resenas__nota strong {
  font-size: 1.5rem;
  margin-right: 0.25rem;
}

.resenas__dist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 26rem;
}

.resenas__dist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
}

.resenas__n {
  flex: 0 0 2.2rem;
  color: var(--apagado, #6b6559);
}

.resenas__barra {
  flex: 1 1 auto;
  height: 0.5rem;
  background: var(--linea, #e4e0d8);
  border-radius: 2px;
  overflow: hidden;
}

.resenas__barra span {
  display: block;
  height: 100%;
  background: var(--tinta, #2b2b28);
  border-radius: 2px;
}

.resenas__c {
  flex: 0 0 2.5rem;
  text-align: right;
  color: var(--apagado, #6b6559);
  font-variant-numeric: tabular-nums;
}

/* --- Otros centros cerca ---------------------------------------------- */

.cerca {
  margin: 2rem 0 0;
  border-top: 1px solid var(--linea, #d8d4cc);
  padding-top: 1.25rem;
}

.cerca h2 {
  font-size: 1.0625rem;
  margin: 0 0 0.75rem;
}

.cerca ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cerca li {
  margin: 0 0 0.4rem;
}

.cerca li a {
  text-decoration: underline;
}

/* --- Tabla de motivos, en la metodología ------------------------------ */

.tabla-limites {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.9375rem;
}

.tabla-limites th,
.tabla-limites td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--linea, #e4e0d8);
  vertical-align: top;
}

.tabla-limites th {
  font-weight: 600;
}

.tabla-limites td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Nota del corte, en la metodología -------------------------------- */

.nota-corte {
  font-size: 0.9375rem;
  color: var(--apagado, #4a463e);
  border-left: 3px solid var(--tinta, #2b2b28);
  padding-left: 0.85rem;
}

.nota-corte code {
  font-size: 0.875rem;
}

/* --- Aviso, en las páginas del trámite -------------------------------- */

.aviso {
  background: var(--suave, #f3efe6);
  border-left: 3px solid var(--tinta, #2b2b28);
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}