/* hechos.css — «Hechos del proceso» en la ficha del contrato (F14, 26-oct-2026; partials/contrato_hechos.html).
 * El lenguaje de Cumplimiento (cumplimiento.css: filetes, cifras en serif, rótulos en versalitas, el estado del registro
 * como punto y palabra) dentro de la ficha. Sin cajas tintadas ni colores de juicio: las barras, la tira del plazo y la
 * línea del proceso van en el azul de los gráficos de la casa (--cu-barra), y los tipos de criterio, en dos tonos de ese
 * azul. Todo vive en el ámbito .hp. Denso (plantillas más apretadas): tres columnas en escritorio, una en el móvil.
 */
/* Las migas de la ficha y el conmutador claro/oscuro en una fila (como .cu-sup) */
.ficha-sup { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ficha-sup .migas { margin-top: 0; margin-bottom: 0; min-width: 0; }

.hp { --hp-col1: 15rem; --hp-jv: #b4c4d9; --hp-punto: var(--color-acento); }
:root[data-tema="oscuro"] .hp { --hp-jv: #3f5878; }
.hp .ficha-seccion-cabeza { margin-bottom: 0; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--cu-filete-fuerte); }
.hp .ficha-seccion-titulo { margin: 0; }
.hp .ficha-seccion-titulo .nota { color: var(--color-texto-2); font-weight: var(--peso-normal); }
.hp-como { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-14); white-space: nowrap; }
.hp-como .icono { width: 14px; height: 14px; }
.hp-cat { margin: var(--sp-5) 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--cu-filete); font-size: var(--rotulo-tam);
          font-weight: var(--rotulo-peso); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-texto-2); }
.hp-vacio { margin: var(--sp-3) 0 0; max-width: 100ch; font-size: var(--fs-14); line-height: 1.5; color: var(--color-texto-2); }

/* ── La línea del proceso: hitos a la misma distancia, con el tiempo hasta el siguiente encima de la línea ───────── */
.hp-linea { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; }
.hp-hito { position: relative; flex: 1 1 0; min-width: 0; padding: 30px var(--sp-3) 0 0; }
.hp-hito::after { content: ""; position: absolute; left: 12px; right: 2px; top: 22px; height: 2px; background: var(--cu-barra-fondo); }
.hp-hito:last-child::after { display: none; }
.hp-punto { position: absolute; left: 0; top: 17px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hp-punto);
            background: var(--color-fondo); box-sizing: border-box; }
