.family-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; margin-top: 1rem; }
.family-card { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-align: left; }
.family-card strong { display: block; color: var(--green-dark); font-size: 1.35rem; }
.family-card small { display: block; margin-top: .15rem; color: var(--muted); font-weight: 750; }
.family-card.active { outline: 3px solid #13754733; background: var(--mint); }
.filters { grid-template-columns: repeat(6, minmax(105px, 1fr)) auto; }
.family-row td { padding: .55rem .75rem; background: #e8f2eb; color: var(--green-dark); font-size: .75rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.family-name { min-width: 320px; font-weight: 750; }
.members { min-width: 300px; }
.member { display: grid; grid-template-columns: 48px 130px 1fr; gap: .45rem; align-items: center; padding: .28rem 0; border-bottom: 1px dashed #e1e5e2; }
.member:last-child { border-bottom: 0; }
.member .sku { font-size: .78rem; }
.variant-empty { color: var(--muted); font-size: .72rem; font-weight: 700; }
.family-legend { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 -.25rem; }
.legend { padding: .42rem .72rem; border-radius: 999px; font-size: .72rem; font-weight: 800; border: 1px solid transparent; }
.legend.complete { background: #d8f3df; color: #14532d; border-color: #86c99a; }
.legend.multi { background: #dcecff; color: #174a7a; border-color: #8bb9e8; }
.legend.single { background: #fff1d6; color: #79520d; border-color: #e7c477; }
.legend.pending { background: #eceff1; color: #566066; border-color: #c6cdd1; }
tr.family-complete td { background: #f0fbf3; }
tr.family-complete td:first-child { border-left: 7px solid #3a9b58; }
tr.family-multi td { background: #f2f7fd; }
tr.family-multi td:first-child { border-left: 7px solid #4d8fc8; }
tr.family-single td { background: #fffaf0; }
tr.family-single td:first-child { border-left: 7px solid #d5a642; }
tr.family-pending td { background: #f4f5f5; }
tr.family-pending td:first-child { border-left: 7px solid #9ba4a9; }
.badge.variant-nx { background: #dff4e7; color: #11633d; }
.badge.variant-rx { background: #dcecff; color: #175485; }
.badge.variant-cx { background: #ffe5c2; color: #8a4a00; }
.badge.variant-clx { background: #eadfff; color: #61379a; }
.badge.variant-svx { background: #d9f3f1; color: #176b66; }
.badge.variant-fnx { background: #ffe0ed; color: #92385d; }
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(3, 1fr); } }


/* ── Familias en tarjetas ───────────────────────────────────────────────
   El color del borde izquierdo es el mismo codigo de la leyenda de arriba:
   verde = completa, azul = varias variantes, ambar = una, gris = sin variante. */
.familias-panel { margin-top: 1rem; }
.familias-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .9rem; align-items: start; }
.familias-rejilla .empty { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.familia { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 7px solid #9ba4a9; border-radius: 16px; background: var(--white); box-shadow: 0 8px 24px #183b2810; }
.familia:hover { border-color: #bcd0c3; box-shadow: 0 10px 28px #183b2820; }
.familia-cab { position: relative; padding-right: 5.5rem; }
.familia-cab h3 { margin: 0; font-size: .98rem; font-weight: 750; line-height: 1.3; }
.familia-meta { margin: .3rem 0 0; color: var(--muted); font-size: .75rem; font-weight: 700; }
.familia-rotulo { position: absolute; top: 0; right: 0; padding: .24rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 800; background: #eceff1; color: #566066; }
.familia-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; padding: .65rem 0; border-top: 1px solid #edf0ed; border-bottom: 1px solid #edf0ed; }
.familia-datos dt { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.familia-datos dd { margin: .2rem 0 0; font-size: .8rem; font-weight: 650; overflow-wrap: anywhere; }
.familia-miembros { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.familia-miembros li { display: grid; grid-template-columns: 3.1rem 1fr; align-items: center; column-gap: .5rem; padding: .3rem .45rem; border-radius: 9px; background: #fafbfa; }
.familia-estado { grid-column: 2; color: var(--muted); font-size: .7rem; font-weight: 700; }
.familia.family-complete { border-left-color: #3a9b58; }
.familia.family-complete .familia-rotulo { background: #d8f3df; color: #14532d; }
.familia.family-multi { border-left-color: #4d8fc8; }
.familia.family-multi .familia-rotulo { background: #dcecff; color: #174a7a; }
.familia.family-single { border-left-color: #d5a642; }
.familia.family-single .familia-rotulo { background: #fff1d6; color: #79520d; }
.familia.family-pending { border-left-color: #9ba4a9; }
@media (max-width: 520px) { .familias-rejilla { grid-template-columns: 1fr; } .familia-datos { grid-template-columns: 1fr 1fr; } }