/* =====================================================
   ROOT COLOR SYSTEM
===================================================== */

:root {
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --primary-soft: #ede9fe;
    --secondary: #2563eb;
    --secondary-hover: #1d4ed8;
    --secondary-soft: #dbeafe;
    --accent: #f59e0b;
    --accent-soft: #fef3c7;
    --success: #10b981;
    --success-soft: #d1fae5;
    --warning: #f59e0b;
    --warning-soft: #fef3c7;
    --danger: #ef4444;
    --danger-soft: #fee2e2;
    --info: #0ea5e9;
    --info-soft: #e0f2fe;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --bg-main: #ffffff;
    --bg-soft: var(--gray-50);
    --bg-muted: var(--gray-100);

    --text-main: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-500);
    --text-light: var(--gray-400);
    --text-white: #ffffff;

    --border-light: var(--gray-200);
    --border-soft: var(--gray-300);
    --border-strong: var(--gray-400);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
  
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-medium: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-strong: 0 8px 24px rgba(0,0,0,0.12);

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    --gradient-primary: linear-gradient(135deg, #7c3aed, #2563eb);
  }

/* =====================================================
    GLOBAL RESET
===================================================== */

::-webkit-scrollbar {width: 6px;height: 6px;}
::-webkit-scrollbar-thumb {background: var(--border-strong);border-radius: 10px;}
::-webkit-scrollbar-track {background: var(--bg-main);border-radius: 10px;}
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: "Plus Jakarta Sans", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-size: clamp(14px, 1.2vw, 16px);line-height:1.6;background-color: var(--bg-main);color: var(--text-main);}

/* =====================================================
    TYPOGRAPHY
===================================================== */

a {color: var(--primary);text-decoration: none;transition: color 0.2s ease-in-out;}  
a:hover,
a:focus {color: var(--secondary);text-decoration: none;outline: none;}
h1 {font-size: clamp(24px, 2.2vw, 32px);line-height: 1.2;font-weight: 700;margin-bottom: var(--space-md);}  
h2 {font-size: clamp(20px, 1.8vw, 26px);line-height: 1.25;font-weight: 600;margin-bottom: var(--space-sm);}  
h3 {font-size: clamp(18px, 1.5vw, 22px);line-height: 1.3;font-weight: 600;margin-bottom: var(--space-sm);}  
h4 {font-size: clamp(16px, 1.3vw, 18px);line-height: 1.35;font-weight: 500;margin-bottom: var(--space-xs);}  
h5 {font-size: clamp(14px, 1.2vw, 16px);line-height: 1.4;font-weight: 500;}  
h6 {font-size: clamp(13px, 1.1vw, 14px);line-height: 1.4;font-weight: 500;color: var(--text-muted);}  
p {font-size: clamp(14px, 1.2vw, 16px);line-height: 1.6;margin-bottom: var(--space-sm);color: var(--text-main);}
p span {font-weight: 600;}  
ul,
ol {padding-left: var(--space-md);margin-bottom: var(--space-md);}  
ul li,
ol li {margin-bottom: var(--space-xs);font-size: clamp(14px, 1.2vw, 16px);color: var(--text-secondary);}  
ul li {list-style: disc;}  
ol li {list-style: decimal;}  
.list-clean {padding-left: 0;}  
.list-clean li {list-style: none;margin-left: 0;}  
.small {font-size: clamp(12px, 1.1vw, 14px);}
.small-xs {font-size: clamp(11px, 1vw, 12px);}  
.text-muted {color: var(--text-muted);} 
.fw-medium {font-weight: 500 !important;}  
.fw-semibold {font-weight: 600 !important;}  
.fw-bold {font-weight: 700 !important;}



  .label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
  }


/* =====================================================
   BUTTON SYSTEM
===================================================== */

.btn {display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 8px 18px;font-size: clamp(14px, 1.2vw, 16px);font-weight: 500;border-radius: 999px;border: 1px solid transparent;cursor: pointer;text-decoration: none;transition: all 0.2s ease;}  
.btn-primary {background: var(--gradient-primary);color: var(--text-white);}  
.btn-primary:hover {opacity: 0.9;transform: translateY(-1px);}
.btn-primary:active {transform: scale(0.98);}  
.btn-secondary {background: var(--secondary);color: var(--text-white);}  
.btn-secondary:hover {background: var(--secondary-hover);transform: translateY(-1px);}  
.btn-secondary:active {transform: scale(0.98);}  
.btn-outline {border: 1px solid var(--border-soft);background: var(--bg-main);color: var(--text-main);}  
.btn-outline:hover {background: var(--bg-soft);border-color: var(--border-strong);}  
.btn-outline:active {transform: scale(0.98);}  
.btn-success {background: var(--success);color: var(--text-white);}
.btn-warning {background: var(--warning);color: var(--text-white);}  
.btn-danger {background: var(--danger);color: var(--text-white);}  
.btn-sm {padding: 6px 12px;font-size: 13px;border-radius: var(--radius-sm);}  
.btn-lg {padding: 14px 22px;font-size: 16px;border-radius: var(--radius-lg);}  
.btn:disabled,
.btn.disabled {opacity: 0.6;cursor: not-allowed;pointer-events: none;}  
.btn:focus-visible {outline: 2px solid var(--primary);outline-offset: 2px;}