.hp-hito-adjudicacion .hp-punto, .hp-hito-formalizacion .hp-punto { background: var(--hp-punto); }
.hp-hito-modificacion .hp-punto { border-radius: 2px; width: 11px; height: 11px; top: 17.5px; }
.hp-hito-cambio .hp-punto { border-radius: 1px; transform: rotate(45deg); width: 11px; height: 11px; top: 17.5px; background: var(--hp-punto); }
.hp-intervalo { position: absolute; left: 18px; top: 0; font-size: var(--fs-12); line-height: 18px; color: var(--color-texto-2);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-hito-r { display: block; font-size: var(--fs-13); line-height: 1.3; color: var(--color-texto); font-weight: var(--peso-medio); }
.hp-hito-f { display: block; margin-top: 1px; font-size: var(--fs-13); color: var(--color-texto-2); font-variant-numeric: tabular-nums; }

/* ── Cada hecho: nombre y cifra · lectura, detalle y pares · registro y enlaces ─────────────────────────────── */
.hp-hecho { display: grid; grid-template-columns: var(--hp-col1) minmax(0, 1fr); gap: var(--sp-2) var(--sp-8);
            padding: var(--sp-3) 0; border-bottom: 1px solid var(--cu-filete); scroll-margin-top: 80px; }
.hp-cat + .hp-hecho { border-top: 0; }
.hp-nombre { margin: 0; font-family: var(--fuente-sans); font-size: var(--fs-14); font-weight: var(--peso-fuerte); line-height: 1.3;
             color: var(--color-texto-fuerte); }
.hp-cifra { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.hp-num { font-family: var(--fuente-cifra); font-weight: var(--peso-inter); font-size: calc(var(--fs-40) * var(--inter-k) + var(--inter-b)); line-height: 1; letter-spacing: -0.02em; color: var(--color-acento);
          font-variant-numeric: tabular-nums; }
.hp-num-texto { font-size: calc(var(--fs-22) * var(--inter-k) + var(--inter-b)); line-height: 1.15; letter-spacing: -0.01em; }
.hp-uni { font-size: var(--fs-13); line-height: 1.3; color: var(--color-texto-2); }
.hp-cuerpo { min-width: 0; }
.hp-lectura { margin: 0; max-width: 88ch; font-size: var(--fs-14); line-height: 1.5; color: var(--color-texto); }

/* Detalle: pares rótulo-valor en una línea */
.hp-detalle { margin: var(--sp-2) 0 0; display: grid; gap: 2px; font-size: var(--fs-13); line-height: 1.45; }
.hp-detalle div { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); }
.hp-detalle dt { color: var(--color-texto-2); }
.hp-detalle dt::after { content: ":"; }
.hp-detalle dd { margin: 0; color: var(--color-texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hp-nota { color: var(--color-texto-3); }

/* Pares: rótulo, la barra o la tira, y la frase */
.hp-par { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 2px var(--sp-3); margin-top: var(--sp-2);
          font-size: var(--fs-13); line-height: 1.45; }
.hp-par-con { grid-template-columns: 9rem auto minmax(0, 1fr); }
.hp-par-r { font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-2); }
.hp-par-t { color: var(--color-texto); }
.hp-barra { display: block; width: 7.5rem; height: 6px; }
.hp-barra-fondo { fill: var(--cu-barra-fondo); }
.hp-barra-valor { fill: var(--cu-barra); }
.hp-tira { display: block; width: 12.5rem; height: 22px; overflow: visible; }
.hp-tira-eje { stroke: var(--color-borde-fuerte); stroke-width: 1.5; }
.hp-tira-caja { fill: var(--cu-barra-fondo); stroke: var(--cu-barra); stroke-width: 1; }
.hp-tira-mediana { stroke: var(--cu-barra); stroke-width: 2; }
.hp-tira-valor { fill: var(--color-acento); }

/* Criterios: la barra de pesos y la lista */
.hp-criterios-barra { display: block; width: 100%; max-width: 40rem; height: 8px; margin-top: var(--sp-2); }
.hp-seg-automatico, .hp-seg-sin_tipo { fill: var(--cu-barra); }
.hp-seg-juicio_valor { fill: var(--hp-jv); }
.hp-leyenda { margin: var(--sp-1) 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); font-size: var(--fs-13); color: var(--color-texto-2); }
.hp-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.hp-leyenda span::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cu-barra); }
.hp-leyenda .hp-leyenda-jv::before { background: var(--hp-jv); }
.hp-criterios { list-style: none; margin: var(--sp-1) 0 0; padding: 0; max-width: 40rem; font-size: var(--fs-13); line-height: 1.4; }
.hp-criterio { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 2.5rem; align-items: baseline; gap: var(--sp-2);
               padding: 3px 0; border-top: 1px solid var(--cu-filete); }
.hp-criterio::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--cu-barra); align-self: center; }
.hp-criterio-juicio_valor::before { background: var(--hp-jv); }
.hp-criterio-d { color: var(--color-texto); overflow-wrap: anywhere; }
.hp-criterio-t { color: var(--color-texto-2); white-space: nowrap; }
.hp-criterio-p { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); color: var(--color-texto-fuerte); }

/* Documentos: un tipo por línea y sus documentos enlazados */
.hp-docs-plegable, .hp-lista-plegable { margin-top: var(--sp-1); }
.hp-docs-plegable > summary, .hp-lista-plegable > summary { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--fs-13); color: var(--color-acento); }
.hp-docs { list-style: none; margin: var(--sp-1) 0 0; padding: 0; font-size: var(--fs-13); line-height: 1.45; }
.hp-doc { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 0 var(--sp-3); padding: 3px 0; border-top: 1px solid var(--cu-filete); }
.hp-doc-r { color: var(--color-texto-2); }
.hp-doc-otro .hp-doc-r { color: var(--color-texto-3); }
.hp-doc-l { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); min-width: 0; }
.hp-doc-a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modificaciones: fecha, tipo e importe o plazo */
.hp-mods { list-style: none; margin: var(--sp-2) 0 0; padding: 0; max-width: 40rem; font-size: var(--fs-13); line-height: 1.4; }
.hp-mod { display: grid; grid-template-columns: 6.5rem 9rem minmax(0, 1fr); gap: var(--sp-2); padding: 3px 0; border-top: 1px solid var(--cu-filete); }
.hp-mod time { color: var(--color-texto-2); font-variant-numeric: tabular-nums; }
.hp-mod-r { color: var(--color-texto); }
.hp-mod-v { color: var(--color-texto); font-variant-numeric: tabular-nums; }

