/* ==========================================================================
   AMAFJUBA - Credencial digital de socio/a
   Estilos para el render de la credencial sobre el PNG de fondo
   ========================================================================== */

/* ── Variables (replicadas para que el archivo sea self-contained) ── */
.amaf-credencial-wrap {
    --amaf-beige: #FBF2E2;
    --amaf-verde-oscuro: #0C504E;
}

/* ── Contenedor general de la credencial completa ── */
.amaf-credencial-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    width: 100%;
}

/* ── Cada credencial (frente y dorso comparten base) ── */
.amaf-credencial {
    width: 100%;
    max-width: 550px;
    aspect-ratio: 1500 / 960;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    color: var(--amaf-beige);
    container-type: inline-size;
    overflow: hidden;
}

/* ── Imagen de fondo de la credencial ──
   Usamos <img> en lugar de background-image porque es más confiable
   para impresión y compatible con Dompdf (para el PDF futuro). */
.amaf-credencial-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* Los datos y el QR van encima del fondo */
.amaf-credencial-datos,
.amaf-credencial-qr {
    z-index: 2;
}

/* ── Bloque de datos dinámicos del frente ── */
/* Alineado horizontalmente con "CREDENCIAL DE SOCIO/A" del PNG */
.amaf-credencial-datos {
    position: absolute;
    top: 52%;
    left: 35%;
    right: 5%;
    bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2cqi;
}

.amaf-credencial-campo {
    display: flex;
    flex-direction: column;
    gap: 0.4cqi;
}

/* ── Etiqueta ("Nombre/s:", "Apellido/s:", "D.N.I.:") ── */
.amaf-credencial-etiqueta {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4cqi;
    font-weight: 600;
    color: var(--amaf-beige);
    line-height: 1.2;
    margin: 0;
}

/* ── Valor (el dato real: nombre, apellido, DNI) ── */
.amaf-credencial-valor {
    font-family: 'Montserrat', sans-serif;
    font-size: 4.2cqi;
    font-weight: 600;
    color: var(--amaf-beige);
    line-height: 1.1;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin: 0;
}

/* ── Reducción global de tamaños cuando algún valor es largo ──
   El JS aplica la clase al contenedor .amaf-credencial-datos según la
   longitud del valor más largo (nombre o apellido). Eso reduce los TRES
   valores juntos para mantener proporción visual entre ellos. */
.amaf-credencial-datos.amaf-largo .amaf-credencial-valor {
    font-size: 3.4cqi;
}

.amaf-credencial-datos.amaf-extra-largo .amaf-credencial-valor {
    font-size: 2.8cqi;
}

/* ── QR de verificación en el frente, abajo a la izquierda ── */
.amaf-credencial-qr {
    position: absolute;
    bottom: 6%;
    left: 5%;
    width: 22cqi;
    height: 22cqi;
    background-color: #FBF2E2;
    padding: 1.2cqi;
    border-radius: 0.8cqi;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.amaf-credencial-qr img {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;  /* mantiene los píxeles nítidos sin antialiasing */
}

/* ── Fallback para navegadores sin container queries ── */
@supports not (container-type: inline-size) {
    .amaf-credencial-etiqueta { font-size: 13px; }
    .amaf-credencial-valor    { font-size: 23px; }
    .amaf-credencial-datos    { gap: 16px; }
}

/* ── Mobile: la credencial ocupa todo el ancho del viewport ── */
@media (max-width: 600px) {
    .amaf-credencial {
        max-width: 100%;
    }
}

/* ==========================================================================
   FORMULARIO DE CONSULTA DE CREDENCIAL
   Estilos del shortcode [amaf_consulta_credencial]: layout, título,
   formulario DNI + botón, mensajes de error y CTA.
   ========================================================================== */

/* ── Contenedor general del shortcode ── */
.amaf-consulta-credencial {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
}

/* ── Bloque intro: título + descripción centrados, ancho limitado ── */
.amaf-consulta-intro {
    max-width: 50%;
    margin: 0 auto 30px auto;
    text-align: center;
}

.amaf-consulta-intro h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #07302F;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.amaf-consulta-intro p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #07302F;
    margin: 0;
    line-height: 1.4;
}

/* ── Formulario (label + input + botón) ── */
.amaf-form-consulta {
    max-width: 50%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.amaf-form-consulta label {
    flex: 1 0 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #07302F;
    margin-bottom: 2px;
}

/* Input: ocupa el espacio disponible, mismo gris que el form de adhesión */
.amaf-form-consulta #amaf-dni-input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 48px;
    padding: 0 16px;
    background-color: #E2E5E8;
    border-color: #114846;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #114846;
    box-sizing: border-box;
    outline: none;
}

