/* ── DNS Reporte — derivado del dashboard OpenRouter Traces ────────────── */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --canvas: hsl(220, 20%, 97%);
    --panel: hsl(0, 0%, 100%);
    --elevated: hsl(220, 14%, 96%);
    --inset: hsl(220, 16%, 94%);

    --ink: hsl(220, 25%, 12%);
    --secondary: hsl(220, 12%, 40%);
    --muted: hsl(220, 10%, 55%);
    --faint: hsl(220, 8%, 70%);

    --border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-strong: rgba(0, 0, 0, 0.14);

    --signal: hsl(165, 70%, 36%);
    --signal-soft: hsl(165, 50%, 94%);
    --signal-text: hsl(165, 65%, 28%);
    --signal-border: hsla(165, 70%, 36%, 0.2);

    --purple-soft: hsl(270, 40%, 95%);
    --purple-text: hsl(270, 45%, 50%);
    --purple-border: hsla(270, 50%, 55%, 0.2);

    /* Identidad de API key — pasteles: acá el color dice CUÁL key, no qué estado.
       Por eso esquivan las zonas que ya significan algo: rojo (0°), ámbar (28-35°)
       y el verde de señal (165°). La luz alterna ~93/95/96% para que dos tonos
       vecinos (ej. 210° y 232°) se distingan también por valor, no solo por matiz.
       Los asigna key_palette() en app.py, por orden de aparición. */
    --k0-soft: hsl(90, 45%, 93%);   --k0-text: hsl(90, 42%, 30%);   --k0-border: hsla(90, 40%, 35%, 0.2);
    --k1-soft: hsl(122, 38%, 95%);  --k1-text: hsl(122, 38%, 30%);  --k1-border: hsla(122, 35%, 35%, 0.2);
    --k2-soft: hsl(188, 52%, 93%);  --k2-text: hsl(188, 60%, 28%);  --k2-border: hsla(188, 50%, 35%, 0.2);
    --k3-soft: hsl(210, 58%, 95%);  --k3-text: hsl(210, 60%, 40%);  --k3-border: hsla(210, 55%, 45%, 0.2);
    --k4-soft: hsl(232, 48%, 96%);  --k4-text: hsl(232, 48%, 48%);  --k4-border: hsla(232, 45%, 52%, 0.2);
    --k5-soft: hsl(255, 45%, 95%);  --k5-text: hsl(255, 45%, 52%);  --k5-border: hsla(255, 45%, 55%, 0.2);
    --k6-soft: hsl(276, 42%, 94%);  --k6-text: hsl(276, 42%, 48%);  --k6-border: hsla(276, 45%, 52%, 0.2);
    --k7-soft: hsl(298, 40%, 95%);  --k7-text: hsl(298, 40%, 42%);  --k7-border: hsla(298, 40%, 46%, 0.2);
    --k8-soft: hsl(320, 50%, 95%);  --k8-text: hsl(320, 48%, 42%);  --k8-border: hsla(320, 48%, 46%, 0.2);
    --k9-soft: hsl(342, 55%, 96%);  --k9-text: hsl(342, 52%, 44%);  --k9-border: hsla(342, 50%, 48%, 0.2);

    --red-soft: hsl(0, 70%, 96%);
    --red-text: hsl(0, 70%, 42%);
    --red-border: hsla(0, 70%, 42%, 0.2);

    --amber-soft: hsl(35, 90%, 94%);
    --amber-text: hsl(28, 75%, 38%);
    --amber-border: hsla(28, 75%, 38%, 0.22);

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;

    --font: 'Outfit', sans-serif;
    --mono: 'JetBrains Mono', monospace;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    background: var(--canvas);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.5;
}

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

.trace-line {
    height: 2px;
    background: linear-gradient(
        90deg, transparent 5%,
        hsl(165, 50%, 70%) 30%,
        var(--signal) 50%,
        hsl(165, 50%, 70%) 70%,
        transparent 95%
    );
    opacity: 0.6;
}

.shell {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-6) var(--sp-12);
}

/* ── Header/nav ────────────────────────────────────────────────────────── */

.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
    padding-bottom: var(--sp-5);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}

.brand .name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.brand .name::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    margin-right: var(--sp-2);
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px var(--signal-soft);
}

.brand .sub {
    font-size: 0.75rem;
    color: var(--muted);
    font-family: var(--mono);
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.nav-links a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--secondary);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    transition: all 140ms ease;
    letter-spacing: -0.005em;
}

.nav-links a:hover {
    color: var(--ink);
    background: var(--elevated);
    text-decoration: none;
}

.nav-links a.active {
    color: var(--ink);
    background: var(--signal-soft);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
}

.user-chip a {
    color: var(--secondary);
    border: 1px solid var(--border);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-md);
    transition: all 140ms ease;
}

.user-chip a:hover {
    color: var(--ink);
    border-color: var(--border-strong);
    text-decoration: none;
}

/* ── Page header ───────────────────────────────────────────────────────── */

.page-head {
    margin-bottom: var(--sp-6);
}

.page-head h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.page-head .sub {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: var(--sp-1);
}

