/* =========================
   BOTONES
========================= */

.inaba-btn {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        9px 16px;

    border:
        1px solid transparent;

    border-radius:
        var(--inaba-radius-sm);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition:
        .2s ease;
}


.inaba-btn-primary {

    background:
        var(--inaba-blue);

    color:
        #FFFFFF;
}


.inaba-btn-primary:hover {

    background:
        var(--inaba-blue-hover);
}


.inaba-btn-danger {

    background:
        var(--inaba-red);

    color:
        #FFFFFF;
}


.inaba-btn-secondary {

    background:
        #FFFFFF;

    color:
        var(--inaba-text);

    border-color:
        var(--inaba-border);
}


/* =========================
   CARD
========================= */

.inaba-card {

    background:
        var(--inaba-surface);

    border:
        1px solid
        var(--inaba-border);

    border-radius:
        var(--inaba-radius-lg);

    box-shadow:
        var(--inaba-shadow-sm);

    padding:
        22px;
}


/* =========================
   BADGES
========================= */

.inaba-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        26px;

    padding:
        4px 10px;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        600;
}


.inaba-badge-success {

    background:
        #EAF8F2;

    color:
        var(--inaba-success);
}


.inaba-badge-warning {

    background:
        #FFF6DE;

    color:
        #A86900;
}


.inaba-badge-danger {

    background:
        #FFF0F1;

    color:
        var(--inaba-danger);
}


.inaba-badge-info {

    background:
        #EDF5FF;

    color:
        var(--inaba-info);
}


/* =========================
   FORMULARIOS
========================= */

.inaba-field {

    margin-bottom:
        18px;
}


.inaba-label {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        12px;

    font-weight:
        600;

    color:
        var(--inaba-text-soft);
}


.inaba-input,
.inaba-select,
.inaba-textarea {

    width:
        100%;

    min-height:
        45px;

    border:
        1px solid
        var(--inaba-border);

    border-radius:
        var(--inaba-radius-sm);

    background:
        #FFFFFF;

    padding:
        10px 12px;

    outline:
        none;

    color:
        var(--inaba-text);

    transition:
        border .2s,
        box-shadow .2s;
}


.inaba-input:focus,
.inaba-select:focus,
.inaba-textarea:focus {

    border-color:
        var(--inaba-blue);

    box-shadow:
        0 0 0 3px
        rgba(11,116,216,.10);
}


/* =========================
   TABLAS
========================= */

.inaba-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;
}


.inaba-table {

    width:
        100%;

    border-collapse:
        collapse;

    background:
        #FFFFFF;
}


.inaba-table th {

    text-align:
        left;

    padding:
        13px 16px;

    color:
        var(--inaba-muted);

    font-size:
        11px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;

    border-bottom:
        1px solid
        var(--inaba-border);
}


.inaba-table td {

    padding:
        15px 16px;

    border-bottom:
        1px solid
        var(--inaba-border);
}


.inaba-card {

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.inaba-card:hover {

    border-color:
        #D7E0EA;

    box-shadow:
        var(--inaba-shadow-md);
}




/* =========================================================
   CONFIRMACIÓN DE PAGO EN FACTURA
========================================================= */

.inaba-payment-success {
    position: relative;
    margin-bottom: 24px;
    padding: 18px 20px 18px 58px;

    background: #ecfdf3;
    border: 1px solid #a7f3c2;
    border-left: 5px solid #16a34a;

    border-radius: 12px;

    color: #166534;

    font-size: 14px;
    line-height: 1.6;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);
}


.inaba-payment-success::before {
    content: "✓";

    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #16a34a;
    color: #ffffff;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 700;
}


.inaba-payment-success a {
    display: inline-flex;
    align-items: center;

    margin-top: 8px !important;
    margin-left: 8px !important;

    padding: 7px 12px;

    background: #ffffff;

    border: 1px solid #86efac;
    border-radius: 7px;

    color: #166534;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.inaba-payment-success a:hover {
    background: #dcfce7;
    border-color: #22c55e;

    transform: translateY(-1px);
}


@media (max-width: 600px) {

    .inaba-payment-success {
        padding:
            16px
            16px
            16px
            52px;
    }


    .inaba-payment-success a {
        display: flex;

        width: fit-content;

        margin-left: 0 !important;
        margin-right: 8px;
    }
}


/* =========================================================
   ACCIONES DE FACTURA
========================================================= */

.inaba-invoice-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}


.inaba-invoice-actions .inaba-button,
.inaba-invoice-actions form {
    margin: 0;
}


.inaba-invoice-actions .inaba-button {
    min-height: 42px;
    padding: 10px 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


.inaba-invoice-actions form {
    display: inline-flex !important;
}


.inaba-invoice-actions form .inaba-button {
    width: auto;
}


@media (max-width: 700px) {

    .inaba-invoice-actions {
        align-items: stretch;
    }


    .inaba-invoice-actions .inaba-button,
    .inaba-invoice-actions form,
    .inaba-invoice-actions form .inaba-button {
        width: 100%;
    }
}

.inaba-invoice-actions .inaba-button {
    background: #ffffff;
    border: 1px solid #d7dce3;
    color: #1f2937;
}


.inaba-invoice-actions .inaba-button:hover {
    background: #f8fafc;
    border-color: #bfc6cf;
}


.inaba-invoice-actions .inaba-button-primary {
    background: #0b74d8;
    border-color: #0b74d8;
    color: #ffffff;
}


.inaba-invoice-actions .inaba-button-primary:hover {
    background: #0968c2;
    border-color: #0968c2;
    color: #ffffff;
}



/* =========================================================
   FACTURA ANULADA
========================================================= */

.inaba-invoice-cancelled {
    position: relative;

    margin-bottom: 24px;

    padding: 18px 20px 18px 58px;

    background: #fff1f2;

    border: 1px solid #fecdd3;

    border-left: 5px solid #e11d48;

    border-radius: 12px;

    color: #9f1239;

    font-size: 14px;

    line-height: 1.6;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);
}


.inaba-invoice-cancelled::before {
    content: "×";

    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e11d48;

    color: #ffffff;

    border-radius: 50%;

    font-size: 20px;

    font-weight: 700;
}


@media (max-width: 600px) {

    .inaba-invoice-cancelled {
        padding:
            16px
            16px
            16px
            52px;
    }
}

/* =========================================================
   FACTURA DUPLICADA
========================================================= */

.inaba-invoice-duplicated {
    position: relative;

    margin-bottom: 24px;

    padding: 18px 20px 18px 58px;

    background: #eff6ff;

    border: 1px solid #bfdbfe;

    border-left: 5px solid #0b74d8;

    border-radius: 12px;

    color: #1e40af;

    font-size: 14px;

    line-height: 1.6;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06);
}


.inaba-invoice-duplicated::before {
    content: "✓";

    position: absolute;

    left: 18px;
    top: 50%;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0b74d8;

    color: #ffffff;

    border-radius: 50%;

    font-size: 17px;

    font-weight: 700;
}


@media (max-width: 600px) {

    .inaba-invoice-duplicated {
        padding:
            16px
            16px
            16px
            52px;
    }
}