/* ═══════════════════════════════════════════════════════════════════════════════════════
   Homologación de proveedores
   ─────────────────────────────────────────────────────────────────────────────────────
   El módulo se mira para decidir, no para leer: qué proveedor no puede entrar mañana y a
   quién hay que reclamarle un papel hoy. Por eso el estado se codifica en forma y en color
   a la vez —una franja lateral y un texto—, y no solo en color: un semáforo puro deja
   fuera a quien no distingue rojo y verde, y en una pantalla de planta con reflejos deja
   fuera a todo el mundo.
   ═════════════════════════════════════════════════════════════════════════════════════ */

.hom-alerta {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .95rem 1.15rem;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 6px;
    background: #fef2f2;
    color: #7f1d1d;
}
.hom-alerta .rz-icon { color: #dc2626; font-size: 1.45rem; flex: 0 0 auto; margin-top: .1rem }
.hom-alerta__cuerpo { flex: 1; min-width: 0 }
.hom-alerta strong { font-weight: 700 }
.hom-alerta p { margin: .25rem 0 0; font-size: .875rem; line-height: 1.45; color: #991b1b }

.hom-calma {
    display: flex; align-items: center; gap: .8rem;
    padding: .9rem 1.15rem;
    border: 1px solid #a7f3d0; border-left: 4px solid #0f766e;
    border-radius: 6px; background: #ecfdf5; color: #065f46;
}
.hom-calma .rz-icon { color: #0f766e; font-size: 1.35rem }

/* ── Rejillas ─────────────────────────────────────────────────────────────────────── */
.hom-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .85rem;
}
.hom-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 1100px) { .hom-cols { grid-template-columns: 1fr } }

/* ── Panel ────────────────────────────────────────────────────────────────────────── */
.hom-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.hom-panel__cab {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.hom-panel__cab .rz-icon { color: #0f766e; font-size: 1.15rem }
.hom-panel__cab h3 { margin: 0; font-size: .95rem; font-weight: 700; color: #0f172a; flex: 1 }
.hom-panel__cab .hom-cuenta {
    font-size: .78rem; font-weight: 600; color: #475569;
    background: #e2e8f0; border-radius: 999px; padding: .1rem .55rem;
}
.hom-panel__cuerpo { padding: .35rem 0 }
.hom-panel__vacio {
    padding: 1.6rem 1rem; text-align: center; color: #64748b; font-size: .85rem;
}

/* ── Fila de expediente / vencimiento ─────────────────────────────────────────────── */
.hom-fila {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem 1rem;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background .12s ease;
}
.hom-fila:hover { background: #f8fafc }
.hom-fila + .hom-fila { border-top: 1px solid #f1f5f9 }
.hom-fila__cuerpo { flex: 1; min-width: 0 }
.hom-fila__t {
    font-size: .875rem; font-weight: 600; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hom-fila__s {
    font-size: .765rem; color: #64748b; margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hom-fila__d { flex: 0 0 auto; text-align: right }

/* Franja lateral por urgencia: la forma acompaña al color, nunca lo sustituye. */
.hom-fila.is-vencido   { border-left-color: #dc2626; background: #fef2f2 }
.hom-fila.is-urgente   { border-left-color: #ea580c }
.hom-fila.is-proximo   { border-left-color: #d97706 }
.hom-fila.is-tranquilo { border-left-color: #cbd5e1 }

/* ── Distintivo de días ───────────────────────────────────────────────────────────── */
.hom-dias {
    display: inline-block; min-width: 62px; text-align: center;
    font-size: .74rem; font-weight: 700; letter-spacing: .01em;
    padding: .18rem .5rem; border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.hom-dias.v0 { background: #fee2e2; color: #991b1b }   /* vencido */
.hom-dias.v1 { background: #ffedd5; color: #9a3412 }   /* ≤ 7 días */
.hom-dias.v2 { background: #fef3c7; color: #92400e }   /* ≤ 30 días */
.hom-dias.v3 { background: #f1f5f9; color: #475569 }   /* más lejos */

/* ── Estado del expediente ────────────────────────────────────────────────────────── */
.hom-est {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; padding: .16rem .5rem; border-radius: 4px;
    border: 1px solid transparent; white-space: nowrap;
}
.hom-est .rz-icon { font-size: .85rem }
.hom-est.e-ok    { background: #dcfce7; color: #166534; border-color: #86efac }
.hom-est.e-res   { background: #ecfeff; color: #155e75; border-color: #a5f3fc }
.hom-est.e-curso { background: #eff6ff; color: #1e40af; border-color: #bfdbfe }
.hom-est.e-susp  { background: #ffedd5; color: #9a3412; border-color: #fed7aa }
.hom-est.e-cad   { background: #f1f5f9; color: #475569; border-color: #cbd5e1 }
.hom-est.e-rech  { background: #fee2e2; color: #991b1b; border-color: #fecaca }

/* ── Severidad del hallazgo ───────────────────────────────────────────────────────── */
.hom-sev {
    display: inline-block; font-size: .7rem; font-weight: 700;
    padding: .14rem .45rem; border-radius: 3px; white-space: nowrap;
}
.hom-sev.s3 { background: #fee2e2; color: #991b1b }
.hom-sev.s2 { background: #ffedd5; color: #9a3412 }
.hom-sev.s1 { background: #fef3c7; color: #92400e }
.hom-sev.s0 { background: #e0f2fe; color: #075985 }

/* ── Barras de reparto ────────────────────────────────────────────────────────────── */
.hom-barra { padding: .5rem 1rem }
.hom-barra + .hom-barra { border-top: 1px solid #f1f5f9 }
.hom-barra__cab {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .82rem; margin-bottom: .3rem;
}
.hom-barra__cab b { color: #0f172a; font-weight: 600 }
.hom-barra__cab span { color: #64748b; font-size: .76rem; font-variant-numeric: tabular-nums }
.hom-barra__riel { height: 7px; background: #f1f5f9; border-radius: 4px; overflow: hidden }
.hom-barra__val { height: 100%; background: #0f766e; border-radius: 4px; transition: width .3s ease }
.hom-barra__val.parcial { background: #d97706 }
.hom-barra__val.malo { background: #dc2626 }
.hom-barra__critico {
    font-size: .68rem; font-weight: 700; color: #9a3412;
    background: #ffedd5; border-radius: 3px; padding: 0 .3rem; margin-left: .35rem;
}

/* ── Embudo del proceso ───────────────────────────────────────────────────────────── */
.hom-embudo { display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem }
.hom-embudo__p {
    flex: 1 1 130px; min-width: 120px;
    border: 1px solid #e2e8f0; border-radius: 6px; padding: .6rem .7rem;
    background: #f8fafc;
}
.hom-embudo__p b {
    display: block; font-size: 1.5rem; line-height: 1.1; color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.hom-embudo__p span { font-size: .74rem; color: #64748b; line-height: 1.3; display: block; margin-top: .15rem }
.hom-embudo__p.ojo { border-color: #fed7aa; background: #fff7ed }
.hom-embudo__p.ojo b { color: #9a3412 }

/* ── Ficha del expediente ─────────────────────────────────────────────────────────── */
.hom-req {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .7rem 1rem; border-left: 3px solid transparent;
}
.hom-req + .hom-req { border-top: 1px solid #f1f5f9 }
.hom-req.bloq { border-left-color: #dc2626 }
.hom-req.bloq.ok { border-left-color: #16a34a }
.hom-req__cuerpo { flex: 1; min-width: 0 }
.hom-req__t { font-size: .875rem; font-weight: 600; color: #0f172a }
.hom-req__n { font-size: .74rem; color: #64748b; margin-top: .1rem }
.hom-req__acc { flex: 0 0 auto; display: flex; gap: .3rem; align-items: center }
.hom-req__peso {
    font-size: .68rem; font-weight: 700; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 3px; padding: 0 .3rem;
}
.hom-req__bloq {
    font-size: .68rem; font-weight: 700; color: #991b1b;
    background: #fee2e2; border-radius: 3px; padding: 0 .3rem;
}

/* ── Puntuación explicable ────────────────────────────────────────────────────────── */
.hom-punt { display: flex; align-items: center; gap: 1rem; padding: 1rem }
.hom-punt__n {
    font-size: 2.6rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: #0f766e;
}
.hom-punt__n.malo { color: #dc2626 }
.hom-punt__n.medio { color: #d97706 }
.hom-punt__x { flex: 1; font-size: .84rem; color: #475569; line-height: 1.45 }

/* ── Traza ────────────────────────────────────────────────────────────────────────── */
.hom-traza { padding: .3rem 0 }
.hom-traza__e { display: flex; gap: .75rem; padding: .5rem 1rem; font-size: .82rem }
.hom-traza__e + .hom-traza__e { border-top: 1px solid #f8fafc }
.hom-traza__f {
    flex: 0 0 auto; color: #94a3b8; font-size: .74rem; min-width: 96px;
    font-variant-numeric: tabular-nums;
}
.hom-traza__d { flex: 1; color: #334155 }
.hom-traza__q { flex: 0 0 auto; color: #94a3b8; font-size: .72rem }
.hom-traza__portal {
    font-size: .66rem; font-weight: 700; color: #155e75;
    background: #ecfeff; border-radius: 3px; padding: 0 .28rem; margin-left: .3rem;
}