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

:root {
    --bs-primary:   #30B5A4;   /* Azul turquesa */
    --bs-secondary: #30B5A4;   /* Verde-azulado suave */
    --bs-success:   #2ECC71;   /* Verde fresco */
    --bs-danger:    #E74C3C;   /* Rojo armónico */
    --bs-warning:   #F1C40F;   /* Amarillo oro */
    --bs-info:      #3498DB;   /* Azul vivo */
    --bs-light:     #f8f9fa;
    --bs-dark:      #1f2e3c;
}

/* === BTN PRIMARY === */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(48, 181, 164, 0.3);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
   background-color: #259d90;
    border-color: #259d90;
    color: #fff;
}

.btn-primary:disabled {
    background-color: #a0e8e0;
    border-color: #a0e8e0;
    color: #fff;
}

/* === BTN SECONDARY === */
.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #259c8f;
    border-color: #259c8f;
    color: #fff;
}

.btn-secondary:disabled {
    background-color: #c8e4e0;
    border-color: #c8e4e0;
    color: #fff;
}

/* === BTN SUCCESS === */
.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: #27ae60;
    border-color: #27ae60;
    color: #fff;
}

.btn-success:disabled {
    background-color: #a9dfbf;
    border-color: #a9dfbf;
    color: #fff;
}

/* === BTN DANGER === */
.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.btn-danger:disabled {
    background-color: #f5b7b1;
    border-color: #f5b7b1;
    color: #fff;
}

/* === BTN WARNING === */
.btn-warning {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #212529;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #d4ac0d;
    border-color: #d4ac0d;
    color: #212529;
}

.btn-warning:disabled {
    background-color: #f9e79f;
    border-color: #f9e79f;
    color: #212529;
}

/* === BTN INFO === */
.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #2c80b4;
    border-color: #2c80b4;
    color: #fff;
}

.btn-info:disabled {
    background-color: #aed6f1;
    border-color: #aed6f1;
    color: #fff;
}

/* === BTN OUTLINE === */
.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--bs-primary);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--bs-secondary);
    color: #fff;
}

.btn-outline-success {
    color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--bs-success);
    color: #fff;
}

.btn-outline-danger {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--bs-danger);
    color: #fff;
}

.btn-outline-warning {
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: var(--bs-warning);
    color: #212529;
}

.btn-outline-info {
    color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--bs-info);
    color: #fff;
}

/* === PAGINATION DARK MODE FOR TURQUESA === */
.pagination {
    --bs-pagination-color: #117a7a; /* texto claro */
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: #28bfb3; /* borde armónico */
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--bs-primary);
    --bs-pagination-hover-border-color: var(--bs-primary);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: #28bfb3;
}

.page-link {
    background-color: transparent;
    color: var(--bs-pagination-color);
    border: 1px solid var(--bs-pagination-border-color);
    transition: all 0.2s ease-in-out;
}

.page-link:hover,
.page-link:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.page-item.disabled .page-link {
    background-color: transparent;
    color: #6c757d;
    border-color: var(--bs-pagination-disabled-border-color);
}

/* === BADGES === */
.badge-primary {
    background-color: var(--bs-primary);
    color: #fff;
}

.badge-secondary {
    background-color: var(--bs-secondary);
    color: #fff;
}

.badge-success {
    background-color: var(--bs-success);
    color: #fff;
}

.badge-danger {
    background-color: var(--bs-danger);
    color: #fff;
}

.badge-warning {
    background-color: var(--bs-warning);
    color: #212529;
}

.badge-info {
    background-color: var(--bs-info);
    color: #fff;
}

.badge-light {
    background-color: var(--bs-light);
    color: #212529;
}

.badge-dark {
    background-color: var(--bs-dark);
    color: #fff;
}

.badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}


body {
    font-family: 'Inter', sans-serif;
}