/* Lo fijo, plegado en una línea */
.hp-mas { margin-top: var(--sp-2); }
.hp-mas > summary { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--fs-13); color: var(--color-texto-2); }
.hp-mas > summary:hover { color: var(--color-acento); }
.hp-fijo { margin: 2px 0 0; padding-left: var(--sp-3); border-left: 2px solid var(--cu-filete-fuerte); display: grid; gap: 4px;
           font-size: var(--fs-13); line-height: 1.5; max-width: 96ch; }
.hp-fijo div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-2); }
.hp-fijo dt { color: var(--color-texto-2); }
.hp-fijo dd { margin: 0; color: var(--color-texto); overflow-wrap: anywhere; }

/* Registro y enlaces */
.hp-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: var(--sp-2); font-size: var(--fs-13); min-width: 0; }
.hp-enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); }
.hp-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 30px; color: var(--color-texto); text-decoration: none; }
.hp-chip:hover .hp-chip-t { color: var(--color-acento); text-decoration: underline; }
.hp-chip-t { color: var(--color-texto-2); font-variant-numeric: tabular-nums; }
.hp-enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; }
.hp-enlace .icono { width: 13px; height: 13px; }

/* No consta */
.hp-no-consta ul { margin: var(--sp-2) 0 0; padding: 0 0 0 var(--sp-4); font-size: var(--fs-13); line-height: 1.5; color: var(--color-texto-2); }

/* ── Tableta: la primera columna, más estrecha ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hp { --hp-col1: 12.5rem; }
    .hp-hecho { gap: var(--sp-2) var(--sp-5); }
}

/* ── Móvil: una columna; la línea, en vertical ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .hp .ficha-seccion-titulo .nota { display: block; margin-top: 2px; }
    .hp-linea { flex-direction: column; }
    .hp-hito { padding: 0 0 var(--sp-3) 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3); }
    .hp-hito::after { left: 5px; right: auto; top: 16px; bottom: 0; width: 2px; height: auto; }
    .hp-punto { top: 4px; }
    .hp-hito-modificacion .hp-punto, .hp-hito-cambio .hp-punto { top: 4.5px; }
    .hp-hito-r { grid-column: 1; }
    .hp-hito-f { grid-column: 2; grid-row: 1; margin: 0; }
    .hp-intervalo { position: static; grid-column: 1 / -1; font-size: var(--fs-13); line-height: 1.4; color: var(--color-texto-3); }
    .hp-intervalo::before { content: "+"; }
    /* nombre y cifra en una fila; debajo, el cuerpo; al final, el registro y los enlaces */
    .hp-hecho { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; }
    .hp-cabeza { display: contents; }
    .hp-nombre { grid-column: 1; grid-row: 1; }
    .hp-cifra { grid-column: 2; grid-row: 1; margin: 0; justify-content: flex-end; text-align: right; }
    .hp-cuerpo { grid-column: 1 / -1; grid-row: 2; }
    .hp-meta { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-4); margin-top: 0; }
    .hp-num { font-size: calc(var(--fs-28) * var(--inter-k) + var(--inter-b)); }
    .hp-num-texto { font-size: calc(var(--fs-18) * var(--inter-k) + var(--inter-b)); }
    .hp-chip, .hp-enlace, .hp-como, .hp-mas > summary { min-height: 40px; }
    .hp-par, .hp-par-con { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .hp-barra { width: 14rem; margin: 2px 0; }
    .hp-doc { grid-template-columns: minmax(0, 1fr); }
    .hp-doc-a { min-height: 32px; display: inline-flex; align-items: center; }
    .hp-docs-plegable > summary, .hp-lista-plegable > summary { min-height: 40px; }
    .hp-mod { grid-template-columns: 6rem minmax(0, 1fr); }
    .hp-mod-v { grid-column: 2; }
    .hp-fijo div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* el tipo de cada criterio, solo para lectores de pantalla: a la vista lo dicen el color y la leyenda */
    .hp-criterio { grid-template-columns: 10px minmax(0, 1fr) 2.5rem; }
    .hp-criterio-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}