/* ── Metrics ───────────────────────────────────────────────────────────── */

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.metric {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    position: relative;
    overflow: hidden;
}

.metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--sp-5);
    right: var(--sp-5);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--signal-border), transparent);
}

.metric-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-2);
}

.metric-value {
    font-family: var(--mono);
    font-size: 1.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.metric-foot {
    margin-top: var(--sp-3);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.01em;
}

/* ── Grid de paneles ───────────────────────────────────────────────────── */

.grid {
    display: grid;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.card-head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-head h2 {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.card-head .hint {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-body { padding: var(--sp-2); }
.card-body.flat { padding: 0; }

/* ── Filters ───────────────────────────────────────────────────────────── */

.filters {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 160px;
}

.filter-group.grow { flex: 1; }

.filter-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-input,
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--mono);
    font-size: 0.8125rem;
    padding: var(--sp-2) var(--sp-3);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--ink);
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
    min-width: 0;
    width: 100%;
}

.filter-select {
    padding-right: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

.filter-input:hover,
.filter-select:hover {
    border-color: var(--border-strong);
}

.filter-input:focus,
.filter-select:focus {
    border-color: var(--signal);
    box-shadow: 0 0 0 2px hsla(165, 70%, 36%, 0.12);
}

.filter-actions {
    display: flex;
    gap: var(--sp-2);
}

.view-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.view-toggle-label {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-right: var(--sp-2);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--secondary);
    cursor: pointer;
    transition: all 140ms ease;
    text-decoration: none;
}

.btn:hover {
    color: var(--ink);
    border-color: var(--border-strong);
    background: var(--elevated);
    text-decoration: none;
}

.btn-primary {
    background: var(--signal);
    color: white;
    border-color: var(--signal);
}

.btn-primary:hover {
    background: hsl(165, 70%, 32%);
    color: white;
    border-color: hsl(165, 70%, 32%);
}

.btn-danger {
    background: var(--red-text);
    color: white;
    border-color: var(--red-text);
}
.btn-danger:hover {
    background: hsl(0, 75%, 36%);
    border-color: hsl(0, 75%, 36%);
}
.btn-danger:disabled,
.btn-danger[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Borrar — nav link rojo + form + overlay ───────────────────────────── */

.nav-links a.danger { color: var(--red-text); }
.nav-links a.danger:hover { color: var(--red-text); opacity: 0.8; }
.nav-links a.danger.active {
    color: var(--red-text);
    border-bottom-color: var(--red-text);
}

.borrar-form {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-end;
    flex-wrap: wrap;
}
.borrar-form .hint {
    margin: var(--sp-2) 0 0 0;
    font-size: 0.75rem;
    color: var(--muted);
}
.borrar-form .hint.hint-error { color: var(--red-text); }

.block-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.block-overlay[hidden] { display: none; }

.block-overlay-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-8);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    min-width: 280px;
}
.block-overlay-card p { margin: var(--sp-3) 0 0 0; }
.block-overlay-card .sub { font-size: 0.75rem; color: var(--muted); }

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--red-text);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Table ─────────────────────────────────────────────────────────────── */

.table-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

tbody tr {
    transition: background 140ms ease;
}

tbody tr:hover {
    background: var(--elevated);
}

tbody td {
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.8125rem;
    color: var(--secondary);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: none;
}

.col-num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--ink);
    text-align: right;
}

.col-ip {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--ink);
}

.col-ip a { color: var(--ink); border-bottom: 1px dashed var(--border-strong); }
.col-ip a:hover { color: var(--signal); border-bottom-color: var(--signal); text-decoration: none; }

.col-qname {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--secondary);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-qname a {
    color: var(--secondary);
}

.col-qname a:hover { color: var(--signal); }

.col-date {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.01em;
}

.col-rule {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--muted);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tags ──────────────────────────────────────────────────────────────── */

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 400;
    padding: 2px 8px;
    background: var(--signal-soft);
    color: var(--signal-text);
    border: 1px solid var(--signal-border);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.tag.tag-purple {
    background: var(--purple-soft);
    color: var(--purple-text);
    border-color: var(--purple-border);
}

.tag.tag-red {
    background: var(--red-soft);
    color: var(--red-text);
    border-color: var(--red-border);
}

.tag.tag-amber {
    background: var(--amber-soft);
    color: var(--amber-text);
    border-color: var(--amber-border);
}

.tag.tag-grey {
    background: var(--elevated);
    color: var(--muted);
    border-color: var(--border);
}

