:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-bg: #eef2ff;
    --accent-text: #4338ca;

    --ink: #14161a;
    --ink-soft: #4b5563;
    --ink-muted: #6b7280;
    --ink-faint: #9ca3af;
    --line: #e5e7eb;
    --line-soft: #f0f1f3;
    --surface: #ffffff;
    --canvas: #f6f7f9;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ---- Navbar (shell del panel admin, estilo Jenkins) ---- */

.navbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    height: 52px;
    background: #0f172a;
    color: #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar-brand {
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    white-space: nowrap;
    flex: 1;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #94a3b8;
}

.navbar-user-name {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
}

.navbar-user-role {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.navbar-logout {
    padding: 6px 12px;
    border: 1px solid #334155;
    border-radius: 5px;
    background: transparent;
    color: #cbd5e1;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

    .navbar-logout:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        border-color: #475569;
    }

/* ---- Layout con sidebar (estilo GitHub: topbar delgado + nav lateral) ---- */

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    margin-right: -4px;
    border-radius: 5px;
}

    .sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.08);
    }

.app-shell {
    display: flex;
    min-height: calc(100vh - 52px);
}

.sidebar {
    width: 232px;
    flex-shrink: 0;
    padding: 20px 0 20px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    /* Ocupa todo el alto disponible (no solo el de su propio contenido, que es
       mas corto que el contenido principal) y se queda a la vista mientras se
       hace scroll del contenido principal - mismo criterio que el topbar. */
    align-self: stretch;
    position: sticky;
    top: 52px;
    height: calc(100vh - 52px);
    overflow-y: auto;
}

.sidebar-link {
    display: block;
    padding: 8px 20px;
    border-left: 3px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
}

    .sidebar-link:hover {
        background: var(--canvas);
        color: var(--ink);
    }

    .sidebar-link.active {
        background: var(--accent-bg);
        border-left-color: var(--accent);
        color: var(--accent-text);
        font-weight: 600;
    }

.sidebar-section {
    margin-top: 20px;
}

.sidebar-section-title {
    padding: 0 20px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
}

.sidebar-backdrop {
    display: none;
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
}

/* ---- Dashboard de resumen ---- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kpi-card-error {
    border-top-color: #dc2626;
}

.kpi-card-error .kpi-value {
    color: #dc2626;
}

.kpi-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kpi-label {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-muted);
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.chart-card {
    padding: 20px;
}

.chart-title {
    margin-bottom: 14px;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.chart-canvas-wrap {
    position: relative;
    height: 260px;
}

/* ---- Login (página standalone, sin navbar) ---- */

.login-page {
    min-height: 100vh;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.login-subtitle {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--ink-faint);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

    .header h1 {
        margin: 0;
        font-family: var(--font-sans);
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ink);
    }

.header-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-muted);
    font-size: 13px;
}

    .header-info select {
        padding: 5px 8px;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        background: var(--surface);
        color: var(--ink-soft);
        font-size: 13px;
        cursor: pointer;
    }

        .header-info select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
        }

.refresh-indicator {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

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

thead {
    background: #fafafb;
}

th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-soft);
    white-space: nowrap;
}

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

tbody tr:hover {
    background: #fafafb;
}

.job-name {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink);
}

.group {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
}

.trigger {
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-running {
    background: #ecfdf3;
    color: #15803d;
}

    .status-running .status-dot {
        background: #22c55e;
    }

.status-scheduled {
    background: var(--accent-bg);
    color: var(--accent-text);
}

    .status-scheduled .status-dot {
        background: var(--accent);
    }

.status-paused {
    background: #fffbeb;
    color: #b45309;
}

    .status-paused .status-dot {
        background: #f59e0b;
    }

.status-error {
    background: #fef2f2;
    color: #dc2626;
}

    .status-error .status-dot {
        background: #ef4444;
    }

.status-blocked {
    background: #f5f3ff;
    color: #7c3aed;
}

    .status-blocked .status-dot {
        background: #8b5cf6;
    }

.status-complete {
    background: #f3f4f6;
    color: #4b5563;
}

    .status-complete .status-dot {
        background: #6b7280;
    }

.status-unknown {
    background: #f3f4f6;
    color: var(--ink-muted);
}

    .status-unknown .status-dot {
        background: var(--ink-faint);
    }

.date {
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.empty {
    padding: 40px;
    text-align: center;
    color: var(--ink-faint);
}

.cron {
    color: var(--ink-soft);
    font-size: 12.5px;
    background: var(--canvas);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 4px;
}

/* ==== Agregado para /admin/executions (dashboard de historial) ==== */

.nav-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
}

    .nav-link:hover {
        text-decoration: underline;
    }

.section-title {
    margin: 28px 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.login-box {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

    .login-box h2 {
        margin: 0 0 4px;
        font-family: var(--font-sans);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ink);
    }

.field {
    margin-bottom: 14px;
}

    .field label {
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-soft);
    }

input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea, select.filter-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink);
}

