/* ==========================================================================
   Informe de la propuesta — hoja de estilos propia
   ==========================================================================

   Va aparte de la hoja del sitio, y a propósito.

   El informe usa unas treinta clases propias —cifras, tabla de comparación,
   hallazgos, leyenda— que NO tienen nada que ver con el diseño del sitio. Hasta
   ahora cada dirección de diseño tenía que volver a escribirlas, y la de «Estudio»
   no lo hizo: el informe de A24 salió sin maquetar y en el móvil se veía como una
   lista de texto suelta.

   Poniéndolas aquí, junto a la plantilla que las usa, el informe se ve bien con
   cualquier dirección de diseño y no puede volver a olvidarse.

   Usa las variables del sitio cuando existen, y si no, las suyas.
   ========================================================================== */

.informe {
  --inf-acento: var(--acento, var(--ambar, #a35a3a));
  --inf-tinta: var(--tinta, #14161a);
  --inf-suave: var(--tinta-suave, #3d4a57);
  --inf-gris: var(--piedra, var(--gris, #6b6f76));
  --inf-linea: var(--linea, #e3e0d9);
  --inf-superficie: var(--papel-2, var(--superficie, #f3f1ec));
  --inf-papel: var(--papel, #faf9f6);
  --inf-display: var(--display, ui-sans-serif, system-ui, sans-serif);
  --inf-serif: var(--texto, Georgia, serif);
  --inf-mono: var(--mono, ui-monospace, Menlo, monospace);
  --inf-rojo: #b4453a;

  padding: clamp(1.6rem, 1rem + 3vw, 3.5rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
  font-family: var(--inf-serif);
  color: var(--inf-tinta);
}

.informe__cuerpo { max-width: 60rem; }

.informe h1 {
  font-family: var(--inf-display);
  font-size: clamp(1.7rem, 1.2rem + 3vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.7em;
  text-wrap: balance;
}

.informe h2 {
  font-family: var(--inf-display);
  font-size: clamp(1.3rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: clamp(2rem, 1.5rem + 2vw, 3.2rem) 0 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--inf-linea);
}

.informe p { margin: 0 0 1em; }

.seccion__etiqueta,
.etiqueta {
  display: block;
  font-family: var(--inf-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inf-acento);
  margin-bottom: 0.9rem;
}

.seccion__entradilla {
  font-size: 1.05rem;
  color: var(--inf-suave);
  max-width: 44rem;
}

/* --- La nota de presentación --------------------------------------------- */

.informe__nota {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--inf-suave);
  max-width: 44rem;
  margin: 0 0 1.1em;
  padding-left: 1.1rem;
  border-left: 3px solid var(--inf-acento);
}

/* --- Las cifras destacadas ------------------------------------------------ */

/* En móvil, dos columnas. En pantalla ancha, todas en fila. */
.informe__cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--inf-linea);
  border: 1px solid var(--inf-linea);
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
}

@media (min-width: 720px) {
  .informe__cifras { grid-template-columns: repeat(4, 1fr); }
}

.informe__cifra {
  background: var(--inf-papel);
  padding: 1.1rem 1rem 1.2rem;
  min-width: 0;              /* deja que el texto largo encoja en vez de desbordar */
}

.informe__cifra strong {
  display: block;
  font-family: var(--inf-display);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem);
  font-weight: 600;
  color: var(--inf-acento);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.informe__cifra span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--inf-display);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inf-gris);
}

.informe__cifra em {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--inf-display);
  font-size: 0.8rem;
  font-style: normal;
  color: var(--inf-suave);
}

/* --- La tabla de comparación --------------------------------------------- */

/* En el móvil no cabe: se deja desplazar en horizontal, con el borde marcando
   que hay más. Aplastarla era lo que la hacía ilegible. */
.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0;
  border: 1px solid var(--inf-linea);
  background: var(--inf-papel);
}

.tabla-envoltorio::-webkit-scrollbar { height: 6px; }
.tabla-envoltorio::-webkit-scrollbar-thumb { background: var(--inf-linea); }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--inf-display);
  font-size: 0.85rem;
  min-width: 34rem;          /* por debajo de esto no se entiende: se desplaza */
}

.tabla caption {
  text-align: left;
  padding: 0.9rem 1rem 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inf-gris);
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--inf-linea);
  white-space: nowrap;
}

.tabla thead th {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--inf-gris);
  background: var(--inf-superficie);
  font-weight: 600;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla td:first-child { color: var(--inf-gris); }
