/* ============================================================================
   LÍNEA TEMPORAL

   Todo lo de esta hoja está encerrado en `#vista-linea`: la búsqueda, la ficha
   y el estante siguen usando la `.doc-card` de siempre sin enterarse.

   Qué cambia respecto de la versión anterior:

   · El año era una barra negra a todo el ancho. Ahora es un rótulo en su propia
     columna, pegado al riel, que se queda fijo mientras se recorre su grupo.
   · Cada grupo de año era una tarjeta grande que envolvía a otras tarjetas.
     Se quita ese marco: la única tarjeta es el documento.
   · La descripción llegaba a más de 1100 px de ancho. Se acota la medida de
     lectura.
   · El tipo documental y el estado de vigencia competían: dos recuadros del
     mismo tamaño y color parecido. Ahora el tipo es un rótulo de color —el del
     propio tipo de norma— y el estado conserva su pastilla.

   La paleta sigue siendo la azul del sistema; sólo se afinan el riel, los
   grises y el amarillo de «Resolución», que sobre blanco no llegaba a 4,5:1.
   ========================================================================== */

#vista-linea{
  --riel:#dde1e8;             /* la línea vertical                            */
  --riel-x:112px;             /* su distancia al borde izquierdo              */
  --card-borde:#e6e6eb;
  --card-borde-activo:#c3d4ea;
  --meta:#6e6e73;

  /* #a9700f se queda en 4,17:1 sobre blanco. Esta variante llega a 5,8:1. */
  --tipo-resolucion:#8a5b06;
}

/* ---------------------------------------------------------------------- */
/* 1. El riel y la rejilla año / documentos                                */
/* ---------------------------------------------------------------------- */

#vista-linea .linea{
  position:relative;
  margin-top:var(--e5);
  padding-left:0;
}
#vista-linea .linea::before{
  content:"";
  position:absolute;
  left:var(--riel-x);
  top:10px;
  bottom:10px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(221,225,232,0),var(--riel) 6%,var(--riel) 94%,rgba(221,225,232,0));
}

#vista-linea .linea-item{
  position:relative;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:0 46px;
  padding:0 0 34px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#vista-linea .linea-item:last-child{padding-bottom:6px}

/* El punto del riel, a la altura del año. */
#vista-linea .linea-item::before{
  content:"";
  position:absolute;
  left:calc(var(--riel-x) - 5px);
  top:9px;
  width:12px;
  height:12px;
  border:3px solid var(--apple-blue,#0071e3);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px var(--apple-canvas,#f5f5f7);
}

/* ---------------------------------------------------------------------- */
/* 2. El año                                                               */
/* ---------------------------------------------------------------------- */

#vista-linea .linea-anio{
  position:sticky;
  top:calc(var(--alto-barra,138px) + 18px);
  align-self:start;
  margin:0;
  padding:0;
  border-radius:0;
  background:none;
  color:var(--apple-ink,#1d1d1f);
  font-family:var(--fuente-lectura);
  font-size:clamp(21px,2vw,27px);
  font-weight:680;
  letter-spacing:-.02em;
  line-height:1;
  text-align:right;
}

/* ---------------------------------------------------------------------- */
/* 3. La tarjeta del documento                                             */
/* ---------------------------------------------------------------------- */

#vista-linea .doc-lista{
  display:grid;
  gap:12px;
}

#vista-linea .doc-card{
  position:relative;
  display:block;
  overflow:hidden;
  padding:17px 22px 15px 24px;
  border:1px solid var(--card-borde);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(23,32,46,.05);
  text-align:left;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#vista-linea .doc-card:hover{
  border-color:var(--card-borde-activo);
  box-shadow:0 12px 26px -10px rgba(23,32,46,.2);
  transform:translateY(-2px);
}
#vista-linea .doc-card:focus-visible{
  outline:3px solid var(--apple-blue,#0071e3);
  outline-offset:3px;
}

