/* Fuentes de Surfia: galería visual, revisión y autoridades del negocio. */
.source-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px }
.source-entry b { display: block; margin-top: 3px; font-size: 15px }
.source-entry p { margin: 5px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5 }
.source-entry .btn { flex: none }
.source-kicker { display: block; color: var(--brand); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase }
.source-back { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 12.5px; font-weight: 700; margin-bottom: 18px }
.source-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px }
.source-page-head h1 { margin: 4px 0 0 }
.source-page-head .sub-h { margin-bottom: 0 }
.source-page-head .btn { flex: none }
.source-tabs { width: max-content; margin-bottom: 18px }
.source-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

.source-library { max-width: 1010px }
.source-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px }
.source-library-head h2 { margin: 0; font-size: 16px }
.source-library-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 11.5px }
.source-library-tools { display: flex; align-items: center; gap: 8px }
.source-search { display: flex; align-items: center; min-width: 210px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card) }
.source-search::before { content: ''; width: 13px; height: 13px; margin-left: 12px; border: 1.8px solid var(--ink-3); border-radius: 50% }
.source-search::after { content: ''; width: 6px; height: 1.8px; margin: 9px 0 0 -3px; background: var(--ink-3); transform: rotate(45deg) }
.source-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.source-search input { min-width: 0; width: 100%; padding: 9px 11px 9px 7px; border: 0; background: transparent; color: var(--ink); font: 12px var(--font) }
.source-search input:focus { outline: 0 }
.source-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--aqua-soft) }
.source-views { display: flex; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card) }
.source-views button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; color: var(--ink-3); font-size: 9.5px; font-weight: 700 }
.source-views button[aria-pressed="true"] { background: var(--aqua-soft); color: var(--brand) }
.source-views button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px }
.source-views i { display: inline-block; width: 12px; height: 12px }
.source-views [data-source-view="small"] i { background: radial-gradient(circle, currentColor 1.5px, transparent 2px) 0 0/6px 6px }
.source-views [data-source-view="large"] i { border: 2px solid currentColor; border-radius: 2px }
.source-views [data-source-view="list"] i { background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px) }
.source-categories { display: flex; gap: 7px; margin: 14px 0; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin }
.source-categories button { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: 11px; font-weight: 650 }
.source-categories button span { color: var(--ink-3); font: 700 9px var(--mono) }
.source-categories button.on { border-color: var(--aqua-35); background: var(--aqua-soft); color: var(--brand) }
.source-categories button.on span { color: var(--brand) }
.source-categories button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

.source-browser { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; align-items: start }
.source-gallery { display: grid; align-content: start }
.view-small .source-gallery { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px }
.view-large .source-gallery { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px }
.view-list .source-gallery { grid-template-columns: minmax(0, 1fr); gap: 8px }
.source-tile { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); text-align: left; box-shadow: var(--shadow); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast) }
.source-tile:hover { transform: translateY(-1px); border-color: var(--aqua-35); box-shadow: var(--shadow-lift) }
.source-tile.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow) }
.source-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.source-tile[hidden] { display: none }
.source-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background-color: var(--card-2); background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 18px 18px }
.source-glyph { display: grid; place-items: center; width: 52px; height: 44px; border: 1px solid var(--aqua-35); border-radius: 10px; background: var(--aqua-soft); color: var(--brand); font: 700 11px var(--mono); letter-spacing: .05em }
.source-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card-2) }
.source-thumb-img:not([src]) { display: none }
.source-kind { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--brand); font: 700 8px var(--mono); letter-spacing: .05em; text-transform: uppercase }
.source-tile-body { display: block; padding: 10px }
.source-tile-body strong { display: block; overflow: hidden; color: var(--ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap }
.source-tile-meta { display: block; margin: 5px 0 8px; overflow: hidden; color: var(--ink-3); font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap }
.source-state { display: inline-flex; width: fit-content; border-radius: var(--r-pill); padding: 4px 7px; font: 700 8.5px var(--mono) }
.source-state.active { background: var(--ok-soft); color: var(--ok) }
.source-state.review, .source-state.pending { background: var(--warn-soft); color: var(--warn-ink) }
.source-state.error { background: var(--bad-soft); color: var(--bad) }
.source-state.paused { background: var(--card-2); color: var(--ink-3) }
.view-large .source-tile-body { padding: 13px }
.view-large .source-tile-body strong { font-size: 13px }
.view-large .source-glyph { width: 72px; height: 60px; font-size: 13px }
.view-list .source-tile { display: grid; grid-template-columns: 82px minmax(0, 1fr) }
.view-list .source-thumb { aspect-ratio: auto; min-height: 78px; border-right: 1px solid var(--line); border-bottom: 0 }
.view-list .source-kind { display: none }
.view-list .source-glyph { width: 42px; height: 36px; font-size: 9px }
.view-list .source-tile-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 14px; padding: 10px 13px }
.view-list .source-tile-body strong { font-size: 12px }
.view-list .source-tile-meta { margin: 0; grid-column: 1 }
.view-list .source-state { grid-column: 2; grid-row: 1 / span 2 }

