/* G */	


	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		background-color: #f4f4f4;
	}


	.pantalla  {
		max-width: 1500px;
		width:95%;
		margin: 0 auto;
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		
	}
	
	/*L*/
 

        /* Estilos del formulario */
        .login-form {
            max-width: 400px;
            margin: 0 auto;
            background-color: #fff; /* Fondo blanco para el formulario */
            padding: 20px;
            border-radius: 8px; /* Bordes redondeados */
            box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra ligera */
        }

        .login-form h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .form-group input[type="submit"] {
            background-color: #333;
            color: #fff;
            cursor: pointer;
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
        }

        .form-group input[type="submit"]:hover {
            background-color: #555;
        }

        .logo-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo-container img {
            max-width: 100px; /* Ajusta el tamaño del logo según necesites */
        }

        @media (max-width: 768px) {
            .login-form {
                width: 90%;
            }
        }

        @media (max-width: 480px) {
            .login-form {
                padding: 15px;
            }

            .form-group input[type="submit"] {
                font-size: 14px;
            }
        }	

	/* H */	
	.navbar {
		background-color: #333;
	}
	.navbar-brand, .navbar-nav .nav-link {
		color: #fff;
	}
	.navbar-nav .nav-item {
		position: relative;
	}
	.navbar-nav .nav-item:hover > .dropdown-menu {
		display: block;
	}
	.dropdown-menu {
		position: absolute;
		left: 0;
		top: 100%;
		display: none;
		background-color: #333;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.dropdown-menu a {
		color: #fff;
		padding: 10px 15px;
		text-decoration: none;
		display: block;
	}
	
	.dropdown-divider {
	  height: 1px !important; /* Define la altura de la línea */
	  margin: .5rem 0 !important;
	  overflow: hidden !important;
	  background-color: #999c99 !important; /* Establece el color de fondo como el color de la línea */
	  border-top: 1px solid #999c99 !important; /* Asegúrate de que no haya bordes adicionales */
	}

	@media (max-width: 768px) {
		.dropdown-menu {
			position: static;
			width: 100%;
			box-shadow: none;
			display: none;
		}
		.dropdown-menu.show {
			display: block;
		}
	}
	
	/*TB*/
	
	.toolbar-container {
    position: relative;
	z-index:10;
}

.hamburger-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    display: none; /* Hidden by default */
}

.toolbar {
    display: flex;
    justify-content: space-around;
    background-color: #f4f4f4;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom:20px;
}

.toolbar-button {
    background: none;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    flex: 1 1 100px; /* Grow to fill space, min width of 100px */
}

.toolbar-button i {
    font-size: 24px;
    margin-bottom: 5px;
}

.toolbar-button:hover {
    color: #007bff;
}

