/* Centro de Documentos. Solo tokens de app.css; estado = tinte + borde completo + pill, nunca barras laterales. */
.main:has(.dc-page) { min-width: 0; }
.dc-page .stack { grid-template-columns: minmax(0, 1fr); }
.dc-page .stack > * { min-width: 0; }
.dc-wrap { flex-wrap: wrap; gap: 8px; }
.dc-end { justify-content: flex-end; align-self: end; }
.dc-gap-b { margin-bottom: 12px; }
.dc-actions { text-align: right; white-space: nowrap; }
.dc-actions .btn + .btn { margin-left: 4px; }
.dc-pills { gap: 6px; }
.dc-break { overflow-wrap: anywhere; }
.dc-err { color: var(--bad); overflow-wrap: anywhere; }
.dc-inline { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; margin: 10px 0; }
.dc-filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.dc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.dc-kv { grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); margin: 12px 0; }
.dc-kv dd { overflow-wrap: anywhere; }
.dc-req, .dc-tpl { display: grid; gap: 10px; }
.dc-tpl-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-check { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-weight: 500; cursor: pointer; }
.dc-check input { width: 18px; height: 18px; accent-color: var(--sel); }
.dc-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Avisos: .notice (app.css); .dc-banner solo agrega el espaciado */
.dc-banner + .dc-banner { margin-top: 10px; }
section.card .dc-banner { margin-top: 12px; }

/* Visor de PDF: ancho de papel dentro del diálogo */
.dialog.dc-pdf-dlg { width: min(920px, calc(100vw - 24px)); padding: 16px; }
.dc-viewer-title { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.dc-frame { width: 100%; height: min(78vh, 1000px); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

/* Editor de plantillas */
.dc-editor { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: start; }
.dc-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; resize: vertical; min-height: 320px; }
.dc-vars { display: grid; gap: 6px; max-height: 560px; overflow-y: auto; }
.dc-chip { display: grid; gap: 2px; text-align: left; border: 1px solid var(--border); background: var(--bg); border-radius: 8px; padding: 7px 10px; cursor: pointer; color: var(--text); min-height: 38px; }
.dc-chip:hover:not(:disabled) { background: var(--surface-2); }
.dc-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dc-chip:disabled { cursor: default; }
.dc-chip code { font-size: 12.5px; overflow-wrap: anywhere; }

/* Membretes */
.dc-logo-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.dc-logo { width: 140px; height: 64px; border: 1px dashed var(--border-strong); border-radius: 8px; display: grid; place-items: center; background: var(--surface); overflow: hidden; }
.dc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 820px) {
  .dc-editor { grid-template-columns: minmax(0, 1fr); }
  .dc-vars { max-height: 260px; }
  table.resp td.dc-actions { text-align: left; white-space: normal; }
  .dc-actions .btn { margin: 4px 4px 0 0; }
  .dc-actions .btn + .btn { margin-left: 0; }
  .dc-inline { grid-auto-flow: row; }
  .dc-kv { grid-template-columns: minmax(0, 1fr); }
  .dc-frame { height: 65vh; }
}

/* Capa de vida · Mis documentos (2026-09-27): solicitud como portada en morado y sello de color por tipo de documento. */
.dc-docname { display: flex; gap: 12px; align-items: center; min-width: 0; }
/* Capa de vida · Centro de documentos: portada con burbujas por tipo (filtran), sello por tipo y cara de la persona. */
.dc-hero-center { margin-bottom: 14px; }
.dc-who { display: inline-flex; align-items: center; gap: 8px; }