@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

/* Bloque consolidado para el centro del reproductor */
.player-container-middle {
    display: flex !important; /* Asegura que se vea */
    flex: 1 !important;
    width: calc(100% - 600px) !important; /* Aumentamos el margen restado para que el bloque izquierdo (botones) tenga sitio */
    height: 35px !important;
    float: left !important;
    align-items: center;
    justify-content: center;
}

/* 3. Estilo para los botones de salto (sin usar la imagen de sprite) */
.jp-jump {
    display: inline-block;
    vertical-align: top;
    width: 26px;
    height: 26px;
    line-height: 24px; /* Centra el texto verticalmente */
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    color: #888;
    border: 1px solid #444;
    border-radius: 50%;
    margin: 5px 3px 0 3px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.jp-jump:hover {
    color: #FFF;
    border-color: #777;
    background: rgba(255,255,255,0.05);
}

.player-buttons {
    display: flex !important;
    align-items: center !important;
    width: auto !important; /* Que solo ocupe lo que necesitan los botones */
}

/* Permitimos que jPlayer controle la visibilidad de play/pause */
.player-buttons a {
    float: none !important;
    margin: 0 3px !important;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

/* Esta es la clave: si jPlayer dice que no se vea, le hacemos caso */
.player-buttons a[style*="display: none"] {
    display: none !important;
}

/* --- NUEVA ONDA DE SONIDO DINÁMICA --- */

/* Contenedor principal */
.jp-progress {
    position: relative !important;
    height: 60px !important; /* Altura para ver bien la onda */
    background: #000 !important; /* Fondo negro puro para que resalte el verde */
    border-radius: 4px;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    border: none !important;
}

/* La onda de fondo (Gris apagado) */
.jp-seek-bar {
    width: 100% !important;
    height: 100% !important;
    background-color: #333 !important;
    background-image: repeating-linear-gradient(90deg, #000 0px, #000 2px, transparent 2px, transparent 4px) !important;
    
    /* Esta máscara "muerde" la barra de forma desigual para simular una onda real */
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, black 15%, black 35%, transparent 35%, 
        transparent 45%, black 45%, black 85%, transparent 100%) !important;
    
    /* Añadimos un ligero movimiento para que no parezca estática */
    opacity: 0.8;
}

/* La onda que avanza (VERDE VIBE) */
.jp-play-bar {
    height: 100% !important;
    background-color: #2ecc71 !important; /* Tu verde */
    
    /* Importante: Misma máscara que el fondo para que encajen */
    background-image: repeating-linear-gradient(90deg, #000 0px, #000 2px, transparent 2px, transparent 4px) !important;
    
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%), 
                        linear-gradient(to bottom, transparent 10%, black 10%, black 90%, transparent 90%) !important;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%), 
                linear-gradient(to bottom, transparent 10%, black 10%, black 90%, transparent 90%) !important;
    
    z-index: 2;
    border-right: 2px solid #27ae60 !important;
}

/* Estilo para los Avatares (Para cuando pongamos el JS) */
.wave-comment-avatar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #2ecc71;
    background-size: cover;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
}
/* Separar las caras de los usuarios de la barra de reproducción */
.track-sub-content, .track-users-list, .stats-reposts {
    margin-top: 25px !important; /* Ajusta este número hasta que lo veas perfecto */
    clear: both;
}

/* Si las imágenes están dentro de la zona de comentarios */
.wave-comment-avatar {
    margin-bottom: 10px;
}
/* Estructura del icono */
.vote-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 2px; /* Pegado al número para evitar interrogantes de espacio */
}

/* 1. GRIS (Por defecto) */
.icon-like, .icon-dislike {
    background-image: url('images/icons/pulgar-gris.png');
}

/* 2. VERDE (Cuando el contenedor tiene voted-active y es el de Like) */
.vote-btn-wrapper.voted-active[id^="like_btn_"] .icon-like {
    background-image: url('images/icons/pulgar-verde.png');
}
.vote-btn-wrapper.voted-active[id^="like_btn_"] {
    color: #2ecc71 !important;
}