textarea {
    resize: vertical;
}

    input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="number"]:focus, textarea:focus, select.filter-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    }

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

    .btn:hover {
        background: #fafafb;
    }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

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

.btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover {
        background: #b91c1c;
        border-color: #b91c1c;
    }

/* ==== Modal de confirmación reutilizable - ver _Layout.cshtml ==== */

.confirm-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.5);
    z-index: 100;
}

    .confirm-overlay[hidden] {
        display: none;
    }

.confirm-modal {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.confirm-modal-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
}

.confirm-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.confirm-modal-body {
    padding: 18px 20px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--canvas);
    border-top: 1px solid var(--line);
}

.error-text {
    color: #dc2626;
    font-size: 13px;
    margin-top: 10px;
}

.success-text {
    color: #15803d;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ==== Toasts reutilizables - ver _Layout.cshtml (showToast) ==== */

.toast-container {
    position: fixed;
    top: 68px;
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink);
}

.toast-success {
    border-left-color: #15803d;
}

.toast-error {
    border-left-color: #dc2626;
}

.toast-warning {
    border-left-color: #b45309;
}

.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

/* ==== Agregado para /admin/connections y /admin/users (administracion, solo root) ==== */

.admin-item {
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

    .admin-item summary {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        cursor: pointer;
        list-style: none;
    }

        .admin-item summary::-webkit-details-marker {
            display: none;
        }

        .admin-item summary::before {
            content: '▸';
            color: var(--ink-faint);
            font-size: 11px;
        }

    .admin-item[open] summary::before {
        content: '▾';
    }

    .admin-item summary .admin-item-name {
        font-weight: 600;
        color: var(--ink);
    }

    .admin-item summary .admin-item-meta {
        font-size: 12.5px;
        color: var(--ink-faint);
    }

    .admin-item summary .quick-toggle-form {
        display: inline-flex;
        margin-left: auto;
    }

.admin-item-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px;
    border-top: 1px solid var(--line-soft);
    background: var(--canvas);
}

.recipe-detail {
    display: block;
}

.item-detail {
    display: block;
}

.nested-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -2px 0 18px;
    border-bottom: 1px solid var(--line);
}

.nested-tab-btn {
    padding: 8px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: 12.5px;
    cursor: pointer;
}

    .nested-tab-btn:hover {
        color: var(--ink);
    }

    .nested-tab-btn.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

.nested-tab-panel {
    display: none;
}

    .nested-tab-panel.active {
        display: block;
    }

.recipe-notes {
    display: grid;
    gap: 8px;
    color: var(--ink-muted);
    font-size: 13px;
}

.table-scroll {
    overflow-x: auto;
    width: 100%;
}

