@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
}

.recibo {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ced4da;
    padding: 2rem;
}

.audit-info {
    font-size: .8rem;
    color: #6c757d;
}

/* ---------- Tableros ---------- */
.donut {
    max-width: 220px;
    width: 100%;
    transform: none;
}
.donut circle { transition: opacity .15s; }
.donut circle:hover { opacity: .8; }
.donut-numero { font-size: 8px; font-weight: 700; fill: #212529; }
.donut-texto { font-size: 2.6px; fill: #6c757d; }

.barras { width: 100%; max-height: 300px; }
.barras .rejilla { stroke: #dee2e6; stroke-width: 1; }
.barras .eje { font-size: 11px; fill: #6c757d; }
.barras .valor-barra { font-size: 15px; font-weight: 700; fill: #212529; }
.barras .etiqueta-barra { font-size: 12px; fill: #212529; }
.barras .monto-barra { font-size: 11px; fill: #6c757d; }

.leyenda-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: .5rem;
    vertical-align: middle;
}

.mapa-piso { margin-bottom: .9rem; }
.mapa-piso-titulo { font-weight: 600; font-size: .85rem; color: #6c757d; margin-bottom: .25rem; }
.mapa-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: .4rem;
}

.cuarto-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: .25rem;
    border: 2px solid transparent;
    border-radius: .4rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    transition: transform .1s;
}
.cuarto-tile small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .65rem;
    font-weight: 400;
}
.cuarto-tile:hover { transform: scale(1.06); border-color: #212529; color: #fff; }
.cuarto-tile:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }

.estado-verde { background: #198754; }
.estado-amarillo { background: #ffc107; color: #212529; }
.estado-amarillo:hover { color: #212529; }
.estado-rojo { background: #dc3545; }
.estado-gris { background: #adb5bd; color: #212529; }
.estado-gris:hover { color: #212529; }
.estado-mantenimiento {
    background: repeating-linear-gradient(45deg, #adb5bd, #adb5bd 6px, #ced4da 6px, #ced4da 12px);
    color: #212529;
}
.estado-mantenimiento:hover { color: #212529; }