body {
    font-family: 'Public Sans', sans-serif;
    padding-top: 6.5rem;
}

body.sin-padding-top {
    padding-top: 0 !important;
}

.main-btn {
    background-color: #ffffff;
    color: #24292f;
    border: 1px solid #d0d7de;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(27, 31, 35, 0.04);
}

.accent-btn {
    background-color: #214382;
    color: #ffffff;
    border: 1px solid #1a3361;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(27, 31, 35, 0.04);
}

.jumbotron {
    padding: 2rem;
}

.main-btn:hover {
    background-color: #f6f8fa;
    box-shadow: 0 3px 6px rgba(140, 149, 159, 0.15);
    text-decoration: none;
    color: #1f2328;
}

.accent-btn:hover {
    background-color: #1a3361;
    box-shadow: 0 3px 6px rgba(140, 149, 159, 0.15);
    text-decoration: none;
    color: #ffffff;
}

.main-btn svg {
    flex-shrink: 0;
    color: #57606a;
}

.light-accent {
    background-color: #DFEBF6;
}

nav.navbar {
    background-color: #214382;
}

.text-accent {
    color: #214382;
}

.bg-accent {
    background-color: #214382;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

#tabla-clientes {
    overflow-x: auto;
}

.gridjs-table {
    white-space: nowrap;
}

.gridjs-td {
    white-space: nowrap;
}

.gridjs-pagination button {
    font-size: 0.75rem;   /* Tamaño de fuente más pequeño */
    padding: 2px 6px;     /* Menos espacio alrededor del texto */
    height: auto;
}

/* Texto "Mostrando x de x" más pequeño */
.gridjs-summary {
    font-size: 0.75rem;   /* Más pequeño que el default */
    margin-top: 4px;
    color: #666;
}

/* Limita el ancho de la columna de descripción */
td:nth-child(4), th:nth-child(4) {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Opcional: mejora el aspecto del tooltip */
td:nth-child(4):hover::after {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: normal;
    max-width: 300px;
    font-size: 0.75rem;
    top: 100%;
    left: 0;
    z-index: 10;
}