/* 3. ROJO (Cuando el contenedor tiene voted-active y es el de Dislike) */
.vote-btn-wrapper.voted-active[id^="dislike_btn_"] .icon-dislike {
    background-image: url('images/icons/pulgar-rojo.png');
}
.vote-btn-wrapper.voted-active[id^="dislike_btn_"] {
    color: #e74c3c !important;
}

/* Botones menu Siberbas */
.menu-siderbar-button {
    /* ADAPTACIÓN AL ANCHO DEL SIDEBAR */
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 40px); /* Ocupa todo el ancho menos los márgenes */
    margin: 0px 20px 12px 20px; /* Centrado con margen lateral de 20px */
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    
    /* Dimensiones y Texto */
    min-height: 42px;
    padding: 10px 15px;
    text-transform: uppercase;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: center;
    
    /* Estética y Verde Corporativo */
    border: none;
    border-radius: 6px; 
    background-color: #218838;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(33, 136, 56, 0.2);
    cursor: pointer;
    outline: none;
    
    /* Transición suave */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* EFECTO HOVER (Optimizado para no romper el layout) */
.menu-siderbar-button:hover {
    background-color: #84bd00; 
    transform: translateX(5px); /* Desplazamiento sutil */
    box-shadow: 0 4px 12px rgba(132, 189, 0, 0.3);
    filter: brightness(1.05);
}

/* EFECTO CLIC */
.menu-siderbar-button:active {
    transform: translateX(2px);
    filter: brightness(0.9);
}

/* RESPONSIVIDAD PARA MÓVILES */
@media (max-width: 768px) {
    .menu-siderbar-button {
        width: calc(100% - 20px); /* Más ancho en pantallas pequeñas */
        margin: 0px 10px 10px 10px;
        min-height: 48px; /* Botón más grande para facilitar el toque táctil */
        font-size: 14px; /* Texto un poco más grande */
    }
}

/* Estilo Etiquets nuevas Upload */
.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: #444444 !important;
    border-radius: 4px;
    min-height: 45px;
    align-items: center;
    cursor: text;
    border: 1px solid #444444;
    transition: all 0.2s ease;
}

.tags-input-container:hover {
    border-color: #ffffff !important;
}

.tags-input-container:focus-within {
    border-color: #84bd00 !important;
    box-shadow: 0 0 5px rgba(132, 189, 0, 0.3);
}

.tag-bubble {
    background: #84bd00 !important;
    color: #fff !important;
    padding: 4px 10px;
    margin: 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
}

.tag-bubble .remove-tag {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}

#tag-visual-input {
    border: none !important;
    outline: none !important;
    flex-grow: 1;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 14px;
    height: 30px !important;
}

#tag-visual-input::placeholder {
    color: #dddcd1 !important;
    opacity: 1;
}