.source-inspector { position: sticky; top: 16px; max-height: calc(100vh - 34px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow) }
.source-inspector-empty { display: grid; place-items: center; min-height: 280px; padding: 22px; text-align: center }
.source-inspector-empty b { margin-top: 13px; font-size: 14px }
.source-inspector-empty p { margin: 7px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.55 }
.source-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.source-inspector-close { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); font-size: 22px; line-height: 1 }
.source-inspector-close:hover { background: var(--card-2); color: var(--ink) }
.source-inspector-close:focus-visible { outline: 2px solid var(--brand) }
.source-file { margin: 7px 0 12px; color: var(--ink-3); font: 9px/1.5 var(--mono); overflow-wrap: anywhere }
.source-review-help { margin: 10px 0; padding: 10px 11px; border-left: 3px solid var(--brand); border-radius: 8px; background: var(--aqua-soft); color: var(--ink-2); font-size: 10.5px; line-height: 1.5 }
.source-field { display: block; margin-top: 11px }
.source-field > span { display: block; margin-bottom: 5px; color: var(--ink-2); font-size: 10.5px; font-weight: 700 }
.source-field input, .source-field textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); color: var(--ink); font: 11.5px/1.5 var(--font) }
.source-field textarea { resize: vertical }
.source-field input:focus, .source-field textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--aqua-soft) }
.source-title-field input { font-size: 13px; font-weight: 700 }
.source-toggle { display: flex; align-items: flex-start; gap: 7px; margin-top: 13px; color: var(--ink-2); font-size: 10.5px; font-weight: 700; line-height: 1.4 }
.source-toggle input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--brand) }
.source-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 13px }
.source-actions .btn { min-height: 36px; padding: 7px 10px; font-size: 10.5px }
.btn.danger { color: var(--bad); border-color: rgba(214, 69, 69, .35) }
.source-error { margin: 9px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-size: 11px; font-weight: 600 }
.source-filter-empty { min-height: 180px; padding: 42px 18px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center }
.source-filter-empty[hidden] { display: none }
.source-filter-empty p { margin: 6px 0 0; color: var(--ink-3); font-size: 11.5px }
.source-empty { max-width: 700px; padding: 32px 22px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--card); text-align: center }
.source-empty b { display: block; font-size: 16px }
.source-empty p { max-width: 520px; margin: 8px auto 16px; color: var(--ink-3); font-size: 13px; line-height: 1.6 }
.source-empty.error { border-color: rgba(214, 69, 69, .35) }

.source-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 900px }
.source-data-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 190px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card) }
.source-data-card strong { margin-top: 9px; color: var(--ink); font-size: 20px }
.source-data-card p { margin: 9px 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55 }
.source-data-card small { margin-top: auto; color: var(--ink-3); font: 10px/1.5 var(--mono) }
.source-data-card .btn { margin-top: 14px }
.source-data-card.connector { border-style: dashed; background: var(--card-2) }
.source-activity { max-width: 800px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card) }
.source-activity article { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line) }
.source-activity article:last-child { border-bottom: 0 }
.source-activity b { font-size: 12.5px }
.source-activity p { margin: 3px 0 0; color: var(--ink-3); font-size: 11px }
.source-activity time { color: var(--ink-3); font: 10px var(--mono); white-space: nowrap }
.source-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3) }
.source-dot.active { background: var(--ok) }
.source-dot.review, .source-dot.pending { background: var(--warn) }
.source-dot.error { background: var(--bad) }
.inv-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end }

@media (max-width: 900px) {
  .source-browser { grid-template-columns: minmax(0, 1fr) 310px }
  .source-views button span { display: none }
}
@media (max-width: 720px) {
  .source-entry, .source-page-head, .source-library-head { align-items: stretch; flex-direction: column }
  .source-entry .btn, .source-page-head .btn { width: 100% }
  .source-tabs { width: 100%; overflow-x: auto }
  .source-tabs button { flex: 1 }
  .source-library-tools { align-items: stretch }
  .source-search { flex: 1; min-width: 0 }
  .source-browser { grid-template-columns: minmax(0, 1fr) }
  .source-inspector { position: relative; top: auto; max-height: none }
  .source-data-grid { grid-template-columns: minmax(0, 1fr) }
  .inv-head-actions { width: 100% }
  .inv-head-actions .btn { flex: 1 }
}
@media (max-width: 430px) {
  .source-library-tools { flex-direction: column }
  .source-views button { flex: 1; justify-content: center }
  .source-views button span { display: inline }
  .view-small .source-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .view-large .source-gallery { grid-template-columns: minmax(0, 1fr) }
  .source-tabs button { min-width: 0; padding: 7px 6px; font-size: 11px }
  .source-tile-body { padding: 8px }
  .source-activity article { grid-template-columns: 8px minmax(0, 1fr) }
  .source-activity time { grid-column: 2; white-space: normal }
}

/* Identidad para tus documentos (Issue #399): ocupa el ancho del grid. */
.source-data-card.identidad { grid-column: 1 / -1; min-height: 0 }
.source-data-card.identidad h4 { margin: 18px 0 6px; font-size: 13px; color: var(--ink-2) }
.identidad-vista { display: flex; flex-direction: column; gap: 2px; margin-top: 8px }
.identidad-vista b { font-size: 16px; color: var(--ink) }
.identidad-vista span { font-size: 12px; color: var(--ink-3) }
.identidad-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; width: 100%; margin-top: 12px }
.identidad-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-3) }
.identidad-form label.ancho { grid-column: 1 / -1 }
.identidad-form input, .identidad-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); color: var(--ink); font: 13px var(--font, inherit) }
.identidad-acciones, .identidad-leer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center }
.identidad-leer select { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card-2); color: var(--ink); font-size: 13px; max-width: 100% }
.identidad-propuesta { width: 100%; margin-top: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: var(--card-2) }
.identidad-propuesta b { font-size: 12.5px }
.identidad-propuesta p { margin: 6px 0 }
.identidad-serie { display: flex; gap: 6px; align-items: center; margin: 6px 0 10px; font-size: 12px; color: var(--ink-2) }
.identidad-propuesta > div { display: flex; gap: 8px; flex-wrap: wrap }
@media (max-width: 720px) { .identidad-form { grid-template-columns: 1fr } }