/* Archivo: assets/css/style.css */
/* Hoja de estilos PERSONALIZADOS para Peña L'Abrevadero */
/* Se carga DESPUÉS de Bootstrap CSS, por lo que puede sobrescribir sus estilos. */

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

/* -----------------------------------------------------------------------------
   1. Variables CSS Globales (Tus personalizaciones de tema)
   ----------------------------------------------------------------------------- */
:root {
    /* Paleta de Colores Personalizada */
    /* Puedes usar estos para sobrescribir los colores por defecto de Bootstrap
       o para tus propios componentes. Para sobrescribir Bootstrap, puedes
       hacerlo aquí o, idealmente, usando Sass si tuvieras un proceso de build. */
    --abrevadero-primary: #3e994c;
    --abrevadero-primary-dark: #070908;
    --abrevadero-secondary: #070908; /* Tu color secundario personalizado */
    
    --abrevadero-success: #48bb78;
    --abrevadero-danger: #f56565;
    --abrevadero-warning: #ed8936;
    --abrevadero-info: #3498db;

    /* Sobrescribir variables de color de Bootstrap (opcional) */
    --bs-primary: var(--abrevadero-primary);
    --bs-primary-rgb: 62, 153, 76; /* Necesario si sobrescribes --bs-primary */
    /* --bs-secondary: #6c757d; */ /* Color secundario por defecto de Bootstrap */

    /* Fuentes */
    --abrevadero-font-sans-serif: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Radios de borde y sombras personalizadas si difieren de Bootstrap */
    --abrevadero-border-radius: 0.375rem; /* Coincide con --bs-border-radius de Bootstrap */
    --abrevadero-box-shadow: 0 .2rem .4rem rgba(0,0,0,.075); /* Sombra personalizada sutil */
}

/* -----------------------------------------------------------------------------
   2. Estilos Base y Ajustes Generales a Bootstrap (Opcional)
   ----------------------------------------------------------------------------- */
body {
    font-family: var(--abrevadero-font-sans-serif);
    /* Bootstrap ya establece un color de fondo y texto, pero puedes sobrescribirlo: */
    /* background-color: #f0f2f5; */
    /* color: #333; */
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    color: #333;
    display: flex; /* Para el footer pegajoso */
    flex-direction: column; /* Para el footer pegajoso */
    min-height: 100vh; /* Para el footer pegajoso */
}

main.main-content {
    flex-grow: 1; /* Para el footer pegajoso */
    display: flex; /* Para permitir que hijos como .auth-container usen flex-grow */
    flex-direction: column; /* Apilar hijos verticalmente */
}

/* Si quieres que todos los enlaces usen tu color primario */
/* a {
    color: var(--abrevadero-primary);
}
a:hover {
    color: var(--abrevadero-primary-dark);
} */

/* Ajustar el color de fondo de la navbar si es diferente al default de Bootstrap */
.navbar.bg-light { /* Asumiendo que usas .bg-light en la navbar */
     background-color: var(--abrevadero-primary) !important;  /* Ejemplo de sobrescritura */
}
.navbar-brand i {
    color: var(--abrevadero-primary); /* Color para el icono del logo */
    margin-right: 0.3em;
}

/* Footer pegajoso (Bootstrap ayuda con .mt-auto en el footer) */
.footer {
    /* background-color: #343a40; */ /* Color oscuro de Bootstrap para footer */
    /* color: rgba(255, 255, 255, 0.75); */
}
.footer a {
    /* color: rgba(255, 255, 255, 0.9); */
}
.footer a:hover {
    /* color: #fff; */
}