/* Identidad de API key: mismo pastel para la misma key en todo el dashboard. */
.tag.tag-k0 { background: var(--k0-soft); color: var(--k0-text); border-color: var(--k0-border); }
.tag.tag-k1 { background: var(--k1-soft); color: var(--k1-text); border-color: var(--k1-border); }
.tag.tag-k2 { background: var(--k2-soft); color: var(--k2-text); border-color: var(--k2-border); }
.tag.tag-k3 { background: var(--k3-soft); color: var(--k3-text); border-color: var(--k3-border); }
.tag.tag-k4 { background: var(--k4-soft); color: var(--k4-text); border-color: var(--k4-border); }
.tag.tag-k5 { background: var(--k5-soft); color: var(--k5-text); border-color: var(--k5-border); }
.tag.tag-k6 { background: var(--k6-soft); color: var(--k6-text); border-color: var(--k6-border); }
.tag.tag-k7 { background: var(--k7-soft); color: var(--k7-text); border-color: var(--k7-border); }
.tag.tag-k8 { background: var(--k8-soft); color: var(--k8-text); border-color: var(--k8-border); }
.tag.tag-k9 { background: var(--k9-soft); color: var(--k9-text); border-color: var(--k9-border); }

/* ── Paging ────────────────────────────────────────────────────────────── */

.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.paging a,
.paging span.btn {
    padding: var(--sp-2) var(--sp-4);
    font-size: 0.8125rem;
}

.paging a.off {
    pointer-events: none;
    opacity: 0.3;
}

.paging .page-info {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
}

/* ── Flash / notices ───────────────────────────────────────────────────── */

.notice {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--signal);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: 0.8125rem;
    color: var(--secondary);
    margin-bottom: var(--sp-4);
}

.notice.error   { border-left-color: var(--red-text); }
.notice.success { border-left-color: var(--signal); }

.empty {
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--muted);
    font-size: 0.8125rem;
}

/* ── Login ─────────────────────────────────────────────────────────────── */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--signal) 50%, transparent 95%);
    opacity: 0.6;
}

.login-card h1 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: var(--sp-1);
}

.login-card .sub {
    font-size: 0.75rem;
    color: var(--muted);
    font-family: var(--mono);
    margin-bottom: var(--sp-6);
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.login-card input {
    font-family: var(--mono);
    font-size: 0.875rem;
    padding: var(--sp-3) var(--sp-4);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--ink);
    outline: none;
    transition: all 140ms ease;
}

.login-card input:focus {
    border-color: var(--signal);
    box-shadow: 0 0 0 2px hsla(165, 70%, 36%, 0.12);
}

.login-card button {
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--signal);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease;
}

.login-card button:hover {
    background: hsl(165, 70%, 30%);
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Animations ────────────────────────────────────────────────────────── */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.metric { animation: fade-up 380ms ease-out both; }
.metric:nth-child(1) { animation-delay: 0ms; }
.metric:nth-child(2) { animation-delay: 50ms; }
.metric:nth-child(3) { animation-delay: 100ms; }
.metric:nth-child(4) { animation-delay: 150ms; }

.card { animation: fade-up 380ms ease-out 180ms both; }
.table-wrap { animation: fade-up 380ms ease-out 180ms both; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-3 { grid-template-columns: 1fr; }
    .grid.cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .metrics { grid-template-columns: 1fr; }
    .shell { padding: var(--sp-4); }
    .metric-value { font-size: 1.5rem; }
    thead th, tbody td { padding: var(--sp-2) var(--sp-3); }
    .col-rule, .col-qname { max-width: 180px; }
    .hide-mobile { display: none; }
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */

#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-4);
    background: hsla(220, 20%, 97%, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: progress;
}

#loading-overlay.active {
    display: flex;
    animation: overlay-fade 120ms ease-out;
}

@keyframes overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#loading-overlay .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--signal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loading-overlay .loading-pill {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── Extensiones OpenRouter Traces ─────────────────────────────────────── */

/* Login: labels sobre inputs (como el mock) */
.login-card .field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.login-card .field-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login-card .field input { width: 100%; }
.login-card button { width: 100%; }

/* Columnas de datos propias del dashboard */
.col-key   { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); }
.col-key a { color: var(--ink); border-bottom: 1px dashed var(--border-strong); }
.col-key a:hover { color: var(--signal); border-bottom-color: var(--signal); text-decoration: none; }
.col-model { font-family: var(--mono); font-size: 0.75rem; color: var(--secondary); }
.col-text  { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted);
             max-width: 360px; overflow: hidden; text-overflow: ellipsis; }

/* Barra de proporción (costo/uso relativo) */
.bar {
    position: relative;
    height: 6px;
    min-width: 70px;
    background: var(--inset);
    border-radius: 999px;
    overflow: hidden;
}
.bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--signal);
    border-radius: 999px;
}

/* Vista de detalle: pares clave/valor + bloques de texto */
.kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-5);
    font-size: 0.8125rem;
}
.kv dt { color: var(--muted); text-transform: uppercase; font-size: 0.6875rem;
         letter-spacing: 0.06em; font-weight: 500; padding-top: 2px; }
.kv dd { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.pre {
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    color: var(--secondary);
    max-height: 440px;
    overflow: auto;
}

/* Formulario inline (agregar / asignar key) */
.inline-form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.inline-form input {
    font-family: var(--mono);
    font-size: 0.75rem;
    padding: var(--sp-1) var(--sp-2);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--ink);
    outline: none;
}
.inline-form input:focus { border-color: var(--signal); box-shadow: 0 0 0 2px hsla(165,70%,36%,0.12); }
.btn.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: 0.75rem; }