/*
 * Ñanduti Pagos — Tema Visual v2
 * Estilo: Moderno claro + verde esmeralda
 *
 * Para REVERTIR al diseño original:
 *   Eliminar las líneas <link href="css/custom-theme.css"> de todas las páginas
 *   (o eliminar este archivo y pedir que se restaure)
 */

/* ── Google Fonts: Inter ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variables de color ─────────────────── */
:root {
    --v2-primary:       #059669;
    --v2-primary-hover: #047857;
    --v2-primary-dark:  #036b4e;
    --v2-primary-light: #ecfdf5;
    --v2-primary-mid:   #6ee7b7;
    --v2-text:          #1f2937;
    --v2-text-muted:    #6b7280;
    --v2-border:        #e5e7eb;
    --v2-bg:            #f3f4f6;
    --v2-radius:        0.5rem;
    --v2-shadow-sm:     0 1px 2px rgba(0,0,0,.05);
    --v2-shadow:        0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --v2-shadow-md:     0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
}

/* ── Tipografía global ──────────────────── */
body,
.nk-sidebar, .header, .card,
table, .form-control, .btn,
input, select, textarea,
h1, h2, h3, h4, h5, h6,
p, span, a, td, th, label,
.breadcrumb, .page-link,
.dataTables_wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    background-color: var(--v2-bg) !important;
    color: var(--v2-text) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--v2-text) !important;
}

a {
    color: var(--v2-primary) !important;
    transition: color 0.15s ease !important;
}
a:hover { color: var(--v2-primary-hover) !important; }

/* ── Layout principal ──────────────────── */
#main-wrapper { background-color: var(--v2-bg) !important; }

/* ── Nav header (logo) ──────────────────── */
.nav-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--v2-border) !important;
    border-right: 1px solid var(--v2-border) !important;
    box-shadow: none !important;
    height: 4.5rem !important;
}
.nav-header .brand-logo { padding: 0 1.25rem; }

/* ── Header ─────────────────────────────── */
.header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--v2-border) !important;
    box-shadow: none !important;
    height: 4.5rem !important;
}

/* ── Sidebar ─────────────────────────────── */
.nk-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--v2-border) !important;
    box-shadow: none !important;
    top: 4.5rem !important;
}
.nk-sidebar ul,
.nk-sidebar .metismenu {
    background: #ffffff !important;
}

/* Items del menú */
.nk-sidebar .metismenu > li {
    margin: 0 0.5rem !important;
    color: var(--v2-text) !important;
}
.nk-sidebar .metismenu a {
    color: var(--v2-text-muted) !important;
    border-radius: 0.375rem !important;
    padding: 0.5875rem 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}
.nk-sidebar .metismenu a:hover,
.nk-sidebar .metismenu a:active,
.nk-sidebar .metismenu a.active,
.nk-sidebar .metismenu > li:hover > a,
.nk-sidebar .metismenu > li.active > a {
    background-color: var(--v2-primary-light) !important;
    color: var(--v2-primary) !important;
    text-decoration: none !important;
}
.nk-sidebar .metismenu > li a > i,
.nk-sidebar .metismenu > li:hover i,
.nk-sidebar .metismenu > li:focus i,
.nk-sidebar .metismenu > li.active i {
    color: var(--v2-primary) !important;
}
.nk-sidebar .metismenu > li:hover span,
.nk-sidebar .metismenu > li:focus span,
.nk-sidebar .metismenu > li.active span {
    color: var(--v2-primary) !important;
}
.nk-sidebar .metismenu .mega-menu ul.in li a:hover,
.nk-sidebar .metismenu .mega-menu ul.in li a:focus,
.nk-sidebar .metismenu .mega-menu ul.in li a.active {
    color: var(--v2-primary) !important;
}
/* Sub-items */
.nk-sidebar .metismenu ul a {
    font-size: 0.7875rem !important;
    padding: 0.475rem 0.875rem 0.475rem 2.5rem !important;
}
/* Etiqueta de sección */
.nk-sidebar .nav-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #9ca3af !important;
    padding: 1rem 1.375rem 0.375rem !important;
}
/* Flecha del acordeón */
.nk-sidebar .metismenu .has-arrow:after {
    border-color: var(--v2-text-muted) !important;
    transition: transform 0.2s ease !important;
}

/* ── Content body ───────────────────────── */
.content-body {
    background-color: var(--v2-bg) !important;
}
.page-titles {
    background: transparent !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* ── Cards ──────────────────────────────── */
.card {
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius) !important;
    box-shadow: var(--v2-shadow) !important;
    background-color: #ffffff !important;
}
.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--v2-border) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--v2-text) !important;
    border-radius: var(--v2-radius) var(--v2-radius) 0 0 !important;
}
.card-body {
    padding: 1.25rem !important;
}
.card-footer {
    background-color: #fafafa !important;
    border-top: 1px solid var(--v2-border) !important;
    padding: 0.875rem 1.25rem !important;
}

/* ── Botones ─────────────────────────────── */
.btn {
    border-radius: 0.4375rem !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    padding: 0.46875rem 1rem !important;
    transition: all 0.15s ease !important;
    letter-spacing: 0.01em !important;
    line-height: 1.5 !important;
}
.btn:focus { box-shadow: none !important; }

.btn-primary {
    background-color: var(--v2-primary) !important;
    border-color: var(--v2-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--v2-primary-hover) !important;
    border-color: var(--v2-primary-hover) !important;
    box-shadow: 0 0 0 0.2rem rgba(5,150,105,.2) !important;
    color: #fff !important;
}
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--v2-primary-dark) !important;
    border-color: var(--v2-primary-dark) !important;
}