/* Tarjetas genéricas */
.card {
    border-radius: var(--abrevadero-border-radius);
    box-shadow: var(--abrevadero-box-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

/* -----------------------------------------------------------------------------
   3. Estilos Específicos de Componentes del Proyecto
      (Solo lo que Bootstrap no cubre o lo que quieres que sea diferente)
   ----------------------------------------------------------------------------- */

/* --- Páginas de Autenticación (Login, Register) --- */
.auth-container {
    /*background: linear-gradient(135deg, var(--abrevadero-primary) 0%, var(--abrevadero-secondary) 100%);*/
    flex-grow: 1; /* Hace que .auth-container llene el espacio vertical de main.main-content */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    width: 100%; /* Ocupa todo el ancho disponible en main */
}

.auth-card { /* Bootstrap .card ya da estructura, aquí solo personalizaciones */
    max-width: 480px;
    width: 100%;
    /* box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important; */ /* Sombra más pronunciada */
}

.auth-header h2 i {
    margin-right: 0.3em;
    color: var(--abrevadero-primary);
}

.password-strength-indicator {
    margin-top: 0.25rem; /* Más pegado al input */
    font-size: 0.8em;
    min-height: 1.1em; /* Evitar saltos de layout */
}

.auth-info {
    font-size: 0.85em;
}
.auth-info ul { /* Bootstrap ya quita padding y list-style de .list-unstyled */
    margin-bottom: 0;
}
.auth-info li {
    margin-bottom: 0.4rem;
}
.auth-info li i {
    color: var(--abrevadero-primary);
    width: 1.5em; /* Para alinear los iconos */
    text-align: center;
}

/* --- Cabecera de Página (Page Header) en Dashboard/Admin --- */
/* Bootstrap usa .border-bottom y .pb-*, .mb-* para esto */
.page-header h1 i {
    color: var(--abrevadero-primary);
}

/* --- Foto de perfil en el dashboard --- */
.user-profile-photo {
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: var(--abrevadero-box-shadow);
    object-fit: cover;
    margin: 0 auto;
    background-color: #fff;
}

/* --- Títulos de Sección en home.php --- */
.section-title {
    font-weight: 600; /* Títulos de sección más destacados */
}
.section-title i {
    color: var(--abrevadero-primary);
    margin-right: 0.2em;
}
.section-title::after {
    content: "";
    display: block;
    width: 60px; /* Más corto */
    height: 3px;
    background-color: var(--abrevadero-primary);
    margin: 0.6rem auto 0;
}
.section-intro {
    /* color: #6c757d; */ /* --bs-secondary-text de Bootstrap */
    /* max-width: 720px; */ /* Bootstrap .lead podría usarse aquí */
}

/* --- Sección Hero (home.php) --- */
.hero {
    position: relative;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-color: #333; /* Color de fondo si la imagen no carga o no existe */
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    padding: 5rem 1.5rem; /* Usar padding de Bootstrap o definir uno propio */
    margin-bottom: 2rem;
}

/* Si no hay imagen de fondo (podríamos añadir una clase .no-image con PHP) */
.hero.no-image {
    background-image: none !important; /* Quitar cualquier imagen */
    background-color: var(--abrevadero-primary); /* Un color sólido de tu marca */
    padding: 3rem 1.5rem; /* Menos padding si no hay imagen */
}
.hero.no-image .hero-content h1,
.hero.no-image .hero-content p {
    color: #fff; /* Asegurar contraste con el fondo sólido */
}
.hero.no-image::before {
    display: none; /* No necesitamos la superposición oscura si no hay imagen */
}


.hero::before { /* Superposición oscura, solo si hay imagen */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.hero.no-image::before { /* Asegurarnos de que no haya overlay si no hay imagen */
    background: none;
}

.hero-content {
    position: relative; 
    z-index: 2;
    text-align: center; /* Bootstrap: text-center */
    max-width: 800px;   /* Bootstrap: mx-auto */
    margin-left: auto;
    margin-right: auto;
}
.hero-content h1 {
    font-weight: 600;
    /* font-size: 2.5rem; Bootstrap: .display-4 o similar */
}
/* --- Navegación Secundaria de Secciones (home.php) --- */
/* Barra de submenú justo debajo de la navbar principal */
.sub-nav {
    background-color: var(--abrevadero-primary-dark);
    padding: 0.25rem 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.sub-nav .nav-link {
    color: #fff;
    font-size: 0.875rem; /* Enlaces más pequeños */
    padding: 0.25rem 0.75rem;
    margin: 0 0.25rem;
    border-radius: var(--bs-border-radius);
}

.sub-nav .nav-link:hover {
    background-color: var(--abrevadero-primary);
    color: #fff;
}

.sub-nav .nav-link.active {
    background-color: var(--abrevadero-primary);
    color: #fff;
    font-weight: 600;
}

.sub-nav .nav-link i {
    margin-right: 0.25rem;
}


/* --- Estilos para Bloques de Contenido (home.php) --- */
.block-paragraph {
    line-height: 1.7; /* Un poco más de interlineado */
}
.block-list {
    /* Bootstrap .list-unstyled quita estilos, si no, aquí irían */
}
.block-image img {
    /* Bootstrap .img-fluid ya lo hace responsive y .rounded para bordes */
    /* box-shadow: var(--bs-box-shadow-sm); */ /* Sombra sutil de Bootstrap */
}
.responsive-embed { /* Para iframes 16:9 */
    /* Bootstrap tiene .ratio .ratio-16x9 para esto */
}
.block-error {
    font-style: italic;
    /* Bootstrap .text-danger y .border-danger .bg-danger-subtle (BS5.3+) */
    padding: 0.5rem;
    border: 1px dashed var(--abrevadero-danger);
    border-radius: var(--bs-border-radius);
    background-color: rgba(245, 101, 101, 0.05);
    color: var(--abrevadero-danger);
}

.content-block-wrapper:hover {
    border-color: var(--abrevadero-primary, #3e994c); /* Color primario o un fallback */
    background-color: rgba(102, 126, 234, 0.03); /* Un ligero fondo para destacar */
}
.edit-block-button {
    opacity: 0.3; /* Hacer el botón semitransparente por defecto */
    transition: opacity 0.2s ease-in-out;
}
.content-block-wrapper:hover .edit-block-button {
    opacity: 1; /* Mostrar el botón completamente al pasar el ratón sobre el bloque */
}

/* --- Dashboard y Paneles de Admin --- */
.action-card {
    /* Se usa .card de Bootstrap. Personalizaciones aquí. */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.action-card:hover {
    transform: translateY(-4px);
    /* box-shadow: var(--bs-box-shadow-lg); */
}
.action-card i.fa-3x { /* Si usas fa-3x para iconos grandes en tarjetas */
    margin-bottom: 0.75rem;
    display: block;
    color: var(--abrevadero-primary);
}
.action-card.admin-card {
    border-left: 4px solid var(--abrevadero-danger);
}
.action-card.admin-card:hover {
    /* color: var(--abrevadero-danger); */
}
.action-card.admin-card:hover i.fa-3x {
    /* color: var(--abrevadero-danger); */
}

.detail-item {
    /* display: flex; align-items: baseline; gap: 0.5rem; */ /* Bootstrap .row y .col-* pueden usarse */
}
.detail-item label {
    font-weight: 500; /* Bootstrap .fw-semibold */
    /* min-width: 160px; */
}
.detail-item label i {
    color: var(--bs-secondary-color);
    margin-right: 0.3em;
    width: 1.2em; /* Para alinear iconos */
    text-align: center;
}

/* Badges para roles (Bootstrap .badge y .bg-*) */
.role-admin { background-color: var(--abrevadero-danger) !important; }
.role-editor { background-color: var(--abrevadero-warning) !important; color: #212529 !important; }
.role-user { background-color: var(--abrevadero-success) !important; }

.account-details .col-form-label { /* Para las etiquetas en la info de cuenta */
    padding-top: calc(0.375rem + 1px); /* Alinear con .form-control-plaintext */
    padding-bottom: calc(0.375rem + 1px);
    line-height: 1.5;
}
.account-details .form-control-plaintext {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
}
.account-details .badge { /* Ajuste para que el badge no afecte tanto la altura de línea */
    vertical-align: middle;
}
.account-actions {
    /* .d-flex .flex-wrap .gap-2 de Bootstrap ya debería funcionar bien */
}

/* Si las action-cards no se ven bien, podrías necesitar: */
.action-cards {
    /* display: grid; (ya lo tenías) */
    /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
    /* gap: 1.5rem; */
}
.action-cards .card { /* Si cada .action-card es ahora un .card de Bootstrap */
    height: 100%; /* Para que las tarjetas en la misma fila tengan la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para distribuir el contenido verticalmente */
}
.action-cards .card .card-body {
    flex-grow: 1;
}


/* Formularios de Admin */
.admin-form-card fieldset {
    /* border: 1px solid var(--bs-border-color); */ /* Bootstrap .border */
    /* padding: 1.25rem; */ /* Bootstrap .p-3 */
    /* border-radius: var(--bs-border-radius); */ /* Bootstrap .rounded */
}
.admin-form-card fieldset legend {
    font-size: 1.1rem;
    font-weight: 500; /* Bootstrap .fw-semibold */
    padding: 0 0.5em;
    width: auto;
}

.actions-column .btn {
    /* Bootstrap .btn-sm */
}
.role-select.form-select-sm {
    width: auto; /* Para que no ocupe todo el ancho */
    display: inline-block;
    vertical-align: middle;
}

/* Tarjetas de estadísticas en Admin */
.stat-card {
    /* Bootstrap .card .text-center .p-3 .border .rounded .bg-light */
}
.stat-card .stat-icon {
    font-size: 2.5rem; /* Bootstrap .fs-2 o similar */
    color: var(--abrevadero-primary);
}
.stat-card .stat-value {
    font-weight: 600; /* Bootstrap .display-6 .fw-bold */
}
.stat-card .stat-label {
    font-size: 0.9em;
    /* color: var(--bs-secondary-text); */
}

/* Preview de datos de bloque en admin_blocks.php */
.block-data-preview {
    font-size: 0.8em;
    /* color: var(--bs-secondary-text); */
    word-break: break-all;
    background-color: #f8f9fa; /* bg-light */
    padding: 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    max-height: 100px; /* Evitar que sea demasiado largo */
    overflow-y: auto;
}
.block-data-preview strong {
    /* color: var(--bs-body-color); */
}

/* -----------------------------------------------------------------------------
   4. Estilos para Editor TinyMCE (Básicos)
   ----------------------------------------------------------------------------- */
/* Los estilos principales de TinyMCE vienen de su propio CSS.
   Aquí solo ajustes si el contenedor por defecto de Bootstrap no es suficiente. */
.tox-tinymce {
    border: 1px solid var(--bs-border-color) !important; /* Asegurar que el borde sea visible */
    border-radius: var(--bs-border-radius) !important;
    box-shadow: var(--abrevadero-box-shadow); /* Sombra personalizada si se desea */
}

/* -----------------------------------------------------------------------------
   5. Media Queries para Ajustes Finos (Bootstrap maneja la mayor parte)
   ----------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .auth-container {
        /* Ajustar min-height si la navbar y footer cambian de altura en móvil */
        min-height: calc(100vh - 56px - 56px); /* Ejemplo */
    }

    .detail-item label {
        min-width: auto; /* En móvil, la etiqueta puede ir arriba */
        margin-bottom: 0.1rem;
    }

    .actions-column .btn { /* Botones en tablas, uno por línea en móvil */
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
     .actions-column .btn:last-child {
        margin-bottom: 0;
    }
}
/* --- Diseño visual e interacciones añadidas --- */
/*body {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}*/

.navbar.sticky-top {
    backdrop-filter: blur(10px);
    background-color: var(--abrevadero-primary)  !important; /*rgba(255, 255, 255, 0.85)*/
}

.nav-link:hover {
    color: #ffd700 !important;
}

.hero.fullscreen {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero .btn {
    border-radius: 50px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero .btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.section-light { background-color: #fff; }
.section-dark { background-color: #f5f5f5; }
.section-title::after { background: #ffd700; }

.timeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 3rem; /* espacio para la línea */
}
.timeline::before {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffd700;
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1rem; /* separación del contenido */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.3rem;
    top: 0;
    width: 12px;
    height: 12px;
    background: #ffd700;
    border-radius: 50%;
}

/* Estilos para Línea Temporal (Timeline Block) */
.timeline-block {
    position: relative;
    margin: 3rem 0;
    padding: 1rem 0;
}
.timeline-block::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--abrevadero-primary, #3e994c);
    transform: translateX(-50%);
    border-radius: 2px;
}
.timeline-block-item {
    position: relative;
    margin-bottom: 50px;
    width: 50%;
    padding: 10px 40px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.timeline-block-item.visible {
    opacity: 1;
    transform: translateY(0);
}
.timeline-block-item.left {
    left: 0;
    padding-right: 30px; /* Ajuste para que el contenido no se pegue a la línea */
}
.timeline-block-item.right {
    left: 50%;
    padding-left: 70px; /* Aumentado para que el contenido no se pegue a la línea */
}
.timeline-block-item::after { /* Círculo en la línea */
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 4px solid var(--abrevadero-primary, #3e994c);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}
.timeline-block-item.left::after {
    right: -10px; /* Ajustar para centrar en la línea */
}
.timeline-block-item.right::after {
    left: -10px; /* Ajustar para centrar en la línea */
}
.timeline-block-content {
    position: relative;
    background-color: #fff;
    border-radius: var(--abrevadero-border-radius, 0.375rem);
    border: 1px solid #eee;
}
.timeline-block-content .card-title {
    color: var(--abrevadero-primary-dark, #070908);
}
.timeline-block-icon {
    position: absolute;
    top: 10px;
    font-size: 1.5rem;
    color: var(--abrevadero-primary, #3e994c);
}
.timeline-block-item.left .timeline-block-icon {
    right: 15px; /* Icono dentro de la tarjeta */
}
.timeline-block-item.right .timeline-block-icon {
    left: 15px; /* Icono dentro de la tarjeta */
}

/* Estilos para Cuadrícula de Tarjetas (Card Grid Block) */
.card-grid .technique-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.card-grid .technique-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.card-grid-block .card-grid-block-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-grid-block .card-grid-block-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0,0,0,.175));
}
.card-grid-block .card-img-top {
    height: 200px;
    object-fit: cover;
}
.card-grid-block .card-footer {
    background-color: transparent;
    border-top: none;
}

/* Estilos para Lista Detallada (Detailed List Block) */
.detailed-list-block .detailed-list-item {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.detailed-list-block .detailed-list-item:hover {
    transform: scale(1.02);
    box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
}
.detailed-list-block .card-title {
    color: var(--abrevadero-primary, #3e994c);
}


/* Estilos para Círculos Interactivos (Interactive Circles Block) */
.interactive-circles-block .interactive-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--bs-box-shadow-sm);
    text-align: center;
    padding: 5px; /* Para que el texto no se pegue a los bordes */
    font-size: 0.9rem;
}
.interactive-circles-block .interactive-circle:hover {
    transform: scale(1.1);
    box-shadow: var(--bs-box-shadow-lg);
}
/* Clases de color personalizadas para círculos (ejemplos) */
.interactive-circles-block .circle-blue { background-color: #0162ef; }
.interactive-circles-block .circle-green { background-color: #198754; }
.interactive-circles-block .circle-red { background-color: #f40106; }
.interactive-circles-block .circle-white { background-color: #b2b2b1; }
/* Puedes añadir más o usar las clases de Bootstrap bg-* directamente en el JS */

.interactive-circles-content-area .card {
    border-left: 5px solid var(--abrevadero-primary);
}

/* Ajustes para el botón de edición de bloques en hover */
.content-block-wrapper:hover .edit-block-button {
    opacity: 1 !important;
}

.back-to-top {
    position: fixed;
    bottom: 40px;
    right: 30px;
    display: none;
    z-index: 999;
}

/* Modal genérico */
.modal.show {
    display: flex !important; /* Asegurar que se muestre */
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.5); /* Fondo semitransparente */
}
.modal .modal-content { /* Tu modal-content ya tiene estilos, pero aseguremos que sea visible */
    background: #fff;
    border-radius: var(--bs-border-radius);
    min-width: 300px; /* Un ancho mínimo */
    max-width: 70%; /* Un ancho máximo */
    max-height: 80vh; /* Alto máximo para permitir scroll */
    overflow-y: auto;
}

/* Media Queries para responsividad de la línea temporal */
@media (max-width: 767.98px) {
    .timeline-block::before {
        left: 20px; /* Línea a la izquierda */
        transform: translateX(0);
    }
    .timeline-block-item {
        width: 100%;
        padding-left: 60px; /* Espacio para el contenido */
        padding-right: 15px;
    }
    .timeline-block-item.left,
    .timeline-block-item.right {
        left: 0; /* Todos los items alineados */
        padding-left: 70px; /* Espacio para el contenido y el círculo */
        padding-right: 15px;
    }
    .timeline-block-item.left::after,
    .timeline-block-item.right::after {
        left: 10px; /* Círculo a la izquierda de la línea */
    }
    .timeline-block-item.right .timeline-block-icon,
    .timeline-block-item.left .timeline-block-icon {
        /* Ajustar si es necesario para móvil */
    }
    .interactive-circles-block .interactive-circle {
        width: 80px;
        height: 80px;
        font-size: 0.8rem;
    }
}


/* ... (resto de tus estilos y media queries) ... */

/* Ajustes para elementos de navegación con submenús */
.navbar-nav .dropdown.d-flex .dropdown-toggle-split {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}