:root {
    --accent: rgb(212, 255, 0);
    --accent-hover: rgb(190, 228, 0);
    --accent-active: #72d534;
    --control: #49aa00;
    --secondary: #ecefeb;
    --secondary-hover: #e0e4de;
    --secondary-active: #6c6c6b;
    --headline-color: rgba(100, 105, 150, 1);
    --event-text: rgba(29, 32, 59, 1);
    --success: rgba(80, 189, 85, 1);
    --error: rgba(232, 113, 113, 1);
    --white: rgba(255, 255, 255, 1);
    --accent-text: #163300;
    --scrollbar-thumb: #c6cdc1;
}

/** {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}*/

body {
    /*padding: 2rem;*/
    /*display: flex;*/
    height: 100vh;
    /*font-family: "Inter", sans-serif;*/
}

.top-bar {
    margin-top: 10px;
    display: flex;
    /*gap: 160px;*/
    gap: 16px;
    align-items: center;
    width: 100%;
    flex-direction: row;
    color: var(--headline-color);
}

.top-bar h2 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}
.action-buttons {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    scroll-snap-align: start;
    width: 100%;
    flex-wrap: wrap;
}

.action-button {
    color: var(--accent-text);
    border-radius: 1rem;
    height: 2rem;
    gap: 0.25rem;
    cursor: pointer;
    display: flex;
    padding: 0 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    align-items: center;
    text-decoration: none;
    background: var(--secondary);
}

.action-button--primary:active {
    background: var(--accent-active);
}

.action-button:active {
    background: var(--secondary-active);
}

.action-button--horizontal-scroll {
    border-radius: 50%;
    cursor: pointer;
    border: none;
    outline: none;
    width: 2rem;
    height: 2rem;
    background: var(--accent);
    z-index: 10; /* Asegura que estén por encima del carrusel */
}

.action-button--horizontal-scroll:hover {
    background: var(--accent-hover);
}

.action-button--horizontal-scroll:active {
    background: var(--accent-active);
}
.action-button--horizontal-scroll:disabled {
    cursor: not-allowed;
    background: var(--secondary);
}

.action-button--horizontal-scroll:disabled:hover {
    background: var(--secondary);
}

.action-button--horizontal-scroll:disabled:active {
    background: var(--secondary);
}

/*#action-button--previous {
    margin-left: auto;
    transform: rotate(90deg);
}

#action-button--next {
    transform: rotate(90deg);
}*/
.action-button:hover {
    background: var(--secondary-hover);
}

.action-button--primary {
    background: var(--accent);
}

.action-button--primary:hover {
    background: var(--accent-hover);
}
.action-button--primary:active {
    background: var(--accent-active);
}
#events {
    display: flex;
    gap: 8px; /* Reduce el espacio entre imágenes */
    overflow-x: auto;
    /*padding: 10px 0;*/
    scroll-behavior: smooth;
    background-color: #f9f9f9; /* Cambia este valor al color que desees */
    /*    padding-bottom: 8px;  reduce esto si hay mucho espacio 
        margin-bottom: 0;     elimina separación extra 
    */
    /*padding: 8px 0;    reduce altura del área de scroll */
    margin-bottom: 4px; /* menos espacio debajo */
    padding: 8px 1rem; /* Agrega padding horizontal para que los botones no tapen los ítems */
}
#events .event {
    flex: 0 0 auto;
    text-decoration: none;
}
::-webkit-scrollbar {
    height: 0.6rem;
    background: var(--secondary);
    border-radius: 9.99rem;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 9.99rem;
}

.event {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /*width: 100px;  ajusta según el tamaño de la imagen */
    /*width: auto;*/
    text-decoration: none;
    color: #2c3e50;
    /*margin: 1rem;*/

    width: 90px;
    margin: 0 1px;
}
.event_image {
    position: relative;
}

.event img {
    /*    width: 100%; original*/
    width: 50%;
    /*height: 15rem;valor original */
    height: 5rem;
    /*border-radius: 1rem;*/
    border-radius: 5rem;
    object-fit: cover;
    object-position: top;
    /*object-position: center;*/
}

.container {
    /*max-width: 50rem; original*/
    max-width: 100%;
    width: 100%;
    min-width: 10rem;
    /*margin: 7.5rem auto;*/
}

/*.event_image img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;  forma redonda 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}*/
.event_image img {
    width: 80px;
    height: 80px;
}
.banner-fijo{
    /*display: flex;*/
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    z-index: 1000; /* para estar encima de otros */
    background-color: #f9f9f9; /* Cambia este valor al color que desees */
    /*margin-bottom:   100px;*/
    /*max-height: 50px;*/
}

.circle {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
}

.circle--green {
    background: var(--success);
}

.circle--red {
    background: var(--error);
}

/*.event-description h2 {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
}*/

.event-description h2 {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    line-height: 1.1;
}

.carousel-wrapper {
    position: relative;
}