/**
 * ARK-IA · Capa global de homogeneización (contenido + modales)
 * Tipografía, tarjetas, tablas, botones, formularios, paginación y modales
 * en la misma línea visual del dashboard. Se carga al final.
 */
:root {
    --ark-ink: #0f172a;
    --ark-body: #334155;
    --ark-muted: #64748b;
    --ark-line: #e2e8f0;
    --ark-soft: #f8fafc;
    --ark-g1: #10b981;
    --ark-g2: #047857;
    --ark-g3: #065f46;
    --ark-metal-hero: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 45%, rgba(255,255,255,0) 60%), linear-gradient(135deg, #03140d 0%, #06301f 35%, #0a5a3c 70%, #0f8a5c 100%);
}

/* =============== TIPOGRAFÍA =============== */
html body .main-content,
html body .modal {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ark-body);
}
html body .main-content h1, html body .main-content h2, html body .main-content h3,
html body .main-content h4, html body .main-content h5, html body .main-content h6,
html body .modal h1, html body .modal h2, html body .modal h3,
html body .modal h4, html body .modal h5, html body .modal h6,
html body .main-content .card-title, html body .modal .modal-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -.1px;
    color: var(--ark-ink);
}
html body .main-content .ark-hero h3 { font-weight: 700 !important; color: #fff !important; }
html body .main-content .form-label, html body .modal .form-label { font-weight: 600; font-size: .86rem; color: var(--ark-body); }
html body .main-content small, html body .main-content .small, html body .modal .small { color: var(--ark-muted); }
html body .main-content .text-muted, html body .modal .text-muted { color: var(--ark-muted) !important; }
html body .main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not([class*="tpl-"]):not([class*="ct-"]):not([class*="dash-"]) { color: var(--ark-g2); }
html body .main-content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover { color: var(--ark-g3); }

/* =============== TÍTULO DE PÁGINA SIN HERO =============== */
html body .main-content:not(.ark-theme) > .container-fluid > .row:first-child h4,
html body .main-content:not(.ark-theme) > .container-fluid > .d-flex:first-child h4 {
    font-size: 1.35rem; font-weight: 700 !important;
}

/* =============== TARJETAS =============== */
html body .main-content .card {
    border: 1px solid var(--ark-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
html body .main-content .card:hover { box-shadow: 0 12px 30px rgba(15,23,42,.06) !important; border-color: #bbf7d0 !important; transform: none !important; }
html body .main-content .card-header {
    background: #fff !important;
    color: var(--ark-ink) !important;
    border-bottom: 1px solid #eef2f0 !important;
    padding: 14px 18px !important;
}
html body .main-content .card-header h5, html body .main-content .card-header h6, html body .main-content .card-header .card-title {
    font-size: 15px !important; margin: 0; color: var(--ark-ink) !important;
}
html body .main-content .card-header.bg-primary, html body .main-content .card-header.bg-info,
html body .main-content .card-header.bg-success, html body .main-content .card-header.bg-light {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important; color: var(--ark-g3) !important;
}
html body .main-content .card-header.bg-primary *, html body .main-content .card-header.bg-success *, html body .main-content .card-header.bg-info * { color: var(--ark-g3) !important; }
html body .main-content .card-header.bg-danger { background: linear-gradient(135deg, #fef2f2, #fee2e2) !important; color: #991b1b !important; }
html body .main-content .card-header.bg-warning { background: linear-gradient(135deg, #fffbeb, #fef3c7) !important; color: #92400e !important; }
html body .main-content .card.border-primary, html body .main-content .card.border-success { border-color: #bbf7d0 !important; }
html body .main-content .card-footer { background: var(--ark-soft) !important; border-top: 1px solid #eef2f0 !important; }

/* =============== BOTONES =============== */
html body .main-content .btn, html body .modal .btn { border-radius: 10px; font-weight: 600; transition: all .18s ease; }
html body .main-content .btn-primary, html body .main-content .btn-success,
html body .modal .btn-primary, html body .modal .btn-success {
    background: linear-gradient(135deg, var(--ark-g1), var(--ark-g2)) !important;
    border-color: var(--ark-g2) !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(16,185,129,.22);
}
html body .main-content .btn-primary:hover, html body .main-content .btn-success:hover,
html body .modal .btn-primary:hover, html body .modal .btn-success:hover {
    background: linear-gradient(135deg, #059669, var(--ark-g3)) !important; border-color: var(--ark-g3) !important;
    transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,185,129,.30);
}
html body .main-content .ark-hero .btn-light, html body .main-content .ark-hero .btn-outline-light { box-shadow: none; }
html body .main-content .btn-info, html body .modal .btn-info { background: linear-gradient(135deg, #14b8a6, #0f766e) !important; border-color: #0f766e !important; color: #fff !important; }
html body .main-content .btn-secondary, html body .modal .btn-secondary { background: #f1f5f9 !important; border-color: var(--ark-line) !important; color: var(--ark-body) !important; }
html body .main-content .btn-secondary:hover, html body .modal .btn-secondary:hover { background: #e2e8f0 !important; }
html body .main-content .btn-outline-primary, html body .modal .btn-outline-primary,
html body .main-content .btn-outline-success, html body .modal .btn-outline-success { color: var(--ark-g2) !important; border-color: #6ee7b7 !important; background: #fff; }
html body .main-content .btn-outline-primary:hover, html body .modal .btn-outline-primary:hover,
html body .main-content .btn-outline-success:hover, html body .modal .btn-outline-success:hover { background: #ecfdf5 !important; border-color: var(--ark-g1) !important; color: var(--ark-g3) !important; }
html body .main-content .btn-outline-secondary, html body .modal .btn-outline-secondary { color: var(--ark-body); border-color: var(--ark-line); background: #fff; }
html body .main-content .btn-outline-secondary:hover, html body .modal .btn-outline-secondary:hover { background: var(--ark-soft); color: var(--ark-ink); border-color: #cbd5e1; }
html body .main-content .ark-hero .btn-outline-light { color: #fff !important; border-color: rgba(255,255,255,.45) !important; background: transparent !important; }

/* Botones pequeños de acción en tablas (iconos) */
html body .main-content table .btn-sm, html body .main-content .btn-group-sm > .btn {
    min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px !important; font-size: .82rem;
}
html body .main-content table .btn-group > .btn, html body .main-content table .btn-group-sm > .btn { margin: 0 2px; border-radius: 9px !important; }
html body .main-content table .btn-outline-info, html body .main-content table .btn-outline-primary,
html body .main-content table .btn-outline-warning, html body .main-content table .btn-outline-danger,
html body .main-content table .btn-outline-success, html body .main-content table .btn-outline-secondary {
    background: #fff !important; border: 1px solid var(--ark-line) !important; color: #475569 !important;
}
html body .main-content table .btn-outline-info:hover { background: #e0f2fe !important; color: #0369a1 !important; border-color: #bae6fd !important; }
html body .main-content table .btn-outline-primary:hover, html body .main-content table .btn-outline-success:hover { background: #ecfdf5 !important; color: var(--ark-g2) !important; border-color: #a7f3d0 !important; }
html body .main-content table .btn-outline-warning:hover { background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important; }
html body .main-content table .btn-outline-danger:hover { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }

/* =============== ETIQUETAS =============== */
html body .main-content .badge, html body .modal .badge { font-weight: 700; border-radius: 50px; padding: .38em .75em; letter-spacing: .2px; }
html body .main-content .badge.bg-primary, html body .modal .badge.bg-primary { background: #d1fae5 !important; color: var(--ark-g3) !important; }
html body .main-content .badge.bg-success, html body .modal .badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
html body .main-content .badge.bg-info, html body .modal .badge.bg-info { background: #ccfbf1 !important; color: #0f766e !important; }
html body .main-content .badge.bg-warning, html body .modal .badge.bg-warning { background: #fef3c7 !important; color: #92400e !important; }
html body .main-content .badge.bg-danger, html body .modal .badge.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; }
html body .main-content .badge.bg-secondary, html body .modal .badge.bg-secondary { background: #f1f5f9 !important; color: #475569 !important; }
html body .main-content .badge.bg-dark { background: #1e293b !important; color: #fff !important; }

/* =============== TABLAS =============== */
html body .main-content .table { --bs-table-hover-bg: #f0fdf4; color: var(--ark-body); }
html body .main-content .table > thead th {
    font-family: 'Inter', sans-serif; font-size: 11.5px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .6px; color: var(--ark-muted) !important;
    background: var(--ark-soft) !important; border-bottom: 1px solid var(--ark-line) !important;
    padding: 12px 14px !important; white-space: nowrap;
}
html body .main-content .table > tbody td { padding: 12px 14px; border-color: #f1f5f9; vertical-align: middle; font-size: 14px; }
html body .main-content .table-hover > tbody > tr { transition: background .15s; }
html body .main-content .table-hover > tbody > tr:hover > * { background: #f0fdf4 !important; box-shadow: none; }
html body .main-content .table strong { color: var(--ark-ink); font-weight: 600; }

/* =============== DATATABLES =============== */
html body .main-content .dataTables_wrapper { font-size: .86rem; color: var(--ark-muted); }
html body .main-content .dataTables_wrapper .dataTables_length select,
html body .main-content .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--ark-line) !important; border-radius: 10px !important; padding: 6px 10px !important; height: 38px; background-color: #fff;
}
html body .main-content .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ark-g1) !important; box-shadow: 0 0 0 .2rem rgba(16,185,129,.18) !important; outline: none; }
html body .main-content .dataTables_wrapper .dataTables_info { padding-top: 14px !important; font-size: .84rem; color: var(--ark-muted); }
html body .main-content .dataTables_wrapper .dataTables_paginate { padding-top: 10px !important; }
html body .main-content .dataTables_wrapper .dataTables_paginate .paginate_button,
html body .main-content .dataTables_wrapper .dataTables_paginate .page-link {
    border: 0 !important; border-radius: 10px !important; margin: 0 2px !important; min-width: 34px; height: 34px;
    padding: 0 10px !important; display: inline-flex; align-items: center; justify-content: center;
    background: transparent !important; color: var(--ark-body) !important; font-weight: 600; font-size: .85rem; box-shadow: none !important;
}
html body .main-content .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
html body .main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, var(--ark-g1), var(--ark-g2)) !important; color: #fff !important;
}
html body .main-content .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: #cbd5e1 !important; }
html body .main-content .dataTables_wrapper .dataTables_paginate .page-link:hover { background: #ecfdf5 !important; color: var(--ark-g2) !important; }
html body .main-content .dataTables_wrapper .page-item { border: 0 !important; }
html body .main-content .dataTables_wrapper .pagination { gap: 2px; }

/* Paginación general */
html body .main-content .pagination .page-link { border: 0; border-radius: 10px !important; margin: 0 2px; color: var(--ark-body); font-weight: 600; }
html body .main-content .pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--ark-g1), var(--ark-g2)); color: #fff; }

/* =============== FORMULARIOS =============== */
html body .main-content .form-control, html body .main-content .form-select,
html body .modal .form-control, html body .modal .form-select { border-radius: 10px; border-color: var(--ark-line); font-size: .92rem; }
html body .main-content .form-control:focus, html body .main-content .form-select:focus,
html body .modal .form-control:focus, html body .modal .form-select:focus { border-color: var(--ark-g1); box-shadow: 0 0 0 .2rem rgba(16,185,129,.18); }
html body .main-content .form-check-input:checked, html body .modal .form-check-input:checked { background-color: var(--ark-g1); border-color: var(--ark-g1); }
html body .main-content .form-check-input:focus, html body .modal .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(16,185,129,.18); border-color: var(--ark-g1); }
html body .main-content .input-group-text, html body .modal .input-group-text { background: var(--ark-soft); border-color: var(--ark-line); color: var(--ark-muted); }
html body .main-content .input-group > :first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
html body .main-content .input-group > :last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* =============== PESTAÑAS =============== */
html body .main-content .nav-tabs { border-bottom: 1px solid var(--ark-line); }
html body .main-content .nav-tabs .nav-link { border: 0; color: var(--ark-muted); font-weight: 600; border-bottom: 2px solid transparent; }
html body .main-content .nav-tabs .nav-link:hover { color: var(--ark-g2); }
html body .main-content .nav-tabs .nav-link.active { color: var(--ark-g2); border-bottom-color: var(--ark-g1); background: transparent; }
html body .main-content .nav-pills .nav-link, html body .modal .nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--ark-body); }
html body .main-content .nav-pills .nav-link.active, html body .modal .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--ark-g1), var(--ark-g2)); color: #fff; }

/* =============== ALERTAS =============== */
html body .main-content .alert, html body .modal .alert { border-radius: 12px; border-width: 1px; }
html body .main-content .alert-info, html body .modal .alert-info { background: #f0fdfa; border-color: #99f6e4; color: #115e59; }
html body .main-content .alert-primary, html body .modal .alert-primary { background: #ecfdf5; border-color: #a7f3d0; color: var(--ark-g3); }

/* =============== PROGRESO =============== */
html body .main-content .progress { background: #eef2f0; border-radius: 50px; }
html body .main-content .progress-bar.bg-primary, html body .main-content .progress-bar.bg-success { background: linear-gradient(90deg, #6ee7b7, #009162) !important; }

/* =============== MODALES =============== */
html body .modal .modal-content {
    border: 0 !important; border-radius: 18px !important; overflow: hidden;
    box-shadow: 0 30px 80px rgba(2,12,8,.35) !important;
}
html body .modal-backdrop.show { opacity: .55; background: #03140d; }
html body .modal .modal-header {
    background: #fff; border-bottom: 1px solid #eef2f0; padding: 16px 22px;
}
html body .modal .modal-header .modal-title { font-size: 1.05rem; }
html body .modal .modal-header.bg-primary, html body .modal .modal-header.bg-success,
html body .modal .modal-header.bg-info, html body .modal .modal-header.bg-dark {
    background: var(--ark-metal-hero) !important; color: #fff !important; border-bottom: 0;
}
html body .modal .modal-header.bg-warning { background: linear-gradient(135deg, #78350f 0%, #b45309 60%, #f59e0b 100%) !important; color: #fff !important; border-bottom: 0; }
html body .modal .modal-header.bg-danger { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 60%, #ef4444 100%) !important; color: #fff !important; border-bottom: 0; }
html body .modal .modal-header[class*="bg-"]:not(.bg-light):not(.bg-white) .modal-title,
html body .modal .modal-header[class*="bg-"]:not(.bg-light):not(.bg-white) .modal-title * { color: #fff !important; }
html body .modal .modal-header[class*="bg-"]:not(.bg-light):not(.bg-white) .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .85; }
html body .modal .modal-body { padding: 20px 22px; }
html body .modal .modal-footer { border-top: 1px solid #eef2f0; padding: 14px 22px; background: #fcfdfc; }