@media (max-width: 600px) {
    .hamburger-button {
        display: block; /* Show hamburger button */
    }

    .toolbar {
        display: none; /* Hide toolbar by default */
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        background-color: #f4f4f4;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		
    }

    .toolbar.open {
        display: flex; /* Show toolbar when open */
    }

    .toolbar-button {
        flex: 1 1 auto;
        width: 100%;
        text-align: center;
    }
}
	 /*E*/
	 
	 .exepediente_titulo {
            text-align: center;
            color: #333;
        }

        .accordion {
            display: block; 
            margin-bottom: 20px; 
        }
        .accordion .panel {
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .accordion .panel-heading {
            background-color: #00519e;
            padding: 10px;
            cursor: pointer;
			color:#fff;
        }
        .accordion .panel-heading.active {
            background-color: #007BFF;
            color: #fff;
        }
        .accordion .panel-content {
            display: none;
            padding: 10px;
        }
        .accordion .panel-content.active {
            display: block;
        }
		
        .tapage {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .tapage div {
            flex: 1 1 100%;
        }
        .tapage label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
         
		 
		.tapage input, .tapage select, .tapage button, .tapage textarea,
		.accordion input, .accordion select, .accordion button, .accordion textarea
		 {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
         }
		 
         .tapage button ,
         .accordion button 
		 {
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
		
        .tapage button:hover ,
        .accordion button:hover 
		{
            background-color: #575757;
        }
      
		
  .foto-container {
        width: 150px; 
        margin: 0 auto;  
        text-align: center;  
        border: 1px solid #ccc;  
        padding: 6px; 
    }

    .foto-container .foto-paciente {
        max-width: 100%;  
        height: auto;  
    }

    .foto-container img {
        max-width: 100%;  
        height: auto;  
        display: block;  
        margin: 0 auto; 
    }
	
 .historial-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .historial-table th, .historial-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .historial-table th {
        background-color: #f2f2f2;
    }

    .historial-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .historial-table tbody tr:hover {
        background-color: #f2f2f2;
    }

    /* Ocultar columnas en pantallas pequeñas */
    @media (max-width: 768px) {
		.historial-table tbody{
				font-size: 10px;
		}
		
        .historial-table th:nth-child(4), .historial-table td:nth-child(4) {
            display: none;
        }
    }
	
/*C*/

		
		.consulta input[type="text"],
		.consulta input[type="text"],
		.consulta select,
		.consulta input[type="date"] {
				border: none;
				border-bottom: 1px solid #ccc; /* Añade un borde inferior */
				background-color: transparent; /* Oculta el fondo */
				padding: 5px 0; /* Espaciado interno */
				margin: 0; /* Elimina los márgenes por defecto */
				width: 100%; /* Opcional: Establece el ancho */
				box-sizing: border-box; /* Incluye el padding en el ancho total */
				font-size: 16px; /* Tamaño de fuente */
				color: #333; /* Color de texto */
				border-radius: 0; /* Quita el efecto redondeado */
				transition: border-color 0.3s; /* Transición suave para el cambio de color del borde */
			}

			/* Cambia el color del borde inferior cuando el input está enfocado */
		.consulta input[type="text"]:focus,
		.consulta select:focus,
		.consulta input[type="date"]:focus {
				border-bottom-color: #007bff; /* Cambia el color del borde inferior al azul cuando el input está enfocado */
				outline: none; /* Elimina el resplandor del foco */
			}
			


        .consulta {
            max-width: 800px;
            margin: 0 auto;
        }
		
        .form-container1 {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .form-group {
            flex: 1 1 200px;
        }
        .form-group input {
            width: 100%;
        }
        .receta table {
            width: 100%;
            border-collapse: collapse;
        }
        .receta th, .receta td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .receta th {
            background-color: #f2f2f2;
        }
        .receta tr:nth-child(even) {
            background-color: #f9f9f9;
        }


   /* Estilos para el modal */
        .modal {
            display: none; /* Ocultar por defecto */
            position: fixed; /* Fijar posición */
            z-index: 20;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* Añadir scroll si el contenido excede */
            background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
            padding-top: 60px; /* Ajustar si es necesario */
        }

        .modal-content {
            background-color: #fefefe;
            margin: 0% auto;
            padding: 0px 20px 20px 20px;
            border: 1px solid #888;
            width: 80%; /* Ancho del 80% de la pantalla */
            max-width: 600px; /* Ancho máximo para mantener el centrado */
            max-height: 80%; /* Altura máxima del 80% del viewport */
            overflow-y: auto; /* Añadir scroll vertical si es necesario */
            position: relative;
        }

        .modal-header {
            position: sticky; /* Encabezado fijo */
            top: 0;
            background-color: #f2f2f2;
            padding: 10px;
            border-bottom: 1px solid #ddd;
			width:100%;
        }

        .modal-title {
            margin-top: 0; /* Evitar el espacio extra */
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

		body.modal-open {
			overflow: hidden;
		}
 

		.recordatorio {
					background-color: #fff3cd; /* Amarillo pastel */
					border: 1px solid #ffeeba; /* Borde */
					padding: 15px; /* Espaciado interno */
					border-radius: 5px; /* Esquinas redondeadas */
					margin-bottom: 20px; /* Espacio inferior */
					display: flex; /* Mostrar como flexbox */
					align-items: center; /* Centrar verticalmente */
					justify-content: flex-start; /* Alinear a la izquierda */
					position: relative; /* Posición relativa para el icono */
				}
				.recordatorio p {
					margin-bottom: 0; /* Evitar espacio extra bajo el párrafo */
					margin-left: 10px; /* Espacio entre el icono y el texto */
				}
				.recordatorio .fa {
					color: #856404; /* Color del icono */
				}

				.recordatorio .close {
					position: absolute; /* Posición absoluta para el botón de cierre */
					top: 5px; /* Ajuste vertical */
					right: 5px; /* Ajuste horizontal */
					color: #856404; /* Color del botón de cierre */
					cursor: pointer; /* Cambiar cursor al pasar por encima */
				}
				
			  .recordatorio .fa {
					color: #856404;
					margin-right: 10px;
				}
/*MenuPulgar*/

        mbody {
            margin: 0;
            font-family: Arial, sans-serif;
            height: 200vh; /* Para poder hacer scroll y mostrar el botón flotante */
            -webkit-user-select: none; /* Evitar selección de texto en dispositivos móviles */
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .fab-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            display: flex; /* Oculto por defecto */
			z-index:20;
        }

        .fab {
            width: 56px;
            height: 56px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: background-color 0.3s;
            -webkit-user-select: none; /* Evitar selección de texto */
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .fab:hover {
            background-color: #444;
        }

        .fab-menu {
            display: none;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .fab-menu a {
            width: 56px;
            height: 56px;
            background-color: #333;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            margin-top: 10px;
            transition: background-color 0.3s;
            text-decoration: none;
            -webkit-user-select: none; /* Evitar selección de texto */
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .fab-menu a:hover {
            background-color: #444;
        }

		.fab.open {
			background-color: #444; /* Opcional: Cambiar el color cuando esté abierto */
		}

        @media (max-width: 768px) {
            .fab-container {
                display: flex;
            }
        }

	.visor-documento {
		width: 100%; /* Ajusta el ancho del contenedor según sea necesario */
		height: 100vh; /* Ocupa toda la altura de la pantalla */
		display: flex;
		justify-content: center; /* Centra vertical y horizontalmente el contenido */
		align-items: center;
		overflow: auto; /* Permite desplazamiento si el contenido es más grande que la pantalla */
	}

	.visor-documento object,
	.visor-documento img,
	.fullDoc {
		width: 100%; /* Ocupa todo el ancho del contenedor */
		height: 100%; /* Ocupa todo el alto del contenedor */
		max-width: none; /* Elimina la restricción de ancho máximo */
		max-height: none; /* Elimina la restricción de altura máxima */
		border: none; /* Elimina el borde, si lo hubiera */
		display: block; /* Asegura que el objeto se muestre como bloque */
		margin: 0 auto; /* Centra el objeto horizontalmente */
	}


/*Receta*/
		.receta {
			max-width: 1500px;
			margin: 0 auto;
			overflow-x: auto; /* Permite el desplazamiento horizontal */
		}

		.form-container1 {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 20px;
		}

		.form-group {
			flex: 1 1 200px;
		}

		.form-group input {
			width: 100%;
		}

		.receta table {
			width: 100%;
			border-collapse: collapse;
			max-width: 1500px;
		}

		.receta th, .receta td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: left;
		}

		.receta th {
			background-color: #f2f2f2;
		}

		.receta tr:nth-child(even) {
			background-color: #f9f9f9;
		}



		
		@media (max-width: 768px) {
			.receta table,
			.receta thead,
			.receta tbody,
			.receta th,
			.receta td,
			.receta tr {
				display: block;
			}

			.receta thead tr {
				display: none;
			}

			.receta tr {
				margin-bottom: 15px;
			}

			.receta td {
				display: flex;
				justify-content: space-between;
				padding-left: 50%;
				position: relative;
				border: none;
				border-bottom: 1px solid #eee;
			}

			.receta td:before {
				content: attr(data-label);
				position: absolute;
				left: 10px;
				font-weight: bold;
				white-space: nowrap;
			}
		}