/* C3 catalog: the legacy shell and the isolated catalog share these cards. */
#documentList {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  max-height: none;
  overflow: visible;
  padding: 16px;
}

#documentList .document-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #d8e3eb);
  border-radius: 16px;
  background: var(--surface, #fff);
}

#documentList .document-card > div:not(.document-file-cover) { min-width: 0; }
#documentList .document-card strong { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#documentList .document-card small { display: block; overflow-wrap: anywhere; font-size: 10px; line-height: 1.5; }
#documentList .document-card .document-badge { align-self: flex-start; }
#documentList .document-open-action { margin-top: auto; width: 100%; white-space: normal; }
#documentList .document-preview-reason { margin-top: auto; }

.document-file-cover {
  height: 68px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e1f3f7, #f0f5fc);
  border-radius: 10px;
  color: #00788a;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
}

.document-state-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.document-state-tabs button {
  min-height: 44px;
  border: 1px solid #c7d8e2;
  border-radius: 24px;
  padding: 10px 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.document-state-tabs button[aria-pressed="true"] { background: #007d8c; border-color: #007d8c; color: white; }
.document-state-tabs button span { margin-left: 6px; font-weight: 700; }

#documentCatalogSummary { padding-inline: 16px; }
#documentList .empty-list { grid-column: 1 / -1; }
#ingestDialog { width: min(860px, calc(100vw - 32px)); padding: 0; border: 1px solid #cfdee8; border-radius: 22px; }
#ingestForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 24px; }
#ingestForm .dialog-heading,
#ingestForm .dialog-note,
#ingestForm .dialog-actions,
#ingestForm label:has(textarea),
#ingestForm label:has(#ingestAllowedRoles),
#ingestForm label:has(#ingestFile) { grid-column: 1 / -1; }
#ingestForm .dialog-heading { padding-bottom: 16px; border-bottom: 1px solid #d8e3eb; }
#ingestForm .dialog-heading p { font-size: 13px; line-height: 1.6; max-width: 620px; }
#ingestForm label { margin: 0; gap: 8px; min-width: 0; }
#ingestForm input,
#ingestForm select,
#ingestForm textarea { width: 100%; box-sizing: border-box; }
#ingestForm .dialog-actions { padding-top: 16px; border-top: 1px solid #d8e3eb; }
body:has(dialog[open]) { overflow: clip; }

.document-catalog-surface { min-width: 0; }
.document-catalog-surface .document-catalog-heading { padding: 16px; }
.document-catalog-surface .document-catalog-heading p { margin-block: 6px 0; }
.document-catalog-surface .filter-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px; }
.document-catalog-surface .filter-row label { flex: 1 1 220px; min-width: 0; }
.document-catalog-surface .filter-row input,
.document-catalog-surface .filter-row select { box-sizing: border-box; width: 100%; min-height: 44px; }
.document-catalog-surface .table-pager { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 14px; }
.document-catalog-surface .table-pager button,
.document-catalog-surface .document-open-action { min-height: 44px; }
.document-catalog-surface .table-pager button:disabled { opacity: .48; cursor: not-allowed; }
.document-catalog-surface :is(button, input, select):focus-visible { outline: 3px solid #00a6b8; outline-offset: 2px; }
.document-catalog-denied { padding: 16px; }
.document-catalog-surface .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.document-catalog-surface .document-catalog-announcement:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0 16px 16px;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

[data-theme="dark"] #documentList .document-card { background: #152237; border-color: #3b5067; color: #e4edf7; }
[data-theme="dark"] .document-file-cover { background: linear-gradient(135deg, #17394b, #213348); color: #7be3ef; }
@media (max-width: 1399px) { #documentList { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1050px) { #documentList { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  #documentList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  #ingestForm { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}
@media (max-width: 420px) { #documentList { grid-template-columns: minmax(0, 1fr); } }

/* Selector de archivo: el input real queda accesible pero invisible, y la
   etiqueta que lo contiene hace de control. Clic en cualquier parte de la
   etiqueta abre el dialogo del sistema, que es el comportamiento nativo. */
.academy-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.academy-file-control{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border:1px solid var(--border,#a9ccd7);border-radius:10px;background:var(--panel,#fff);cursor:pointer}
.academy-file-button{flex:0 0 auto;padding:6px 14px;border-radius:8px;background:var(--surface-muted,#e8f2f5);border:1px solid var(--border,#a9ccd7);font:inherit;font-weight:600;white-space:nowrap}
.academy-file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit}
.academy-file-name.is-empty{opacity:.7}
.academy-file-control:hover .academy-file-button{background:var(--surface-hover,#d7eaf0)}
/* El foco vive en el input oculto, asi que el anillo se dibuja aqui: sin
   esto, navegar con el teclado no mostraria donde esta el cursor. */
.academy-file-input:focus-visible + .academy-file-control{outline:2px solid #00899c;outline-offset:2px}