.recipe-grid {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.item-grid {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.item-grid-header,
.item-grid-row summary {
    display: grid;
    grid-template-columns: 120px 150px 100px minmax(190px, 300px) 100px 140px 110px 170px 190px 220px 220px 180px;
    align-items: center;
    width: max-content;
    min-width: 1825px;
}

.item-grid-header {
    gap: 14px;
    padding: 11px 16px 11px 32px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--surface), var(--line-soft));
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.item-grid-row {
    margin: 0;
    width: max-content;
    min-width: 100%;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
}

    .item-grid-row:last-of-type {
        border-bottom: none;
    }

    .item-grid-row summary {
        position: relative;
        width: max-content;
        gap: 14px;
        padding: 12px 16px 12px 32px;
        color: var(--ink-muted);
        font-size: 13px;
    }

        .item-grid-row summary::before {
            position: absolute;
            left: 12px;
            color: var(--ink-faint);
            font-size: 10px;
        }

        .item-grid-row summary .admin-item-name {
            grid-column: 3;
        }

        .item-grid-row summary > span:not(.admin-item-name) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .item-grid-row[open] summary {
        background: var(--canvas);
        color: var(--ink);
    }

.item-grid-row .admin-item-body {
    min-width: 1900px;
    border-top: 1px solid var(--line);
}

.catalog-filter-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

    .catalog-filter-form .field {
        min-width: 190px;
        margin-bottom: 0;
    }

    .catalog-filter-form input[type="search"],
    .catalog-filter-form select {
        width: 100%;
        height: 38px;
        padding: 8px 10px;
        border: 1px solid #d1d5db;
        border-radius: 5px;
        background: var(--surface);
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: 13px;
    }

    .catalog-filter-form input[type="search"]::placeholder {
        color: var(--ink-faint);
    }

    .catalog-filter-form input[type="search"]:focus,
    .catalog-filter-form select:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
    }

    .catalog-filter-form .btn {
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .catalog-grid {
        display: block;
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
    }

    .catalog-grid-header,
    .catalog-grid-row {
        display: grid;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }

    .catalog-grid-header {
        padding: 11px 16px;
        background: var(--line-soft);
        border-bottom: 1px solid var(--line);
        color: var(--ink-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .catalog-grid-row {
        margin: 0;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0;
    }

    .catalog-edit-form,
    .catalog-grid-row > .quick-toggle-form {
        display: contents;
    }

    .catalog-inline-input {
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 5px 8px;
        border: 1px solid var(--line);
        border-radius: 4px;
        background: var(--surface);
        color: var(--ink);
    }

    .catalog-grid-row:last-of-type {
        border-bottom: 0;
    }

    .catalog-grid-row > span,
    .catalog-grid-row > form > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-grid-vendor .catalog-grid-header,
    .catalog-grid-vendor .catalog-grid-row {
        grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.2fr) minmax(120px, 1fr) minmax(160px, 1.2fr) minmax(180px, 1.4fr) 100px;
    }

    .catalog-grid-costcenter .catalog-grid-header,
    .catalog-grid-costcenter .catalog-grid-row {
        grid-template-columns: 60px 100px 90px minmax(180px, 1.4fr) 100px minmax(110px, 1fr) 100px 70px 100px 90px;
        min-width: 1060px;
    }

    .cost-center-edit-form {
        align-items: end;
    }

    .checkbox-field {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        color: var(--ink-soft);
    }

    .catalog-modal {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(15, 23, 42, .55);
    }

    .catalog-modal[hidden] {
        display: none;
    }

    .catalog-modal-content {
        width: min(560px, 100%);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: 0 18px 50px rgba(15, 23, 42, .25);
    }

    .recipe-config-modal-content {
        width: min(900px, 100%);
    }

    .recipe-config-table input[type="number"] {
        width: 120px;
    }

    .recipe-config-row-form,
    .recipe-config-delete-form {
        display: inline;
        margin-right: 6px;
    }

    .catalog-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .catalog-modal-header h3 {
        margin: 0;
        font-size: 18px;
    }

    .catalog-modal-close {
        border: 0;
        background: transparent;
        color: var(--ink-muted);
        cursor: pointer;
        font-size: 26px;
        line-height: 1;
    }

    .catalog-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 22px;
    }

    .catalog-grid-location .catalog-grid-header,
    .catalog-grid-location .catalog-grid-row {
        grid-template-columns: 90px minmax(150px, 1fr) minmax(180px, 1.4fr) 100px;
    }

    .catalog-count {
        margin-top: 10px;
        color: var(--ink-muted);
        font-size: 12.5px;
    }

    .recipe-grid-header,
    .recipe-grid-row summary {
    display: grid;
        grid-template-columns: 120px 150px 100px 100px 100px minmax(190px, 300px) 75px 100px 100px 100px 140px 130px 130px 130px 150px 190px 220px 220px 85px 110px 140px 180px 180px 180px 170px 150px;
    align-items: center;
    width: max-content;
        min-width: 3600px;
}

.recipe-grid-header {
    gap: 14px;
    padding: 11px 16px 11px 32px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--surface), var(--line-soft));
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.recipe-grid-row {
    margin: 0;
    width: max-content;
    min-width: 100%;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
}

    .recipe-grid-row:last-of-type {
        border-bottom: none;
    }

    .recipe-grid-row summary {
        width: max-content;
        gap: 14px;
        padding: 12px 16px 12px 32px;
        color: var(--ink-muted);
        font-size: 13px;
        position: relative;
    }

        .recipe-grid-row summary::before {
            position: absolute;
            left: 12px;
            color: var(--ink-faint);
            font-size: 10px;
        }

        .recipe-grid-row summary .admin-item-name {
            grid-column: 5;
        }

        .recipe-grid-row summary > span:not(.admin-item-name):not(.status):not(.recipe-action) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .recipe-grid-row[open] summary {
        background: var(--canvas);
        color: var(--ink);
    }