/* =====================================================
   FORM SYSTEM
===================================================== */

.form-group {margin-bottom: var(--space-md);}
.form-label,
label {display: block;font-size: 13px;font-weight: 500;margin-bottom: var(--space-xs);color: var(--text-secondary);}
.form-control,
input,
select,
textarea {width: 100%;max-width: 100%;padding: 10px 12px;font-size: clamp(14px, 1.2vw, 16px);border-radius: var(--radius-sm);border: 1px solid var(--border-soft);background: var(--bg-main);color: var(--text-main);transition: all 0.2s ease;}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {outline: none;border-color: var(--primary);box-shadow: none;}
::placeholder {color: var(--text-light);}
.form-text {font-size: clamp(11px, 1vw, 12px);color: var(--text-muted);}
.form-check-input {width: 18px;height: 18px;border-radius: 4px;border: 1px solid var(--border-soft);cursor: pointer;}
.form-check-input[type="radio"] {border-radius: 50%;}
.form-check-input:checked {background-color: var(--primary);border-color: var(--primary);}
.form-control:disabled,
input:disabled,
select:disabled,
textarea:disabled {background: var(--bg-muted);cursor: not-allowed;opacity: 0.7;}
.is-invalid {border-color: var(--danger);}
.is-invalid:focus {box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);}
.is-valid {border-color: var(--success);}
.is-valid:focus {box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);}

/* =====================================================
   BADGE SYSTEM (HUNTO)
===================================================== */

.badge {display: inline-flex;align-items: center;justify-content: center;padding: 5px 12px;font-size: clamp(12px, 1vw, 13px);font-weight: 500;border-radius: 999px;line-height: 1;white-space: nowrap;}
.badge:hover,
.badge:focus {color: var(--primary);}
.badge-primary {background: var(--primary-soft);color: var(--primary);}
.badge-secondary {background: var(--secondary-soft);color: var(--secondary);}
.badge-success {background: var(--success-soft);color: var(--success);}
.badge-warning {background: var(--warning-soft);color: var(--warning);}
.badge-danger {background: var(--danger-soft);color: var(--danger);}
.badge-info {background: var(--info-soft);color: var(--info);}
.badge-light {background: var(--bg-soft);color: var(--text-secondary);}
.badge-solid-primary {background: var(--primary);color: var(--text-white);}
.badge-solid-success {background: var(--success);color: var(--text-white);}
.badge-solid-danger {background: var(--danger);color: var(--text-white);}
.badge-sm {padding: 3px 8px;font-size: 11px;}
.badge-lg {padding: 6px 12px;font-size: 13px;}
.bg-primary {background-color: var(--primary);}
.bg-secondary {background-color: var(--secondary);}
.bg-success {background-color: var(--success);}
.bg-danger {background-color: var(--danger);}
.bg-warning {background-color: var(--warning);}
.bg-info {background-color: var(--info);}
.bg-light {background-color: var(--bg-muted);}
.text-primary {color: var(--primary);}
.text-secondary {color: var(--secondary);}
.text-success {color: var(--success);}
.text-warning {color: var(--warning);}
.text-danger {color: var(--danger);}
.text-dark {color: var(--text-main);}
.text-secondary {color: var(--text-secondary);}
.pointer {cursor: pointer;}

/* =====================================================
   CARD SYSTEM
===================================================== */

.card {background: var(--bg-main);border: 1px solid var(--border-light);border-radius: var(--radius-lg);padding: var(--space-lg);box-shadow: 0 4px 10px var(--shadow-soft);transition: all 0.2s ease;}
.card-hover:hover {box-shadow: 0 8px 20px var(--shadow-medium);transform: translateY(-2px);}
.card-header {font-size: 16px;font-weight: 600;color: var(--text-main);margin-bottom: var(--space-sm);}
.card-body {font-size: 14px;color: var(--text-secondary);}
.card-footer {margin-top: var(--space-md);padding-top: var(--space-sm);border-top: 1px solid var(--border-light);}

  /* =====================================================
   ALERT SYSTEM
===================================================== */

.alert {padding: var(--space-sm) var(--space-md);border-radius: var(--radius-sm);font-size: 14px;margin-bottom: var(--space-md);border: 1px solid transparent;}
.alert-success {background: var(--success-soft);color: var(--success);border-color: var(--success);}
.alert-warning {background: var(--warning-soft);color: var(--warning);border-color: var(--warning);}
.alert-danger {background: var(--danger-soft);color: var(--danger);border-color: var(--danger);}
.alert-info {background: var(--info-soft);color: var(--info);border-color: var(--info);}

/* =====================================================
   TABLE SYSTEM
===================================================== */

