/* Navegador de archivos (tools/document_browser): estilo compartido de index.php y document-browser.php. 2026-10-08.
   Colores de la plataforma (tokens de chzr.css); un tono por tipo de archivo. */
.db-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.db-head h1 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.db-head h1 .db-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
	background: linear-gradient(135deg, var(--chzr-brand, #000066), #5b2bb5); font-size: 1.1rem; }
.db-head p { margin: .25rem 0 0; color: var(--chzr-muted, #6b7280); font-size: .92rem; }
.db-head .db-links { display: flex; gap: .4rem; flex-wrap: wrap; }
.db-head .chzr_btn { min-width: 0; width: auto; padding: 5px 12px; font-size: 13px; line-height: 1.3; }

.db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.db-stat { border: 1px solid var(--chzr-line, #e5e7eb); border-radius: 12px; padding: .65rem .85rem; background: var(--chzr-surface, #fff); display: flex; align-items: center; gap: .7rem; }
.db-stat .db-stat-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--chzr-brand-050, #eef0ff); color: var(--chzr-brand, #000066); }
.db-stat b { display: block; font-size: 1.15rem; line-height: 1.1; }
.db-stat small { color: var(--chzr-muted, #6b7280); }

.db-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.db-chip { border: 1px solid var(--chzr-line, #d8dbe6); background: var(--chzr-surface, #fff); color: inherit; border-radius: 999px; padding: 3px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.db-chip:hover { background: var(--chzr-brand-050, #eef0ff); }
.db-chip.on { background: var(--chzr-brand, #000066); border-color: var(--chzr-brand, #000066); color: #fff; }
.db-chip .n { opacity: .7; font-size: 11px; }

.db-file { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.db-file .db-fi { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.db-file a { font-weight: 600; text-decoration: none; word-break: break-word; }
.db-file a:hover { text-decoration: underline; }
.db-t-pdf  { background: #fde8e8; color: #d93025; }
.db-t-doc  { background: #e6efff; color: #1a56db; }
.db-t-sheet{ background: #e3f6ea; color: #1e9e57; }
.db-t-img  { background: #f3e8ff; color: #8e44ad; }
.db-t-zip  { background: #fff3d6; color: #b7791f; }
.db-t-code { background: #e8f0f2; color: #3a5f6b; }
.db-t-other{ background: #eceef3; color: #5a6072; }

.db-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 2px 8px; }
.db-size { white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-date small { display: block; color: var(--chzr-muted, #6b7280); }
.db-actions { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: nowrap; }
.db-actions .db-act { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--chzr-line, #d8dbe6); background: var(--chzr-surface, #fff); color: var(--chzr-brand, #000066);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; padding: 0; }
.db-actions .db-act:hover { background: var(--chzr-brand-050, #eef0ff); }
.db-actions .db-act.ok { background: #e3f6ea; color: #1e9e57; border-color: #1e9e57; }

.db-table-wrap { max-width: 100%; }
#dbTable { width: 100% !important; }
#dbTable td { vertical-align: middle; }
#dbTable tbody tr:hover { background: var(--chzr-brand-050, #f4f5ff); }
@media (max-width: 600px) {
	.db-head h1 { font-size: 1.2rem; }
	.db-stats { grid-template-columns: 1fr 1fr; }
}