.recipe-action {
    grid-column: 1;
    justify-self: center;
    width: 28px;
    padding: 4px 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1;
}

.recipe-grid-row .admin-item-body {
    min-width: 3400px;
    border-top: 1px solid var(--line);
}

.recipe-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--line-soft);
    color: var(--ink-muted);
    font-size: 12.5px;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--line-soft);
    color: var(--ink-muted);
    font-size: 12.5px;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 3px;
}

.page-size-form {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.page-size-form select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink);
}

.pagination-btn,
.pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink-muted);
    text-decoration: none;
}

.pagination-current {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
    font-weight: 600;
}

.pagination-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.pagination-btn.disabled {
    pointer-events: none;
    opacity: .45;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

    .inline-form .field {
        margin-bottom: 0;
        min-width: 160px;
    }

.field-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
}

    /* Un elemento oculto via el atributo HTML "hidden" no debe volver a
       mostrarse solo porque tambien tiene una clase con su propio "display"
       explicito (ej. .sftp-fields es ademas .field-group) - sin esto, la hoja
       de estilos del autor le gana a la regla por defecto [hidden]{display:none}
       del user-agent, y el bloque queda visible pese a hidden="true". */
    .field-group[hidden] {
        display: none;
    }

    .field-group .field {
        margin-bottom: 0;
        min-width: 160px;
    }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}

.btn-small {
    padding: 4px 10px;
    font-size: 12px;
}

.filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 16px;
}

    .filters .field {
        margin-bottom: 0;
        min-width: 140px;
    }

.job-row {
    cursor: pointer;
}

    .job-row.selected {
        background: var(--accent-bg);
    }

.job-config {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

    .job-config strong {
        font-family: var(--font-sans);
        font-weight: 600;
    }

.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 20px;
}

    .kv-grid dt {
        font-family: var(--font-mono);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ink-faint);
    }

    .kv-grid dd {
        margin: 3px 0 0;
        font-size: 13.5px;
        color: var(--ink);
    }

.detail-row td {
    background: #fafafb;
    white-space: normal;
}

.staging-item {
    padding: 10px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}

    .staging-item strong {
        font-family: var(--font-mono);
        font-size: 12.5px;
        color: var(--ink);
    }

pre.data-block {
    max-height: 220px;
    overflow: auto;
    background: #0f172a;
    color: #cbd5e1;
    padding: 12px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    margin: 8px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ink-muted);
}

.link-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 0;
}

    .link-btn:hover {
        text-decoration: underline;
    }

    .link-btn:disabled {
        color: var(--ink-faint);
        cursor: default;
        text-decoration: none;
    }

.btn-retry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #b45309;
    border-radius: 5px;
    background: #fffbeb;
    color: #b45309;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .btn-retry:hover {
        background: #fef3c7;
    }

    .btn-retry:disabled {
        opacity: 0.5;
        cursor: default;
    }

/* Indicador de estado en la columna de acciones (Executions/PurchaseOrders) -
   mismo tamaño para el caso "hay algo pendiente" y "sin novedad", solo cambia
   el color, para que ninguna fila se vea descuadrada frente a la otra. */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    line-height: 1;
}

.status-icon-warning {
    background: #fffbeb;
    color: #b45309;
    cursor: pointer;
}

    .status-icon-warning:hover {
        background: #fef3c7;
    }

.status-icon-ok {
    background: var(--line-soft);
    color: var(--ink-faint);
}

/* min-width: max-content evita que "table { width: 100% }" comprima el contenido. */
.table-wide {
    min-width: max-content;
}

