/* =============================================================
   UConta – Panel CFDI (cfdi-inspector, cfdi-block, cfdi-*)
   Compartido por: CfdiDetallePanel, PanelPago, PanelNomina
   Requiere: layout.css (tokens --uc-*)
   ============================================================= */

.cfdi-inspector {
        position: fixed;
        top: 0;
        /* Oculto: desplazado exactamente un ancho de panel fuera de la pantalla.
           Se anima "right" (no "transform") a propósito: cualquier valor de transform
           distinto de "none" convierte a este elemento en el containing block de sus
           descendientes position:fixed (p. ej. los modales de vista previa/chat), lo
           que los "atrapa" dentro de este panel en vez de cubrir toda la ventana. */
        right: calc(-1 * min(100vw, 520px));
        height: 100vh;
        width: min(100%, 520px);
        z-index: 1050;
        transition: right .22s ease;
        pointer-events: none;
    }

        .cfdi-inspector.show {
            right: 0;
        }

        .cfdi-inspector.hide {
            right: calc(-1 * min(100vw, 520px));
        }

    .cfdi-inspector-panel {
        height: 100%;
        display: flex;
        flex-direction: column;
        background: var(--uc-surface);
        border-left: 1px solid var(--uc-border);
        box-shadow: -6px 0 18px rgba(15, 23, 42, 0.08);
        pointer-events: auto;
    }

    .cfdi-inspector-header {
        background: var(--uc-surface);
        border-bottom: 1px solid var(--uc-border);
        padding: 0.9rem 1rem;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .cfdi-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .cfdi-header-left {
        display: flex;
        align-items: center;
        gap: .75rem;
        flex-wrap: wrap;
    }

    .cfdi-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--uc-text-primary);
        letter-spacing: -.01em;
    }

    .cfdi-close-btn {
        opacity: .65;
    }

        .cfdi-close-btn:hover {
            opacity: 1;
        }

    .cfdi-inspector-body {
        flex: 1;
        overflow-y: auto;
        background: var(--uc-bg);
        padding: 1rem;
    }

    .cfdi-summary-card {
        background: var(--uc-surface);
        border: 1px solid var(--uc-border);
        border-radius: 14px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .cfdi-summary-name {
        font-size: 1rem;
        font-weight: 700;
        color: var(--uc-text-primary);
        line-height: 1.35;
        margin-bottom: .2rem;
        text-transform: uppercase;
    }

    .cfdi-summary-rfc {
        font-size: .9rem;
        font-weight: 600;
        color: var(--uc-text-secondary);
        margin-bottom: .35rem;
    }

    .cfdi-summary-meta {
        font-size: .85rem;
        color: var(--uc-text-muted);
        margin-top: .15rem;
    }

    .cfdi-block {
        background: var(--uc-surface);
        border: 1px solid var(--uc-border);
        border-radius: 14px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .cfdi-block-last {
        margin-bottom: 0;
    }

    .cfdi-block-title {
        font-size: .98rem;
        font-weight: 700;
        color: var(--uc-text-primary);
        margin-bottom: .9rem;
    }

    .cfdi-data-grid {
        display: grid;
        gap: .95rem;
    }

    .cfdi-data-item {
        padding-bottom: .85rem;
        border-bottom: 1px dashed var(--uc-border);
    }

        .cfdi-data-item:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }

    .cfdi-label {
        font-size: .8rem;
        color: var(--uc-text-secondary);
        margin-bottom: .18rem;
    }

    .cfdi-value {
        font-size: .98rem;
        font-weight: 600;
        color: var(--uc-text-primary);
        line-height: 1.4;
        word-break: break-word;
    }

    .cfdi-collapse-header {
        width: 100%;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        text-align: left;
    }

    .cfdi-collapse-icon {
        font-size: 1rem;
        color: var(--uc-text-secondary);
        transition: transform .18s ease;
    }

        .cfdi-collapse-icon.expanded {
            transform: rotate(180deg);
        }

    .cfdi-concepts-wrapper {
        margin-top: .25rem;
    }

    .cfdi-concepts-card {
        background: var(--uc-bg);
        border: 1px solid #dbe4f0;
        border-radius: 12px;
        max-height: 220px;
        overflow-y: auto;
        padding: .35rem .75rem;
        margin-top: .75rem;
    }

    .cfdi-concept-item {
        padding: .75rem 0;
        border-bottom: 1px solid #edf2f7;
    }

        .cfdi-concept-item:last-child {
            border-bottom: none;
        }

    .cfdi-concept-desc {
        font-size: .93rem;
        font-weight: 600;
        color: var(--uc-text-primary);
        white-space: pre-wrap;
        word-break: break-word;
    }

    .cfdi-chip-group {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem;
    }

    .cfdi-chip {
        border: 1px solid #cfd7e3;
        background: var(--uc-surface);
        color: var(--uc-text-secondary);
        border-radius: 10px;
        padding: .55rem .8rem;
        font-size: .86rem;
        font-weight: 600;
        line-height: 1.2;
        transition: all .15s ease;
    }

        .cfdi-chip:hover {
            border-color: #8b8cf8;
            color: #4f46e5;
            background: #f8f8ff;
        }

    .cfdi-chip-active {
        background: #eef2ff;
        border-color: #818cf8;
        color: #4f46e5;
        box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.10);
    }

    .cfdi-comments-box {
        min-height: 110px;
        resize: vertical;
        border-radius: 12px;
        border-color: #d7dee8;
        background: var(--uc-surface);
    }

        .cfdi-comments-box:focus {
            border-color: #818cf8;
            box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .12);
        }

    .cfdi-status-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        border-radius: 999px;
        padding: .28rem .7rem;
        font-size: .82rem;
        font-weight: 700;
        line-height: 1;
        border: 1px solid transparent;
    }

    .cfdi-status-button {
        cursor: pointer;
        transition: all .15s ease;
    }

        .cfdi-status-button:hover {
            filter: brightness(.98);
            transform: translateY(-1px);
        }

    .cfdi-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        background: currentColor;
    }

    .cfdi-status-vigente {
        color: #15803d;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .cfdi-status-cancelado {
        color: #dc2626;
        background: #fef2f2;
        border-color: #fecaca;
    }

    .cfdi-status-sin-verificar {
        color: var(--uc-text-muted);
        background: var(--uc-bg);
        border-color: var(--uc-border);
    }

    .cfdi-status-loading {
        width: 12px;
        height: 12px;
        border: 2px solid #cbd5e1;
        border-top-color: var(--uc-text-primary);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }

    .cfdi-empty-state {
        background: var(--uc-surface);
        border: 1px solid var(--uc-border);
        border-radius: 14px;
        padding: 1rem;
    }

    .cfdi-empty-title {
        font-size: .95rem;
        font-weight: 700;
        color: var(--uc-text-primary);
        margin-bottom: .25rem;
    }

    .cfdi-empty-text,
    .cfdi-empty-inline {
        font-size: .85rem;
        color: var(--uc-text-muted);
    }

    .cfdi-btn-primary {
        background: var(--uc-text-primary);
        color: var(--uc-surface);
        border: 1px solid var(--uc-text-primary);
        min-width: 92px;
    }

        .cfdi-btn-primary:hover {
            background: #0b1220;
            border-color: #0b1220;
            color: var(--uc-surface);
        }

    .cfdi-btn-secondary {
        min-width: 88px;
    }

    @media (max-width: 576px) {
        .cfdi-inspector {
            width: 100%;
        }

        .cfdi-inspector-body,
        .cfdi-inspector-header,
        .cfdi-inspector-footer {
            padding-left: .85rem;
            padding-right: .85rem;
        }
    }