/* La marca del tipo pasa a ser un canto de color pegado al borde. */
#vista-linea .doc-card .tipo-marca{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  height:auto;
  border-radius:0;
}

#vista-linea .doc-card-cuerpo{display:block}

/* ---------------------------------------------------------------------- */
/* 4. Tipo documental y estado de vigencia                                 */
/* ---------------------------------------------------------------------- */

#vista-linea .doc-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:7px;
}

/* El tipo deja de ser un recuadro: es un rótulo del color de su norma. */
#vista-linea .doc-card-tipo{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--tipo-otro,#5a636e);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
#vista-linea [data-tipo="Constitución"] .doc-card-tipo{color:var(--tipo-constitucion)}
#vista-linea [data-tipo="Ley"] .doc-card-tipo{color:var(--tipo-ley)}
#vista-linea [data-tipo="Decreto"] .doc-card-tipo,
#vista-linea [data-tipo="Decreto Ley"] .doc-card-tipo{color:var(--tipo-decreto)}
#vista-linea [data-tipo="Resolución"] .doc-card-tipo{color:var(--tipo-resolucion)}
#vista-linea [data-tipo="Jurisprudencia"] .doc-card-tipo{color:var(--tipo-jurisprudencia)}
#vista-linea [data-tipo="Concepto"] .doc-card-tipo{color:var(--tipo-concepto)}

/* Y el canto lateral usa el mismo color afinado. */
#vista-linea [data-tipo="Resolución"] .tipo-marca{background:var(--tipo-resolucion)}

/* La pastilla de vigencia se queda, un punto más discreta. */
#vista-linea .pastilla{
  padding:2px 9px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.01em;
}

/* ---------------------------------------------------------------------- */
/* 5. Título, resumen y pie                                                */
/* ---------------------------------------------------------------------- */

#vista-linea .doc-card h3{
  margin:0 0 5px;
  color:var(--apple-ink,#1d1d1f);
  font-family:var(--fuente-lectura);
  font-size:17px;
  font-weight:650;
  letter-spacing:-.015em;
  line-height:1.3;
}

#vista-linea .doc-card p{
  max-width:76ch;      /* la medida de lectura, antes iba a 1100 px */
  margin:0;
  color:#48484d;
  font-size:13.5px;
  line-height:1.62;
  /* Al acortar la medida, el recorte de dos líneas dejaba las frases a medias.
     Con tres se lee el sentido completo y las tarjetas siguen parejas. */
  -webkit-line-clamp:3;
  line-clamp:3;
}

#vista-linea .doc-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid #f0f0f3;
  color:var(--meta);
  font-size:11.5px;
}
/* Separador entre los datos del pie, sin escribirlo en el HTML. */
#vista-linea .doc-card-meta > span + span::before{
  content:"·";
  margin-right:14px;
  color:#c7c7cc;
}

/* ---------------------------------------------------------------------- */
/* 6. Filtro y encabezado                                                  */
/* ---------------------------------------------------------------------- */

#vista-linea .mapa-barra{
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
}

/* ---------------------------------------------------------------------- */
/* 7. Pantallas estrechas                                                  */
/*    El año se pone encima de su grupo y el riel se pega al margen.        */
/* ---------------------------------------------------------------------- */

@media (max-width:760px){
  #vista-linea{--riel-x:9px}
  #vista-linea .linea{padding-left:30px}
  #vista-linea .linea::before{left:9px}
  #vista-linea .linea-item{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding-bottom:26px;
  }
  /* El punto va en el margen, a la altura del riel. Antes se calculaba desde
     el borde del grupo y se montaba encima de las dos primeras cifras del año. */
  #vista-linea .linea-item::before{left:-26px;top:5px}
  #vista-linea .linea-anio{
    position:static;
    font-size:20px;
    text-align:left;
  }
  #vista-linea .doc-card{padding:15px 16px 13px 18px}
  #vista-linea .doc-card h3{font-size:16px}
  #vista-linea .doc-card p{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  #vista-linea .doc-card{transition:none!important;transform:none!important}
}