/* =============================================================================
 *  CONVENCIONES — la ley, legible en un teléfono
 *
 *  LO QUE GOBIERNA ESTAS MEDIDAS
 *      Esto no es un panel de control: es un documento largo que se lee de
 *      corrido, muchas veces de pie y con una mano. Así que manda la lectura:
 *      renglón corto, letra que no obligue a acercar el teléfono, y nada que
 *      se salga de lado.
 * ========================================================================== */

/* ---- lo que se dice antes de nada ---------------------------------------- */

/* QUE SOLO LEE VA DESTACADO Y ARRIBA. Quien abre «Convenciones» en un panel
   espera poder corregirlas; decirlo antes vale más que dejar que lo busque. */
.cnv__solo-lee {
  margin: 1rem 0 1.4rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--ambar);
  background: var(--papel-tenue);
  color: var(--grafito-suave);
  font-size: .9rem;
}

/* ---- el buscador --------------------------------------------------------- */

.cnv__buscador { margin-bottom: 1.2rem; }

.cnv__campo-que {
  display: block; margin-bottom: .35rem;
  color: var(--grafito-tenue); font-size: .88rem;
}

.cnv__fila { display: flex; gap: .5rem; align-items: stretch; }

/* 16 px O MAS, SIEMPRE. Por debajo de eso el teléfono hace zoom solo al tocar
   el campo y descoloca la pantalla entera — y eso no se ve probando en un
   ordenador. */
.cnv__entrada {
  flex: 1 1 auto; min-width: 0;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--grafito);
  font: inherit; font-size: 1rem;
}
.cnv__fila .boton { flex: 0 0 auto; min-height: 44px; }

.cnv__pista { margin: .35rem 0 0; color: var(--grafito-tenue); font-size: .82rem; }

.cnv__dice { min-height: 1.2em; color: var(--grafito-tenue); font-size: .9rem; }
.cnv__dice--mal { color: var(--ambar-texto); }

/* ---- el índice de documentos --------------------------------------------- */

.cnv__ficha {
  text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--linea); background: var(--papel);
}
.cnv__ficha:disabled { opacity: .55; cursor: default; }

.cnv__cuantas {
  font-weight: 400; font-size: .8rem; color: var(--grafito-tenue);
}

/* ---- las listas de apartados y de resultados ----------------------------- */

.cnv__lista { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }

/* CADA RENGLON ES UNA ZONA TOCABLE DE VERDAD. Una lista de cincuenta
   estatutos con renglones de 20 px se toca mal con el dedo y se acierta el de
   al lado — y aquí acertar el de al lado es leer otra ley. */
.cnv__renglon {
  display: flex; flex-direction: column; gap: .15rem;
  min-height: 48px; padding: .7rem .8rem;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--grafito);
  font: inherit; text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.cnv__renglon:hover, .cnv__renglon:focus {
  background: var(--papel-tenue); outline: none;
  border-color: var(--grafito-tenue);
}

.cnv__donde-esta { font-size: .78rem; color: var(--ambar-texto); }
.cnv__que-es { font-weight: 600; }
.cnv__trozo { font-size: .84rem; color: var(--grafito-tenue); }

.cnv__volver { margin-bottom: 1rem; }
.cnv__cabeza { margin: .2rem 0 1rem; }

/* ---- el texto, que es a lo que se viene ---------------------------------- */

.cnv__lectura {
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
  /* EL RENGLON NO PASA DE LO QUE EL OJO SIGUE SIN PERDERSE. Un documento a
     todo el ancho de una pantalla grande se lee peor, no mejor. */
  max-width: 42rem;
}
.cnv__lectura--intro { border-top: 0; padding-top: 0; }

.cnv__parrafo { margin: 0 0 .7rem; line-height: 1.6; overflow-wrap: anywhere; }
.cnv__titulo { margin: 1.4rem 0 .6rem; line-height: 1.3; }
.cnv__aire { height: .3rem; }

.cnv__punto {
  margin: 0 0 .45rem; padding-left: 1rem; line-height: 1.55;
  position: relative; overflow-wrap: anywhere;
}
.cnv__punto::before {
  content: "·"; position: absolute; left: .25rem; color: var(--ambar);
}

.cnv__cita {
  margin: 0 0 .7rem; padding: .5rem .8rem;
  border-left: 3px solid var(--linea);
  background: var(--papel-tenue);
  color: var(--grafito-suave); line-height: 1.55;
  overflow-wrap: anywhere;
}

/* UNA TABLA SE PARTE EN FILAS Y NO SE DESPLAZA DE LADO. En un teléfono, una
   tabla de tres columnas o se desborda o se aplasta; puesta como fila con sus
   celdas apiladas se lee entera sin mover nada. */
.cnv__fila-tabla {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  margin: 0 0 .5rem; padding: .5rem .7rem;
  border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel-tenue);
}
.cnv__celda { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.cnv__celda:first-child { font-weight: 600; flex: 0 0 100%; }

.cnv__lectura code {
  background: var(--papel-tenue); border: 1px solid var(--linea);
  border-radius: 4px; padding: 0 .25em;
  font-size: .9em; overflow-wrap: anywhere;
}
.cnv__lectura i { font-style: normal; color: var(--grafito-suave); }

.estado--falta { color: var(--ambar-texto); font-weight: 400; font-size: .8rem; }