.table-wide .actions-cell {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.12);
}

    /* display:flex solo en el body - en el <th> vacío (sticky + flex + sin
       contenido) el borde inferior no se pintaba bien en Chrome. */
    .table-wide tbody .actions-cell {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .table-wide thead .actions-cell {
        background: #fafafb;
    }

    .table-wide tbody tr:hover .actions-cell {
        background: #fafafb;
    }

/* ==== Agregado para /admin/purchase-orders (OC B2B: pedido vs. confirmado) ==== */

.qty {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.diff-pending {
    color: var(--ink-faint);
}

.diff-warn {
    color: #dc2626;
    font-weight: 600;
}

.mismatch-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef2f2;
    color: #dc2626;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}

/* ==== Agregado para /admin/inventory-exports (5 tipos de export en pestañas) ==== */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.tab-btn {
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .tab-btn:hover {
        color: var(--ink);
    }

    .tab-btn.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 600;
    }

/* ==== Responsive ==== */

@media (max-width: 768px) {

    .navbar {
        padding: 0 16px;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    /* Sidebar pasa a panel deslizable (drawer) sobre el contenido, en vez de
       ocupar espacio fijo al costado - se abre con el boton hamburguesa del
       topbar (ver script en _Layout.cshtml) y se cierra tocando el fondo o
       el mismo boton. */
    .sidebar {
        position: fixed;
        top: 52px;
        bottom: 0;
        left: -240px;
        z-index: 40;
        overflow-y: auto;
        transition: left 0.2s ease;
        box-shadow: 2px 0 16px rgba(15, 23, 42, 0.12);
    }

        .sidebar.open {
            left: 0;
        }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        background: rgba(15, 23, 42, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

        .sidebar-backdrop.visible {
            opacity: 1;
            pointer-events: auto;
        }

    .main-content {
        padding: 16px;
    }

    .header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

        .header h1 {
            font-size: 20px;
        }

    td,
    th {
        padding: 10px 12px;
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-item summary {
        flex-wrap: wrap;
    }

        .admin-item summary .admin-item-meta {
            width: 100%;
        }

        .admin-item summary .quick-toggle-form {
            margin-left: 0;
        }

    .admin-item.task-item summary {
        display: flex;
        flex-wrap: wrap;
    }

        .task-row-btn {
            width: auto;
        }

    .inline-form {
        flex-direction: column;
        align-items: stretch;
    }

        .inline-form .field {
            min-width: 0;
        }

    .field-group {
        flex-direction: column;
    }

        .field-group .field {
            min-width: 0;
        }

        .filters .field {
            min-width: 0;
            width: 100%;
        }

    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex: 0 0 auto;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

    .kv-grid {
        grid-template-columns: 1fr;
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .kpi-card {
        padding: 12px 14px;
    }

    .kpi-value {
        font-size: 21px;
    }

    .login-box {
        padding: 24px 20px;
    }
}

/* ==== Agregado para /admin/issuer-tasks ==== */

/* Grid de ancho fijo: Estado, Última ejecución y los dos botones quedan
   alineados entre filas sin importar cuánto ocupe el nombre/emisor/proceso
   a la izquierda. La columna de 14px es la del triángulo ▸/▾ (::before). */
.task-item summary {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 92px 168px 122px 104px;
    align-items: center;
    gap: 10px;
}

.task-row-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

.task-row-btn {
    width: 100%;
}

    .task-row-btn .btn {
        width: 100%;
    }

/* Columnas parejas para field-groups de campos paralelos (Emisor/Proceso/
   Conexión, Nombre/Descripción, límites) - .field solo ocupa por defecto
   el ancho de su contenido. */
.field-group-equal > .field {
    flex: 1 1 0;
}

/* Más específico que ".field label" (display:block) para que el checkbox/
   radio y su texto queden en una sola línea. */
.field .radio-option,
.field .checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-soft);
    cursor: pointer;
}

.field .radio-option + .radio-option {
    margin-top: 6px;
}

/* El formulario de edición vive dentro de .admin-item-body (flex) - sin un
   ancho explícito, un <form> como flex item se achica al contenido más
   angosto en vez de ocupar toda la fila (por eso el modo "intervalo", con
   menos contenido, se veía más chico que "horarios fijos"). */
.schedule-builder {
    width: 100%;
}

.schedule-manual-toggle {
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--line);
}

.hours-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.hour-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--ink-soft);
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 7px;
    cursor: pointer;
}

.schedule-preview {
    margin-top: 4px;
    min-height: 27px;
    display: flex;
    align-items: center;
}

/* jsoneditor necesita una altura explícita en su contenedor (usa height:100%
   internamente) - colores ajustados a la paleta del panel en vez del azul
   por defecto de la librería. */
.json-editor-container {
    height: 160px;
    border-radius: 5px;
    overflow: hidden;
}

    .json-editor-container .jsoneditor {
        border-color: #d1d5db;
    }

    .json-editor-container .jsoneditor-menu {
        background-color: var(--accent);
        border-bottom-color: var(--accent);
    }