.amaf-form-consulta #amaf-dni-input::placeholder {
    color: rgba(17, 72, 70, 0.65);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 1;
}

/* Botón consultar: misma altura que el input, al lado */
.amaf-consulta-credencial .amaf-form-consulta button.amaf-btn-consultar,
.amaf-consulta-credencial .amaf-form-consulta button[type="submit"].amaf-btn-consultar {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 28px;
    background-color: #0C504E;
    color: #D3B589;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.amaf-consulta-credencial .amaf-form-consulta button.amaf-btn-consultar:hover,
.amaf-consulta-credencial .amaf-form-consulta button[type="submit"].amaf-btn-consultar:hover {
    background-color: #D3B589;
    color: #0C504E;
}

/* ── Contenedor de resultado (donde se muestra credencial o error) ── */
.amaf-resultado-consulta {
    margin-top: 30px;
}

/* ==========================================================================
   ESTADOS DEL RESULTADO DE CONSULTA (loading y error)
   ========================================================================== */

.amaf-loading {
    text-align: center;
    padding: 30px;
    color: #0C504E;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
}

/* ── Cartel de error / mensaje informativo ── */
.amaf-error-credencial {
    max-width: 50%;
    margin: 30px auto 0 auto;
    background-color: #D3B589;
    padding: 30px;
    text-align: center;
    border: none;
    border-radius: 0;
}

.amaf-error-credencial .amaf-error-mensaje {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #07302F;
    text-transform: uppercase;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.amaf-error-credencial p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #07302F;
    margin: 10px 0;
}

/* ── Botón "Quiero asociarme" → mismo estilo que el botón consultar ── */
.amaf-error-credencial a.amaf-btn-asociarse {
    display: inline-block;
    margin-top: 15px;
    padding: 0 28px;
    height: 48px;
    line-height: 48px;
    background-color: #0C504E;
    color: #D3B589 !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.amaf-error-credencial a.amaf-btn-asociarse:hover {
    background-color: #FBF2E2;
    color: #0C504E !important;
}

/* ==========================================================================
   RESPONSIVE — TABLET Y MOBILE
   ========================================================================== */

/* Tablet: el form ocupa más ancho para que no se comprima */
@media (max-width: 1024px) {
    .amaf-consulta-intro,
    .amaf-form-consulta,
    .amaf-error-credencial {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .amaf-form-consulta #amaf-dni-input {
        flex: 1 0 100%;
        width: 100%;
    }

    .amaf-consulta-credencial .amaf-form-consulta button.amaf-btn-consultar,
    .amaf-consulta-credencial .amaf-form-consulta button[type="submit"].amaf-btn-consultar {
        flex: 0 0 auto;
        width: auto;
        align-self: flex-start;
    }

    .amaf-consulta-intro h2 {
        font-size: 26px;
    }

    .amaf-consulta-intro p {
        font-size: 16px;
    }

    .amaf-error-credencial .amaf-error-mensaje {
        font-size: 18px;
    }

    .amaf-error-credencial p {
        font-size: 16px;
    }
}

/* ==========================================================================
   BOTÓN DE ACCIÓN: DESCARGAR PDF + ESTADO DE CARGA
   
   El botón "Descargar credencial PDF" aparece arriba de la credencial,
   centrado horizontalmente. Al hacer click, el JS dispara la generación
   del archivo con Dompdf (que tarda unos segundos) y mientras tanto:
     - Muestra un spinner animado (CSS-only, sin librerías) + texto
       "Generando PDF..." debajo del botón
     - Desactiva visualmente el botón para evitar clicks múltiples
   
   El loader se controla desde el JS agregando/quitando la clase .activo
   sobre #amaf-loading-pdf, en lugar de manipular display directamente.
   ========================================================================== */

/* Contenedor del botón + loader: layout en columna, centrado */
.amaf-credencial-acciones {
    width: 100%;
    max-width: 750px;
    margin: 0 auto 15px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Botón de descarga: mismo estilo visual que el botón "Consultar" del form */
.amaf-btn-descargar-pdf {
    display: inline-block;
    padding: 0 28px;
    height: 48px;
    line-height: 48px;
    background-color: #0C504E;
    color: #D3B589 !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.amaf-btn-descargar-pdf:hover {
    background-color: #D3B589;
    color: #0C504E !important;
}

/* Botón desactivado durante la generación del PDF (evita clicks repetidos) */
.amaf-btn-descargar-pdf.amaf-btn-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    background-color: #07302F !important;
}

/* Loader del PDF: oculto por defecto, el JS lo activa con la clase .activo */
.amaf-loading-pdf {
    display: none;
    margin-top: 5px;
    text-align: center;
}

.amaf-loading-pdf.activo {
    display: block;
}

/* Texto al lado del spinner */
.amaf-loading-texto {
    color: #07302F;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* Spinner animado que gira al lado del texto */
.amaf-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(12, 80, 78, 0.2);
    border-radius: 50%;
    border-top-color: #0C504E;
    animation: amaf-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes amaf-spin {
    to { transform: rotate(360deg); }
}

/* ── Mobile: el contenedor del botón usa todo el ancho disponible ── */
@media (max-width: 800px) {
    .amaf-credencial-acciones {
        max-width: 100%;
    }
}

/* ==========================================================================
   IMPRESIÓN: ajustes específicos para impresión desde el navegador
   
   Cuando el usuario hace Cmd+P / Ctrl+P sobre la página de consulta,
   queremos que solo salga la credencial (frente + dorso) en una hoja A4,
   sin el resto de la interfaz del sitio.
   
   Decisiones de diseño:
   - Tamaño A4 vertical con márgenes de 10mm: define la base de cálculo
     uniforme entre Chrome, Safari y Edge (sin esto, cada navegador
     aplicaba sus propios defaults y la credencial salía en posiciones
     diferentes).
   - Credencial a 160mm de ancho: con aspect-ratio 1500/960 da unos 103mm
     de alto. Dos credenciales + 10mm de gap = 216mm, que entra cómodo
     en los 277mm útiles de un A4 con márgenes de 10mm.
   - Reset agresivo de contenedores de Elementor: los .e-con, .e-con-boxed
     y .e-con-inner traen padding y margin desde su configuración del
     editor que rompían el layout de impresión.
   - print-color-adjust: exact en todo el documento para que los textos
     beige no se conviertan a negro (comportamiento por defecto del
     navegador para ahorrar tinta).
   
   NOTA: cuando se implemente el PDF descargable con Dompdf (Fase 3),
   esa será la vía oficial para que los socios bajen e impriman su
   credencial. Esta hoja de impresión queda como fallback para usuarios
   que improvisen con Cmd+P directamente desde el navegador.
   ========================================================================== */

@media print {

    /* Configuración de página: A4 con márgenes mínimos */
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    /* Forzar impresión exacta de colores y fondos en todo el documento */
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Ocultar header, footer, widgets externos y estados de carga del PDF */
    header.elementor-location-header,
    footer.elementor-location-footer,
    .skip-link,
    #emanuel-chat-widget,
    #um_upload_single,
    #um_view_photo,
    #amaf-loading-pdf {          /* ← Ocultar el loader */
        display: none !important;
    }

    /* Ocultar el formulario de consulta y el botón de descarga PDF.
   Los títulos ahora viven en Elementor → clase amaf-no-print. */
    .amaf-consulta-intro,
    .amaf-form-consulta,
    .amaf-credencial-acciones,
    .amaf-no-print {          /* ícono + títulos (widgets de Elementor) */
        display: none !important;
    }

    /* Reset total de html y body */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Reset todos los contenedores de Elementor */
    .elementor,
    .elementor-element,
    .e-con,
    .e-con-inner,
    .e-con-boxed,
    .elementor-widget-shortcode,
    .elementor-shortcode,
    [data-elementor-type="wp-page"] {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    /* Contenedor del shortcode */
    .amaf-consulta-credencial,
    .amaf-resultado-consulta {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Wrap de la credencial: centrado en página, sin scroll */
    .amaf-credencial-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10mm !important;
        margin: 15mm 0 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Cada credencial: tamaño reducido para que entren las dos en A4 */
    .amaf-credencial {
        max-width: 160mm !important;
        width: 160mm !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin: 0 auto !important;
    }

    /* Forzar el color beige de los textos dinámicos */
    .amaf-credencial-etiqueta,
    .amaf-credencial-valor {
        color: #FBF2E2 !important;
    }
}

/* ── Separación con el footer ── */
.amaf-credencial-wrap {
    margin-bottom: 80px;
}

/* Seguro: evita que el widget de Elementor encoja bajo la altura real
   de la credencial, que se inyecta por AJAX después del layout inicial. */
.elementor-widget-shortcode:has(.amaf-consulta-credencial) {
    flex-shrink: 0;
}