Telemedicine Admin Dashboard - Copy this Html, Bootstrap Component to your project

El-objetivo-de-este-diseño-es-proporcionar-al-administrador-del-sistema-de-telemedicina-una-herramienta-intuitiva-para-gestionar-citas,-urgencias-y-médicos-disponibles,-priorizando-la-experiencia-del-usuario-con-un-diseño-limpio-y-moderno.-Diseño-General:-•-Un-dashboard-para-el-administrador-del-sistema-de-telemedicina,-dividido-en-tres-columnas-principales:-o-Pedidos-con-urgencia-(columna-izquierda,-25%).-o-Pedidos-de-citas-(columna-central,28%).-o-Sección-médicos-(-columna-derecha,-47%)-que-muestra-médicos-disponibles-y-filtros-interactivos.-•-Estilo-visual-moderno,-con-colores-suaves-y-bordes-redondeados.-•-Tipografía:-Usa-una-fuente-limpia-como-"Roboto"-o-"Open-Sans".-•-Animaciones:-Incluye-deslizamientos-suaves-para-modales-y-desplegables.-________________________________________-Sección-1:-Barra-de-Navegación-Superior-•-Una-barra-superior-fija,-95-px-alto-,-toda-la-pantalla-de-ancho,-color-(#118185)-•-el-logo-a-la-izquierda(300x90-px)-•-Menú-hamburguesa-a-la-izquierda:-Al-hacer-clic,-muestra-un-dropdown-minimalista-con-opciones-de-“Gestión-de-médicos”,-“Citas-asignadas”,-“Gestión-de-Pacientes”,-“Gestión-de-Pagos”,”Gestión-de-Historias-Clínicas”,-“Gestion-de-Recetas”,”otros”-•-En-el-centro,-con-letras-en-blanco,-tipografía-alto-75px,-“Asignar-Turnos”-•-A-la-izquierda-del-menú-hamburguesa,-un-botón-Logout-dirige-a-index.html-si-se-le-hace-clic-•-A-la-izquierda-del-botón-logout,-la-palabra-“Administrador-,-en-letras-blancas-tipografia-60px-Sección-2:-Columnas-Pedidos-con-urgencia-(columna-izquierda)-o-Caja-contenedora-de-color-#FF9595-que-abarca-casi-todo-el-espacio-con-bordes-redondeados-o-Titulo-“Pedido-de-urgencia”-con-tipografia-blanca-o-Abajo-del-titulo,-Fecha-actual-con-tipografia-menos-al-titulo-o-5-tarjetas-distribuidas-uniforme-,-ordenadas-por-hora,-de-abajo-a-arriba-o-Debajo-de-las-tarjetas-y-dentro-de-la-caja-contenedora,-un-botón-de-llamar-ambulancia-(botón-fondo-#CC0100,-letras-blancas)-Pedidos-de-citas-(columna-central):-o-Caja-contenedora-color-#0B4F52-que-abarca-casi-todo-el-espacio-con-bordes-redondeados-o-Titulo-“Pedido-de-Citas”-con-tipografia-blanca-o-Abajo-del-titulo,-Fecha-actual-con-tipografia-menor-al-titulo-o-5-cards-interactivas-(tarjetas)-apiladas-y-superpuestas-,-ordenadas-por-hora,-de-abajo-a-arriba,-ocupando-el-60%-del-alto-del-fondo-o-El-resto-(40%)-esta-destinado-a-la-tarjeta-de-trabajo-o-Debajo-de-estas-tarjetas,-el-titulo-”Tarjeta-de-trabajo”-en-tipografia-blanca-o-Debajo-de-este-tilulo,-dentro-de-la-caja-contenedora,-una-tarjeta-de-mayor-tamaño-Diseño-de-las-tarjetas:--Color-de-fondo:-Blanco-con-bordes-redondeados-y-una-sombra-ligera.--Contenido:-arriba,-Hora-del-pedido,-luego:-Nombre,-Mail,-Telefono,-Especialidad,-día,-Hora,-Motivo-de-consulta-o-Interacción:--Al-hacer-clic-en-cualquir-tarjeta,-esta-se-expande-y-se-muestra-como-tarjeta-de-trabajo-________________________________________-Sección-Médicos-(Derecha)-•-En-la-parte-superior,-5-botones-de-filtros,-uno-al-lado-del-otro-con-opciones-predeterminadas-o-Al-hacer-clic-muestra-todas-las-opciones-y-al-elegirla-queda-en-esa-opción-o-Arriba-de-cada-botón-de-filtro,-lleva-un-titulo-fuera-del-botón,-como-texto-fijo-o-Filtro-1:-titulo:-Especialidad-,-opciones-(Medicina-General,-Cardiología,-Pediatría,-Dermatología,-Ginecología,-Neurología,-Traumatología,-Oftalmología,-Endocrinología,-Psiquiatría)-o-Filtro-2-Título-:-Día-(despliega-un-almanaque-interactivo)-o-Filtro-3-titulo:-Hora-(despliega-las-horas-del-día-con-intervalos-de-15-minutos)-o-Filtro-4-Título:-Generalista-(si/no)-o-Filtro-5-Título:-Disponible-(si/no)-o-•-Debajo-de-los-filtros,-tres-cards-interactivas-(tarjetas-de-médicos),-una-al-lado-de-la-otra-o-Cada-tarjeta-tiene-fondo-blanco-o-Foto-del-médico-ocupando-la-mayor-parte.-o-Nombre-completo-en-negrita-color-(#118185)-o-Especialidad-y-matrícula-profesional,-mismo-color,-no-negrita,-menor-tamaño-•-Interacción:-o-Al-hacer-clic-en-una-tarjeta,-se-resalta-con-un-borde-color-(#118185)-•-Debajo-de-las-tarjetas,-una-caja-contenedora-redondeada-color-#54BDC0-o-Dentro-de-la-caja-contenedora-dos-espacios-blancos-,-renglones-uno-abajo-del-otro-y-separados)-que-se-rellenan-con-texto-en-color-negro-al-hacer-clic-en-una-tarjeta-de-médico-o-El-primer-renglón-se-rellena-con-Nombre-,-especialidad-y-mail-o-El-segundo-renglón-se-rellena-con-“citas-ya-asignadas:”-•-Debajo-de-la-caja-contenedora,-ya-al-pie,-dos-botones-importantes,-uno-al-lado-del-otro-o-Boton-ASIGNAR-CITA-color-#A975D6-letras-blancas-o-Botón-NOTIFICAR-AL-PACIENTE-Y-AL-MÉDICO-color-#47C4A3-letras-blancas-•-Interacción:-o-Al-hacer-clic-en-en-los-dos-botones,-la-tarjeta-de-trabajo-desaparece-•-Sección-5:-Modales-1.-Modal-de-Llamar-Ambulancia:-o-Aparece-un-mensaje-en-el-centro-de-la-pantalla:--"Se-está-contactando-a-una-ambulancia-para-[Nombre-del-paciente]."--Botón-"Cancelar"-(color-rojo)-para-cerrar-el-modal.-2.-Modal-de-Asignar-Cita:-o-Contenido:--Confirmación-con-el-nombre-del-médico-asignado-y-los-detalles-de-la-cita.--Botón-"Confirmar"-(color-celeste-agua)-para-finalizar.-________________________________________-Simulación-de-Datos:-1.-Tarjetas-de-Pedidos-de-citas-Hora:-08:45-AM-Nombre:-Sofía-García-Mail:-sofia.garcia@email.com-Teléfono:-+54-9-11-1122-3344-Especialidad:-Oftalmología-Día:-Martes-Hora:-10:30-AM-Motivo-de-consulta:-Revisión-anual-de-la-vista-y-actualización-de-lentes.-Hora:-09:15-AM-Nombre:-Federico-Sánchez-Mail:-federico.sanchez@email.com-Teléfono:-+54-9-11-5566-7788-Especialidad:-Medicina-General-Día:-Miércoles-Hora:-01:00-PM-Motivo-de-consulta:-Dolor-leve-en-la-espalda-baja-desde-hace-semanas.-Hora:-10:40-AM-Nombre:-Valeria-Torres-Mail:-valeria.torres@email.com-Teléfono:-+54-9-11-2233-4455-Especialidad:-Endocrinología-Día:-Jueves-Hora:-11:30-AM-Motivo-de-consulta:-Seguimiento-de-tratamiento-para-tiroides.-Hora:-11:55-AM-Nombre:-Ignacio-Ruiz-Mail:-ignacio.ruiz@email.com-Teléfono:-+54-9-11-6677-8899-Especialidad:-Ginecología-Día:-Viernes-Hora:-12:00-PM-Motivo-de-consulta:-Consulta-rutinaria-para-control-general.-Hora:-12:20-PM-Nombre:-Camila-Martínez-Mail:-camila.martinez@email.com-Teléfono:-+54-9-11-9988-7766-Especialidad:-Odontología-Día:-Lunes-Hora:-03:30-PM-Motivo-de-consulta:-Limpieza-dental-programada-y-revisión.-2.-Tarjetas-con-Urgencias-Hora:-08:15-AM-Nombre:-Juan-Pérez-Mail:-juan.perez@email.com-Teléfono:-+54-9-11-1234-5678-Especialidad:-Cardiología-Día:-Martes-Hora:-10:00-AM-Motivo-de-consulta:-Dolor-en-el-pecho-y-dificultad-para-respirar.-Hora:-09:30-AM-Nombre:-María-López-Mail:-maria.lopez@email.com-Teléfono:-+54-9-11-9876-5432-Especialidad:-Pediatría-Día:-Miércoles-Hora:-11:00-AM-Motivo-de-consulta:-Fiebre-alta-en-niño-de-2-años.-Hora:-10:05-AM-Nombre:-Carlos-Fernández-Mail:-carlos.fernandez@email.com-Teléfono:-+54-9-11-2345-6789-Especialidad:-Traumatología-Día:-Jueves-Hora:-02:00-PM-Motivo-de-consulta:-Lesión-en-la-rodilla-tras-un-accidente-deportivo.-Hora:-11:20-AM-Nombre:-Ana-Rodríguez-Mail:-ana.rodriguez@email.com-Teléfono:-+54-9-11-8765-4321-Especialidad:-Dermatología-Día:-Viernes-Hora:-03:00-PM-Motivo-de-consulta:-Reacción-alérgica-severa-en-la-piel.-Hora:-12:40-PM-Nombre:-Luis-Martínez-Mail:-luis.martinez@email.com-Teléfono:-+54-9-11-3456-7890-Especialidad:-Neurología-Día:-Lunes-Hora:-04:00-PM-Motivo-de-consulta:-Mareos-persistentes-y-pérdida-de-visión-momentánea.-3.-Médicos-Disponibles-(3-simulados):-________________________________________-Médico-1-Nombre:-Dr.-Juan-Pérez-Matrícula:-MP-123456-Mail:-juan.perez@salutqlic.com-Especialidad:-Cardiología-Citas-asignadas:-Día:-Lunes,-Hora:-09:00-AM-Día:-Martes,-Hora:-10:30-AM-________________________________________-Médico-2-Nombre:-Dra.-Mariana-López-Matrícula:-MP-789012-Mail:-mariana.lopez@salutqlic.com-Especialidad:-Pediatría-Citas-asignadas:-Día:-Miércoles,-Hora:-02:00-PM-Día:-Jueves,-Hora:-03:15-PM-________________________________________-Médico-3-Nombre:-Dr.-Ricardo-Gómez-Matrícula:-MP-345678-Mail:-ricardo.gomez@salutqlic.com-Especialidad:-Neurología-Citas-asignadas:-Día:-Viernes,-Hora:-11:00-AM-Día:-Sábado,-Hora:-09:45-AM-Animaciones-y-UX:-1.-Modales:-Aparecen-y-desaparecen-con-un-deslizamiento-suave-hacia-arriba/abajo.-2.-Tarjetas:-Al-expandirse,-bajan-suavemente-para-colocarse-en-la-tarjeta-de-trabajo.-3.-Dropdowns:-Animaciones-de-deslizamiento-hacia-abajo-al-abrir.-4.-Selección-de-médicos:-Bordes-resaltados-con-una-transición-suave.