/* ==========================================
   ESTILOS DE IMPRESIÓN / PDF - ESTILO MINIMALISTA TEXTO
   ========================================== */
@media print {

    /* Ocultar interfaz de usuario */
    .sidebar,
    .preview-header,
    .help-message,
    .signature-modal,
    .btn,
    .notificacion,
    div[class*="notificacion"] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Configuración básica de página - MARGEN 0 para ocultar encabezados/pies de navegador */
    @page {
        size: A4;
        margin: 0;
        /* Esto oculta la ruta del archivo y fecha automáticas */
    }

    body {
        background: white;
        margin: 0;
        padding: 2.5cm;
        /* Simulamos el margen aquí */
        font-family: Arial, Helvetica, sans-serif;
        /* Tipografía estándar limpia */
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Contenedores principales */
    .container {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .preview-section,
    .receipt-document,
    .receipt-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* 1. Header / Logo */
    .receipt-logo {
        margin-bottom: 40px;
        border: none;
        /* Quitar línea azul del logo */
        text-align: left;
    }

    .receipt-logo svg {
        width: 200px;
        /* Tamaño discreto */
        height: auto;
    }

    /* 2. Cuerpo del Recibo (Texto corrido) */
    .receipt-body {
        margin: 40px 0;
        font-size: 12pt;
        line-height: 1.6;
        text-align: justify;
    }

    .receipt-text {
        color: #000;
    }

    /* Reset total de campos editables para que parezcan texto normal */
    .editable-field {
        color: #000 !important;
        font-weight: normal !important;
        text-transform: none !important;
        border: none !important;
        background: transparent !important;
        padding: 0;
        display: inline;
    }

    /* 3. Sección TOTAL (Alineado a derecha, solo texto) */
    .receipt-total {
        background: transparent !important;
        color: #000 !important;
        padding: 0;
        margin: 20px 0;
        text-align: right;
        /* Alineado a la derecha como en la foto */
        border: none;
    }

    .total-label {
        font-size: 12pt;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 10px;
    }

    .total-amount {
        font-size: 12pt;
        font-weight: bold;
    }

    /* 4. Fecha y Firma (Alineado a derecha) */
    .receipt-footer {
        margin-top: 40px;
        text-align: right;
        /* Todo alineado a la derecha */
    }

    .receipt-date {
        font-size: 12pt;
        margin-bottom: 80px;
        /* Espacio antes de la firma */
        text-align: right;
    }

    .receipt-signature {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        /* Forzar alineación derecha */
        margin-top: 10px;
        width: 100%;
    }

    .signature-display {
        border: none !important;
        background: transparent !important;
        text-align: right !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        /* Quitar ancho fijo de styles.css */
        max-width: 100%;
        display: flex !important;
        justify-content: flex-end !important;
        /* Alinear imagen a la derecha */
    }

    .signature-display img {
        height: 60px !important;
        width: auto !important;
        display: block !important;
        margin: 0 !important;
        /* Quitar márgenes automáticos */
        margin-bottom: 15px !important;
        /* Espacio entre firma y nombre */
    }

    .signature-placeholder,
    .signature-line {
        display: none;
        /* No mostrar línea si queremos estilo limpio o gestionarlo distinto */
    }

    .signature-name-container {
        text-align: right !important;
        margin-top: 5px;
        width: 100%;
        display: block !important;
    }

    .signature-name {
        font-size: 11pt;
        font-weight: bold;
        text-transform: uppercase;
        color: #000;
        text-align: right !important;
    }


    .signature-label {
        font-size: 10pt;
        font-weight: bold;
        margin-top: 20px;
        /* Separación del nombre */
        text-transform: uppercase;
        text-align: right;
    }

    /* 5. Ticket Adjunto (Página nueva) */
    .attached-ticket {
        display: block !important;
        page-break-before: always;
        margin-top: 0;
        padding-top: 20px;
        border: none;
        background: white;
    }

    .attached-ticket .ticket-header {
        display: none !important;
    }

    .attached-ticket img {
        display: block;
        max-width: 100%;
        max-height: 95vh;
        /* Ocupar toda la página posible */
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }
}