/* MIKAJA AutoScraper — Identidad corporate/tech sobre Tabler / Bootstrap 5 */

:root {
    /* Paleta */
    --mk-primary: #3b82f6;       /* azul */
    --mk-primary-hover: #2563eb;
    --mk-secondary: #6366f1;     /* indigo */
    --mk-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --mk-gradient-dark: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);

    --mk-text: #0f172a;
    --mk-muted: #64748b;
    --mk-bg: #f6f8fc;
    --mk-border: #e2e8f0;

    /* Tabler overrides */
    --tblr-primary: #3b82f6;
    --tblr-primary-rgb: 59, 130, 246;
    --tblr-link-color: #2563eb;
    --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html, body {
    font-family: var(--tblr-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--mk-bg);
    color: var(--mk-text);
}

/* ----- Sidebar ----- */
.navbar-vertical.navbar-dark {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}

.navbar-vertical .navbar-brand {
    padding-top: 1.75rem !important;
    padding-bottom: 1.25rem;
    margin-bottom: .25rem;
}

.brand-logo { display: block; }

.navbar-vertical .nav-link {
    color: rgba(226, 232, 240, .75);
    border-radius: 8px;
    margin: 2px 8px;
    padding: .55rem .75rem;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-vertical .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .05);
}

.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
    color: #fff;
    background: rgba(99, 102, 241, .18);
    box-shadow: inset 3px 0 0 var(--mk-primary);
}

.navbar-vertical .nav-link-icon {
    font-size: 1.1rem;
    color: inherit;
    opacity: .85;
}

/* ----- Topbar ----- */
.page-wrapper > .navbar:first-child {
    background-color: #fff;
    border-bottom: 1px solid var(--mk-border);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    min-height: 60px;
}

/* ----- Botones ----- */
.btn-primary {
    background: var(--mk-gradient);
    border: 0;
    box-shadow: 0 1px 2px rgba(59, 130, 246, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 4px 10px rgba(59, 130, 246, .35);
}

.btn-outline-primary { color: var(--mk-primary); border-color: var(--mk-primary); }
.btn-outline-primary:hover { background: var(--mk-primary); border-color: var(--mk-primary); }

/* ----- Cards ----- */
.page-body .card {
    border: 1px solid var(--mk-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: box-shadow .15s ease, transform .15s ease;
}
.page-body .card:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--mk-border);
    font-weight: 600;
}

/* ----- Login card ----- */
.page-center .card {
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
    border: 1px solid var(--mk-border);
}

/* ----- Tablas ----- */
.table {
    --tblr-table-hover-bg: #f1f5f9;
}
.table > :not(caption) > * > * {
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.table > thead {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mk-muted);
    background-color: #f8fafc;
}

/* ----- Badges de estado ----- */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
    padding: .35em .6em;
    border-radius: 6px;
}

/* ----- Avatar topbar ----- */
.avatar.bg-primary-lt {
    background: var(--mk-gradient) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(59, 130, 246, .3);
}

/* ----- Forms ----- */
.form-label { font-weight: 500; color: var(--mk-text); }
.form-control:focus, .form-select:focus {
    border-color: var(--mk-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* ----- Links ----- */
a { color: var(--mk-primary); }
a:hover { color: var(--mk-primary-hover); }

/* ----- Scraping en curso ----- */
tr.row-running {
    background: linear-gradient(90deg, rgba(59, 130, 246, .06), transparent 40%);
    position: relative;
}
tr.row-running > td:first-child {
    box-shadow: inset 3px 0 0 var(--mk-primary);
}

.badge-running {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35em .7em;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: var(--mk-gradient);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, .55);
    animation: pulse-running 1.6s ease-in-out infinite;
}
.badge-running .spinner-border {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

@keyframes pulse-running {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Flash al actualizar un contador */
.cell-flash {
    animation: cell-flash 1.2s ease-out;
}
@keyframes cell-flash {
    0%   { background-color: rgba(59, 130, 246, .25); }
    100% { background-color: transparent; }
}

/* Empty state */
.empty {
    padding: 3rem 1rem;
    text-align: center;
}
.empty-img { margin-bottom: 1rem; opacity: .5; }
.empty-title { font-size: 1.05rem; font-weight: 600; color: var(--mk-text); }
.empty-subtitle { font-size: .9rem; }

/* ----- Barra de acciones masivas ----- */
.bulk-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 100;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.bulk-bar-inner {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--mk-border);
    border-radius: 999px;
    padding: .65rem 1.25rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    animation: bulk-slide-up .25s ease-out;
}
@keyframes bulk-slide-up {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ----- Footer ----- */
.footer {
    padding: .9rem 0;
    border-top: 1px solid var(--mk-border);
    background-color: transparent;
}