/* Paleta de colores Terraviewer */
:root {
    --color-gris-azul: #9496A6;
    --color-azul-oscuro: #2C5273;
    --color-gris-claro: #F2F2F2;
    --color-turquesa: #39BFBF;
    --color-turquesa-claro: #A3D9D9;
}

/* Botones primarios - Turquesa (color dominante 40%) */
.btn-primary {
    background-color: var(--color-turquesa) !important;
    border-color: var(--color-turquesa) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #2da0a0 !important;
    border-color: #2da0a0 !important;
}

/* Botones secundarios - Azul oscuro (25%) */
.btn-secondary {
    background-color: var(--color-azul-oscuro) !important;
    border-color: var(--color-azul-oscuro) !important;
}

.btn-secondary:hover {
    background-color: #234055 !important;
    border-color: #234055 !important;
}

/* Botones de éxito */
.btn-success {
    background-color: var(--color-turquesa) !important;
    border-color: var(--color-turquesa) !important;
}

.btn-success:hover {
    background-color: #2da0a0 !important;
    border-color: #2da0a0 !important;
}

/* Botones de información - Turquesa claro (20%) */
.btn-info {
    background-color: var(--color-turquesa-claro) !important;
    border-color: var(--color-turquesa-claro) !important;
    color: #2C5273 !important;
}

.btn-info:hover {
    background-color: var(--color-turquesa) !important;
    border-color: var(--color-turquesa) !important;
    color: #fff !important;
}

/* Enlaces - Turquesa */
a {
    color: var(--color-turquesa);
}

a:hover {
    color: var(--color-azul-oscuro);
}

/* Tablas - Azul oscuro en header */
.table thead {
    background-color: var(--color-azul-oscuro);
    color: #fff;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(163, 217, 217, 0.15);
}

.table-hover tbody tr:hover {
    background-color: rgba(163, 217, 217, 0.25);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--color-turquesa) !important;
}

.badge.bg-secondary {
    background-color: var(--color-azul-oscuro) !important;
}

.badge.bg-info {
    background-color: var(--color-turquesa-claro) !important;
    color: var(--color-azul-oscuro) !important;
}

/* Formularios - Turquesa en focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-turquesa);
    box-shadow: 0 0 0 0.25rem rgba(57, 191, 191, 0.25);
}

/* Cards - Turquesa claro en header */
.card {
    border-color: var(--color-turquesa-claro);
}

.card-header {
    background: linear-gradient(135deg, var(--color-turquesa-claro) 0%, var(--color-turquesa) 100%);
    border-bottom-color: var(--color-turquesa);
    color: #fff;
}

/* Alerts */
.alert-info {
    background-color: rgba(163, 217, 217, 0.3);
    border-color: var(--color-turquesa-claro);
    color: var(--color-azul-oscuro);
}

.alert-success {
    background-color: rgba(57, 191, 191, 0.2);
    border-color: var(--color-turquesa);
    color: var(--color-azul-oscuro);
}

/* Paginación - Turquesa */
.pagination .page-link {
    color: var(--color-turquesa);
}

.pagination .page-link:hover {
    color: #fff;
    background-color: var(--color-turquesa);
    border-color: var(--color-turquesa);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-azul-oscuro);
    border-color: var(--color-azul-oscuro);
}

/* Progress bars - Turquesa */
.progress-bar {
    background-color: var(--color-turquesa);
}

/* Headings con color azul oscuro */
h1, h2, h3 {
    color: var(--color-azul-oscuro);
}

/* Border accent - Gris azul (5%) para detalles sutiles */
.border-accent {
    border-color: var(--color-gris-azul) !important;
}

/* Text muted personalizado */
.text-muted {
    color: var(--color-gris-azul) !important;
}