:root {
    --color-teal: #009688;
    --color-teal-hover: #007d71;
    --color-teal-light: rgba(0, 150, 136, 0.1);
}

.btn-teal {
    background-color: var(--color-teal) !important;
    color: white !important;
}

.btn-teal:hover {
    background-color: var(--color-teal-hover) !important;
}

.btn-outline-teal {
    border: 1px solid var(--color-teal) !important;
    color: var(--color-teal) !important;
}

.btn-outline-teal:hover {
    background-color: var(--color-teal) !important;
    color: white !important;
}

.text-teal {
    color: var(--color-teal) !important;
}

.bg-teal-light {
    background-color: var(--color-teal-light) !important;
}

.bg-teal {
    background-color: var(--color-teal) !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* Esto es estándar de HTMX: Oculta el spinner por defecto, lo muestra cuando HTMX carga */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}