/* ── RESET / BASE ──────────────────────────────────────── */
    .hom-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-modal-3); /* D-51 (era 2000) */
        padding: 16px;
        backdrop-filter: blur(2px);
    }

    .hom-modal {
        position: relative;
        background: #F8FAFC;
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(0,0,0,0.12);
        width: 100%;
        max-width: 860px;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }

    /* ── OVERLAY ───────────────────────────────────────────── */
    .hom-overlay {
        position: absolute;
        inset: 0;
        background: rgba(248, 250, 252, 0.88);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        border-radius: 14px;
        backdrop-filter: blur(4px);
    }

    .hom-overlay-card {
        text-align: center;
        padding: 40px 56px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(37, 99, 235, 0.12);
        border: 1px solid #DBEAFE;
    }

    .hom-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #DBEAFE;
        border-top-color: #2563EB;
        border-radius: 50%;
        animation: hom-spin 0.8s linear infinite;
        margin: 0 auto 20px;
    }

    @keyframes hom-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .hom-overlay-title {
        font-size: 15px;
        font-weight: 600;
        color: #1e3a8a;
        margin-bottom: 8px;
    }

    .hom-overlay-timer {
        font-size: 26px;
        font-weight: 700;
        color: #2563EB;
        font-variant-numeric: tabular-nums;
    }

    /* ── HEADER ────────────────────────────────────────────── */
    .hom-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 52px;
        background: #1e3a8a;
        flex-shrink: 0;
        border-radius: 14px 14px 0 0;
        gap: 12px;
    }

    .hom-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
    }

    .hom-header-icon {
        color: #93c5fd;
        font-size: 15px;
        flex-shrink: 0;
    }

    .hom-header-title {
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

    .hom-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* ── ESTADO BADGE ──────────────────────────────────────── */
    .hom-estado-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .hom-estado-listo {
        background: rgba(255,255,255,0.12);
        color: #bfdbfe;
    }

    .hom-estado-evaluando {
        background: #fef3c7;
        color: #92400e;
        animation: hom-pulse 1.2s ease-in-out infinite;
    }

    .hom-estado-finalizado {
        background: #dcfce7;
        color: #14532d;
    }

    @keyframes hom-pulse {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    /* ── BOTONES HEADER ────────────────────────────────────── */
    .hom-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 13px;
        height: 31px;
        border-radius: 6px;
        border: none;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: filter 0.15s, opacity 0.15s;
        white-space: nowrap;
    }

        .hom-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            filter: none !important;
        }

        .hom-btn:not(:disabled):hover {
            filter: brightness(1.1);
        }

    .hom-btn-evaluar {
        background: #2563EB;
        color: #fff;
    }

    .hom-btn-confirmar {
        background: #16a34a;
        color: #fff;
    }

    .hom-btn-volver {
        background: #475569;
        color: #fff;
    }

    .hom-btn-close {
        width: 31px;
        height: 31px;
        border-radius: 6px;
        border: none;
        background: rgba(255,255,255,0.15);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        transition: background 0.15s;
    }

        .hom-btn-close:hover {
            background: rgba(255,255,255,0.25);
        }

    /* ── INFO STRIP ────────────────────────────────────────── */
    .hom-strip {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 7px 20px;
        background: #EFF6FF;
        border-bottom: 1px solid #DBEAFE;
        font-size: 12px;
        color: #1e40af;
        font-weight: 500;
        flex-shrink: 0;
    }

        .hom-strip i {
            margin-right: 4px;
            color: #3B82F6;
        }

    /* ── BODY ──────────────────────────────────────────────── */
    .hom-body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .hom-body::-webkit-scrollbar {
            width: 6px;
        }

        .hom-body::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 3px;
        }

    /* ── EMPTY / HINT ──────────────────────────────────────── */
    .hom-empty, .hom-hint {
        text-align: center;
        padding: 32px;
        color: #94a3b8;
        font-size: 13px;
    }

        .hom-empty i {
            font-size: 32px;
            display: block;
            margin-bottom: 10px;
        }

    .hom-hint {
        background: #EFF6FF;
        border: 1px dashed #93c5fd;
        border-radius: 8px;
        color: #1e40af;
        padding: 14px 20px;
        text-align: left;
    }

        .hom-hint i {
            margin-right: 6px;
            color: #3B82F6;
        }

    /* ── TARJETA ORIGEN ────────────────────────────────────── */
    .hom-card-origen {
        background: #fff;
        border: 1px solid #DBEAFE;
        border-left: 4px solid #2563EB;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    .hom-card-origen-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
        font-size: 11px;
        font-weight: 700;
        color: #1e40af;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

        .hom-card-origen-header i {
            color: #3B82F6;
        }

    .hom-origen-desc {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 10px;
    }

    .hom-origen-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }

    .hom-origen-field {
        background: #F8FAFC;
        border-radius: 5px;
        padding: 6px 10px;
    }

    .hom-origen-label {
        font-size: 10px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }

    .hom-origen-value {
        font-size: 12px;
        font-weight: 600;
        color: #334155;
    }

    /* ── COINCIDENCIAS ─────────────────────────────────────── */
    .hom-coincidencias-header {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
    }

        .hom-coincidencias-header i {
            color: #3B82F6;
        }

    .hom-sin-coincidencias {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        border-radius: 8px;
        padding: 14px 16px;
        font-size: 12px;
        color: #991b1b;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ── TARJETA COINCIDENCIA ──────────────────────────────── */
    .hom-card-coin {
        background: #fff;
        border: 1.5px solid #E2E8F0;
        border-radius: 8px;
        padding: 12px 14px;
        margin-bottom: 8px;
        transition: border-color 0.15s, box-shadow 0.15s;
        position: relative;
    }

        .hom-card-coin.seleccionada {
            border-color: #2563EB;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .hom-card-coin.deshabilitada {
            opacity: 0.45;
            background: #F8FAFC;
        }

    .hom-coin-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }

    .hom-coin-desc {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        flex: 1;
    }

    .hom-similitud {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .hom-sim-alta {
        background: #DCFCE7;
        color: #14532d;
    }

    .hom-sim-media {
        background: #FEF9C3;
        color: #713f12;
    }

    .hom-sim-baja {
        background: #FEE2E2;
        color: #7f1d1d;
    }

    .hom-coin-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
        margin-bottom: 10px;
    }

    .hom-coin-field {
        background: #F8FAFC;
        border-radius: 5px;
        padding: 5px 8px;
    }

    .hom-coin-label {
        font-size: 10px;
        color: #94a3b8;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 1px;
    }

    .hom-coin-value {
        font-size: 12px;
        font-weight: 600;
        color: #334155;
    }

    .hom-coin-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .hom-seleccionado-label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 700;
        color: #1d4ed8;
    }

        .hom-seleccionado-label i {
            font-size: 12px;
        }

    .hom-coin-btns {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .hom-btn-seleccionar {
        height: 28px;
        padding: 0 12px;
        border-radius: 5px;
        border: none;
        background: #2563EB;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: filter 0.15s, opacity 0.15s;
    }

        .hom-btn-seleccionar:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

        .hom-btn-seleccionar:not(:disabled):hover {
            filter: brightness(1.1);
        }

    .hom-btn-revertir {
        height: 28px;
        padding: 0 12px;
        border-radius: 5px;
        border: 1.5px solid #E2E8F0;
        background: #fff;
        color: #64748b;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: border-color 0.15s, color 0.15s, opacity 0.15s;
    }

        .hom-btn-revertir:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .hom-btn-revertir:not(:disabled):hover {
            border-color: #ef4444;
            color: #ef4444;
        }

    /* ── ACORDEÓN ──────────────────────────────────────────── */
    .hom-accordion {
        background: #fff;
        border: 1.5px solid #E2E8F0;
        border-radius: 8px;
        overflow: hidden;
        transition: box-shadow 0.15s;
    }

        .hom-accordion.open {
            border-color: #93c5fd;
            box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
        }

    .hom-accordion-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        cursor: pointer;
        user-select: none;
        gap: 12px;
        background: #fff;
        transition: background 0.12s;
    }

        .hom-accordion-header:hover {
            background: #F8FAFC;
        }

    .hom-accordion-left {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
        flex: 1;
    }

    .hom-accordion-num {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #DBEAFE;
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .hom-accordion-info {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .hom-accordion-desc {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hom-accordion-sub {
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
    }

    .hom-accordion-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .hom-chevron {
        color: #94a3b8;
        font-size: 12px;
        transition: transform 0.2s;
    }

        .hom-chevron.rotated {
            transform: rotate(180deg);
        }

    .hom-accordion-body {
        padding: 14px 16px;
        border-top: 1px solid #E2E8F0;
        background: #F8FAFC;
    }

    /* ── BADGES ────────────────────────────────────────────── */
    .hom-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 9px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
    }

    .hom-badge-ok {
        background: #DCFCE7;
        color: #14532d;
    }

    .hom-badge-warn {
        background: #FEF9C3;
        color: #713f12;
    }

    .hom-badge-none {
        background: #FEE2E2;
        color: #7f1d1d;
    }

    /* ── FOOTER ────────────────────────────────────────────── */
    .hom-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px 20px;
        background: #fff;
        border-top: 1px solid #E2E8F0;
        flex-shrink: 0;
    }

    /* ── SINGLE VIEW ───────────────────────────────────────── */
    .hom-single {
        display: flex;
        flex-direction: column;
    }

    /* ── RESPONSIVE ────────────────────────────────────────── */
    @media (max-width: 600px) {
        .hom-header-title {
            display: none;
        }

        .hom-modal {
            max-height: 98vh;
            border-radius: 10px;
        }

        .hom-origen-grid, .hom-coin-grid {
            grid-template-columns: 1fr 1fr;
        }

        .hom-coin-footer {
            flex-direction: column;
            align-items: flex-end;
        }
    }
    .hom-body {
        padding: 8px 0;
    }

    .hom-empty {
        text-align: center;
        padding: 2rem;
        color: #888780;
        font-size: 13px;
    }

    .hom-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #5F5E5A;
        padding: 6px 10px;
        margin-bottom: 6px;
    }

    /* ── FILA PRODUCTO ── */
    .hom-row-prod {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: #F1EFE8;
        border: 0.5px solid #D3D1C7;
        border-radius: 6px;
        margin-bottom: 2px;
        cursor: pointer;
    }

        .hom-row-prod:hover {
            background: #E8E6DE;
        }

    .hom-idx {
        font-size: 11px;
        color: #888780;
        min-width: 16px;
        text-align: right;
    }

    .hom-desc {
        flex: 1;
        font-weight: 500;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hom-meta {
        font-size: 11px;
        color: #5F5E5A;
        display: flex;
        gap: 12px;
        white-space: nowrap;
    }

    .hom-chevron {
        font-size: 12px;
        color: #888780;
        transition: transform .15s;
    }

        .hom-chevron.rotated {
            transform: rotate(180deg);
        }

    /* ── BADGES ── */
    .hom-badge-ok {
        font-size: 11px;
        padding: 2px 7px;
        border-radius: 4px;
        background: #EAF3DE;
        color: #3B6D11;
        white-space: nowrap;
    }

    .hom-badge-warn {
        font-size: 11px;
        padding: 2px 7px;
        border-radius: 4px;
        background: #FAEEDA;
        color: #854F0B;
        white-space: nowrap;
    }

    .hom-badge-none {
        font-size: 11px;
        padding: 2px 7px;
        border-radius: 4px;
        background: #F1EFE8;
        color: #5F5E5A;
        white-space: nowrap;
    }

    /* ── BLOQUE COINCIDENCIAS ── */
    .hom-coins {
        margin: 0 0 6px 26px;
        border-left: 1.5px solid #D3D1C7;
        padding-left: 8px;
    }

    .hom-row-coin {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        border: 0.5px solid #D3D1C7;
        border-radius: 4px;
        margin-bottom: 2px;
        background: #fff;
    }

        .hom-row-coin.seleccionada {
            border-color: #185FA5;
            background: #E6F1FB;
        }

        .hom-row-coin.deshabilitada {
            opacity: .55;
        }

    .hom-cdesc {
        flex: 1;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hom-cmeta {
        font-size: 11px;
        color: #5F5E5A;
        display: flex;
        gap: 10px;
        white-space: nowrap;
    }

    /* ── SIMILITUD ── */
    .hom-sim {
        font-size: 11px;
        font-weight: 500;
        padding: 1px 6px;
        border-radius: 3px;
        white-space: nowrap;
    }

    .hom-sim-alto {
        background: #EAF3DE;
        color: #3B6D11;
    }

    .hom-sim-medio {
        background: #FAEEDA;
        color: #854F0B;
    }

    .hom-sim-bajo {
        background: #FCEBEB;
        color: #A32D2D;
    }

    .hom-sel-lbl {
        font-size: 11px;
        color: #185FA5;
        display: flex;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }

    .hom-sin-coin {
        font-size: 12px;
        color: #888780;
        padding: 5px 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* ── BOTONES ── */
    .hom-btn-sel {
        font-size: 11px;
        padding: 2px 8px;
        border: 0.5px solid #B4B2A9;
        border-radius: 4px;
        background: transparent;
        color: #2C2C2A;
        cursor: pointer;
        white-space: nowrap;
    }

        .hom-btn-sel:disabled {
            opacity: .4;
            cursor: default;
        }

    .hom-btn-rev {
        font-size: 11px;
        padding: 2px 8px;
        border: 0.5px solid #B4B2A9;
        border-radius: 4px;
        background: transparent;
        color: #A32D2D;
        cursor: pointer;
        white-space: nowrap;
    }

        .hom-btn-rev:disabled {
            opacity: .35;
            cursor: default;
        }
    .hom-header-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 10px 5px;
        border-bottom: 0.5px solid #D3D1C7;
        margin-bottom: 4px;
    }

        .hom-header-row span {
            font-size: 10px;
            font-weight: 500;
            color: #888780;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
        }

    .hom-h-idx {
        min-width: 16px;
        text-align: right;
    }

    .hom-h-desc {
        flex: 1;
    }

    .hom-h-meta {
    }

    .hom-h-estado {
    }

    .hom-h-chev {
        width: 13px;
    }