/* ==========================================================================
   BINGU - Cartones de imagenes: Clasico
   ==========================================================================
   Blanco y negro, igual que el PDF vectorial (card-vector-pdf.js, THEMES.clasico):
   cabecera gris clara, rejilla gris, casillas vacias en gris y nombres en negrita.
   ========================================================================== */

.cartones-grid.image-cards-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
    margin-inline: auto;
}

.bingo-card.image-bingo-card.image-card-theme-clasico {
    --image-card-ink: #000000;
    --image-card-muted: #666666;
    --image-card-line: #bdbdbd;
    --image-card-empty: #efefef;
    --image-card-head: #f5f5f5;
    --image-card-mark: #e53935;
    background: #ffffff;
    border: 2px solid #000000;
}

.image-card-theme-clasico .image-card-header {
    --card-header-padding-y: 8px;
    --card-logo-height: 40px;
    justify-content: center;
    gap: 14px;
    padding: var(--card-header-padding-y) 16px;
    background: var(--image-card-head);
    border-bottom: 1px solid var(--image-card-line);
}

.image-card-theme-clasico .image-card-title {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.image-card-theme-clasico .image-card-title-main {
    color: var(--image-card-ink);
    font-size: clamp(16px, 2.2vw, 24px);
    font-weight: 800;
    line-height: 1;
}

.image-card-theme-clasico .image-card-title-sub {
    color: var(--image-card-muted);
    font-size: clamp(10px, 1.3vw, 13px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.image-card-theme-clasico .bingo-grid-image {
    display: grid;
    gap: 0;
    background: #ffffff;
}

.image-card-theme-clasico .bingo-grid-image-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.image-card-theme-clasico .image-bingo-card-cell {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 4px;
    aspect-ratio: 49.5 / 30.5;
    padding: 6px 4px 5px;
    background: #ffffff;
    border-right: 1px solid var(--image-card-line);
    border-bottom: 1px solid var(--image-card-line);
    color: var(--image-card-ink);
}

/* 36 imágenes: 3 filas, casillas más altas (como en el PDF) */
.image-card-theme-clasico[data-image-format="36"] .image-bingo-card-cell {
    aspect-ratio: 49.5 / 40.7;
}

.image-card-theme-clasico .bingo-grid-image-4 .image-bingo-card-cell:nth-child(4n) {
    border-right: 0;
}

.image-card-theme-clasico .image-bingo-card-cell.empty {
    background: var(--image-card-empty);
}

.image-card-theme-clasico .image-bingo-card-cell img {
    align-self: center;
    justify-self: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    pointer-events: none;
}

.image-card-theme-clasico .image-bingo-card-cell span {
    display: block;
    min-width: 0;
    color: var(--image-card-ink);
    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-card-theme-clasico .image-bingo-card-cell.marked::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 3px solid var(--image-card-mark);
    border-radius: 50%;
    pointer-events: none;
}

.image-card-theme-clasico .image-card-footer {
    justify-content: center;
    padding: 6px 12px;
    background: var(--image-card-head);
    border-top: 1px solid var(--image-card-line);
    color: var(--image-card-muted);
}

.image-card-theme-clasico .image-card-footer .card-serial {
    color: #444444;
    font-weight: 700;
}

@media (max-width: 720px) {
    .image-card-theme-clasico .image-bingo-card-cell {
        padding: 4px 3px;
    }
}