.notification-box-error {
    position: relative;
    padding-right: 35px;
}
/* Si phpSound usa un botón de cierre estándar, aseguramos que se vea */
.notification-box-error .close-notification {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* --- 1. La Esfera del Avatar --- */
.cover-avatar img {
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important; /* Crea la forma circular */
    object-fit: cover !important;  /* Evita que la foto se deforme */
    border: 3px solid #ffffff !important; /* Borde blanco sutil */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; /* Sombra para dar relieve */
    background-color: #fff;
}

/* Asegurar que el contenedor no corte la esfera ni la sombra */
.cover-avatar-content, .cover-avatar {
    overflow: visible !important;
}

/* --- 2. El Fondo para ver el Nombre (Legibilidad) --- */
.cover-text-container {
    background: rgba(0, 0, 0, 0.55) !important; /* Fondo oscuro semi-transparente */
    padding: 10px 18px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px); /* Efecto cristal desenfocado */
    -webkit-backdrop-filter: blur(8px);
    display: inline-block !important; /* Para que el fondo solo ocupe lo que mide el nombre */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde muy fino */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* Forzar que el nombre sea blanco brillante */
.cover-username a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Estilo para la ubicación */
.cover-location {
    color: #f0f0f0 !important;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* --- Mejora de Legibilidad en Perfil (Nombre y Ciudad) --- */

/* --- INTERVENCIÓN MÍNIMA PARA SEPARAR NOMBRE DE AVATAR --- */

/* 1. Empujamos el contenedor del nombre a la derecha */
.cover-description-content {
    /* El avatar mide 112px + 20px de margen original = 132px. 
       Le damos 150px para que haya aire entre la foto y el texto. */
    margin-left: 50px !important;
	margin-right: 50px !important;
    float: none !important; /* Quitamos el float para que el margen funcione bien */
    display: block !important;
}

/* 2. El fondo de legibilidad para que no pise nada */
.cover-text-container {
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-block !important; /* Evita que la caja negra ocupe todo el ancho */
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Aseguramos que la esfera sea esfera sin moverla de su sitio original */
.cover-avatar img {
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #fff !important;
}

/* --- AJUSTE PARA MÓVIL --- */
@media screen and (max-width: 768px) {
    .cover-description-content {
        /* En móvil el avatar original mide 86px. 
           Ajustamos el margen para que no se monte tampoco en pantallas pequeñas */
        margin-left: 50px !important;
		margin-right: 100px !important;
    }
    .cover-username a {
        font-size: 18px !important;
    }
}

/* Estilo Boton Radio Welcome - Inicio*/
.welcome-radio {
  margin: 10px auto;
  width: 200px;
  min-height: 40px;
  text-transform: uppercase;
}

/* Mantener el estilo original de welcome-radio si existe */
.welcome-radio a:hover {
    background: #84bd00;
    border: 1px solid #84bd00;
    color: #FFF;
}

.welcome-radio a {
  padding: 10px 20px;
  border: 1px solid #FFF;
  color: #FFF;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  text-decoration: none; /* Quita el subrayado típico de los enlaces */
  transition: all 0.3s ease; /* Hace que el cambio de color sea suave */
}

/* Botón de Promoción artista Radio IA */
.radio_promote_btn {
background-color: rgba(0, 0, 0, 0.2);
background-image: url(images/icons/message_btn.png);
background-size: 25px;
background-position: center;
color: #6B6B6B;
border-radius: 3px;
width: 25px;
height: 25px;
float: right;
cursor: pointer;
border: 1px solid #555;
}
.radio_promote_btn:hover {
background-color: #333;
background-image: url(images/icons/message_btn_h.png);
}
.radio_promote_btn.active_lime .radio_promote_btn:focus {
background-color: #a2ef00;
background-image: url(images/icons/message_btn_h.png);
}

.promote_radio_container {
    display: inline-block !important;
    margin-right: 15px !important;
    vertical-align: middle !important;
}

/* Botón de Promoción canción Radio IA */

.iapromocancion-button {
padding: 5px 8px 5px 26px;
margin-right: 5px;
border: 1px solid #666;
overflow: hidden;
border-radius: 3px;
cursor: pointer;
height: 15px;
background: #444 url('images/icons/ia_btn_n.png') 5px center no-repeat;
background-size: 17px;
display: inline-block;
float: left;
}
.iapromocancion-button:hover {
background: #333 url('images/icons/ia_btn_h.png') 5px center no-repeat;
background-size: 17px;
}
.iapromocancion-button:active {
background: #222 url('images/icons/ia_btn_h_a.png') 5px center no-repeat;
background-size: 17px;	
}
.iapromocancion-buttons-container {
font-size: 12px;
}


/* Botones panel IA Administracion */
.paula-toolbar {
	display: flex;
	gap: 5px;
	margin-bottom: 10px;
}
.btn-ia-tool {
	background: #f0f0f0;
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 11px;
	font-weight: bold;
}
.btn-ia-tool:hover {
	background: #e0e0e0;
}
.paula-row {
	background: #fff;
	padding: 15px;
	border: 1px solid #eee;
	margin-bottom: 10px;
	border-radius: 4px;
	position: relative;
}
.btn-delete-paula {
	color: #ff0000;
	cursor: pointer;
	float: right;
	font-size: 12px;
}
.paula-row {
    background: #333 !important; /* Gris oscuro como tu panel */
    color: #ccc;
    border: 1px solid #444;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 4px;
    position: relative;
}
.paula-text {
    color: #fff;
    margin-bottom: 8px;
    font-size: 14px;
}
.paula-meta {
    color: #888;
    font-size: 12px;
}
.btn-edit-paula {
    color: #00aaff;
    cursor: pointer;
    float: right;
    margin-right: 15px;
    font-size: 12px;
}

/* --- WIDGET HISTORIAL RADIO PAULA (PROTEGIDO) --- */
.widget-center-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    width: 100%;
}

/* Solo afecta a la estructura si está dentro de nuestro widget */
#paula-history-widget.orbL { 
    width: 300px; 
    border: 1px solid #00a303; 
    border-radius: 5px; 
    background: #333 !important; 
    overflow: hidden; 
    font-family: Arial, sans-serif; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

#paula-history-widget .orbLt { 
    background-color: #328505 !important; 
    padding: 10px; 
    display: block; 
}

#paula-history-widget .orbLtn { 
    color: #ffffff !important; 
    font-size: 14px; 
    font-weight: bold; 
}

