/*
 * cati-local/detail.css -- detail-page card (.pagehead, .panel, .kv, .assist, .codeblock, .rail) and breadcrumb
 *
 * Local extension to the CATI visual system. The official package
 * (client/static/css/cati/*.css, delivered by design) covers the wizard and
 * login only; everything here follows the same --uvaq-* tokens but is NOT part
 * of that delivery. Each pattern is documented in
 * _uvaq-assets/sistema-visual-cati/extensiones-locales/. Loaded from base.html
 * right after cati.min.css (see the <link> list there for the order).
 */

/* --- Detail-page component (from the "Patrón: Tarjeta de Detalle CATI"
   design canvas, 2026-09-04): flat .panel sections separated by 1px rules
   instead of stacked Bootstrap cards (CATI: hierarchy by bands and rules,
   not rounded cards/shadows); .kv key/value rows; .assist for AI-suggested
   content (dashed gold rule = "the model said this"); .codeblock; and a
   .rail of actions on the right. Tokens only. --- */
.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--uvaq-space-5);
    align-items: start;
}

@media (max-width: 991.98px) {
    .detail-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Breadcrumb as the canvas .crumb: small, muted, current item strong.
   Bootstrap's <ol class="breadcrumb"> markup stays (it's the accessible one). */
.dashboard-content .breadcrumb,
.u-crumb.breadcrumb {
    margin-bottom: 18px;
    font-size: var(--uvaq-fs-help);
    --bs-breadcrumb-divider-color: var(--uvaq-border-strong);
}
.dashboard-content .breadcrumb-item a,
.u-crumb .breadcrumb-item a { color: var(--uvaq-text-secondary); text-decoration: none; }
.dashboard-content .breadcrumb-item a:hover,
.u-crumb .breadcrumb-item a:hover { color: var(--uvaq-action); }
.dashboard-content .breadcrumb-item.active,
.u-crumb .breadcrumb-item.active { color: var(--uvaq-text); font-weight: var(--uvaq-fw-semi); }

.mono { font-family: var(--uvaq-font-mono); font-variant-numeric: tabular-nums; }

.pagehead {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--uvaq-space-4);
    margin-bottom: var(--uvaq-space-5);
}
.pagehead h1 {
    margin: 0;
    font-size: 1.5rem; line-height: var(--uvaq-lh-tight);
    font-weight: var(--uvaq-fw-bold); letter-spacing: -0.01em;
}
.pagehead__meta {
    margin-top: var(--uvaq-space-1);
    font-size: var(--uvaq-fs-help); color: var(--uvaq-text-secondary);
}

.panel {
    border-top: 1px solid var(--uvaq-border);
    padding-top: 18px;
    margin-top: 26px;
}
.panel:first-child { margin-top: 0; }
.panel__head {
    display: flex; align-items: center; gap: var(--uvaq-space-2);
    margin-bottom: var(--uvaq-space-3);
    color: var(--uvaq-text-secondary);
    font-size: var(--uvaq-fs-micro); font-weight: var(--uvaq-fw-bold);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.panel__head i { color: var(--uvaq-text-muted); }
.panel__head .spacer { flex: 1; }
.panel__head a { font-size: var(--uvaq-fs-micro); font-weight: var(--uvaq-fw-bold); text-transform: none; letter-spacing: 0.04em; }
.panel__head--danger { color: var(--uvaq-danger); }
.panel__head--danger i { color: var(--uvaq-danger); }

.kv { border-top: 1px solid var(--uvaq-border); }
.kv__row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; padding: 11px 0;
    border-bottom: 1px solid var(--uvaq-border);
    font-size: var(--uvaq-fs-label);
}
.kv__key { flex: 0 0 auto; color: var(--uvaq-text-secondary); white-space: nowrap; }
.kv__val { font-weight: var(--uvaq-fw-semi); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.kv__val--muted { font-weight: var(--uvaq-fw-regular); color: var(--uvaq-text-muted); font-style: italic; }
/* Nested payloads: key on its own line, JSON block below at full width. */
.kv__row--block { flex-direction: column; gap: var(--uvaq-space-2); }
.kv__row--block .codeblock { width: 100%; }
@media (max-width: 479.98px) {
    .kv__row { flex-direction: column; gap: 2px; }
    .kv__val { text-align: left; }
}

.assist {
    border-left: 3px dashed var(--uvaq-assist-rule);
    background-color: var(--uvaq-assist-bg);
    padding: var(--uvaq-space-4);
    border-radius: 0 var(--uvaq-radius-md) var(--uvaq-radius-md) 0;
}
.assist__head {
    display: flex; align-items: center; gap: var(--uvaq-space-2);
    margin-bottom: 10px;
    color: var(--uvaq-assist-text);
    font-size: var(--uvaq-fs-label); font-weight: var(--uvaq-fw-bold);
}
.assist .kv { border-top-color: rgba(138, 97, 0, 0.25); }
.assist .kv__row { border-bottom-color: rgba(138, 97, 0, 0.2); }

.tag-accepted {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px var(--uvaq-space-2);
    border-radius: var(--uvaq-radius-sm);
    background-color: var(--uvaq-status-resolved-bg); color: var(--uvaq-status-resolved-text);
    font-size: var(--uvaq-fs-micro); font-weight: var(--uvaq-fw-bold);
}

.codeblock {
    background-color: var(--uvaq-surface-inset);
    border: 1px solid var(--uvaq-border);
    border-radius: var(--uvaq-radius-md);
    padding: var(--uvaq-space-4);
    font-family: var(--uvaq-font-mono);
    font-size: var(--uvaq-fs-help); line-height: 1.6;
    color: var(--uvaq-text-secondary);
    overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
    margin: 0;
}
.codeblock--danger {
    background-color: var(--uvaq-danger-bg);
    border-color: var(--uvaq-danger-border);
    color: var(--uvaq-danger);
}

.rail {
    border: 1px solid var(--uvaq-border);
    border-radius: var(--uvaq-radius-md);
    background-color: var(--uvaq-surface-raised);
    overflow: hidden;
}
.rail__head {
    padding: 14px var(--uvaq-space-4);
    background-color: var(--uvaq-surface-inset);
    border-bottom: 1px solid var(--uvaq-border);
    color: var(--uvaq-text-secondary);
    font-size: var(--uvaq-fs-micro); font-weight: var(--uvaq-fw-bold);
    letter-spacing: 0.06em; text-transform: uppercase;
}
.rail__body { padding: var(--uvaq-space-4); display: flex; flex-direction: column; gap: 10px; }
.rail__body .u-btn { width: 100%; justify-content: flex-start; }
.rail__note { margin: 0; font-size: var(--uvaq-fs-help); color: var(--uvaq-text-muted); font-style: italic; }

/* Bootstrap's default <code> color (#d63384, pink/magenta) reads as an
   alert even though it's plain typography for keys/IDs across the
   dashboard - override to the UVAQ action color instead. */
.dashboard-content code {
    color: var(--uvaq-action);
}