/* Vista en pantalla (modal POS, página ticket) */

body:not(.thermal-print) {

    background: #eef4f5;

    margin: 0;

    padding: 1rem;

    font-family: 'Segoe UI', Arial, sans-serif;

}

body:not(.thermal-print) .ticket-shell { max-width: 380px; margin: 0 auto; }



.ticket-paper {

    background: #fff;

    padding: 1.25rem;

    border-radius: 8px;

    box-shadow: 0 4px 20px rgba(0,0,0,.08);

    font-size: 13px;

    color: #222;

}



.ticket-header { text-align: center; }

.ticket-header h1 { font-size: 1.1rem; margin: .25rem 0; color: #1a3a42; }

.ticket-logo { max-height: 50px; max-width: 100%; margin-bottom: .5rem; }

.ticket-meta { margin: 0; font-size: 11px; color: #666; }



.ticket-divider { border-top: 1px dashed #ccc; margin: .75rem 0; }



.ticket-info div { margin-bottom: .2rem; font-size: 12px; }



.ticket-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }

.ticket-table th, .ticket-table td { padding: .35rem 0; vertical-align: top; word-wrap: break-word; }

.ticket-table th { border-bottom: 1px solid #ddd; font-size: 11px; text-transform: uppercase; }

.ticket-table th:first-child, .ticket-table td:first-child { width: 28px; }

.ticket-table th:last-child, .ticket-table td:last-child { width: 62px; }

.ticket-table small, .ticket-item-note { color: #888; font-size: 10px; }

.ticket-item-note { font-style: italic; }



.ticket-total-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 1.15rem;

    padding: .5rem 0;

}

.ticket-total-row strong { color: var(--secondary, #07ADAD); font-size: 1.35rem; }



.ticket-payment-status {

    text-align: center;

    padding: .65rem;

    border-radius: 8px;

    font-weight: 600;

    font-size: 12px;

}

.ticket-payment-status.pending { background: #fff3cd; color: #856404; }

.ticket-payment-status.paid { background: #d4edda; color: #155724; }



.ticket-notes { font-size: 11px; margin-top: .75rem; }

.ticket-footer { text-align: center; font-size: 11px; color: #888; margin-top: 1rem; }

.ticket-number-hero {
    text-align: center;
    margin: .75rem 0 .25rem;
    padding: .65rem .5rem;
    border: 2px dashed var(--secondary, #07ADAD);
    border-radius: 10px;
    background: #f0fdfa;
}

.ticket-number-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    font-weight: 700;
}

.ticket-number-value {
    display: block;
    font-size: 1.35rem;
    color: #1a3a42;
    letter-spacing: .04em;
    margin-top: .15rem;
}

.ticket-download-status {
    max-width: 380px;
    margin: .75rem auto 0;
    padding: .65rem .85rem;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
}

.ticket-download-status.is-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.ticket-download-status.is-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}



.ticket-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }

.btn-ticket {

    display: inline-block;

    padding: .5rem 1rem;

    border-radius: 8px;

    text-decoration: none;

    border: 1px solid #ccc;

    background: #fff;

    color: #333;

    cursor: pointer;

    font-size: 14px;

}

.btn-ticket.primary { background: var(--secondary, #07ADAD); color: #fff; border-color: transparent; }

.btn-ticket.download { background: #1a3a42; color: #fff; border-color: transparent; font-weight: 600; }

.btn-ticket.download-qr { background: #0d5660; color: #fff; border-color: transparent; font-weight: 600; }

.btn-ticket.download-all { background: var(--secondary, #07ADAD); color: #fff; border-color: transparent; font-weight: 600; }

.payment-qr-paper {
    width: 100%;
    max-width: 360px;
    margin: 1.25rem auto 0;
    padding: 1.25rem;
    background: #fff;
    border: 2px dashed var(--secondary, #07ADAD);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(26, 58, 66, .1);
    text-align: center;
    color: #1a3a42;
}

.payment-qr-header h2 {
    font-size: 1.15rem;
    margin: .35rem 0;
    font-weight: 800;
}

.payment-qr-badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .75rem;
    font-weight: 700;
}

.payment-qr-subtitle {
    font-size: .85rem;
    color: #64748b;
    margin: 0;
}

.payment-qr-amount-box {
    margin: 1rem 0;
    padding: .85rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
    border: 1px solid rgba(7, 173, 173, .2);
}

.payment-qr-amount-box span {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
}

.payment-qr-amount-box strong {
    display: block;
    font-size: 1.65rem;
    color: #0d5660;
    margin-top: .15rem;
}

.payment-qr-image-wrap {
    padding: .5rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.payment-qr-image {
    width: auto;
    height: auto;
    max-width: min(360px, 100%);
    display: block;
    margin: 0 auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.payment-qr-reference {
    padding: .85rem;
    border-radius: 12px;
    background: #1a3a42;
    color: #fff;
    margin-bottom: 1rem;
}

.payment-qr-reference span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    opacity: .85;
}

.payment-qr-reference strong {
    display: block;
    font-size: 1.35rem;
    letter-spacing: .08em;
    margin: .25rem 0;
}

.payment-qr-reference small {
    display: block;
    font-size: .72rem;
    opacity: .9;
}

.payment-ref-copy {
    padding: .85rem;
    border-radius: 12px;
    background: #1a3a42;
    color: #fff;
    margin-bottom: 1rem;
}

.payment-ref-copy-label {
    font-size: .72rem;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: .45rem;
}

.payment-ref-copy-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.payment-ref-copy-value {
    font-size: 1.45rem;
    letter-spacing: .12em;
    font-weight: 700;
    color: #fff;
    background: transparent;
    padding: 0;
}

.payment-ref-copy-btn {
    border: 1px solid rgba(255,255,255,.35);
    background: #1ed0d5;
    color: #0f172a;
    border-radius: 999px;
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.payment-ref-copy-btn:hover { background: #11b5b0; }
.payment-ref-copy-btn.is-copied { background: #22c55e; color: #fff; }

.payment-ref-copy-hint,
.payment-ref-copy-note {
    font-size: .76rem;
    margin-top: .45rem;
    opacity: .95;
    line-height: 1.35;
}

.payment-ref-copy-note { opacity: .85; }

.payment-ref-copy--light {
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.payment-ref-copy--light .payment-ref-copy-value {
    color: #0f766e;
}

.payment-ref-copy--light .payment-ref-copy-btn {
    background: #1ed0d5;
    color: #0f172a;
    border-color: #1ed0d5;
}

.payment-qr-meta {
    text-align: left;
    font-size: .82rem;
    margin-bottom: .85rem;
}

.payment-qr-meta div { margin-bottom: .2rem; }

.payment-qr-instructions {
    font-size: .78rem;
    color: #475569;
    margin-bottom: .5rem;
}

.payment-qr-footer {
    font-size: .75rem;
    color: #64748b;
    margin: 0;
}

.btn-ticket.download.is-loading { opacity: .7; cursor: wait; }

.btn-ticket.success { background: #198754; color: #fff; border-color: transparent; }

.btn-ticket.muted { color: #666; }



.pos-ticket-preview .ticket-paper {

    box-shadow: none;

    border: 1px dashed #cbd5e1;

    border-radius: 10px;

    max-width: 320px;

    margin: 0 auto;

}



/* Página ticket standalone (layouts/ticket.php) */

body.thermal-print {

    margin: 0;

    padding: 0;

    background: #fff;

    font-family: 'Courier New', Courier, monospace;

    font-size: 12px;

    color: #000;

}



html.thermal-w-custom body.thermal-print,
html.thermal-w-custom body.thermal-print .ticket-shell {

    width: var(--thermal-paper-width, 302px);

    max-width: var(--thermal-paper-width, 302px);

    margin: 0 auto;

}



html.thermal-w-80 body.thermal-print,

html.thermal-w-80 body.thermal-print .ticket-shell {

    width: var(--thermal-paper-width, 302px);

    max-width: var(--thermal-paper-width, 302px);

    margin: 0 auto;

}



body.thermal-print .ticket-paper {

    width: 100%;

    padding: 8px 10px;

    box-shadow: none;

    border-radius: 0;

    border: none;

}



@media print {

    @page { margin: 0; }



    html, body {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #fff !important;

        font-family: 'Courier New', Courier, monospace !important;

        font-size: 11px !important;

        color: #000 !important;

    }

    html.thermal-w-custom,
    html.thermal-w-custom body,
    html.thermal-w-custom body.thermal-print,
    html.thermal-w-custom .ticket-shell,
    html.thermal-w-custom .ticket-paper {

        width: var(--thermal-paper-width, 302px) !important;

        max-width: var(--thermal-paper-width, 302px) !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }



    .no-print, .ticket-actions { display: none !important; }



    .ticket-shell, .ticket-paper {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 1mm 2mm !important;

        box-shadow: none !important;

        border: none !important;

        border-radius: 0 !important;

    }



    .ticket-header h1 { font-size: 13px !important; color: #000 !important; }

    .ticket-logo { max-height: 32px !important; }

    .ticket-meta, .ticket-info div, .ticket-table, .ticket-notes, .ticket-footer {

        font-size: 10px !important;

        color: #000 !important;

    }

    .ticket-table th { border-bottom: 1px dashed #000 !important; }

    .ticket-divider { border-top: 1px dashed #000 !important; }

    .ticket-total-row strong { color: #000 !important; font-size: 14px !important; }

    .ticket-payment-status {

        background: none !important;

        border: 1px dashed #000 !important;

        color: #000 !important;

        border-radius: 0 !important;

    }

}