#paula-history-widget .orbIL { 
    height: 400px; /* He subido un poco la altura para ver más temas */
    overflow-y: auto; /* Esto permite el scroll interno */
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background: #333 !important; 
}

#paula-history-widget .orbILi { 
    padding: 8px 10px; 
    border-bottom: 1px solid #444 !important; 
    color: #eee !important; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
}

#paula-history-widget .orbILi time { 
    color: #00a303 !important; 
    font-size: 11px; 
    width: 45px; 
    display: inline-block; 
    font-weight: bold; 
}

#paula-history-widget .song-title { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    flex-grow: 1; 
}

#paula-history-widget .orbILi:first-child { 
    background: #222 !important; 
    border-left: 3px solid #00a303 !important; 
    color: #fff !important; 
}

/* Enlaces específicos del historial */
#paula-history-widget .history-link {
    color: #00a303 !important;
    text-decoration: none;
    font-weight: bold;
}

#paula-history-widget .history-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

.paula-notice-banner {
    background: #333;
    border: 2px solid #00a303;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    color: #eee;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.paula-notice-icon {
    font-size: 40px;
    color: #00a303;
    margin-right: 20px;
    padding-top: 10px;
}

.paula-notice-content h3 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
}

.paula-notice-content p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.paula-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.req-item {
    background: #222;
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    border-left: 3px solid #328505;
}

@media (max-width: 768px) {
    .paula-requirements { grid-template-columns: 1fr; }
}

/* Botón de ayuda en el banner */
.paula-btn-help {
    background: #00a303;
    color: white !important;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
    transition: background 0.3s;
    font-weight: bold;
}
.paula-btn-help:hover {
    background: #328505;
}

