* { box-sizing: border-box; }
#biblioteca-app { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 100%; margin: 0; padding: 10px; }
.biblioteca-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 15px; gap: 10px; }
.biblioteca-header h2 { margin: 0; font-size: 1.4em; color: #333; }
.biblioteca-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { padding: 10px 18px; border: none; border-radius: 6px; font-size: 0.95em; cursor: pointer; white-space: nowrap; }
.btn-primary { background: #3498db; color: #fff; }
.btn-isbn { background: #2ecc71; color: #fff; }
.btn-edit { background: #f39c12; color: #fff; padding: 6px 12px; font-size: 0.85em; }
.btn-delete { background: #e74c3c; color: #fff; padding: 6px 12px; font-size: 0.85em; }
.btn-sm { padding: 6px 12px; font-size: 0.85em; }
.btn-secondary { background: #95a5a6; color: #fff; }
.biblioteca-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.biblioteca-table th, .biblioteca-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #eee; }
.biblioteca-table th { background: #f5f5f5; font-weight: 600; white-space: nowrap; }
.biblioteca-table tr:hover { background: #fafafa; }
.biblioteca-cover { width: 50px; height: 70px; object-fit: cover; border-radius: 4px; background: #eee; display: block; }
.biblioteca-cover-placeholder { width: 50px; height: 70px; background: #eee; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.7em; text-align: center; }
.action-btns { display: flex; gap: 4px; }
.btn-detail { background: #9b59b6; color: #fff; padding: 6px 12px; font-size: 0.85em; }
.biblioteca-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.biblioteca-pagination button { padding: 6px 14px; border: 1px solid #ddd; background: #fff; border-radius: 4px; cursor: pointer; }
.biblioteca-pagination button.active { background: #3498db; color: #fff; border-color: #3498db; }
.biblioteca-pagination button:disabled { opacity: 0.5; cursor: default; }
#biblioteca-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#biblioteca-search { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; width: 100%; max-width: 300px; font-size: 0.9em; margin-bottom: 10px; }

#biblioteca-camera-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center; }
#biblioteca-camera-overlay video { width: 100%; height: 100%; object-fit: contain; }
#biblioteca-camera-overlay .camera-actions { position: fixed; bottom: 30px; left: 0; width: 100%; display: flex; gap: 20px; justify-content: center; z-index: 10001; }
#biblioteca-camera-overlay .btn-capture { background: #fff; color: #000; padding: 14px 40px; border: none; border-radius: 50px; font-size: 1.1em; font-weight: 600; cursor: pointer; }
#biblioteca-camera-overlay .btn-cancel-cam { background: rgba(255,255,255,0.2); color: #fff; padding: 14px 30px; border: none; border-radius: 50px; font-size: 1.1em; cursor: pointer; }
.biblioteca-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.biblioteca-modal-content { background: #fff; border-radius: 10px; width: 95%; max-width: 500px; max-height: 90vh; overflow-y: auto; border: 1px solid #ccc; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.biblioteca-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eee; }
.biblioteca-modal-header h3 { margin: 0; }
.biblioteca-modal-close { font-size: 1.8em; cursor: pointer; color: #999; line-height: 1; }
.biblioteca-modal-body { padding: 30px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.9em; color: #555; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.95em; }
.form-group textarea { min-height: 60px; resize: vertical; }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.form-actions { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.form-actions .btn { flex: 1; }
#scanner-container { width: 100%; max-width: 400px; margin: 10px auto; }
#scanner-container video { width: 100%; border-radius: 8px; }
.photo-box { text-align: center; padding: 10px; border: 2px dashed #ddd; border-radius: 8px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.photo-box img { max-width: 100%; max-height: 120px; border-radius: 4px; margin-bottom: 6px; }
.photo-box .btn-camera { background: #8e44ad; color: #fff; padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85em; margin-top: 4px; }
#isbn-result { margin-top: 10px; padding: 10px; border-radius: 6px; }
.isbn-loading { color: #3498db; text-align: center; padding: 20px; }
.isbn-success { background: #d5f5e3; color: #27ae60; padding: 10px; border-radius: 6px; text-align: center; }
.isbn-error { background: #fadbd8; color: #e74c3c; padding: 10px; border-radius: 6px; text-align: center; }
.photo-upload { display: flex; gap: 10px; flex-wrap: wrap; }
#biblioteca-categoria-area { margin-bottom: 8px; }
.categoria-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; position: relative; }
.categoria-row input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9em; }
.categoria-row .categoria-suggest { position: absolute; top: 100%; left: 0; right: 30px; background: #fff; border: 1px solid #ccc; border-radius: 6px; max-height: 160px; overflow-y: auto; z-index: 1000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.categoria-row .categoria-suggest div { padding: 8px 10px; cursor: pointer; font-size: 0.85em; border-bottom: 1px solid #eee; }
.categoria-row .categoria-suggest div:hover { background: #f0f7ff; }
.categoria-row .categoria-suggest .nuova { color: #27ae60; font-style: italic; }
.categoria-row .btn-plus { background: #3498db; color: #fff; border: none; border-radius: 6px; width: 32px; height: 32px; font-size: 1.2em; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.categoria-arrow { color: #999; margin: 0 4px; font-size: 0.8em; }
.categoria-tag { display: inline-block; background: #e8f4fd; color: #2c6b9e; padding: 4px 10px; border-radius: 16px; font-size: 0.82em; margin: 3px 4px 3px 0; cursor: default; }
.categoria-tag .remove { margin-left: 6px; cursor: pointer; font-weight: bold; color: #999; }
.categoria-tag .remove:hover { color: #e74c3c; }
.photo-upload .photo-box { flex: 1; min-width: 120px; text-align: center; }
.photo-upload .photo-box img { width: 100%; max-width: 150px; height: auto; border-radius: 6px; border: 1px solid #ddd; margin-bottom: 6px; }
.photo-upload .photo-box input[type="file"] { font-size: 0.85em; }
@media (max-width: 600px) {
    .biblioteca-header { flex-direction: column; align-items: stretch; }
    .biblioteca-actions { justify-content: center; }
    .biblioteca-table { font-size: 0.8em; }
    .biblioteca-table th, .biblioteca-table td { padding: 6px 4px; }
    .biblioteca-cover { width: 36px; height: 50px; }
    .biblioteca-cover-placeholder { width: 36px; height: 50px; font-size: 0.6em; }
    .action-btns { flex-direction: column; gap: 2px; }
    .btn-edit, .btn-delete, .btn-detail { padding: 4px 8px; font-size: 0.75em; }
}

.detail-card { max-width: 480px; margin: 0 auto; }
.detail-photos { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; }
.detail-photos img { max-width: 160px; max-height: 220px; border-radius: 6px; border: 1px solid #eee; object-fit: cover; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.detail-table tr { border-bottom: 1px solid #f0f0f0; }
.detail-table tr:last-child { border-bottom: none; }
.detail-label { padding: 8px 10px 8px 0; color: #888; font-weight: 600; white-space: nowrap; vertical-align: top; width: 1%; }
.detail-value { padding: 8px 0; color: #333; }
.categoria-link { color: #3498db; text-decoration: none; cursor: pointer; }
.categoria-link:hover { text-decoration: underline; }
.detail-card .empty { color: #bbb; font-style: italic; }
#biblioteca-filter-bar { padding: 8px 12px; background: #eaf7ff; border: 1px solid #b6d4fe; border-radius: 6px; font-size: 0.85em; margin-bottom: 10px; color: #2c6b9e; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-mgmt-list { max-height: 400px; overflow-y: auto; }
.cat-mgmt-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; font-size: 0.9em; }
.cat-mgmt-row:hover { background: #fafafa; }
.cat-mgmt-name { flex: 1; color: #333; }
.cat-mgmt-count { color: #999; font-size: 0.85em; margin-right: 8px; }
.cat-mgmt-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cat-mgmt-input { width: 100%; padding: 4px 8px; border: 1px solid #3498db; border-radius: 4px; font-size: 0.9em; }
@media (max-width: 600px) {
    .cat-mgmt-row { flex-wrap: wrap; gap: 4px; padding: 6px 4px; }
    .cat-mgmt-name { flex: 1 1 100%; order: -1; }
    .cat-mgmt-actions { width: 100%; justify-content: flex-end; }
}