/* ============================================================
   app.css — BORME Admin — Design System Minimalista
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --brand-primary:   #2563eb;
    --brand-secondary: #64748b;
    --brand-success:   #16a34a;
    --brand-danger:    #dc2626;
    --brand-warning:   #d97706;

    --bg-base:     #f8fafc;
    --bg-surface:  #ffffff;
    --bg-elevated: #f1f5f9;

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;

    --border-color:  #e2e8f0;
    --border-radius: 8px;
    --border-radius-sm: 4px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);

    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Mono', 'Consolas', monospace;

    --sidebar-w: 0px;
    --header-h:  56px;
    --max-w:     1200px;
    --gap:       1.5rem;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background:  var(--bg-base);
    color:       var(--text-primary);
    line-height: 1.6;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
}

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

/* ── Header ─────────────────────────────────────────────────── */
.app-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    height:     var(--header-h);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.header-inner {
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   0 var(--gap);
    height:    100%;
    display:   flex;
    align-items: center;
    gap:       1.5rem;
}
.brand {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    font-weight: 700;
    font-size:   1.1rem;
    color:       var(--text-primary);
    text-decoration: none;
}
.brand-icon { font-size: 1.3rem; }
.main-nav { display: flex; gap: .25rem; flex: 1; }
.main-nav a {
    padding:       .35rem .85rem;
    border-radius: var(--border-radius-sm);
    font-size:     .9rem;
    color:         var(--text-secondary);
    transition:    background .15s, color .15s;
    text-decoration: none;
}
.main-nav a:hover, .main-nav a.active {
    background: var(--bg-elevated);
    color:      var(--brand-primary);
}
.header-user { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.user-name { font-size: .85rem; color: var(--text-secondary); }
.btn-logout {
    font-size: .8rem;
    color:     var(--brand-danger);
    padding:   .25rem .6rem;
    border:    1px solid var(--brand-danger);
    border-radius: var(--border-radius-sm);
    transition: background .15s, color .15s;
}
.btn-logout:hover {
    background: var(--brand-danger);
    color:      #fff;
    text-decoration: none;
}

/* ── Main / Layout ──────────────────────────────────────────── */
.app-main { flex: 1; }

.page-container {
    max-width: var(--max-w);
    margin:    0 auto;
    padding:   2rem var(--gap);
}

.page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.5rem;
}
.page-title    { font-size: 1.6rem; font-weight: 700; }
.page-subtitle { color: var(--text-secondary); margin-top: .2rem; font-size: .9rem; }
.page-actions  { display: flex; gap: .75rem; align-items: center; flex-shrink: 0; }
.breadcrumb    { font-size: .85rem; color: var(--text-secondary); display: block; margin-bottom: .25rem; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    margin-bottom: var(--gap);
}
.card-header {
    padding:        .85rem 1.25rem;
    border-bottom:  1px solid var(--border-color);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    background:     var(--bg-elevated);
}
.card-header h3 { font-size: .95rem; font-weight: 600; }
.card-body  { padding: 1.25rem; }
.card-body.p-0 { padding: 0; }

/* ── Stats Grid ─────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.stat-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding:       1.25rem;
    display:       flex;
    gap:           1rem;
    align-items:   center;
    box-shadow:    var(--shadow-sm);
    transition:    box-shadow .15s;
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-icon { font-size: 2.2rem; flex-shrink: 0; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--text-secondary); margin-top: .15rem; }

/* ── Dashboard cols ─────────────────────────────────────────── */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
@media (max-width: 768px) { .dashboard-cols { grid-template-columns: 1fr; } }