/* Estilos para la sección de la Guía */
.guia-id3-section {
    background: #252525;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    color: #eee;
}
.guia-step {
    background: #333;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}
.guia-step h4 {
    color: #00a303;
    margin-top: 0;
}
.guia-img-box {
    background: #1a1a1a;
    border: 1px solid #00a303;
    color: #888;
    text-align: center;
    padding: 20px;
    margin: 10px 0;
    font-size: 13px;
}
.guia-tip {
    border-left: 4px solid #00a303;
    background: rgba(0, 163, 3, 0.1);
    padding: 10px;
    font-style: italic;
}

/* Estilos para el Chat de Paula IA */
.paula-chat-body { font-family: sans-serif; margin: 10px; background: #fff; }
.paula-chat-box { height: 280px; overflow-y: auto; border: 1px solid #eee; padding: 10px; background: #fafafa; display: flex; flex-direction: column-reverse; border-radius: 4px; }
.paula-status { font-size: 11px; font-weight: bold; margin-bottom: 10px; text-align: right; }
.paula-user-info { background: #eef2f7; padding: 8px; margin: 10px 0; font-size: 12px; font-weight: bold; border-left: 3px solid #007bff; border-radius: 0 4px 4px 0; }
.paula-textarea { width: 92%; height: 50px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; resize: none; font-family: inherit; }
.paula-btn { width: 100%; background: #007bff; color: #fff; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 5px; transition: background 0.3s; }
.paula-btn:hover { background: #0056b3; }
.paula-msg-ia { color: #007bff; padding: 6px; background: #f0f7ff; border-radius: 4px; margin-top: 4px; border: 1px solid #d1e7ff; }

/* --- VENTANA MODAL HORARIOS IA (CONSOLIDADO Y RESPONSIVE) --- */
.modal-paula { 
    display: none; 
    position: fixed; 
    z-index: 999999; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.85); 
    backdrop-filter: blur(5px);
}

.modal-content-paula { 
    background-color: #1a1a1a; 
    margin: 5% auto; 
    padding: 25px; 
    border: 1px solid #444; 
    width: 90%; 
    max-width: 1100px; 
    border-radius: 15px;
    max-height: 85vh; /* Limita la altura para permitir scroll */
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch;
}

.close-paula { 
    color: #ff4444; 
    float: right; 
    font-size: 32px; 
    font-weight: bold; 
    cursor: pointer; 
}

/* Grid optimizado para scroll horizontal en móvil */
.grid-horarios { 
    display: grid !important; 
    grid-template-columns: repeat(7, minmax(140px, 1fr)) !important; 
    gap: 10px; 
    margin-top: 20px;
    overflow-x: auto !important; 
    padding-bottom: 15px;
}

.dia-col { 
    background: #252525; 
    padding: 10px; 
    border-radius: 8px; 
    border: 1px solid #333;
}

.dia-titulo { 
    text-align: center; 
    font-weight: bold; 
    color: #00aaff; 
    border-bottom: 2px solid #00aaff; 
    margin-bottom: 10px; 
    padding-bottom: 5px;
}

/* --- BLOQUES DE HORA CON JERARQUÍA --- */
.bloque-hora { 
    background: #333; 
    margin-bottom: 8px; 
    padding: 10px 8px; /* Un poco más de aire */
    border-radius: 6px; 
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid #555; /* Borde base */
    display: flex;
    flex-direction: column;
}

/* La hora: más pequeña y discreta */
.hora-label {
    font-size: 10px;
    color: #888;
    margin-bottom: 2px;
    font-weight: bold;
}

/* El Artista/Estilo: El protagonista */
.contenido-label {
    font-size: 13px; /* Más grande que antes */
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

/* Color para ARTISTAS (Cian/Azul Trackcloud) */
.bloque-hora.tipo-artista {
    border-left-color: #00aaff;
}
.bloque-hora.tipo-artista .contenido-label {
    color: #00aaff;
}

/* Color para ESTILOS (Verde Paula IA) */
.bloque-hora.tipo-estilo {
    border-left-color: #2ecc71;
}
.bloque-hora.tipo-estilo .contenido-label {
    color: #2ecc71;
}

/* Efecto Hover mejorado */
.bloque-hora:hover {
    background: #444 !important;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
}

/* --- ESTILO PARA LA FRANJA ACTUAL (NARANJA) --- */
.bloque-hora.es-ahora {
    border-left-color: #ff9800 !important; /* Naranja Trackcloud */
    background: rgba(255, 152, 0, 0.15) !important;
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.2);
    transform: scale(1.02);
}

.bloque-hora.es-ahora .contenido-label {
    color: #ff9800 !important;
}

/* Etiqueta parpadeante de On Air */
.on-air-blink {
    font-size: 8px;
    font-weight: bold;
    color: #ff9800;
    margin-bottom: 4px;
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* Mantener el resto de jerarquías */
.hora-label { font-size: 10px; color: #888; font-weight: bold; }
.contenido-label { font-size: 13px; font-weight: 700; }

/* Personalización de la barra de scroll */
.grid-horarios::-webkit-scrollbar {
    height: 8px;
}
.grid-horarios::-webkit-scrollbar-thumb {
    background: #00aaff;
    border-radius: 10px;
}
.grid-horarios::-webkit-scrollbar-track {
    background: #1a1a1a;
}