.btn-success {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}
.btn-success:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
    color: #fff !important;
}

.btn-info {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #fff !important;
}
.btn-info:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #fff !important;
}

.btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

.btn-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.btn-warning:hover {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #fff !important;
}
.btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
}

.btn-outline-primary {
    color: var(--v2-primary) !important;
    border-color: var(--v2-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--v2-primary) !important;
    border-color: var(--v2-primary) !important;
    color: #fff !important;
}

/* ── Formularios ─────────────────────────── */
.form-control {
    border: 1px solid var(--v2-border) !important;
    border-radius: 0.4375rem !important;
    font-size: 0.8125rem !important;
    padding: 0.46875rem 0.75rem !important;
    color: var(--v2-text) !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    line-height: 1.5 !important;
}
.form-control:focus {
    border-color: var(--v2-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(5,150,105,.15) !important;
    outline: none !important;
}
.form-control::placeholder { color: #9ca3af !important; }

label, .col-form-label {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    color: var(--v2-text) !important;
    margin-bottom: 0.3125rem !important;
}
.form-group { margin-bottom: 1rem !important; }

.input-group-text {
    background-color: #f9fafb !important;
    border: 1px solid var(--v2-border) !important;
    color: var(--v2-text-muted) !important;
    font-size: 0.8125rem !important;
    border-radius: 0.4375rem !important;
}

/* ── Tablas ──────────────────────────────── */
.table {
    font-size: 0.8125rem !important;
    color: var(--v2-text) !important;
}
.table thead th {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--v2-text-muted) !important;
    background-color: #f9fafb !important;
    border-bottom: 2px solid var(--v2-border) !important;
    border-top: none !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
}
.table td {
    padding: 0.75rem 1rem !important;
    border-top: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafafa !important;
}
.table-hover tbody tr:hover {
    background-color: var(--v2-primary-light) !important;
}
.table-bordered { border: 1px solid var(--v2-border) !important; }
.table-bordered td, .table-bordered th {
    border: 1px solid var(--v2-border) !important;
}

/* ── Breadcrumb ──────────────────────────── */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.breadcrumb-item a {
    color: var(--v2-text-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}
.breadcrumb-item.active {
    color: var(--v2-text) !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: #d1d5db !important; }

/* ── Badges ──────────────────────────────── */
.badge { font-weight: 600 !important; font-size: 0.6875rem !important; }
.badge-primary, .badge.badge-primary { background-color: var(--v2-primary) !important; }
.badge-success { background-color: #059669 !important; }
.badge-danger  { background-color: #dc2626 !important; }
.badge-warning { background-color: #d97706 !important; }
.badge-info    { background-color: #0284c7 !important; }

/* ── Alerts ──────────────────────────────── */
.alert {
    border-radius: var(--v2-radius) !important;
    font-size: 0.8125rem !important;
    border-width: 1px !important;
}
.alert-success {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}
.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
.alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

/* ── Paginación ──────────────────────────── */
.page-item .page-link {
    border-radius: 0.375rem !important;
    margin: 0 2px !important;
    font-size: 0.8125rem !important;
    color: var(--v2-text-muted) !important;
    border-color: var(--v2-border) !important;
    padding: 0.375rem 0.625rem !important;
    transition: all 0.15s ease !important;
}
.page-item.active .page-link {
    background-color: var(--v2-primary) !important;
    border-color: var(--v2-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.page-item .page-link:hover {
    background-color: var(--v2-primary-light) !important;
    color: var(--v2-primary) !important;
}

/* ── Nav tabs ────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--v2-border) !important;
}
.nav-tabs .nav-link {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    color: var(--v2-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0.6875rem 1rem !important;
    margin-bottom: -2px !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--v2-primary) !important;
    border-bottom-color: var(--v2-primary) !important;
    background: transparent !important;
}
.nav-tabs .nav-link:hover {
    color: var(--v2-primary) !important;
    border-bottom-color: var(--v2-primary-mid) !important;
}

/* ── DataTables ──────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--v2-border) !important;
    border-radius: 0.4375rem !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    color: var(--v2-text) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--v2-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(5,150,105,.15) !important;
    outline: none !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 0.8rem !important;
    color: var(--v2-text-muted) !important;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--v2-primary) !important;
}

/* ── Footer ──────────────────────────────── */
.footer {
    background: #ffffff !important;
    border-top: 1px solid var(--v2-border) !important;
    padding: 0.875rem 1.5rem !important;
}
.footer p {
    font-size: 0.75rem !important;
    color: var(--v2-text-muted) !important;
    margin: 0 !important;
}

/* ── Preloader ───────────────────────────── */
#preloader .loader .path { stroke: var(--v2-primary) !important; }

/* ── SweetAlert2 ─────────────────────────── */
.swal2-confirm {
    background-color: var(--v2-primary) !important;
    border-color: var(--v2-primary) !important;
    border-radius: 0.4375rem !important;
}
.swal2-cancel {
    background-color: #6b7280 !important;
    border-radius: 0.4375rem !important;
}
.swal2-popup { border-radius: 0.75rem !important; font-family: 'Inter', sans-serif !important; }
.swal2-title { font-size: 1.125rem !important; font-weight: 600 !important; }

/* ── Scrollbar sutil ──────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--v2-primary); }