/* ── Bar chart list ─────────────────────────────────────────── */
.bar-list { display: flex; flex-direction: column; gap: .6rem; }
.bar-item {
    display: grid;
    grid-template-columns: 130px 1fr 50px;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
}
.bar-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--bg-elevated); border-radius: 99px; height: 8px; overflow: hidden; }
.bar-fill  { background: var(--brand-primary); height: 100%; border-radius: 99px; transition: width .4s ease; }
.bar-value { text-align: right; font-weight: 600; font-size: .8rem; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
    padding:       .6rem 1rem;
    text-align:    left;
    font-weight:   600;
    font-size:     .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:         var(--text-secondary);
    background:    var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    white-space:   nowrap;
}
.table td {
    padding:       .65rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #f8fafc; }
.table.table-sm td, .table.table-sm th { padding: .45rem .85rem; }
.td-main   { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.td-mono   { font-family: var(--font-mono); font-size: .82rem; }
.td-date   { white-space: nowrap; color: var(--text-secondary); font-size: .82rem; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: .85rem; font-weight: 500; color: var(--text-primary); }
.form-control {
    padding:       .5rem .75rem;
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size:     .9rem;
    font-family:   inherit;
    color:         var(--text-primary);
    background:    var(--bg-surface);
    transition:    border-color .15s, box-shadow .15s;
    width:         100%;
}
.form-control:focus {
    outline:      none;
    border-color: var(--brand-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { cursor: pointer; }

.input-group { display: flex; }
.input-group .form-control { border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); flex: 1; }
.toggle-pass {
    padding:       .5rem .75rem;
    border:        1px solid var(--border-color);
    border-left:   none;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    background:    var(--bg-elevated);
    cursor:        pointer;
    font-size:     .9rem;
}
.field-error { font-size: .8rem; color: var(--brand-danger); min-height: .9rem; }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding-top: .5rem; }
.toggle-label { font-size: .85rem; cursor: pointer; display: flex; align-items: center; gap: .35rem; }

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: .5rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .4rem;
    padding:         .5rem 1.1rem;
    border-radius:   var(--border-radius-sm);
    font-size:       .9rem;
    font-weight:     500;
    cursor:          pointer;
    border:          1px solid transparent;
    transition:      background .15s, border-color .15s, color .15s, opacity .15s;
    text-decoration: none;
    white-space:     nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary   { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.btn-primary:hover   { background: #1d4ed8; border-color: #1d4ed8; text-decoration: none; color: #fff; }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-color); }
.btn-secondary:hover { background: var(--border-color); text-decoration: none; }
.btn-block { width: 100%; justify-content: center; }
.btn-xs { padding: .2rem .55rem; font-size: .78rem; }
.link-sm { font-size: .82rem; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    display:       inline-block;
    padding:       .15rem .55rem;
    border-radius: 99px;
    font-size:     .75rem;
    font-weight:   600;
}
.badge-success   { background: #dcfce7; color: #166534; }
.badge-danger    { background: #fee2e2; color: #991b1b; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-secondary { background: var(--bg-elevated); color: var(--text-secondary); }
.tag {
    display:       inline-block;
    padding:       .1rem .5rem;
    border-radius: var(--border-radius-sm);
    background:    #eff6ff;
    color:         var(--brand-primary);
    font-size:     .78rem;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
    padding:       .75rem 1rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    font-size:     .88rem;
    display:       flex;
    align-items:   flex-start;
    gap:           .5rem;
}
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.alert-info    { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    padding:     .85rem 1rem;
    flex-wrap:   wrap;
}
.page-link {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     2rem;
    height:        2rem;
    padding:       0 .5rem;
    border-radius: var(--border-radius-sm);
    border:        1px solid var(--border-color);
    font-size:     .85rem;
    color:         var(--text-secondary);
    transition:    background .15s;
    text-decoration: none;
}
.page-link:hover      { background: var(--bg-elevated); text-decoration: none; }
.page-link.active {
    background:   var(--brand-primary);
    border-color: var(--brand-primary);
    color:        #fff;
    font-weight:  600;
}
.page-info { margin-left: auto; font-size: .82rem; color: var(--text-muted); }

/* ── Auth page ───────────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100vh;
    display:    flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    padding:    1rem;
}
.auth-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-color);
    border-radius: 12px;
    box-shadow:    var(--shadow-md);
    padding:       2.5rem;
    width:         100%;
    max-width:     420px;
}
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }
.auth-logo h1 { font-size: 1.5rem; font-weight: 700; }
.auth-logo p  { color: var(--text-secondary); font-size: .9rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding:    3rem 2rem;
    color:      var(--text-secondary);
}
.empty-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.empty-msg  { text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: .9rem; }

/* ── Detail grid ─────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--gap); }
@media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr; } }
.data-list { display: flex; flex-direction: column; gap: .85rem; }
.data-item { display: grid; grid-template-columns: 160px 1fr; gap: .5rem; }
.data-item dt { font-size: .82rem; font-weight: 600; color: var(--text-secondary); padding-top: .05rem; }
.data-item dd { color: var(--text-primary); }
.mono { font-family: var(--font-mono); font-size: .88rem; }
.texto-integro {
    font-size:  .88rem;
    line-height: 1.7;
    white-space: pre-wrap;
    max-height: 600px;
    overflow-y: auto;
    background: var(--bg-elevated);
    padding:    1rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

/* ── Search card collapsible ─────────────────────────────────── */
.card-header.collapsible { cursor: pointer; user-select: none; }
.card-header.collapsible:hover { background: #e9eff7; }
.collapse-icon { font-size: .75rem; color: var(--text-muted); transition: transform .2s; }
.card-body.collapsed { display: none; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
    background:    var(--bg-surface);
    border-radius: var(--border-radius);
    box-shadow:    0 20px 60px rgba(0,0,0,.2);
    width: 100%; max-width: 480px;
    overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-elevated);
}
.modal-header h3 { font-size: 1rem; font-weight: 600; }
.modal-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-secondary); }
.modal-body   { padding: 1.25rem; }
.modal-footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex; justify-content: flex-end; gap: .75rem;
    background: var(--bg-elevated);
}

/* ── Footer ─────────────────────────────────────────────────── */
.app-footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
    padding:    .75rem var(--gap);
}
.footer-inner {
    max-width: var(--max-w);
    margin:    0 auto;
    display:   flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color:     var(--text-muted);
}
.footer-version { font-family: var(--font-mono); }

/* ── Utilities ───────────────────────────────────────────────── */
.mt-1 { margin-top: 1rem; }
.gap-sm { gap: .5rem; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    :root { --gap: 1rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .page-header { flex-direction: column; }
    .filters-grid { grid-template-columns: 1fr; }
    .data-item { grid-template-columns: 1fr; }
    .header-inner { gap: .75rem; }
    .brand-name { display: none; }
}

/* ============================================================
   Módulo de Verificación
   ============================================================ */

/* ── Score pill ─────────────────────────────────────────────── */
.score-pill {
    display:    inline-flex;
    align-items: center;
    gap:        .4rem;
    background: var(--bg-elevated);
    border:     1px solid var(--border-color);
    border-radius: 99px;
    padding:    .2rem .7rem;
    font-size:  .82rem;
    font-weight: 600;
}
.score-bar {
    height:        6px;
    width:         60px;
    background:    var(--brand-primary);
    border-radius: 99px;
    transition:    width .3s ease;
}

/* ── Sources grid ────────────────────────────────────────────── */
.sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
    padding: 1.25rem;
}
.source-card {
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .15s;
}
.source-card:hover { box-shadow: var(--shadow-md); }
.source-card--found    { border-top: 3px solid var(--brand-success); }
.source-card--notfound { border-top: 3px solid var(--border-color); opacity: .7; }
.source-card--error    { border-top: 3px solid var(--brand-danger); }
.source-card--limited  { border-top: 3px solid var(--brand-warning); }

.source-card-header {
    display:    flex;
    align-items: center;
    gap:        .75rem;
    padding:    .85rem 1rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
}
.source-icon  { font-size: 1.6rem; flex-shrink: 0; }
.source-info  { flex: 1; }
.source-name  { font-weight: 600; font-size: .9rem; }
.source-status { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; }
.source-score  { font-size: .8rem; color: var(--text-secondary); }

/* Score ring SVG */
.source-score-ring { width: 42px; height: 42px; flex-shrink: 0; }
.score-ring        { transform: rotate(-90deg); }
.score-text { font-size: 10px; fill: var(--text-primary); font-weight: 700; transform: rotate(90deg) translate(0, -36px); }

.source-data {
    flex:    1;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .82rem;
}
.source-field { display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.source-field-label { font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.source-field-value { color: var(--text-primary); word-break: break-word; }
.link-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

.source-error { padding: .85rem 1rem; font-size: .8rem; color: var(--brand-danger); }
.source-footer {
    padding:     .5rem 1rem;
    background:  var(--bg-elevated);
    border-top:  1px solid var(--border-color);
    display:     flex;
    justify-content: space-between;
    font-size:   .75rem;
    color:       var(--text-muted);
}

/* ── Verification loading overlay ──────────────────────────── */
.verification-loading {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 300;
    backdrop-filter: blur(4px);
}
.verification-loading[hidden] { display: none; }
.verif-spinner {
    background:    var(--bg-surface);
    border-radius: 12px;
    padding:       2.5rem;
    text-align:    center;
    min-width:     320px;
    box-shadow:    0 20px 60px rgba(0,0,0,.2);
}
.spinner-ring {
    width:  48px; height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.source-progress { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; text-align: left; }
.source-progress-item {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--text-secondary);
}
.source-progress-item.done    { color: var(--brand-success); }
.source-progress-item.running { color: var(--brand-primary); }
.source-progress-item.error   { color: var(--brand-danger); }

/* ── Coverage bar ────────────────────────────────────────────── */
.coverage-header { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.coverage-title  { font-size: .85rem; color: var(--text-secondary); margin-bottom: .25rem; }
.coverage-pct    { font-size: 3rem; font-weight: 800; color: var(--brand-primary); line-height: 1; }
.coverage-bar-wrap { flex: 1; min-width: 240px; }
.coverage-bar {
    height: 16px;
    background: var(--bg-elevated);
    border-radius: 99px;
    overflow: hidden;
    margin: .5rem 0;
}
.coverage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-success), #22c55e);
    border-radius: 99px;
    transition: width .6s ease;
}
.coverage-legend {
    display: flex; gap: .75rem; flex-wrap: wrap;
    font-size: .8rem; color: var(--text-secondary); margin: .5rem 0;
}
.score-avg-display { font-size: .9rem; color: var(--text-secondary); margin-top: .5rem; }

/* ── Mini bar para tabla de fuentes ──────────────────────────── */
.mini-bar-wrap { display: flex; align-items: center; gap: .5rem; }
.mini-bar {
    height: 8px; width: 80px;
    background: var(--brand-primary);
    border-radius: 99px;
}

/* ── Data grid 3 cols ────────────────────────────────────────── */
.data-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.data-grid-3 .data-item { grid-template-columns: 1fr; }

/* ── Badge info (nuevo) ─────────────────────────────────────── */
.badge-info { background: #eff6ff; color: #1d4ed8; }