/* ============================================================
   CARTEL COMERCIO — Compras Tres Cantos
   Subtarea 4.6 · Versión 1.1 · Mayo 2026
   Usa variables de base.css

   Dos contextos:
   1. Vista en pantalla: el usuario ve el cartel + boton de descarga.
   2. Generacion del PDF: html2pdf renderiza el div #cartel-pdf
      en formato A5 vertical (148 x 210 mm).

   CAMBIOS v1.1 (refactor pre-produccion):
   - Eliminado bloque "Ocultar Astra/WP" (movido a base.css, donde
     se aplica automaticamente al estar dentro de .cartel-wrap)
   ============================================================ */

/* ── Layout general de la pagina ─────────────────────────────
   Centrado en pantalla con un ancho comodo para ver el cartel
   y el boton de descarga. ── */
.cartel-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--espacio-lg) var(--espacio-md);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cartel-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    text-align: center;
    padding: var(--espacio-lg) 0;
}

/* ── Acciones (boton de descarga) ───────────────────────────
   Solo visibles en pantalla. NO se incluyen en el PDF porque
   html2pdf solo renderiza el div #cartel-pdf. ── */
.cartel-acciones {
    text-align: center;
    margin-bottom: var(--espacio-xl);
    width: 100%;
}

/* ============================================================
   CARTEL IMPRIMIBLE — A5 vertical (148 x 210 mm)
   Este es el div #cartel-pdf que html2pdf convierte a PDF.
   Las dimensiones en mm garantizan que ocupa exactamente A5.
   ============================================================ */

.cartel-pdf {
    /* Tamano A5 exacto */
    width: 148mm;
    height: 210mm;

    /* Fondo blanco puro: maxima legibilidad del QR */
    background-color: #FFFFFF;

    /* Sin sombras, sin bordes: el cartel se imprime limpio */
    margin: 0 auto;
    padding: 12mm 10mm;

    /* Layout vertical: 4 bloques separados */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    /* Tipografia consistente con el resto del sistema */
    font-family: var(--fuente);
    color: var(--texto-principal);

    /* Sombra solo en pantalla (visible mientras lo ves antes de descargar).
       html2pdf no captura box-shadow, asi que no afecta al PDF. */
    box-shadow: var(--sombra-fuerte);
}

/* ── Bloque 1: cabecera (logo + nombre del club) ───────────── */
.cartel-cabecera {
    text-align: center;
    width: 100%;
}

.cartel-logo {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--espacio-xs);
    border-radius: 8px;
    display: block;
}

.cartel-club {
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-secundario);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

/* ── Bloque 2: nombre + categoria del comercio ──────────────
   Centrado, separado tanto de la cabecera como del QR. ── */
.cartel-comercio {
    text-align: center;
    width: 100%;
}

.cartel-comercio-nombre {
    font-size: 22px;
    font-weight: 700;
    color: var(--texto-principal);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.cartel-comercio-categoria {
    font-size: 13px;
    font-weight: 400;
    color: var(--texto-secundario);
    margin: 0;
    line-height: 1.2;
}

/* ── Bloque 3: ZONA DEL QR (aislada) ─────────────────────────
   Reglas criticas:
   - Padding amplio alrededor del QR (zona blanca = "quiet zone").
   - Sin bordes, sin marcos, sin texto adyacente.
   - Esto evita que las camaras detecten texto cercano y activen
     el modo "escanear documento" en lugar de leer el QR. ── */
.cartel-qr-zona {
    padding: 12mm 0;
    text-align: center;
    width: 100%;
    background-color: #FFFFFF;
}

.cartel-qr {
    width: 70mm;
    height: 70mm;
    display: block;
    margin: 0 auto;
    /* Sin bordes ni sombras: solo el QR puro sobre fondo blanco */
}

/* ── Bloque 4: instruccion de uso ───────────────────────────
   Texto pequeno, centrado, claramente separado del QR por el
   padding del bloque anterior. Sin elementos visuales que
   "rompan" la separacion con el QR. ── */
.cartel-instruccion {
    text-align: center;
    width: 100%;
    padding-top: var(--espacio-md);
    border-top: 1px solid var(--borde-color);
}

.cartel-instruccion p {
    font-size: 11px;
    font-weight: 400;
    color: var(--texto-secundario);
    margin: 0;
    line-height: 1.4;
}

/* ============================================================
   RESPONSIVE
   El cartel mantiene su tamano A5 fijo. En pantallas pequenas
   se permite scroll horizontal si no cabe.
   ============================================================ */

@media (max-width: 600px) {
    .cartel-wrap {
        padding: var(--espacio-md) var(--espacio-sm);
    }

    /* Permitir scroll si el cartel A5 no entra en pantallas estrechas */
    #estado-cartel {
        overflow-x: auto;
    }
}