/* ====================================
   ESTILOS PARA IMPRESIÓN
   Copia exacta del estilo de credenciales
   ==================================== */

@media print {
    /* Configuración de página - OCUPA TODA LA HOJA */
    @page {
        margin: 0.2in;
        size: A4 landscape;
        background: white;
    }
    
    /* Ocultar elementos innecesarios en impresión */
    .top-header,
    .main-header,
    .floating-buttons,
    .authorization-btn,
    .credencial-actions,
    .modal-close-btn,
    body::before,
    body::after {
        display: none !important;
    }
    
    /* Configuración general de impresión */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    /* Mostrar overlay en impresión */
    .credencial-overlay {
        position: static !important;
        display: block !important;
        background: transparent !important;
        backdrop-filter: none !important;
        z-index: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Modal en impresión */
    .credencial-modal {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Container de credencial para impresión */
    .credencial-container {
        background: white !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 20px !important;
        max-width: none !important;
        width: 100% !important;
        page-break-inside: avoid;
        position: relative !important; /* Para permitir posicionamiento absoluto de hijos */
        min-height: calc(100vh - 1cm) !important; /* Altura mínima para ocupar toda la página */
    }
    
    /* Header de credencial */
    .credencial-header {
        margin-bottom: 20px !important;
        border-bottom: 2px solid #000000 !important;
        padding-bottom: 15px !important;
        text-align: center !important;
    }
    
    body .credencial-header .credencial-logo,
    .credencial-header .credencial-logo,
    #credencial-modal .credencial-logo,
    .credencial-logo {
        height: 100px !important; /* Aumentado mucho más para que sea notorio */
        width: auto !important;
        margin-bottom: 15px !important;
        filter: none !important; /* Quitar cualquier filtro verde */
        box-shadow: none !important; /* Quitar sombras verdes */
        border: none !important; /* Quitar cualquier borde */
        max-height: none !important;
        max-width: none !important;
    }
    
    .credencial-header h2 {
        color: #000000 !important;
        font-size: 18pt !important;
        margin: 10px 0 5px 0 !important;
    }
    
    .credencial-header h3 {
        color: black !important;
        font-size: 14pt !important;
        margin: 0 0 15px 0 !important;
    }
    
    /* Container de tarjetas para impresión - DISPOSICIÓN VERTICAL */
    body .credencial-modal .tarjetas-container,
    .credencial-modal .tarjetas-container,
    #credencial-modal .tarjetas-container,
    .tarjetas-container {
        display: flex !important;
        flex-direction: column !important; /* Asegurar disposición vertical */
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.2rem !important; /* Reducido aún más para menos separación */
        margin: 1rem 0 !important;
        flex-wrap: nowrap !important;
        page-break-inside: avoid !important;
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Asegurar orden específico de tarjetas - FRONTAL ARRIBA */
    body .credencial-modal .tarjeta-frente,
    .credencial-modal .tarjeta-frente,
    #credencial-modal .tarjeta-frente,
    .tarjeta-frente {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin-bottom: 0.1rem !important; /* Reducido aún más para mínima separación */
    }
    
    /* REVERSO ABAJO */
    body .credencial-modal .tarjeta-reverso,
    .credencial-modal .tarjeta-reverso,
    #credencial-modal .tarjeta-reverso,
    .tarjeta-reverso {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-top: 0.2rem !important; /* Reducido de 1rem a 0.2rem */
    }
    
    /* Tarjetas en impresión - TAMAÑO OPTIMIZADO PARA DISPOSICIÓN VERTICAL */
    .tarjeta {
        width: 36rem !important; /* Aumentado de 28rem a 36rem para mejor legibilidad */
        height: 22.5rem !important; /* Aumentado de 17.5rem a 22.5rem proporcionalmente */
        border-radius: 1rem !important;
        position: relative !important;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        transform: none !important; /* Sin rotación para mejor uso del espacio */
        transition: var(--transition) !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        margin-bottom: 0.5rem !important;
        flex-shrink: 0 !important;
        border: none !important; /* Quitamos cualquier borde */
    }
    
    /* Tarjeta frontal en impresión - TAMAÑO AUMENTADO */
    .tarjeta-frente {
        width: 40rem !important; /* Aumentado de 32rem a 40rem para mejor legibilidad */
        height: 25rem !important; /* Aumentado de 20rem a 25rem proporcionalmente */
        background-image: url('../images/tarjeta_1_prueba2.png') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative !important;
        border-radius: 1.2rem !important; /* Era 0.9375rem, ahora 1.2rem */
        overflow: hidden !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Tarjeta reverso en impresión - TAMAÑO AUMENTADO */
    .tarjeta-reverso {
        width: 40rem !important; /* Aumentado de 32rem a 40rem para mejor legibilidad */
        height: 25rem !important; /* Aumentado de 20rem a 25rem proporcionalmente */
        background-image: url('../images/fondo-atras-nuevo.png') !important;
        background-size: 105% !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        position: relative !important;
        border-radius: 1.2rem !important; /* Era 15px, ahora 1.2rem */
        overflow: hidden !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Datos de la tarjeta - POSICIÓN EXACTA IGUAL A PANTALLA */
    .tarjeta-datos {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
    }
    
    /* Valores específicos en tarjeta frontal - POSICIONES AJUSTADAS PARA TAMAÑO AUMENTADO */
    .valor-nombre {
        position: absolute !important;
        left: 35px !important; /* Aumentado de 28px a 35px (25% más) */
        top: 156px !important; /* Aumentado de 125px a 156px (25% más) */
        font-size: 21px !important; /* Aumentado de 17px a 21px (25% más para mejor legibilidad) */
        font-weight: bold !important;
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: 563px !important; /* Aumentado de 450px a 563px (25% más) */
        text-align: left !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        z-index: 2 !important;
    }
    
    .valor-afiliado {
        position: absolute !important;
        left: 35px !important; /* Aumentado de 28px a 35px (25% más) */
        top: 219px !important; /* Aumentado de 175px a 219px (25% más) */
        font-size: 21px !important; /* Aumentado de 17px a 21px (25% más para mejor legibilidad) */
        font-weight: bold !important;
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        width: 238px !important; /* Aumentado de 190px a 238px (25% más) */
        text-align: left !important;
        z-index: 2 !important;
    }
    
    .valor-vigencia {
        position: absolute !important;
        left: 35px !important; /* Aumentado de 28px a 35px (25% más) */
        top: 273px !important; /* Aumentado de 218px a 273px (25% más) */
        font-size: 16px !important; /* Aumentado de 13px a 16px (25% más para mejor legibilidad) */
        font-weight: bold !important;
        text-align: left !important;
        width: 160px !important; /* Aumentado de 128px a 160px (25% más) */
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        z-index: 2 !important;
    }
    
    /* Fecha de vencimiento separada - POSICIÓN AJUSTADA PARA TAMAÑO AUMENTADO */
    /* Valor de VIGENCIA (Estado) - a la derecha de los dos puntos de "VIGENCIA:" */
    .valor-vigencia {
        position: absolute;
        left: 33px; /* Aumentado de 26px a 33px (25% más) */
        top: 240px; /* Aumentado de 192px a 240px (25% más) */
        font-size: 18px; /* Aumentado de 14px a 18px (25% más para mejor legibilidad) */
        font-weight: bold;
        text-align: left;
        width: 160px; /* Aumentado de 128px a 160px (25% más) */
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* Estilos para los diferentes estados de vigencia - TAMAÑO DE FUENTE AUMENTADO */
    .estado-activo {
        color: #000 !important;
        background: #ffffff !important;
        border: 1px solid #0dc02e !important;
        padding: 3px 10px !important; /* Era 2px 8px, ahora 3px 10px */
        border-radius: 5px !important; /* Era 4px, ahora 5px */
        text-shadow: none !important;
        font-weight: bold !important;
        display: inline-block !important;
        text-align: left !important;
        font-size: 13px !important; /* Era 10px, ahora 13px (30% más) */
        text-transform: uppercase !important;
    }

    .estado-inactivo {
        background: #ffffff !important;
        border: 1px solid #b50505 !important;
        padding: 3px 10px !important; /* Era 2px 8px, ahora 3px 10px */
        border-radius: 5px !important; /* Era 4px, ahora 5px */
        text-shadow: none !important;
        font-weight: bold !important;
        display: inline-block !important;
        text-align: left !important;
        font-size: 13px !important; /* Era 10px, ahora 13px (30% más) */
        text-transform: uppercase !important;
    }

    .estado-suspendido {
        background: #ffffff !important;
        border: 1px solid #ed0606 !important;
        padding: 3px 10px !important; /* Era 2px 8px, ahora 3px 10px */
        border-radius: 5px !important; /* Era 4px, ahora 5px */
        text-shadow: none !important;
        font-weight: bold !important;
        display: inline-block !important;
        text-align: left !important;
        font-size: 13px !important; /* Era 10px, ahora 13px (30% más) */
        text-transform: uppercase !important;
    }

    .estado-vencido {
        background: #ffffff !important;
        border: 1px solid #ec0707 !important;
        padding: 3px 10px !important; /* Era 2px 8px, ahora 3px 10px */
        border-radius: 5px !important; /* Era 4px, ahora 5px */
        text-shadow: none !important;
        font-weight: bold !important;
        display: inline-block !important;
        text-align: left !important;
        font-size: 13px !important; /* Era 10px, ahora 13px (30% más) */
        text-transform: uppercase !important;
    }

    .estado-alta {
        color: #2e7d32 !important;
        background: #e8f5e8 !important;
        border: 1px solid #4caf50 !important;
        padding: 3px 10px !important; /* Era 2px 8px, ahora 3px 10px */
        border-radius: 5px !important; /* Era 4px, ahora 5px */
        font-weight: bold !important;
        font-size: 13px !important; /* Era 10px, ahora 13px (30% más) */
        text-transform: uppercase !important;
    }

    .estado-baja {
        color: #c62828 !important;
        background: #ffebee !important;
        border: 1px solid #f44336 !important;
        padding: 3px 10px !important; /* Era 2px 8px, ahora 3px 10px */
        border-radius: 5px !important; /* Era 4px, ahora 5px */
        font-weight: bold !important;
        font-size: 13px !important; /* Era 10px, ahora 13px (30% más) */
        text-transform: uppercase !important;
    }
    
    /* Body de tarjeta reverso - POSICIÓN OPTIMIZADA PARA IMPRESIÓN */
    .tarjeta-body {
        position: absolute !important;
        top: 82px !important;
        left: 22px !important;
        right: 22px !important;
        bottom: 22px !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 8px 18px 12px 3px !important;
        background: transparent !important;
    }
    
    /* Campos en tarjeta reverso - POSICIÓN OPTIMIZADA PARA IMPRESIÓN */
    .campo {
        top: 102px !important;
        left: 0px !important;
        margin-bottom: 0px !important;
        font-size: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-left: 0px !important;
    }
    
    .campo strong {
        font-size: 9px !important;
        font-weight: bold !important;
        color: #000 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }
    
    .campo span {
        font-size: 10px !important;
        font-weight: bold !important;
        line-height: 1.1 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        color: #000 !important;
        text-align: left !important;
        margin-left: 4px !important;
        margin-top: 1px !important;
    }
    
    /* Contacto de emergencia - OPTIMIZADO PARA IMPRESIÓN */
    .contacto-emergencia {
        margin-top: 6px !important;
        padding-top: 6px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.4) !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    
    .contacto-emergencia span {
        margin-top: 0px !important;
        margin-left: 0px !important;
        text-align: left !important;
        font-size: 9px !important;
    }
    
    .phone-emergency {
        color: #d32f2f !important;
        font-weight: bold !important;
        font-size: 9px !important;
    }
    
    /* Fecha de consulta - OPTIMIZADA PARA IMPRESIÓN */
    .fecha-consulta {
        margin-top: 3px !important;
        font-size: 9px !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    
    .fecha-consulta strong {
        font-size: 8px !important;
        color: #666 !important;
        min-width: 65px !important;
        flex-shrink: 0 !important;
    }
    
    .fecha-consulta span {
        font-size: 9px !important;
        color: #333 !important;
        flex: 1 !important;
    }
    
    /* QR Code en impresión - ESTILO EXACTO DE PANTALLA */
    .qr-code {
        text-align: center !important;
        margin-top: 15px !important;
    }
    
    .qr-box {
        width: 70px !important;
        height: 70px !important;
        border: 2px solid var(--primary-color) !important;
        border-radius: var(--border-radius) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        background: var(--glass-bg) !important;
        backdrop-filter: var(--glass-blur) !important;
        -webkit-backdrop-filter: var(--glass-blur) !important;
        box-shadow: var(--shadow-light) !important;
        transition: var(--transition) !important;
    }
    
    .qr-box span {
        font-weight: 900 !important;
        color: var(--primary-color) !important;
        font-size: 1rem !important;
        text-shadow: 0 1px 2px rgba(0, 229, 145, 0.1) !important;
    }
    
    .qr-box small {
        font-size: 0.65rem !important;
        color: var(--text-color) !important;
        opacity: 0.85 !important;
        margin-top: 2px !important;
        font-weight: 500 !important;
    }
    
    /* Footer de tarjeta - ESTILO EXACTO DE PANTALLA */
    .tarjeta-footer {
        text-align: center !important;
        margin-top: 8px !important;
        z-index: 2 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    
    .tarjeta-footer small {
        font-size: 0.75rem !important;
        opacity: 0.8 !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        color: #000 !important;
    }
    
    /* Información adicional en impresión - SUBIDA PARA MEJOR VISIBILIDAD */
    .credencial-info {
        position: absolute !important;
        bottom: 2cm !important; /* Subida de 0.5cm a 2cm para que se vea mejor */
        left: 0.5cm !important;
        right: 0.5cm !important;
        margin: 0 !important;
        padding: 15px !important; /* Aumentado padding para mejor legibilidad */
        background: #f5f5f5 !important;
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
        width: calc(100% - 1cm) !important; /* Ancho completo menos márgenes */
    }
    
    .credencial-info p {
        margin: 5px 0 !important; /* Agregado margen para separar párrafos */
        color: #000 !important;
        line-height: 1.5 !important; /* Aumentado para mejor legibilidad */
        font-size: 11pt !important; /* Aumentado de 10pt a 11pt */
    }
    
    /* ===== CONFIGURACIÓN FINAL DE IMPRESIÓN =====
       Los estilos anteriores copian EXACTAMENTE el diseño visual
       de las credenciales que se muestran en pantalla para
       garantizar que la impresión sea idéntica.
       ============================================= */
    
    /* Configuración de página - OPTIMIZADA PARA CREDENCIALES */
    @page {
        margin: 1cm !important;
        size: A4 landscape !important; /* Landscape para mejor aprovechamiento del espacio */
    }
    
    /* Forzar colores e imágenes de fondo en impresión */
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Configuración específica para las tarjetas y sus imágenes */
    .tarjeta-frente,
    .tarjeta-reverso,
    .tarjeta-frente::before,
    .tarjeta-reverso::before {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Eliminar efectos verdes - sin efectos visuales adicionales */
    
    /* Asegurar que no hay pseudo-elementos con efectos verdes */
    .tarjeta::before,
    .tarjeta::after,
    .tarjeta-frente::before,
    .tarjeta-frente::after,
    .tarjeta-reverso::before,
    .tarjeta-reverso::after,
    .credencial-logo::before,
    .credencial-logo::after,
    .credencial-header::before,
    .credencial-header::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }
    
    /* Evitar saltos de página dentro de elementos importantes */
    .tarjeta,
    .credencial-header,
    .credencial-info {
        page-break-inside: avoid !important;
    }
    
    /* Asegurar que el contenedor de tarjetas no se rompa */
    .tarjetas-container {
        page-break-inside: avoid !important;
    }

    /* REGLAS DE MÁXIMA PRIORIDAD PARA SOBRESCRIBIR ESTILOS INLINE DEL TEMPLATE */
    
    /* Logo más grande - sobrescribir el height: 30px del template */
    html body div.credencial-overlay div.credencial-modal div.credencial-container div.credencial-header img.credencial-logo,
    html body .credencial-overlay .credencial-modal .credencial-container .credencial-header .credencial-logo,
    body div div div div img.credencial-logo,
    html .credencial-logo {
        height: 100px !important;
        width: auto !important;
        max-height: none !important;
        max-width: none !important;
        filter: none !important;
        box-shadow: none !important;
        border: none !important;
        margin-bottom: 15px !important;
    }
    
    /* Container vertical - sobrescribir flex-direction: row del template */
    html body div.credencial-overlay div.credencial-modal div.credencial-container div.tarjetas-container,
    html body .credencial-overlay .credencial-modal .credencial-container .tarjetas-container,
    body div div div div.tarjetas-container,
    html .tarjetas-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0.1rem !important; /* Reducido aún más para mínima separación */
        flex-wrap: nowrap !important;
        margin: 0.5rem 0 !important;
    }

    /* ELIMINAR BARRAS LATERALES Y ELEMENTOS DE NAVEGACIÓN EN IMPRESIÓN */
    
    /* Ocultar barras de scroll y navegación del navegador */
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }
    
    /* Ocultar cualquier barra lateral, navegación o elementos UI del navegador */
    nav, 
    .nav, 
    .navigation,
    .sidebar, 
    .side-bar,
    .menu,
    .toolbar,
    .browser-toolbar,
    iframe[src*="print"],
    .print-sidebar,
    .browser-ui,
    .chrome-ui {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Asegurar que el body ocupe todo el ancho sin barras laterales */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Configuración específica para impresión sin barras */
    @page {
        margin: 0.5cm !important;
        size: A4 portrait !important; /* Cambio a portrait para mejor aprovechamiento vertical */
    }

    /* REGLAS ESPECÍFICAS PARA LAS IMÁGENES DE LAS TARJETAS */
    
    /* Hacer las imágenes de las tarjetas más grandes */
    .tarjeta img.tarjeta-imagen,
    .tarjeta-frente img.tarjeta-imagen,
    .tarjeta-reverso img.tarjeta-imagen,
    img.tarjeta-imagen {
        width: 500px !important; /* Mucho más grande para mejor legibilidad */
        height: 313px !important; /* Manteniendo proporción (500/313 ≈ 1.6) */
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important; /* Cambio a contain para que se vea completa */
    }
    
    /* Hacer los contenedores de tarjetas más grandes también */
    .tarjeta,
    .tarjeta-frente,
    .tarjeta-reverso {
        width: 500px !important;
        height: 313px !important;
        max-width: none !important;
        max-height: none !important;
    }

    /* SOBRESCRIBIR ESTILOS INLINE DEL TEMPLATE CON MÁXIMA ESPECIFICIDAD */
    
    /* Sobrescribir el width: 300px y height: 188px del template */
    html body div.credencial-overlay div.credencial-modal div.credencial-container div.tarjetas-container div.tarjeta,
    html body .credencial-overlay .credencial-modal .credencial-container .tarjetas-container .tarjeta,
    body div div div div div.tarjeta {
        width: 500px !important;
        height: 313px !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    /* Sobrescribir el tamaño de las imágenes dentro de las tarjetas */
    html body div.credencial-overlay div.credencial-modal div.credencial-container div.tarjetas-container div.tarjeta img.tarjeta-imagen,
    html body .credencial-overlay .credencial-modal .credencial-container .tarjetas-container .tarjeta img.tarjeta-imagen,
    body div div div div div.tarjeta img.tarjeta-imagen {
        width: 500px !important;
        height: 313px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}