.tabla .mejora { color: var(--inf-tinta); font-weight: 600; }
.tabla .no-aplica { color: var(--inf-gris); font-style: italic; }

.tabla__grupo th {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inf-tinta);
  background: var(--inf-superficie);
  padding: 0.55rem 1rem;
}

.medicion__nota {
  font-family: var(--inf-display);
  font-size: 0.8rem;
  color: var(--inf-gris);
  max-width: 44rem;
  margin: 0 0 2rem;
}

.medicion__url {
  font-family: var(--inf-mono);
  font-size: 0.74rem;
  color: var(--inf-suave);
  overflow-wrap: anywhere;
}

/* --- Los hallazgos -------------------------------------------------------- */

.hallazgos { list-style: none; margin: 1.4rem 0 0; padding: 0; }

.hallazgo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--inf-linea);
}
.hallazgo:last-child { border-bottom: 0; }

.hallazgo__marca {
  width: 9px; height: 9px; margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--inf-gris);
}
.hallazgo--alta .hallazgo__marca { background: var(--inf-rojo); }
.hallazgo--media .hallazgo__marca { background: var(--inf-acento); }

.hallazgo__titulo {
  font-family: var(--inf-display);
  font-weight: 600;
  color: var(--inf-tinta);
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.hallazgo__detalle {
  margin: 0;
  font-size: 0.92rem;
  color: var(--inf-suave);
}
.hallazgo__detalle code { font-family: var(--inf-mono); font-size: 0.8rem; overflow-wrap: anywhere; }

.leyenda {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--inf-display); font-size: 0.76rem; color: var(--inf-gris);
  margin-top: 1.2rem;
}
.leyenda span { display: flex; align-items: center; gap: 0.45rem; }
.leyenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.leyenda .alta { background: var(--inf-rojo); }
.leyenda .media { background: var(--inf-acento); }
.leyenda .baja { background: var(--inf-gris); }

.legal__aviso {
  background: var(--inf-superficie);
  border-left: 3px solid var(--inf-acento);
  padding: 1rem 1.2rem;
  font-family: var(--inf-display);
  font-size: 0.85rem;
  color: var(--inf-suave);
}

/* --- Cabecera y pie del informe ------------------------------------------ */

.cabecera__acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.pie__propuesta {
  border-top: 1px solid var(--inf-linea);
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  font-size: 0.78rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
}

@media (max-width: 520px) {
  .informe__cifras { grid-template-columns: 1fr; }
  .tabla { font-size: 0.8rem; }
}

/* --- La tabla, convertida en fichas cuando no cabe ----------------------- */

/* En un móvil no caben tres columnas. Antes se dejaba desplazar en horizontal,
   pero eso obliga a arrastrar para comparar, que es justo lo que se viene a ver.
   Por debajo de este ancho, cada parámetro pasa a ser una ficha con su nombre y
   sus dos valores rotulados. */
@media (max-width: 640px) {
  .tabla-envoltorio { overflow-x: visible; border: 0; background: transparent; }
  .tabla { min-width: 0; display: block; }
  /* El pie de la tabla deja de ser un `caption` y pasa a ser un párrafo: dentro
     de una tabla convertida en bloques se parte palabra por palabra. */
  .tabla caption {
    display: block;
    padding: 0 0 1rem;
    white-space: normal;
    line-height: 1.5;
    max-width: none;
  }
  .tabla thead { display: none; }
  .tabla tbody { display: block; }

  .tabla tr {
    display: block;
    border: 1px solid var(--inf-linea);
    border-bottom: 0;
    background: var(--inf-papel);
    padding: 0.9rem 1rem;
  }
  .tabla tbody tr:last-child { border-bottom: 1px solid var(--inf-linea); }

  .tabla td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.22rem 0;
    white-space: normal;
    text-align: right;
  }
  .tabla td::before {
    content: attr(data-rotulo);
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--inf-gris);
    text-align: left;
    flex-shrink: 0;
  }
  /* El nombre del parámetro es el titular de la ficha. */
  .tabla td[data-rotulo='Apartado'] {
    display: block;
    text-align: left;
    font-weight: 600;
    color: var(--inf-tinta);
    padding-bottom: 0.5rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--inf-linea);
  }
  .tabla td[data-rotulo='Apartado']::before { content: none; }

  .tabla tr.tabla__grupo {
    border: 0;
    background: transparent;
    padding: 1.4rem 0 0.4rem;
  }
  .tabla tr.tabla__grupo th {
    display: block;
    background: transparent;
    padding: 0;
    border-bottom: 1px solid var(--inf-linea);
  }
}