.table {width: 100%;border-collapse: collapse;font-size: 14px;}
.table thead th {text-align: left;padding: var(--space-sm);background: var(--bg-muted);color: var(--text-secondary);font-weight: 600;border-bottom: 1px solid var(--border-light);}
.table td {padding: var(--space-sm);border-bottom: 1px solid var(--border-light);color: var(--text-main);}
.table tbody tr:hover {background: var(--bg-soft);}
.table-responsive {overflow-x: auto;}

/* =====================================================
   PAGINATION SYSTEM
===================================================== */

.pagination {display: flex;align-items: center;justify-content: center;gap: var(--space-xs);margin-top: var(--space-lg);}
.page-item {list-style: none;}
.page-link {display: inline-flex;align-items: center;justify-content: center;min-width: 36px;height: 36px;padding: 0 10px;font-size: 14px;color: var(--text-secondary);border: 1px solid var(--border-soft);border-radius: var(--radius-sm);background: var(--bg-main);text-decoration: none;transition: all 0.2s ease;}
.page-link:hover {background: var(--bg-soft);color: var(--primary);border-color: var(--primary);}
.page-item.active .page-link {background: var(--primary);color: var(--text-white);border-color: var(--primary);}
.page-item.disabled .page-link {opacity: 0.5;cursor: not-allowed;pointer-events: none;}
@media (max-width: 576px) {
    .page-link {min-width: 32px;height: 32px;font-size: 13px;}
}

/* =====================================================
   MODAL SYSTEM
===================================================== */

.modal-content {background: var(--bg-main);border-radius: var(--radius-lg);box-shadow: 0 20px 40px var(--shadow-strong);border: 0;transition: all 0.2s ease;}
.modal-header {display: flex;align-items: center;justify-content: space-between;padding: var(--space-md);border-bottom: 1px solid var(--border-light);}
.modal-header .btn-close {box-shadow: none;}
.modal-header .modal-title {font-weight: 600;}
.modal-body {padding: var(--space-md);font-size: 14px;color: var(--text-secondary);}
.modal-footer {display: flex;justify-content: flex-end;gap: var(--space-sm);padding: var(--space-md);border-top: 1px solid var(--border-light);}

.dropdown-menu {border: 1px solid var(--border-light);border-radius: var(--radius-lg);padding: 12px 0px;box-shadow: var(--shadow-soft);}

/* ==== header ==== */
.header {border-bottom: 1px solid var(--border-light);padding: 12px 0px;background-color: var(--bg-main);}
.header .logo img {height: clamp(20px, 2vw, 25px);width: auto;}
.header .btn-link {font-size: clamp(14px, 1.2vw, 16px);padding: 0;color: var(--text-main)!important;}
.header .btn-link svg {width: clamp(18px, 3vw, 20px);height: clamp(18px, 3vw, 20px);stroke-width: 1.75;}
.header .btn-circle {width: clamp(30px, 3vw, 35px);height: clamp(30px, 3vw, 35px);border-radius: 50%;padding: 0;}
.header .btn-circle svg {width: 20px;height: 20px;}
.header .dropdown .btn-primary {width: clamp(30px, 3vw, 35px);height: clamp(30px, 3vw, 35px);border-radius: 50%;padding: 0;}
.header .dropdown-menu {min-width: 220px;}
.header .dropdown-menu img {width: 72px;height: 72px;border-radius: 50%;margin-bottom: var(--space-sm);}
.header .dropdown-menu .profile-name {font-weight: 500;}
.header .dropdown-menu .dropdown-item {display: flex;align-items: center;gap: 10px;padding: 6px 12px;border-radius: var(--radius-sm);transition: all 0.2s ease;}
.header .dropdown-menu .dropdown-item:hover {background: var(--bg-soft);color: var(--primary);}
.header .dropdown-menu .dropdown-item svg {width: 20px;height: 20px;stroke-width: 1.75;}
.header .dropdown-menu .dropdown-divider {margin: var(--space-sm) 0;}
/*.header .dropdown::before {content: "";position: absolute;top: -6px;right: 16px;width: 10px;height: 10px;background: var(--bg-main);transform: rotate(45deg);border-left: 1px solid var(--border-light);border-top: 1px solid var(--border-light);}*/


/* ==== footer ==== */
.footer {padding: 80px 0px;border-top: 1px solid var(--border-light);}
.footer a {color: var(--text-secondary);}
.footer a:hover,
.footer a:focus {color: var(--primary);}
.footer h5 {color: var(--text-main);margin-bottom: var(--space-sm);font-weight: 600;}
.footer ul>li {margin-bottom: var(--space-sm);}
.footer .logo img {height: clamp(20px, 2vw, 25px);width: auto;}
.footer .social {margin: 25px 0px;}
.footer .social svg {width: 20px;height: 20px;}
.footer .social a {color: var(--text-muted);transition: all 0.2s ease;}
.footer .social a:hover {color: var(--primary);transform: translateY(-2px);}



.card {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* Service */
.service-card {
    background: #ffffff;
}

/* Engagement */
.engagement-card {
    background: #ffffff;
}

/* Scroll 
.d-flex.overflow-auto {
    padding-bottom: 5px;
}

::-webkit-scrollbar {
    display: auto;
}
*/